var ctx,canvas,timer,isstart,count,step,info,yrad,krad; window.onload=function(){ var a; canvas = document.getElementsByTagName('canvas')[0], ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); gime=ctx.getImageData(0,0,400,400); ctx.globalCompositeOperation = "lighter"; ctx.strokeStyle="hsla(11,70%,50%,0.7)"; ctx.fillStyle="hsla(11,70%,50%,0.5)"; info=["Rotate the square", "Multiply the time by an appropriate value equal to α and multiply each point y by sin (α)", "Add sin (α + circular ratio / 2) * radius * √2 to y for each point", "Prepare points at target positions", "Connect up and down and rotate entire coordinates", "Connect the coordinates of the center to each point. The coordinates of the center also move periodically.", "Take a midpoint to divide the line into three equal parts and drag at random in the vertical direction", "Repeat the slide and increase the number of lines", "Leave the previous drawing for a moment", "Thanks for watching
Cube Oscillant Animation Javascript

MiCaVi👑🇧🇪 & jagarikin's⚙️🇯🇵"]; yrad=2; krad=1; count=230; step=0; for(a=0;a<20;a++)syori(); } function cube(){ var a,b,x,y,x1,y1,rad,p,p2,ue,sita,yp,yp2,msin,mcos,size,tx,ty; size=130; ctx.lineWidth=2; tx=ty=200; b=0; if(step>4)b=(step-4)*10; a=count/47; tx+=Math.cos(a)*b; ty+=Math.sin(a)*b; yp=Math.sin(yrad); yp2=Math.sin(yrad-Math.PI/2); msin=Math.sin(krad); mcos=Math.cos(krad); c=Math.pow(0.5,0.5); p=[];p2=[]; rad=count/31; b=Math.PI*2/4; for(a=0;a<4;a++){ x=Math.sin(rad)*size; y=Math.cos(rad)*size*yp; if(step>1)y+=size*yp2*c; x1=x*mcos-y*msin; y1=x*msin+y*mcos; p[a]=[tx+x1,ty+y1]; p2[a]=[tx-x1,ty-y1]; rad+=b; y=size*yp2; x1=-y*msin; y1=y*mcos; } for(a=0;a<4;a++){ maru(p[a][0],p[a][1]); duma(p[a][0],p[a][1],p[(a+1)%4][0],p[(a+1)%4][1],3); if(step>2)maru(p2[a][0],p2[a][1]); if(step>2)duma(p2[a][0],p2[a][1],p2[(a+1)%4][0],p2[(a+1)%4][1],3); if(step>3)duma(p[a][0],p[a][1],p2[(a+2)%4][0],p2[(a+2)%4][1],3); if(step>4)duma(tx,ty,p[a][0],p[a][1],2); if(step>4)duma(tx,ty,p2[a][0],p2[a][1],2); } if(step>4)maru(tx,ty); } function maru(x,y){ if(step>=8)return; ctx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2,false); ctx.fill(); ctx.beginPath(); ctx.arc(x,y,5,0,Math.PI*2,false); ctx.fill(); } function anima(){ if(isstart){ step++; if(step==info.length-1)document.getElementById("button-animation").value="End >"; if(step>info.length-1){ isstart=0; document.getElementById("button-animation").value="Start >"; return; } }else{ step=count=krad=0; yrad=Math.PI/2; document.getElementById("button-animation").value="Next >>"; isstart=1; timer=setTimeout(ruup,0); } document.getElementById("setup").innerHTML=(step+1)+"："+info[step]; } function ruup(){ var a,b; clearTimeout(timer); if(!isstart)return; timer=setTimeout(ruup,30); syori(); } function syori(){ var a,ime,dt; if(step<8){ ctx.putImageData(gime,0,0); }else{ ime=ctx.getImageData(0,0,400,400); dt=ime.data; for(a=0;a0)yrad+=1/23; if(step>3)krad+=1/43; } function duma(sx,sy,ex,ey,kai){ var a,b,c,d; d=2.5; if(step<6){ ctx.beginPath(); ctx.moveTo(sx,sy); ctx.lineTo(ex,ey); ctx.stroke(); return; } if(step==6)kai=1; for(c=0;c<14;c++){ a=[]; ina(sx,sy,ex,ey,kai,a,0.5+c*0.1); a.push(ex,ey); ctx.beginPath(); ctx.moveTo(a[0],a[1]); for(b=2;b

🆕 3D Cube Oscillant Animation ✔️Javascript 🎵.