Rotate the cube in space. Canvas

HTML5, Canvas

JavaScript

    'use strict';

    // Рисовать будем сразу две картинки,
    // объект у нас будет один, а проеций будет много
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');

    var canvas_context1 = canvas1.getContext('2d');
    var canvas_context2 = canvas2.getContext('2d');

    // Сместим начало координат в центр блока
    canvas_context1.translate(canvas1.width / 2, canvas1.height / 2);
    canvas_context2.translate(canvas2.width / 2, canvas2.height / 2);

    // Фигуру будем задавать как совокупность четырех плоскостей,
    // каждая плоскость - совокупность четырех точек
    var arr_t = [
    // Передняя стенка
    [{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}],
    // Левая стенка
    [{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 t0 = {x:0, y:0, z:0};

    // Угол поворота в градусах
    var deg = 0;

    // Для перспективной проекции:
    // Удаленность наблюдателя от объекта.
    // Не может быть меньше размеров объекта,
    // в нашем случае 200px
    var a = 300;

    // Размер объекта на экране в (%)
    var k = 70;

    // Текущая фигура
    var arr_tt = [];
    for (var i = 0; i < arr_t.length; i++) {
        arr_tt[i] = arr_t[i].slice();
    }

    // Текущая проекция
    var arrProj;

    // Задаем функцию обновления отображения
    // с поворотом фигуры.
    // Затем эту функцию надо будет вставить
    // в переменную window.onload
    function repaint() {

        // Сначала очистим экран - закрасим белым цветом
        clearScreen(canvas1, canvas_context1, 'rgb(255,255,255)');
        clearScreen(canvas2, canvas_context2, 'rgb(255,255,255)');

        // Теперь повернем исходную фигуру на угол
        // по оси Y и перезапишем текущую фигуру
        for (var i = 0; i < arr_t.length; i++) {
            for (var j = 0; j < arr_t[0].length; j++) {
                arr_tt[i][j] = rotateOnDegreeY(t0, arr_t[i][j], deg);
            }
        }

        // Получим параллельную проекцию
        arrProj = getParallelProjection(arr_tt);

        // Нарисуем ее
        canvas_context1.lineWidth = 2; // черный полупрозрачный
        strokeFigure(canvas_context1, arrProj, 'rgba(0,0,0,0.5)');

        // Получим перспективную проекцию
        arrProj = getPerspectiveProjection(arr_tt);

        // Нарисуем ее тоже в соседнем окошке
        canvas_context2.lineWidth = 2; // черный полупрозрачный
        strokeFigure(canvas_context2, arrProj, 'rgba(0,0,0,0.5)');

        // Увеличиваем угол
        deg += 1;
    }

    // Далее идут вспомогательные функции

    // Получаем параллельную проекцию фигуры на плоскость экрана
    function getParallelProjection(arr) {

        var arr_new = [];

        for (var i = 0; i < arr.length; i++) {
            arr_new[i] = [];
            for (var j = 0; j < arr[0].length; j++) {
                arr_new[i][j] = {};
                arr_new[i][j].x = arr[i][j].x;
                arr_new[i][j].y = arr[i][j].y + arr[i][j].z / 4;
            }
        }

        return arr_new;
    }

    // Получаем перспективную проекцию
    function getPerspectiveProjection(arr) {
        var arr_new = [];

        for (var i = 0; i < arr.length; i++) {
           arr_new[i] = [];
           for (var j = 0; j < arr[0].length; j++) {
              arr_new[i][j] = {};
              arr_new[i][j].x = (a / 100 * k) * arr[i][j].x / (arr[i][j].z + a);
              arr_new[i][j].y = (a / 100 * k) * arr[i][j].y / (arr[i][j].z + a);
           }
        }

        return arr_new;
    }

    // Закрашиваем весь экран определенным цветом
    function clearScreen(canvas, context, color) {
        context.fillStyle = color;

        context.beginPath();
        context.fillRect(- canvas.width / 2,
                         - canvas.height / 2,
                           canvas.width,
                           canvas.height);
        context.closePath();
        context.fill();
    }

    // Рисуем фигру по точкам из массива
    function strokeFigure(context, arr, color) {
        context.strokeStyle = color;
        context.fillStyle = color;

        for (var i = 0; i < arr.length; i++) {
            context.beginPath();
            for (var j = 0; j < arr[0].length; j++) {
                if (j == 0) {
                    context.moveTo(arr[i][j].x, arr[i][j].y);
                } else {
                    context.lineTo(arr[i][j].x, arr[i][j].y);
                }
            }
            context.closePath();
            context.stroke();
        }
    }

    // Поворачиваем точку t(x,y,z) на угол (deg) по оси (Y)
    // относительно точки t0(x,y,z)
    function rotateOnDegreeY(t0, t, deg) {

        var t_new = {};

        // Переводим угол поворота из градусов в радианы
        var rad = (Math.PI / 180) * deg;

        // Рассчитываем координаты новой точки по формуле
        t_new.x = t0.x+(t.x-t0.x)*Math.cos(rad)-(t.z-t0.z)*Math.sin(rad);
        t_new.y = t.y;
        t_new.z = t0.z+(t.x-t0.x)*Math.sin(rad)+(t.z-t0.z)*Math.cos(rad);

        // Возвращаем полученное значение
        return t_new;
    }

    // Устанавливаем интервал обновления отображения
    window.onload = function() {
        setInterval(repaint, 100);
    };