window.onload=function(){var focal=300;var rotation={x:0.06,y:0.05,z:0.1};var points=[{x:-100,y:100,z:-100},{x:-100,y:-100,z:-100},{x:100,y:-100,z:-100},{x:100,y:100,z:-100},{x:-100,y:100,z:100},{x:-100,y:-100,z:100},{x:100,y:-100,z:100},{x:100,y:100,z:100}];var faces=[[points[0],points[1],points[2],points[3]],[points[4],points[5],points[6],points[7]],[points[3],points[2],points[6],points[7]],[points[0],points[1],points[5],points[4]],[points[0],points[3],points[7],points[4]],[points[1],points[2],points[6],points[5]]];var canvas=document.getElementById('myscene');var ctx=canvas.getContext('2d');ctx.globalCompositeOperation='source-over';ctx.strokeStyle="#AA6666";var lingrad=ctx.createRadialGradient(95,-130,15,80,20,500);lingrad.addColorStop(0,'#FFF');lingrad.addColorStop(1,'#999');ctx.fillStyle=lingrad;drawObject(faces,rotation,focal,ctx,canvas)}
var currentRotation={x:0,y:0,z:0};function sortZ(a,b){var max1=0;var max2=0;for(i in a){max1+=-a[i].z}
max1=max1/a.length;for(i in b){max2+=-b[i].z}
max2=max2/b.length;return max1-max2;}
function drawObject(faces,rotation,focal,ctx,canvas){for(i in faces){for(p in faces[i]){faces[i][p]=rotatePoint(faces[i][p],rotation);}}
faces.sort(sortZ);ctx.clearRect(0,0,canvas.width,canvas.height);for(k=0;k<faces.length;k++){var f=faces[k]
drawFace(f,rotation,focal,ctx,canvas)}
setTimeout(function(){drawObject(faces,rotation,focal,ctx,canvas)},10)}
function drawFace(face,rotation,focal,ctx,canvas){ctx.save()
ctx.translate(canvas.width/2,canvas.height/2);ctx.beginPath()
var p0=getZ(face[0],focal);ctx.moveTo(p0.x,p0.y);for(i=1;i<face.length;i++){var p=getZ(face[i],focal);ctx.lineTo(p.x,p.y);}
ctx.lineTo(p0.x,p0.y);ctx.fill();ctx.stroke();ctx.restore();}
function getZ(point,focal){x=(focal/(focal+point.z))*point.x;y=-(focal/(focal+point.z))*point.y;return{x:x,y:y,z:point.z}}
function rotatePoint(point,rotation){var cz=Math.cos(rotation.z);var sz=Math.sin(rotation.z);var cx=Math.cos(rotation.x);var sx=Math.sin(rotation.x);var cy=Math.cos(rotation.y);var sy=Math.sin(rotation.y);var x=point.x;var y=point.y;var z=point.z;var xy=cx*y-sx*z;var xz=sx*y+cx*z;var yz=cy*xz-sy*x;var yx=sy*xz+cy*x;var zx=cz*yx-sz*xy;var zy=sz*yx+cz*xy;return{x:zx,y:zy,z:yz};}