pomodoro/1
pomodoro/1
1
0
Fork 0
Code Wiki Activity

2023-09-30

Browse source
This commit is contained in:
Gennadiy 2023-12-17 08:48:26 +03:00
parent cec485ec9f
commit fb49164b15
10 changed files with 52 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
jekyll_site/_config_color.yml
View file

@ -7,9 +7,9 @@ url: "https://pomodoro1.mircloud.ru"
# подпапка этой сборки для относительных URLs # подпапка этой сборки для относительных URLs
baseurl: "/color" baseurl: "/color"
# ссылка в верхнем левом углу заглавных страниц # ссылка в верхнем левом углу заглавных страниц
homepage_url: "https://gitea.com/pomodoro/1" homepage_url: "https://git.org.ru/pomodoro/1"
# представление ссылки # представление ссылки
homepage_name: "GITEA" homepage_name: "GIT.ORG.RU"
# подпапка альтернативной сборки # подпапка альтернативной сборки
older_tomato_baseurl: "" older_tomato_baseurl: ""
# часовой пояс для формата даты ISO-8601 # часовой пояс для формата даты ISO-8601

4
jekyll_site/_config_older.yml
View file

@ -7,9 +7,9 @@ url: "https://pomodoro1.mircloud.ru"
# подпапка этой сборки для относительных URLs # подпапка этой сборки для относительных URLs
baseurl: "" baseurl: ""
# ссылка в верхнем левом углу заглавных страниц # ссылка в верхнем левом углу заглавных страниц
homepage_url: "https://gitea.com/pomodoro/1" homepage_url: "https://git.org.ru/pomodoro/1"
# представление ссылки # представление ссылки
homepage_name: "GITEA" homepage_name: "GIT.ORG.RU"
# подпапка альтернативной сборки # подпапка альтернативной сборки
color_tomato_baseurl: "/color" color_tomato_baseurl: "/color"
# часовой пояс для формата даты ISO-8601 # часовой пояс для формата даты ISO-8601

16
jekyll_site/en/2023/01/06/spinning-square-on-plane.md
View file

@ -16,7 +16,7 @@ school program. We will use the `Math` class for calculations, and Canvas for di
Development of thought, volumetric model: [Spinning cube in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }}). Development of thought, volumetric model: [Spinning cube in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }}).
### Point rotation on plane {#point-rotation-on-plane} {% include heading.html text="Point rotation on plane" hash="point-rotation-on-plane" type="3" %}
We calculate the coordinates of the new point using the formulas of the rotation matrix for We calculate the coordinates of the new point using the formulas of the rotation matrix for
two-dimensional space. We rotate the point `t` relative to the point `t0` — we get the point `t'`. two-dimensional space. We rotate the point `t` relative to the point `t0` — we get the point `t'`.
@ -24,14 +24,14 @@ two-dimensional space. We rotate the point `t` relative to the point `t0` — we
{% include image_svg.html src="/img/column-vector2d.svg" style="width: 246.793pt; height: 37.2836pt;" {% include image_svg.html src="/img/column-vector2d.svg" style="width: 246.793pt; height: 37.2836pt;"
alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi.&\\" %} alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi.&\\" %}
### Algorithm description {#algorithm-description} {% include heading.html text="Algorithm description" hash="algorithm-description" type="3" %}
The origin of the coordinates is in the upper left corner, the coordinate axes are directed to the right and 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 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 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. with lines and draw lines on the canvas. We renew the image at a frequency of 20 frames per second.
### Implementation {#implementation} {% include heading.html text="Implementation" hash="implementation" type="3" %}
<div> <div>
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
@ -39,7 +39,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20
</canvas> </canvas>
</div> </div>
### HTML {#html1} {% include heading.html text="HTML" hash="html1" type="3" %}
```html ```html
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
@ -47,7 +47,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20
</canvas> </canvas>
``` ```
### JavaScript {#javascript1} {% include heading.html text="JavaScript" hash="javascript1" type="3" %}
```js ```js
'use strict'; 'use strict';
@ -107,7 +107,7 @@ function drawFigure(canvas, arr) {
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50)); document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
``` ```
## Spinning backwards {#spinning-backwards} {% include heading.html text="Spinning backwards" hash="spinning-backwards" %}
Let's add one more point, which we'll rotate backwards. The point is distant from the center of the Let's add one more point, which we'll rotate backwards. The point is distant from the center of the
figure by a quarter of the length of the side of the square. let's shift the center of the square to figure by a quarter of the length of the side of the square. let's shift the center of the square to
@ -120,7 +120,7 @@ central point — counterclockwise. This code works in conjunction with the prev
</canvas> </canvas>
</div> </div>
### HTML {#html2} {% include heading.html text="HTML" hash="html2" type="3" %}
```html ```html
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
@ -128,7 +128,7 @@ central point — counterclockwise. This code works in conjunction with the prev
</canvas> </canvas>
``` ```
### JavaScript {#javascript2} {% include heading.html text="JavaScript" hash="javascript2" type="3" %}
```js ```js
'use strict'; 'use strict';

