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