🖥 Implementing the Cylinder Trick

index.html

<canvas id=c><script>c.width=c.height=1080;x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)};E=t=>{

S=Math.sin;

//Inside a cylinder trick
//https://youtu.be/6XtrgFPoZ2E?si=ucjJgzsH8UVdsH11&t=64

c.width|=0;x.font="2cm'"
x.fillText('⚽',0,70)
for(i=70;i--;)for(j=2;j--;)x.drawImage(c,
  S(i/28)*10-4,(i+t*99)%99,99,1, //Source (sx,sy,sW,sH)
  j*495,i*9+99,495,9 //Destination (dx,dy,dW,dH)
);


for(i=99;i--;)x.fillRect(100+S(i/28)*20,i, 5, 1);


//sx,sy,sW,sH (Source position, width, & height)
//dx,dy,dW,dH (Destination position, width, & height)
//drawImage(image,sx,sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

}</script><style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}

killedbyapixel-curve-implementation.html

<canvas id=c><script>c.width=c.height=1080;x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)};E=t=>{

c.width|=0
for(i=99;i--;)x.fillRect((1e3-(i-35)**2)**.5*9, i*9+99,9,9)

}</script><style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}