---
title: Код с комментариями
description: Заметки на тему программирования с примерами кода и комментариями. Решения задач и описания решений.
sections: [Решения задач и описания решений]
tags: [javascript,canvas,геометрия,матрица,алгоритмы,реализация,графика,изображения,картинки,квадрат,куб]
canonical_url: /
url_translated: /en/
title_translated: Code with comments
---

{%- assign articles = "" | split: "" %}
{%- assign articles = articles | push: "Объёмный тетрис" %}
{%- capture article_brief %}
Общеобразовательная игра в широком смысле этого слова. При изучении языков программирования рекомендуется
сначала написать свою версию и потом использовать её для демонстрации и тестирования другого программного
обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas — логика самой игры двухмерная.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Вращаем пространственный крест" %}
{%- capture article_brief %}
Пишем алгоритм для поворота объёмной фигуры на угол вокруг своего центра по всем трём осям сразу. В предыдущем
примере мы вращали куб в пространстве — теперь кубиков будет много, алгоритм будет почти такой же и формулы
будем использовать те же. Рисуем два варианта фигуры: *пространственный крест* и *крест-куб* в двух типах проекций,
рассматриваем разницу.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Вращаем куб в пространстве" %}
{%- capture article_brief %}
Рассматриваем разницу между параллельной и перспективной проекцией. Обе широко используются на практике для
различных целей. В предыдущем примере мы вращали квадрат на плоскости — переходим в трёхмерное пространство.
Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала создать трёхмерный
объект, повернуть его на угол, срисовать с него проекцию и отобразить на экране уже проекцию.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Вращаем квадрат на плоскости" %}
{%- capture article_brief %}
Напишем алгоритм на JavaScript для поворота квадрата на угол вокруг своего центра, повторим программу
средней школы. Для расчётов будем использовать класс `Math`, а для отображения результатов — Canvas.

Начало координат находится в верхнем левом углу, координатные оси направлены вправо и вниз. Центральная точка
для поворотов `t0` расположена в центре фигуры. Квадрат — это массив из четырёх точек-вершин. Обходим массив
точек, поворачиваем каждую из них на угол, затем соединяем точки линиями и рисуем линии на холсте. Обновляем
картинку с частотой 20 кадров в секунду.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- include main_page.html articles = articles -%}