var verts=[ ]; var verts0=[ ]; var nvertices; var th=50; var mode; var sort=true; function init() { verts=[]; verts0=[]; s=undefined; var ch=document.getElementsByTagName("input")[0].checked; sort=ch; for(var x=-1;x<=1;x+=1/th*(ch?2:1)) { verts.push([x,-1,-1]); verts.push([x,1,-1]); verts.push([x,1,1]); verts.push([x,-1,1]); } for(var y=-1;y<=1+1/th*2;y+=1/th*(ch?2:1)) { verts.push([-1,y,-1]); verts.push([1,y,-1]); verts.push([1,y,1]); verts.push([-1,y,1]); } for(var z=-1;z<=1;z+=1/th*(ch?2:1)) { verts.push([-1,-1,z]); verts.push([1,-1,z]); verts.push([1,1,z]); verts.push([-1,1,z]); } nvertices=new Array(verts.length); for(var i=0;i-.2&&x<.2) { x=Math.random()*2-1; } var y=0; while(y>-.2&&y<.2) { y=Math.random()*2-1; } var z=0; while(z>-.2&&z<.2) { z=Math.random()*2-1; } verts0.push([x,y,z]); } } setTimeout(init); function rot2d(x,z,r) { var c=Math.cos(r); var s=Math.sin(r); return [x*c-z*s,x*s+z*c]; } function lerp(a,b,c) { return a+(b-a)*c; } function rot3d(x,r) { var tv0=rot2d(x[0],x[2],r[1]); var tv1=rot2d(x[1],tv0[1],r[0]); return [tv0[0],tv1[0],tv1[1]]; } function persp(x,z) { return fov*x/z; } function proj(x) { return [innerWidth/2+persp(x[0],x[2]),innerHeight/2+persp(x[1],x[2])]; } var fov; var rot=[0,0]; var pos=[0,0,4]; var fps=60; var last; var s; function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// var now=Date.now(); if(!last) last=now; var delta=now-last; var average=fps/(1000/delta); if(!s) s=Date.now(); rot[1]=Date.now()/2000; fov=Math.min(innerWidth,innerHeight); var col=["dodgerblue","limegreen","orange","yellow", "blue","green","orangered","gold"]; for(var i=0,l=nvertices.length;i{ return rot3d(b,rot)[2]-rot3d(a,rot)[2]; }); for(var i=0,l=vertices.length;i0&&vertices[i][1]>0&&vertices[i][2]>0) ctx.fillStyle=col[0]; else if(vertices[i][0]>0&&vertices[i][1]<0&&vertices[i][2]>0) ctx.fillStyle=col[1]; else if(vertices[i][0]>0&&vertices[i][1]>0&&vertices[i][2]<0) ctx.fillStyle=col[2]; else if(vertices[i][0]>0&&vertices[i][1]<0&&vertices[i][2]<0) ctx.fillStyle=col[3]; else if(vertices[i][0]<0&&vertices[i][1]>0&&vertices[i][2]>0) ctx.fillStyle=col[4]; else if(vertices[i][0]<0&&vertices[i][1]<0&&vertices[i][2]>0) ctx.fillStyle=col[5]; else if(vertices[i][0]<0&&vertices[i][1]>0&&vertices[i][2]<0) ctx.fillStyle=col[6]; else if(vertices[i][0]<0&&vertices[i][1]<0&&vertices[i][2]<0) ctx.fillStyle=col[7]; var ro=rot3d(vertices[i],rot); ro[0]+=pos[0]; ro[1]+=pos[1]; ro[2]+=pos[2]; var p=proj(ro); ctx.fillRect(p[0]-2,p[1]-2,4,4); } ctx.fillStyle="#222"; ctx.textBaseline="top"; ctx.fillText((1000/delta).toFixed(1)+"FPS",0,0); ctx.textBaseline="bottom"; ctx.font=innerWidth*.06+"px monospace"; ctx.textAlign="center"; ctx.fillText("Tap to change shape",innerWidth/2,innerHeight-innerWidth*.03) last=now; } setInterval(frame); setTimeout(()=>{ if("ontouchstart" in document) c.addEventListener("touchstart",()=>{ mode=!mode; }); else c.addEventListener("mousedown",()=>{ mode=!mode; }); });

3D Particle Cube