<body bgcolor=#222>
<canvas id=c width=1920 height=1080>
body { margin:0; overflow:hidden; }
canvas { background:#021; }
// Simple Dwitter Shim
// Created by Frank Force 2020
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
function u(t) { // dwitter code goes here
D = 23; // divisions
// https://www.dwitter.net/d/14566 - SMASH
c.width|=0;for(i=D;i--;)with(x)save(fillStyle='#FFD',beginPath(font="70em impact")),moveTo(j=1e3,540),clip(arc(j,540,2e3,q=2*Math.PI*i/D+9,q+2*Math.PI/D-.02)),restore(fillText("SMASH",9+29*S(q**4+t),j+49*C(q**5+t),1900))
}
let time = 0;
let frame = 0;
let FPS = 60;
let nextFrameMs = 0;
let x = c.getContext('2d');
let S = Math.sin;
let C = Math.cos;
let T = Math.tan;
let R = (r,g,b,a=1) => `rgba(${r|0},${g|0},${b|0},${a})`;
let loop = (frameTime) =>
{
requestAnimationFrame(loop);
// limit update rate to FPS
if (frameTime)
{
if (frameTime < nextFrameMs-2)
return; // skip this cycle
nextFrameMs = Math.max(nextFrameMs + 1000 / FPS, frameTime);
}
// update time
time = frame/FPS;
if (time*FPS|0 == frame-1)
time += 0.000001; // fix floating point bug
++frame;
// update user function
u(time);
// fit dwitter sized canvas to window
const aspect = 1920/1080;
const width = aspect > innerWidth/innerHeight? innerWidth : innerHeight*aspect;
c.style.width = width +'px';
document.body.style.textAlign = 'center';
}
loop();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.