lambdaway :: cuboid

5 | list | login |load

| |

{canvas {@ width="580" height="580"}}

_h1 rotating cuboïd

_h2 code

{pre °°
1) creating the canvas

{canvas {@ width="580" height="580"}}

2) calling javascript

{script  
  var canvas, g, width, height;
  var mouseX = 0, prevMouseX, mouseY = 0, prevMouseY;

function run() {
        canvas = document.querySelector("canvas");
        width = canvas.width;
        height = canvas.height;
        g = canvas.getContext("2d");
        
        canvas.addEventListener("mousemove", 
          function (event) {
            prevMouseX = mouseX;
            prevMouseY = mouseY;
            mouseX = event.x;
            mouseY = event.y;

var incrX = (mouseX - prevMouseX) * 0.01;
            var incrY = (mouseY - prevMouseY) * 0.01;

rotateCuboid(incrX, incrY);
            drawCuboid();
          });

scale(80, 120, 160);
        rotateCuboid(Math.PI / 5, Math.PI / 9);
        drawCuboid()

}

var nodes = [[-1, -1, -1], [-1, -1, 1], [-1, 1, -1], [-1, 1, 1],
        [1, -1, -1], [1, -1, 1], [1, 1, -1], [1, 1, 1]];

var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6],
        [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];

function scale(factor0, factor1, factor2) {
            nodes.forEach(function (node) {
                node[0] *= factor0;
                node[1] *= factor1;
                node[2] *= factor2;
            });
        }

function rotateCuboid(angleX, angleY) {

var sinX = Math.sin(angleX);
            var cosX = Math.cos(angleX);

var sinY = Math.sin(angleY);
            var cosY = Math.cos(angleY);

nodes.forEach(function (node) {
                var x = node[0];
                var y = node[1];
                var z = node[2];

node[0] = x * cosX - z * sinX;
                node[2] = z * cosX + x * sinX;

z = node[2];

node[1] = y * cosY - z * sinY;
                node[2] = z * cosY + y * sinY;
            });
        }

function drawCuboid() {
            g.save();
            
            g.clearRect(0, 0, width, height);
            g.translate(width / 2, height / 2);
            g.strokeStyle = "#000";
            g.beginPath();

edges.forEach(function (edge) {
                var p1 = nodes[edge[0]];
                var p2 = nodes[edge[1]];
                g.moveTo(p1[0], p1[1]);
                g.lineTo(p2[0], p2[1]);
            });
            
            g.closePath();
            g.stroke();

g.restore();
        }

setTimeout( run, 1 )
} 
°°}