2023-09-30
This commit is contained in:
parent
cec485ec9f
commit
fb49164b15
10 changed files with 52 additions and 50 deletions
|
|
@ -7,9 +7,9 @@ url: "https://pomodoro1.mircloud.ru"
|
|||
# подпапка этой сборки для относительных URLs
|
||||
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: ""
|
||||
# часовой пояс для формата даты ISO-8601
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ url: "https://pomodoro1.mircloud.ru"
|
|||
# подпапка этой сборки для относительных URLs
|
||||
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"
|
||||
# часовой пояс для формата даты ISO-8601
|
||||
|
|
|
|||
|
|
@ -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 }}).
|
||||
|
||||
### 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
|
||||
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;"
|
||||
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
|
||||
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.
|
||||
|
||||
### Implementation {#implementation}
|
||||
{% include heading.html text="Implementation" hash="implementation" type="3" %}
|
||||
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
### HTML {#html1}
|
||||
{% include heading.html text="HTML" hash="html1" type="3" %}
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
### JavaScript {#javascript1}
|
||||
{% include heading.html text="JavaScript" hash="javascript1" type="3" %}
|
||||
|
||||
```js
|
||||
'use strict';
|
||||
|
|
@ -107,7 +107,7 @@ function drawFigure(canvas, arr) {
|
|||
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
|
||||
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>
|
||||
</div>
|
||||
|
||||
### HTML {#html2}
|
||||
{% include heading.html text="HTML" hash="html2" type="3" %}
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
### JavaScript {#javascript2}
|
||||
{% include heading.html text="JavaScript" hash="javascript2" type="3" %}
|
||||
|
||||
```js
|
||||
'use strict';
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ dimensions of the objects look the same.
|
|||
*Perspective projection* — parallel lines converge in the center of the perspective,
|
||||
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
|
||||
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>
|
||||
</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
|
||||
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;"
|
||||
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
|
||||
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;"
|
||||
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
|
||||
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;"
|
||||
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
|
||||
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
|
||||
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 -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ consider the difference.
|
|||
|
||||
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: column; padding-right: 8px;">
|
||||
|
|
@ -38,7 +38,7 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
|
|||
</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: 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.
|
||||
|
||||
## 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
|
||||
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>
|
||||
</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
|
||||
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
|
||||
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 -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}).
|
||||
|
||||
## 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
|
||||
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
|
||||
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
|
||||
switch between the variants of the three-dimensional image, rotate the field with figures, change the settings.
|
||||
*Usage example:* start the game, collect a certain number of figures on the field, then pause the game,
|
||||
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 -%}
|
||||
|
||||
## 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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ date: 2023.01.05
|
|||
|
||||
Развитие мысли, объёмная модель: [Вращаем куб в пространстве]({{ '/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'`.
|
||||
|
|
@ -23,14 +23,14 @@ date: 2023.01.05
|
|||
{% 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.&\\" %}
|
||||
|
||||
### Описание алгоритма {#algorithm-description}
|
||||
{% include heading.html text="Описание алгоритма" hash="algorithm-description" type="3" %}
|
||||
|
||||
Начало координат находится в верхнем левом углу, координатные оси направлены вправо и вниз. Центральная точка
|
||||
для поворотов `t0` расположена в центре фигуры. Квадрат — это массив из четырёх точек-вершин. Обходим массив
|
||||
точек, поворачиваем каждую из них на угол, затем соединяем точки линиями и рисуем линии на холсте. Обновляем
|
||||
картинку с частотой 20 кадров в секунду.
|
||||
|
||||
### Реализация {#implementation}
|
||||
{% include heading.html text="Реализация" hash="implementation" type="3" %}
|
||||
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
### HTML {#html1}
|
||||
{% include heading.html text="HTML" hash="html1" type="3" %}
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
### JavaScript {#javascript1}
|
||||
{% include heading.html text="JavaScript" hash="javascript1" type="3" %}
|
||||
|
||||
```js
|
||||
'use strict';
|
||||
|
|
@ -106,7 +106,7 @@ function drawFigure(canvas, arr) {
|
|||
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>
|
||||
</div>
|
||||
|
||||
### HTML {#html2}
|
||||
{% include heading.html text="HTML" hash="html2" type="3" %}
|
||||
|
||||
```html
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
|
|
@ -127,7 +127,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
|||
</canvas>
|
||||
```
|
||||
|
||||
### JavaScript {#javascript2}
|
||||
{% include heading.html text="JavaScript" hash="javascript2" type="3" %}
|
||||
|
||||
```js
|
||||
'use strict';
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ date: 2023.01.10
|
|||
*Перспективная проекция* — параллельные линии сходятся в центре перспективы, предметы выглядят
|
||||
уменьшающимися вдалеке.
|
||||
|
||||
## Экспериментальная модель {#experimental-model}
|
||||
{% include heading.html text="Экспериментальная модель" hash="experimental-model" %}
|
||||
|
||||
Размер куба 200, размер холста 300, начало координат находится в верхнем левом углу. Центр фигуры
|
||||
в середине холста. Ось `X` направлена вправо, ось `Y` направлена вниз, ось `Z` направлена вдаль.
|
||||
|
|
@ -96,7 +96,7 @@ date: 2023.01.10
|
|||
</div>
|
||||
</form>
|
||||
|
||||
## Поворот точки в пространстве {#point-rotation-in-space}
|
||||
{% include heading.html text="Поворот точки в пространстве" hash="point-rotation-in-space" %}
|
||||
|
||||
Рассчитываем новые координаты точки по формулам матрицы поворота для трёхмерного пространства.
|
||||
Поворачиваем точку `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;"
|
||||
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`.
|
||||
Отображаем точку пространства `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;"
|
||||
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;"
|
||||
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 -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ date: 2023.01.15
|
|||
|
||||
Тестирование экспериментального интерфейса: [Объёмный тетрис]({{ '/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: column; padding-right: 8px;">
|
||||
|
|
@ -35,7 +35,7 @@ date: 2023.01.15
|
|||
</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: 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>
|
||||
</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 -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ date: 2023.01.21
|
|||
|
||||
Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/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.
|
||||
Начало координат расположено в верхней левой точке, оси направлены: `X` вправо, `Y` вниз и `Z` вдаль.
|
||||
|
||||
*Пример использования:* начинаем игру, набираем какое-то количество фигур на поле, затем ставим игру на паузу,
|
||||
и переключаемся между вариантами объёмного изображения, поворачиваем поле с фигурами, изменяем настройки.
|
||||
*Пример использования:* начинаем игру, набираем какое-то количество фигур на поле, затем ставим игру на
|
||||
паузу, и переключаемся между вариантами объёмного изображения, поворачиваем поле с фигурами, изменяем
|
||||
настройки и так далее.
|
||||
|
||||
{% include volumetric-tetris-ru.html -%}
|
||||
|
||||
## Игровой процесс {#gaming-process}
|
||||
{% include heading.html text="Игровой процесс" hash="gaming-process" %}
|
||||
|
||||
Управление: кнопки на клавиатуре со стрелками — вправо, влево, вверх, вниз и кнопка пауза `pause`.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue