Untitled

<html>
<head>
</head>
<body>
    <canvas id='canvas' width='1280' height='640'></canvas>
    <script>
        let sin = Math.sin;
        let cos = Math.cos;
        let PI = Math.PI;

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');

        let scaffolding = [
            [[-0.5, +0.5, +0.5, 0], [0x00, 0x00, 0xff]],
            [[+0.5, +0.5, +0.5, 0], [0x00, 0xff, 0x00]],
            [[+0.5, -0.5, +0.5, 0], [0x00, 0xff, 0xff]],
            [[-0.5, -0.5, +0.5, 0], [0xff, 0x00, 0x00]],
            [[-0.5, +0.5, -0.5, 0], [0xff, 0x00, 0xff]],
            [[+0.5, +0.5, -0.5, 0], [0xff, 0xff, 0x00]],
            [[+0.5, -0.5, -0.5, 0], [0x80, 0x00, 0x00]],
            [[-0.5, -0.5, -0.5, 0], [0x00, 0x80, 0x00]],
        ];

        function scale(v, s) {
            return [v[0] * s, v[1] * s, v[2] * s, v[3] * s];
        }

        function translate(v, x, y) {
            return [v[0] + x, v[1] + y, v[2], v[3]];
        }

        function vertex_shader(v, m) {
            v = m44v(m, v);
             v = scale(v, 350);
             v = translate(v, 640, 320);
             return v;
        }

        function draw(v) {
            ctx.beginPath();
            ctx.arc(v[0], v[1], 5, 0, Math.PI * 2);
            ctx.fill();
        }


        let model = [];
        let colors = [];
        let ppu = 16;
        for (let z = 0; z <= ppu; z += 1) for (let y = 0; y <= ppu; y += 1) for (let x = 0; x <= ppu; x += 1) {
            let v = [x/ppu - 0.5, y/ppu - 0.5, z/ppu - 0.5, 0];
            model.push(v);
            colors.push(calc_color(v));
        }

        function dist(a, b) {
            let xd = a[0] - b[0];
            let yd = a[1] - b[1];
            let zd = a[2] - b[2];
            return 1 - (xd * xd + yd * yd + zd * zd) / 3;
        }

        function calc_color(v) {
            let color_stack = [];
            for (let scaff of scaffolding) {
                let t = dist(v, scaff[0]);
                let c = scaff[1];
                color_stack.push([c[0] * t / 3, c[1] * t / 3, c[2] * t / 3]);
            }
            return color_stack.reduce((a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]);
        }

        requestAnimationFrame(render);

        //let t = 0;

        function render(time) {
            let Ax = 30 / 180 * PI;
            // let Ay = 45 / 180 * PI;
            let t = (time % 15000) / 15000;
            let Ay = t * PI;

        let Rx = [
            1, 0,       0,        0,
            0, cos(Ax), -sin(Ax), 0,
            0, sin(Ax), cos(Ax),  0,
            0, 0,       0,        1,
        ];

        let Ry = [
            cos(Ay),  0, sin(Ay), 0,
            0,        1, 0,       0,
            -sin(Ay), 0, cos(Ay), 0,
            0,        0, 0,       1,
        ];

            let m = m44(Ry, Rx);

            let verts = [];
            for (let v of model) {
                verts.push(vertex_shader(v, m));
            }

            // console.log(verts);

            ctx.clearRect(0, 0, 1280, 640);
            for (let idx = 0; idx < verts.length; idx += 1) {
                ctx.fillStyle = col_to_str(colors[idx]);
                draw(verts[idx]);
            } // model.sort(a, b => a < b)

            requestAnimationFrame(render);
        }

        function col_to_str(c) {
            return '#' + ((c[0] << 16) | (c[1] << 8) | (c[2])).toString(16);
        }

//function multiplyMatrices(matrixA, matrixB) {
function m44(matrixA, matrixB) {
  // Slice the second matrix up into columns
  var column0 = [matrixB[0], matrixB[4], matrixB[8], matrixB[12]];
  var column1 = [matrixB[1], matrixB[5], matrixB[9], matrixB[13]];
  var column2 = [matrixB[2], matrixB[6], matrixB[10], matrixB[14]];
  var column3 = [matrixB[3], matrixB[7], matrixB[11], matrixB[15]];

  // Multiply each column by the matrix
  var result0 = m44v(matrixA, column0);
  var result1 = m44v(matrixA, column1);
  var result2 = m44v(matrixA, column2);
  var result3 = m44v(matrixA, column3);

  // Turn the result columns back into a single matrix
  return [
    result0[0], result1[0], result2[0], result3[0],
    result0[1], result1[1], result2[1], result3[1],
    result0[2], result1[2], result2[2], result3[2],
    result0[3], result1[3], result2[3], result3[3]
  ];
}


//function multiplyMatrixAndPoint(matrix, point) {
function m44v(matrix, point) {
  //Give a simple variable name to each part of the matrix, a column and row number
  var c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3];
  var c0r1 = matrix[ 4], c1r1 = matrix[ 5], c2r1 = matrix[ 6], c3r1 = matrix[ 7];
  var c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11];
  var c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15];

  //Now set some simple names for the point
  var x = point[0];
  var y = point[1];
  var z = point[2];
  var w = point[3];

  //Multiply the point against each part of the 1st column, then add together
  var resultX = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3);

  //Multiply the point against each part of the 2nd column, then add together
  var resultY = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3);

  //Multiply the point against each part of the 3rd column, then add together
  var resultZ = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3);

  //Multiply the point against each part of the 4th column, then add together
  var resultW = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3);

  return [resultX, resultY, resultZ, resultW];
}
    </script>
</body>
</html>