window.onload=function(){var focal=300;var rotation={x:0.02,y:0.01,z:0.05};var squarePoints=[{x:-100,y:0,z:-100},{x:100,y:0,z:-100},{x:100,y:0,z:100},{x:-100,y:0,z:100}];var canvas=document.getElementById('myscene');var ctx=canvas.getContext('2d');ctx.fillStyle="#AAAAAA";ctx.strokeStyle="#AA6666";drawFace(squarePoints,rotation,focal,ctx,canvas)}
var currentRotation={x:0,y:0,z:0};function drawFace(point,rotation,focal,ctx,canvas){currentRotation.x+=rotation.x;currentRotation.y+=rotation.y;currentRotation.z+=rotation.z;ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save()
ctx.translate(canvas.width/2,canvas.height/2);ctx.beginPath()
var p0=rotatePoint(point[0],currentRotation);p0=getZ(p0,focal);ctx.moveTo(p0.x,p0.y);for(i=1;i<point.length;i++){var p=rotatePoint(point[i],currentRotation);p=getZ(p,focal);ctx.lineTo(p.x,p.y);}
ctx.lineTo(p0.x,p0.y);ctx.fill();ctx.stroke();ctx.restore();setTimeout(function(){drawFace(point,rotation,focal,ctx,canvas)},1000/25)}
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};}