48 lines
4.8 KiB
JavaScript
48 lines
4.8 KiB
JavaScript
---
|
||
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 -%}
|