var last; var pos=[0,0,3]; var rot=[0,0]; var verts=[]; var lines=[]; var aline=false; var fov=Math.min(innerWidth,innerHeight); var tzy=prompt("Enter some text (max 8 letters)").toUpperCase().slice(0,8); 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 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 filter=16+tzy.length/2; var pro=tzy.length*3.25; function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// rot[1]=Date.now()/2000; var now=Date.now(); if(!last) { ctx.font=innerWidth*(1/pro)+"px monospace"; ctx.textBaseline="middle"; ctx.textAlign="center"; ctx.strokeStyle="#eee"; ctx.letterSpacing="60px"; ctx.strokeText(tzy,innerWidth/2,innerHeight/2); var points=[]; var buf=ctx.getImageData(0,0,c.width,c.height); for(var x=0;x{ return a[2]-b[2]; }); for(var i=0;i0&&verts[i][1]<=0) ctx.fillStyle="lime"; else if(verts[i][0]>0&&verts[i][1]>0) ctx.fillStyle="orangered"; else ctx.fillStyle="gold"; var ro=rot3d(verts[i],rot); ro[0]+=pos[0]; ro[1]+=pos[1]; ro[2]+=pos[2]; var p=proj(ro); ctx.fillRect(p[0]-1,p[1]-1,2,2); } } else { ctx.strokeStyle="white"; for(var i=0;i

3D Text (Laggy)