12
jekyll_site/en/2023/01/11/spinning-cube-in-space.md
View file

@ -42,7 +42,7 @@ dimensions of the objects look the same.
*Perspective projection* — parallel lines converge in the center of the perspective, *Perspective projection* — parallel lines converge in the center of the perspective,
objects appear to shrink in the distance. objects appear to shrink in the distance.
## Experimental model {#experimental-model} {% include heading.html text="Experimental model" hash="experimental-model" %}
Cube size 200, canvas size 300, origin of coordinates is in the upper left corner. The center of the figure Cube size 200, canvas size 300, origin of coordinates is in the upper left corner. The center of the figure
is in the middle of the canvas. The `X` axis is directed to the right, the `Y` axis is directed downwards, is in the middle of the canvas. The `X` axis is directed to the right, the `Y` axis is directed downwards,
@ -98,7 +98,7 @@ center onto the observer screen.
</div> </div>
</form> </form>
## Point rotation in space {#point-rotation-in-space} {% include heading.html text="Point rotation in space" hash="point-rotation-in-space" %}
We calculate the new coordinates of the point using the formulas of the rotation matrix for We calculate the new coordinates of the point using the formulas of the rotation matrix for
three-dimensional space. We rotate the point `t` relative to the point `t0` — we get the point `t'`. three-dimensional space. We rotate the point `t` relative to the point `t0` — we get the point `t'`.
@ -118,7 +118,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(z-z_0)sin\varphi,&\\&y'=y,&\\&z'=z_0+(x-x_0)sin\
{% include image_svg.html src="/img/column-vector3dz.svg" style="width: 246.793pt; height: 55.4753pt;" {% include image_svg.html src="/img/column-vector3dz.svg" style="width: 246.793pt; height: 55.4753pt;"
alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi,&\\&z'=z.&\\" %} alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi,&\\&z'=z.&\\" %}
## Point projection {#point-projection} {% include heading.html text="Point projection" hash="point-projection" %}
Experimental formulas with the possibility of shifting the projection center `d0` on the observer Experimental formulas with the possibility of shifting the projection center `d0` on the observer
screen `tv`. We map the point of space `t` to the plane of the screen — we get the point `t'`. screen `tv`. We map the point of space `t` to the plane of the screen — we get the point `t'`.
@ -138,7 +138,7 @@ alt="&x'=x_v+d_0\cdot(x-x_v)/(z-z_v+d_0),&\\&y'=y_v+d_0\cdot(y-y_v)/(z-z_v+d_0).
{% include image_svg.html src="/img/euclidean-distance.svg" style="width: 319.911pt; height: 17.9328pt;" {% include image_svg.html src="/img/euclidean-distance.svg" style="width: 319.911pt; height: 17.9328pt;"
alt="d(t,d_0)=\sqrt{(x-x_v)^2+(y-y_v)^2+(z-z_v+d_0)^2}." %} alt="d(t,d_0)=\sqrt{(x-x_v)^2+(y-y_v)^2+(z-z_v+d_0)^2}." %}
## Face sorting {#face-sorting} {% include heading.html text="Face sorting" hash="face-sorting" %}
When creating a cube, we set the vertices of each face clockwise. When obtaining a projection, we When creating a cube, we set the vertices of each face clockwise. When obtaining a projection, we
substitute three consecutive vertices into the equation of a line, to determine the tilt of the substitute three consecutive vertices into the equation of a line, to determine the tilt of the
@ -149,7 +149,7 @@ face and its remoteness from the projection plane.
{% include image_svg.html src="/img/linear-equation.svg" style="width: 137.171pt; height: 35.3194pt;" {% include image_svg.html src="/img/linear-equation.svg" style="width: 137.171pt; height: 35.3194pt;"
alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %} alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %}
## Algorithm description {#algorithm-description} {% include heading.html text="Algorithm description" hash="algorithm-description" %}
First, we bypass the vertices of the cube and rotate them by an angle relative to the center point. Then First, we bypass the vertices of the cube and rotate them by an angle relative to the center point. Then
we bypass the faces of the cube and get projections of the vertices included in them. After that, we sort we bypass the faces of the cube and get projections of the vertices included in them. After that, we sort
@ -160,7 +160,7 @@ the far faces can be seen through the near ones.
At each step of displaying the figure, we repeat the sorting of the faces by remoteness, since At each step of displaying the figure, we repeat the sorting of the faces by remoteness, since
with a change in the angle of rotation, the coordinates shift, and the near faces become far. with a change in the angle of rotation, the coordinates shift, and the near faces become far.
## Implementation in JavaScript {#implementation-in-javascript} {% include heading.html text="Implementation in JavaScript" hash="implementation-in-javascript" %}
{% include classes-point-cube-en.md -%} {% include classes-point-cube-en.md -%}

10
jekyll_site/en/2023/01/16/spinning-spatial-cross.md
View file

@ -21,7 +21,7 @@ consider the difference.
Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volumetric-tetris.html' | relative_url }}). Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volumetric-tetris.html' | relative_url }}).
## Spatial cross {#spatial-cross} {% include heading.html text="Spatial cross" hash="spatial-cross" %}
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"> <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<div style="display: flex; flex-direction: column; padding-right: 8px;"> <div style="display: flex; flex-direction: column; padding-right: 8px;">
@ -38,7 +38,7 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
</div> </div>
</div> </div>
## Cross-cube {#cross-cube} {% include heading.html text="Cross-cube" hash="cross-cube" %}
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"> <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<div style="display: flex; flex-direction: column; padding-right: 8px;"> <div style="display: flex; flex-direction: column; padding-right: 8px;">
@ -59,7 +59,7 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
*Perspective projection* — the cubes look shrinking in the distance. *Perspective projection* — the cubes look shrinking in the distance.
## Experimental model {#experimental-model} {% include heading.html text="Experimental model" hash="experimental-model" %}
Slightly complicated version from the previous example — now there are a lot of cubes. In addition to the Slightly complicated version from the previous example — now there are a lot of cubes. In addition to the
previous settings there can be changed: figure variant — *spatial cross* or *cross-cube*, face sorting previous settings there can be changed: figure variant — *spatial cross* or *cross-cube*, face sorting
@ -135,7 +135,7 @@ direction — *linear perspective* or *reverse perspective* and transparency of
</form> </form>
</div> </div>
## Algorithm description {#algorithm-description} {% include heading.html text="Algorithm description" hash="algorithm-description" %}
We prepare a matrix of zeros and ones, where one means a cube in a certain place of the figure. Then we We prepare a matrix of zeros and ones, where one means a cube in a certain place of the figure. Then we
bypass this matrix and fill in the array of cubes with the corresponding coordinates of the vertices. After bypass this matrix and fill in the array of cubes with the corresponding coordinates of the vertices. After
@ -145,7 +145,7 @@ this array and throw away the same pairs from it — these are the adjacent wall
inside the figure. After that we draw cube faces with a translucent color — first the distant and then the inside the figure. After that we draw cube faces with a translucent color — first the distant and then the
near ones, so that the distant faces can be seen through the near ones. near ones, so that the distant faces can be seen through the near ones.
## Implementation in JavaScript {#implementation-in-javascript} {% include heading.html text="Implementation in JavaScript" hash="implementation-in-javascript" %}
{% include classes-point-cube-en.md -%} {% include classes-point-cube-en.md -%}

