GITEA EN typewriter

older-tomato

Code with comments

Problem solutions and solution descriptions

22.01.2023

Volumetric tetris

Logical game • Experimental interface

General educational game in the broad meaning of this word. In the process of learning programming languages, it is recommended to write your own version first and then use it for demonstrating and testing another software or hardware. The three-dimensional interface is written in JavaScript Canvas — the logic of the game itself is two-dimensional. Additional external libraries are not used.


16.01.2023

Spinning spatial cross

Volumetric figures • Rotation matrix • Experimental model

We are writing an algorithm for rotating a three-dimensional figure around its center along all three axes at once. In the previous example, we rotated cube in space — in this example, there are a lot of cubes, the algorithm will be almost the same, and we will use the same formulas. For clarity, let’s take two variants of a symmetrical volumetric figure in two types of projections — spatial cross and cross-cube — we consider the difference between them.


11.01.2023

Spinning cube in space

Linear perspective • Rotation matrix • Experimental model

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. For clarity, we will use the cartesian coordinate system.


06.01.2023

Spinning square on plane

Linear algebra • Rotation matrix

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.


© Golovin G.G., Code with comments, translation from Russian, 2024