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

21.01.2023

Логическая игра • Экспериментальный интерфейс

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

15.01.2023

Вращаем пространственный крест

Объёмные фигуры • Матрица поворота • Экспериментальная модель

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

10.01.2023

Вращаем куб в пространстве

Линейная перспектива • Матрица поворота • Экспериментальная модель

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

05.01.2023

Вращаем квадрат на плоскости

Линейная алгебра • Матрица поворота

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

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