9
jekyll_site/en/2023/01/22/volumetric-tetris.md
View file

@ -19,7 +19,7 @@ is two-dimensional.
Description of graphics algorithm: [Spinning cube in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }}). Description of graphics algorithm: [Spinning cube in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }}).
## Experimental interface {#experimental-interface} {% include heading.html text="Experimental interface" hash="experimental-interface" %}
Turned off by default — you can just play Tetris. In addition to the flat version, two volumetric variants Turned off by default — you can just play Tetris. In addition to the flat version, two volumetric variants
are added: *parallel projection* and *perspective projection* — parameters for each of them can be changed. are added: *parallel projection* and *perspective projection* — parameters for each of them can be changed.
@ -31,12 +31,13 @@ point for rotations — is the central lower far point of the field. For all var
of the cube — 32, the size of the square — 30 and the indent — 2. The origin of coordinates is located at of the cube — 32, the size of the square — 30 and the indent — 2. The origin of coordinates is located at
the upper left point, the axes are directed: `X` to the right, `Y` downwards and `Z` to the distance. the upper left point, the axes are directed: `X` to the right, `Y` downwards and `Z` to the distance.
*Usage example:* start the game, collect a certain number of figures on the field, then pause the game, and *Usage example:* start the game, collect a certain number of figures on the field, then pause the game,
switch between the variants of the three-dimensional image, rotate the field with figures, change the settings. and switch between the variants of the three-dimensional image, rotate the field with figures, change
the settings and so on.
{% include volumetric-tetris-en.html -%} {% include volumetric-tetris-en.html -%}
## Gaming process {#gaming-process} {% include heading.html text="Gaming process" hash="gaming-process" %}
Controls: keyboard buttons with arrows — right, left, up, down and the button `pause`. Controls: keyboard buttons with arrows — right, left, up, down and the button `pause`.

