57 lines
2.3 KiB
JavaScript
57 lines
2.3 KiB
JavaScript
// © Головин Г.Г., Код с комментариями, 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));
|