| title |
description |
sections |
tags |
canonical_url |
url_translated |
title_translated |
| Код с комментариями |
Заметки на тему программирования с примерами кода и комментариями. Решения задач и описания решений. |
| Решения задач и описания решений |
|
| javascript |
| онлайн |
| canvas |
| геометрия |
| матрица |
| алгоритмы |
| реализация |
| графика |
| изображения |
| картинки |
| квадрат |
| куб |
|
/ |
/en/ |
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 -%}