16
jekyll_site/ru/2023/01/05/spinning-square-on-plane.md
View file

@ -15,7 +15,7 @@ date: 2023.01.05
Развитие мысли, объёмная модель: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}). Развитие мысли, объёмная модель: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}).
### Поворот точки на плоскости {#point-rotation-on-plane} {% include heading.html text="Поворот точки на плоскости" hash="point-rotation-on-plane" type="3" %}
Рассчитываем координаты новой точки по формулам матрицы поворота для двухмерного пространства. Рассчитываем координаты новой точки по формулам матрицы поворота для двухмерного пространства.
Поворачиваем точку `t` относительно точки `t0` — получаем точку `t'`. Поворачиваем точку `t` относительно точки `t0` — получаем точку `t'`.
@ -23,14 +23,14 @@ date: 2023.01.05
{% include image_svg.html src="/img/column-vector2d.svg" style="width: 246.793pt; height: 37.2836pt;" {% include image_svg.html src="/img/column-vector2d.svg" style="width: 246.793pt; height: 37.2836pt;"
alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi.&\\" %} alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi.&\\" %}
### Описание алгоритма {#algorithm-description} {% include heading.html text="Описание алгоритма" hash="algorithm-description" type="3" %}
Начало координат находится в верхнем левом углу, координатные оси направлены вправо и вниз. Центральная точка Начало координат находится в верхнем левом углу, координатные оси направлены вправо и вниз. Центральная точка
для поворотов `t0` расположена в центре фигуры. Квадрат — это массив из четырёх точек-вершин. Обходим массив для поворотов `t0` расположена в центре фигуры. Квадрат — это массив из четырёх точек-вершин. Обходим массив
точек, поворачиваем каждую из них на угол, затем соединяем точки линиями и рисуем линии на холсте. Обновляем точек, поворачиваем каждую из них на угол, затем соединяем точки линиями и рисуем линии на холсте. Обновляем
картинку с частотой 20 кадров в секунду. картинку с частотой 20 кадров в секунду.
### Реализация {#implementation} {% include heading.html text="Реализация" hash="implementation" type="3" %}
<div> <div>
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
@ -38,7 +38,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y
</canvas> </canvas>
</div> </div>
### HTML {#html1} {% include heading.html text="HTML" hash="html1" type="3" %}
```html ```html
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
@ -46,7 +46,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y
</canvas> </canvas>
``` ```
### JavaScript {#javascript1} {% include heading.html text="JavaScript" hash="javascript1" type="3" %}
```js ```js
'use strict'; 'use strict';
@ -106,7 +106,7 @@ function drawFigure(canvas, arr) {
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50)); document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
``` ```
## Вращение в обратную сторону {#spinning-backwards} {% include heading.html text="Вращение в обратную сторону" hash="spinning-backwards" %}
Добавим ещё одну точку, которую будем вращать в обратную сторону. Точка удалена от центра фигуры на Добавим ещё одну точку, которую будем вращать в обратную сторону. Точка удалена от центра фигуры на
четверть длины стороны квадрата. Сместим центр квадрата в эту точку — сдвинем массив его вершин. Сам четверть длины стороны квадрата. Сместим центр квадрата в эту точку — сдвинем массив его вершин. Сам
@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
</canvas> </canvas>
</div> </div>
### HTML {#html2} {% include heading.html text="HTML" hash="html2" type="3" %}
```html ```html
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
@ -127,7 +127,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
</canvas> </canvas>
``` ```
### JavaScript {#javascript2} {% include heading.html text="JavaScript" hash="javascript2" type="3" %}
```js ```js
'use strict'; 'use strict';

