1/jekyll_site/ru/index.md

---
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 -%}