Код с комментариями

Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas — логика самой игры двухмерная. Дополнительные внешние библиотеки не используются.

Пишем алгоритм для поворота трёхмерной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем примере мы вращали куб в пространстве — в этом примере кубиков будет много, алгоритм будет почти такой же, и формулы будем использовать те же. Для наглядности возьмём два варианта симметричной объёмной фигуры в двух типах проекций — пространственный крест и крест-куб — рассматриваем разницу между ними.

Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике для различных целей. В предыдущем примере мы вращали квадрат на плоскости — переходим в трёхмерное пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала создать математическую модель трёхмерного объекта, повернуть её на угол, срисовать с неё проекцию и отобразить на экране уже проекцию. Для наглядности будем использовать декартову систему координат.

Напишем алгоритм на JavaScript для поворота квадрата на угол вокруг своего центра, повторим программу средней школы. Для расчётов будем использовать класс Math, а для отображения результатов — Canvas.

Начало координат находится в верхнем левом углу, координатные оси направлены вправо и вниз. Центральная точка для поворотов t0 расположена в центре фигуры. Квадрат — это массив из четырёх точек-вершин. Обходим массив точек, поворачиваем каждую из них на угол, затем соединяем точки линиями и рисуем линии на холсте. Обновляем картинку с частотой 20 кадров в секунду.

© Головин Г.Г., Код с комментариями, 2024