12
jekyll_site/ru/2023/01/10/spinning-cube-in-space.md
View file

@ -41,7 +41,7 @@ date: 2023.01.10
*Перспективная проекция* — параллельные линии сходятся в центре перспективы, предметы выглядят *Перспективная проекция* — параллельные линии сходятся в центре перспективы, предметы выглядят
уменьшающимися вдалеке. уменьшающимися вдалеке.
## Экспериментальная модель {#experimental-model} {% include heading.html text="Экспериментальная модель" hash="experimental-model" %}
Размер куба 200, размер холста 300, начало координат находится в верхнем левом углу. Центр фигуры Размер куба 200, размер холста 300, начало координат находится в верхнем левом углу. Центр фигуры
в середине холста. Ось `X` направлена вправо, ось `Y` направлена вниз, ось `Z` направлена вдаль. в середине холста. Ось `X` направлена вправо, ось `Y` направлена вниз, ось `Z` направлена вдаль.
@ -96,7 +96,7 @@ date: 2023.01.10
</div> </div>
</form> </form>
## Поворот точки в пространстве {#point-rotation-in-space} {% include heading.html text="Поворот точки в пространстве" hash="point-rotation-in-space" %}
Рассчитываем новые координаты точки по формулам матрицы поворота для трёхмерного пространства. Рассчитываем новые координаты точки по формулам матрицы поворота для трёхмерного пространства.
Поворачиваем точку `t` относительно точки `t0` — получаем точку `t'`. Поворачиваем точку `t` относительно точки `t0` — получаем точку `t'`.
@ -116,7 +116,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(z-z_0)sin\varphi,&\\&y'=y,&\\&z'=z_0+(x-x_0)sin\
{% include image_svg.html src="/img/column-vector3dz.svg" style="width: 246.793pt; height: 55.4753pt;" {% include image_svg.html src="/img/column-vector3dz.svg" style="width: 246.793pt; height: 55.4753pt;"
alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi,&\\&z'=z.&\\" %} alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y-y_0)cos\varphi,&\\&z'=z.&\\" %}
## Проекция точки {#point-projection} {% include heading.html text="Проекция точки" hash="point-projection" %}
Экспериментальные формулы с возможностью смещения центра проекции `d0` на экране наблюдателя `tv`. Экспериментальные формулы с возможностью смещения центра проекции `d0` на экране наблюдателя `tv`.
Отображаем точку пространства `t` на плоскость экрана — получаем точку `t'`. Отображаем точку пространства `t` на плоскость экрана — получаем точку `t'`.
@ -136,7 +136,7 @@ alt="&x'=x_v+d_0\cdot(x-x_v)/(z-z_v+d_0),&\\&y'=y_v+d_0\cdot(y-y_v)/(z-z_v+d_0).
{% include image_svg.html src="/img/euclidean-distance.svg" style="width: 319.911pt; height: 17.9328pt;" {% include image_svg.html src="/img/euclidean-distance.svg" style="width: 319.911pt; height: 17.9328pt;"
alt="d(t,d_0)=\sqrt{(x-x_v)^2+(y-y_v)^2+(z-z_v+d_0)^2}." %} alt="d(t,d_0)=\sqrt{(x-x_v)^2+(y-y_v)^2+(z-z_v+d_0)^2}." %}
## Сортировка граней {#face-sorting} {% include heading.html text="Сортировка граней" hash="face-sorting" %}
При создании кубика, вершины каждой грани задаём по часовой стрелке. При получении проекции, подставляем При создании кубика, вершины каждой грани задаём по часовой стрелке. При получении проекции, подставляем
в уравнение прямой три подряд идущие вершины, чтобы определить наклон грани и удалённость её от плоскости в уравнение прямой три подряд идущие вершины, чтобы определить наклон грани и удалённость её от плоскости
@ -147,7 +147,7 @@ alt="d(t,d_0)=\sqrt{(x-x_v)^2+(y-y_v)^2+(z-z_v+d_0)^2}." %}
{% include image_svg.html src="/img/linear-equation.svg" style="width: 137.171pt; height: 35.3194pt;" {% include image_svg.html src="/img/linear-equation.svg" style="width: 137.171pt; height: 35.3194pt;"
alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %} alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %}
## Описание алгоритма {#algorithm-description} {% include heading.html text="Описание алгоритма" hash="algorithm-description" %}
Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани
куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем
@ -157,7 +157,7 @@ alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %}
На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением
угла поворота, координаты смещаются, и ближние грани становятся дальними. угла поворота, координаты смещаются, и ближние грани становятся дальними.
## Реализация на JavaScript {#implementation-in-javascript} {% include heading.html text="Реализация на JavaScript" hash="implementation-in-javascript" %}
{% include classes-point-cube-ru.md -%} {% include classes-point-cube-ru.md -%}

