HTML and CSS Reference
In-Depth Information
triangles[26] = new Triangle(points[3], points[2], points[14], "#cccccc");
triangles[27] = new Triangle(points[2], points[13], points[14], "#cccccc");
triangles[28] = new Triangle(points[4], points[3], points[15], "#cccccc");
triangles[29] = new Triangle(points[3], points[14], points[15], "#cccccc");
triangles[30] = new Triangle(points[5], points[4], points[16], "#cccccc");
triangles[31] = new Triangle(points[4], points[15], points[16], "#cccccc");
triangles[32] = new Triangle(points[6], points[5], points[17], "#cccccc");
triangles[33] = new Triangle(points[5], points[16], points[17], "#cccccc");
triangles[34] = new Triangle(points[7], points[6], points[18], "#cccccc");
triangles[35] = new Triangle(points[6], points[17], points[18], "#cccccc");
triangles[36] = new Triangle(points[0], points[7], points[11], "#cccccc");
triangles[37] = new Triangle(points[7], points[18], points[11], "#cccccc");
triangles[38] = new Triangle(points[8], points[9], points[19], "#cccccc");
triangles[39] = new Triangle(points[9], points[20], points[19], "#cccccc");
triangles[40] = new Triangle(points[9], points[10], points[20], "#cccccc");
triangles[41] = new Triangle(points[10], points[21], points[20], "#cccccc");
triangles[42] = new Triangle(points[10], points[8], points[21], "#cccccc");
triangles[43] = new Triangle(points[8], points[19], points[21], "#cccccc");
triangles.forEach(function (triangle) {
triangle.light = light;
});
function move (point) {
point.rotateX(angleX);
point.rotateY(angleY);
}
function depth (a, b) {
return (b.getDepth() - a.getDepth());
}
function draw (triangle) {
triangle.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
angleX = (mouse.y - vpY) * 0.0005;
angleY = (mouse.x - vpX) * 0.0005;
points.forEach(move);
triangles.sort(depth);
triangles.forEach(draw);
}());
};
</script>
</body>
</html>
