1/jekyll_site/js/spinning-cube.js

// © Головин Г.Г., Код с комментариями, 2023
'use strict';
// рисовать будем сразу две картинки,
// объект будет один, а проекций будет много
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
// создаём объект
const cube = new Cube(50,50,50,200);
// центр фигуры, вокруг него будем выполнять поворот
const t0 = new Point(150,150,150);
// удалённость центра проекции
const d = 300;
// положение экрана наблюдателя
const tv = new Point(150,150,80);
// угол поворота в градусах
const deg = {x:0,y:1,z:0};

// поворот фигуры и обновление изображения
function repaint() {
  cube.rotate(deg, t0);
  // рисуем параллельную проекцию
  drawFigure(canvas1, cube.projection('parallel', tv));
  // рисуем перспективную проекцию
  drawFigure(canvas2, cube.projection('perspective', tv, d));
}

// рисуем фигуру по точкам из массива
function drawFigure(canvas, proj) {
  let context = canvas.getContext('2d');
  // сортируем грани по их наклону
  proj.sort((a,b) => b.clock-a.clock);
  // очищаем весь холст целиком
  context.clearRect(0, 0, canvas.width, canvas.height);
  // обходим массив граней куба
  for (let i = 0; i < proj.length; i++) {
    // обходим массив точек и соединяем их линиями
    context.beginPath();
    for (let j = 0; j < proj[i].length; j++) {
      if (j == 0) {
        context.moveTo(proj[i][j].x, proj[i][j].y);
      } else {
        context.lineTo(proj[i][j].x, proj[i][j].y);
      }
    }
    context.closePath();
    // рисуем грань куба вместе с рёбрами
    context.lineWidth = 2.2;
    context.lineJoin = 'round';
    context.fillStyle = '#fff9';
    context.strokeStyle = '#222';
    context.fill();
    context.stroke();
  }
}

// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));