10
jekyll_site/ru/2023/01/15/spinning-spatial-cross.md
View file

@ -18,7 +18,7 @@ date: 2023.01.15
Тестирование экспериментального интерфейса: [Объёмный тетрис]({{ '/ru/2023/01/21/volumetric-tetris.html' | relative_url }}). Тестирование экспериментального интерфейса: [Объёмный тетрис]({{ '/ru/2023/01/21/volumetric-tetris.html' | relative_url }}).
## Пространственный крест {#spatial-cross} {% include heading.html text="Пространственный крест" hash="spatial-cross" %}
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"> <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<div style="display: flex; flex-direction: column; padding-right: 8px;"> <div style="display: flex; flex-direction: column; padding-right: 8px;">
@ -35,7 +35,7 @@ date: 2023.01.15
</div> </div>
</div> </div>
## Крест-куб {#cross-cube} {% include heading.html text="Крест-куб" hash="cross-cube" %}
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"> <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<div style="display: flex; flex-direction: column; padding-right: 8px;"> <div style="display: flex; flex-direction: column; padding-right: 8px;">
@ -56,7 +56,7 @@ date: 2023.01.15
*Перспективная проекция* — кубики выглядят уменьшающимися вдалеке. *Перспективная проекция* — кубики выглядят уменьшающимися вдалеке.
## Экспериментальная модель {#experimental-model} {% include heading.html text="Экспериментальная модель" hash="experimental-model" %}
Слегка усложнённая версия из предыдущего примера — теперь кубиков много. В дополнение к предыдущим настройкам Слегка усложнённая версия из предыдущего примера — теперь кубиков много. В дополнение к предыдущим настройкам
можно поменять: вариант фигуры — *пространственный крест* или *крест-куб*, направление сортировки граней можно поменять: вариант фигуры — *пространственный крест* или *крест-куб*, направление сортировки граней
@ -132,7 +132,7 @@ date: 2023.01.15
</form> </form>
</div> </div>
## Описание алгоритма {#algorithm-description} {% include heading.html text="Описание алгоритма" hash="algorithm-description" %}
Подготавливаем матрицу из нулей и единиц, где единица означает кубик в определенном месте фигуры. Затем Подготавливаем матрицу из нулей и единиц, где единица означает кубик в определенном месте фигуры. Затем
обходим эту матрицу и заполняем массив кубиков с соответствующими координатами вершин. После этого запускаем обходим эту матрицу и заполняем массив кубиков с соответствующими координатами вершин. После этого запускаем
@ -141,7 +141,7 @@ date: 2023.01.15
пары — это есть смежные стенки между соседними кубиками внутри фигуры. После этого полупрозрачным цветом рисуем пары — это есть смежные стенки между соседними кубиками внутри фигуры. После этого полупрозрачным цветом рисуем
грани кубиков — сначала дальние и затем ближние, чтобы через ближние грани было видно дальние. грани кубиков — сначала дальние и затем ближние, чтобы через ближние грани было видно дальние.
## Реализация на JavaScript {#implementation-in-javascript} {% include heading.html text="Реализация на JavaScript" hash="implementation-in-javascript" %}
{% include classes-point-cube-ru.md -%} {% include classes-point-cube-ru.md -%}

