---
title: Code with comments
description: Notes about programming with code snippets and comments. Problem solutions and solution descriptions.
sections: [Problem solutions and solution descriptions]
tags: [javascript,online,canvas,geometry,matrix,algorithms,implementation,graphics,images,pictures,square,cube]
canonical_url: /en/
url_translated: /ru/
title_translated: Код с комментариями
lang: en
---

{%- assign articles = "" | split: "" %}
{%- assign articles = articles | push: "Volumetric tetris" %}
{%- capture article_brief %}
General educational game in the broad meaning of this word. When learning programming languages, it is
recommended to write your own version first and then use it to demonstrate and test other software or
hardware. The three-dimensional interface is written in JavaScript Canvas — the logic of the game itself
is two-dimensional.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning spatial cross" %}
{%- capture article_brief %}
We are writing an algorithm for rotating a three-dimensional figure by an angle around its center along
all three axes at once. In the previous example, we rotated cube in space — now there are a lot of cubes,
the algorithm is almost the same and we use the same formulas. We draw two variants of the figure:
*spatial cross* and *cross-cube* in two types of projections, consider the difference.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning cube in space" %}
{%- capture article_brief %}
We consider the difference between parallel and perspective projection. Both are widely used in practice
for various purposes. In the previous example, we rotated square on plane — we pass into three-dimensional
space. Now, to display the rotation of a three-dimensional object on the screen plane, we first need to
create a *mathematical model* of a three-dimensional object, rotate it by an angle, draw a projection from
it and display already the projection on the screen.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning square on plane" %}
{%- capture article_brief %}
Let's write an algorithm in JavaScript to rotate a square by an angle around its center, repeat the high
school program. We will use the `Math` class for calculations, and Canvas for displaying the results.

The origin of the coordinates is in the upper left corner, the coordinate axes are directed to the right and
down. The central point for rotations `t0` is located in the center of the figure. A square is an array of
four points-vertices. We bypass the array of points, rotate each of them by an angle, then link the points
with lines and draw lines on the canvas. We renew the image at a frequency of 20 frames per second.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- include main_page.html articles = articles -%}