9
jekyll_site/ru/2023/01/21/volumetric-tetris.md
View file

@ -17,7 +17,7 @@ date: 2023.01.21
Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}). Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}).
## Экспериментальный интерфейс {#experimental-interface} {% include heading.html text="Экспериментальный интерфейс" hash="experimental-interface" %}
По умолчанию выключен — можно просто играть в тетрис. В дополнение к плоской версии добавлены два объёмных По умолчанию выключен — можно просто играть в тетрис. В дополнение к плоской версии добавлены два объёмных
варианта: *параллельная проекция* и *перспективная проекция* — параметры для каждого из них можно изменять. варианта: *параллельная проекция* и *перспективная проекция* — параметры для каждого из них можно изменять.
@ -28,12 +28,13 @@ date: 2023.01.21
точка поля. Для всех вариантов изображения: размер кубика — 32, размер квадратика — 30 и отступ — 2. точка поля. Для всех вариантов изображения: размер кубика — 32, размер квадратика — 30 и отступ — 2.
Начало координат расположено в верхней левой точке, оси направлены: `X` вправо, `Y` вниз и `Z` вдаль. Начало координат расположено в верхней левой точке, оси направлены: `X` вправо, `Y` вниз и `Z` вдаль.
*Пример использования:* начинаем игру, набираем какое-то количество фигур на поле, затем ставим игру на паузу, *Пример использования:* начинаем игру, набираем какое-то количество фигур на поле, затем ставим игру на
и переключаемся между вариантами объёмного изображения, поворачиваем поле с фигурами, изменяем настройки. паузу, и переключаемся между вариантами объёмного изображения, поворачиваем поле с фигурами, изменяем
настройки и так далее.
{% include volumetric-tetris-ru.html -%} {% include volumetric-tetris-ru.html -%}
## Игровой процесс {#gaming-process} {% include heading.html text="Игровой процесс" hash="gaming-process" %}
Управление: кнопки на клавиатуре со стрелками — вправо, влево, вверх, вниз и кнопка пауза `pause`. Управление: кнопки на клавиатуре со стрелками — вправо, влево, вверх, вниз и кнопка пауза `pause`.