2023-10-31
This commit is contained in:
parent
fb49164b15
commit
f2e0e0f461
12 changed files with 90 additions and 86 deletions
|
@ -17,12 +17,12 @@
|
|||
<div style="display: flex; flex-direction: row; align-items: start; flex-wrap: wrap;">
|
||||
<div style="padding: 0 8px 8px 0;">
|
||||
<canvas id="container">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="padding: 0 8px 8px 0;">
|
||||
<canvas id="next">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: start;">
|
||||
|
|
|
@ -17,12 +17,12 @@
|
|||
<div style="display: flex; flex-direction: row; align-items: start; flex-wrap: wrap;">
|
||||
<div style="padding: 0 8px 8px 0;">
|
||||
<canvas id="container">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="padding: 0 8px 8px 0;">
|
||||
<canvas id="next">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: start;">
|
||||
|
|
|
@ -35,7 +35,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20
|
|||
|
||||
<div>
|
||||
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
|
@ -43,7 +43,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20
|
|||
|
||||
```html
|
||||
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
```
|
||||
|
||||
|
@ -116,7 +116,7 @@ central point — counterclockwise. This code works in conjunction with the prev
|
|||
|
||||
<div>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
|
@ -124,7 +124,7 @@ central point — counterclockwise. This code works in conjunction with the prev
|
|||
|
||||
```html
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
```
|
||||
|
||||
|
|
|
@ -25,13 +25,13 @@ Complicated model, many cubes: [Spinning spatial cross]({{ '/en/2023/01/16/spinn
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Parallel projection</span>
|
||||
<canvas id="canvas1" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Perspective projection</span>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -53,7 +53,7 @@ center onto the observer screen.
|
|||
|
||||
<div>
|
||||
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<form>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Spinning spatial cross
|
||||
description: 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...
|
||||
description: 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...
|
||||
sections: [Volumetric figures,Rotation matrix,Experimental model]
|
||||
tags: [javascript,online,canvas,geometry,matrix,graphics,image,picture,square,cube]
|
||||
scripts: [/js/classes-point-cube.js,/js/spinning-spatial-cross.js,/js/spinning-spatial-cross2.js]
|
||||
|
@ -12,12 +12,12 @@ date: 2023.01.16
|
|||
lang: en
|
||||
---
|
||||
|
||||
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
|
||||
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]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }})
|
||||
— 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.
|
||||
— 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.
|
||||
|
||||
Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volumetric-tetris.html' | relative_url }}).
|
||||
|
||||
|
@ -27,13 +27,13 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Parallel projection</span>
|
||||
<canvas id="canvas1" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Perspective projection</span>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -44,13 +44,13 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Parallel projection</span>
|
||||
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Perspective projection</span>
|
||||
<canvas id="canvas4" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@ direction — *linear perspective* or *reverse perspective* and transparency of
|
|||
|
||||
<div>
|
||||
<canvas id="canvas5" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Your browser does not support Canvas</p>
|
||||
<p>Canvas for displaying computations results</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: Volumetric tetris
|
||||
description: 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...
|
||||
description: 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...
|
||||
sections: [Logical game,Experimental interface]
|
||||
tags: [javascript,online,canvas,game,puzzle,geometry,matrix,graphics,square,cube,3d,three-dimensional]
|
||||
tags: [javascript,online,canvas,game,classic,puzzle,geometry,matrix,graphics,square,cube,3d,three-dimensional]
|
||||
scripts: [/js/classes-point-cube.js,/js/tetris-figures.js,/js/tetris-model.js,/js/tetris-controller.js,/js/tetris-view.js]
|
||||
styles: [/css/pomodoro1.css]
|
||||
canonical_url: /en/2023/01/22/volumetric-tetris.html
|
||||
|
@ -12,17 +12,17 @@ date: 2023.01.22
|
|||
lang: en
|
||||
---
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
Description of graphics algorithm: [Spinning cube in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }}).
|
||||
|
||||
{% 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.
|
||||
Turned off by default — you can just play Tetris. In addition to the two-dimensional version, two volumetric variants
|
||||
are added — *parallel projection* and *perspective projection* — parameters for each of them can be changed.
|
||||
For perspective projection: you can change the position of the observer screen and the remoteness of the
|
||||
projection source. The observer looks at the center of the image, and the center of the projection is remote
|
||||
at a distance, comparable to the size of the playing field. For parallel projection: you can change the
|
||||
|
@ -31,22 +31,22 @@ 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 and so on.
|
||||
<b>Testing:</b> start the game, collect a certain number of figures on the field, pause the game, and
|
||||
then switch the variants of the three-dimensional image, rotate the field with figures, change the
|
||||
transparency, move the central point and so on.
|
||||
|
||||
<b>Controls:</b> keyboard buttons with arrows — right, left, up, down and the button `pause`.
|
||||
|
||||
{% include volumetric-tetris-en.html -%}
|
||||
|
||||
{% include heading.html text="Gaming process" hash="gaming-process" %}
|
||||
|
||||
Controls: keyboard buttons with arrows — right, left, up, down and the button `pause`.
|
||||
|
||||
Game points are awarded for fully collected rows of the elements of the figures. The number of points scored
|
||||
depends on the number of rows collected, 10 points for each row if there are 10 cubes in a row, and multiply
|
||||
increases, if collected at the same time: 2 lines — by 3 times, 3 lines — by 5 times, 4 lines — by 10 times.
|
||||
|
||||
Game feature: the collected lines first blink and then disappear, while the gaming process is not suspended
|
||||
for this time — the current figure continues to fall.
|
||||
<b>Game feature:</b> the collected lines first blink and then disappear, while the
|
||||
gaming process is not suspended for this time — the current figure continues to fall.
|
||||
|
||||
Level increases when collecting 10 completed rows, that is 100 points, if there are 10 cubes in a row. At each
|
||||
new level, the speed of the figures increases and reaches its maximum at level 21. In snail mode, the speed
|
||||
|
|
|
@ -12,18 +12,19 @@ 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.
|
||||
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.
|
||||
{%- 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.
|
||||
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.
|
||||
{%- endcapture %}
|
||||
{%- assign articles = articles | push: article_brief %}
|
||||
{%- assign articles = articles | push: "Spinning cube in space" %}
|
||||
|
|
|
@ -34,7 +34,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y
|
|||
|
||||
<div>
|
||||
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
|
@ -42,7 +42,7 @@ alt="&x'=x_0+(x-x_0)cos\varphi-(y-y_0)sin\varphi,&\\&y'=y_0+(x-x_0)sin\varphi+(y
|
|||
|
||||
```html
|
||||
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
```
|
||||
|
||||
|
@ -115,7 +115,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
|||
|
||||
<div>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
|
@ -123,7 +123,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
|||
|
||||
```html
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
```
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Вращаем куб в пространстве
|
||||
description: Рассматриваем разницу между параллельной и перспективной проекцией. Обе широко используются на практике для различных целей. В предыдущем примере мы вращали...
|
||||
description: Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике для различных целей. В предыдущем примере мы вращали...
|
||||
sections: [Линейная перспектива,Матрица поворота,Экспериментальная модель]
|
||||
tags: [javascript,онлайн,canvas,геометрия,графика,изображение,картинка,квадрат,куб]
|
||||
scripts: [/js/classes-point-cube.js,/js/spinning-cube.js,/js/spinning-cube2.js]
|
||||
|
@ -11,8 +11,8 @@ title_translated: Spinning cube in space
|
|||
date: 2023.01.10
|
||||
---
|
||||
|
||||
Рассматриваем разницу между параллельной и перспективной проекцией. Обе
|
||||
широко используются на практике для различных целей. В предыдущем примере мы
|
||||
Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко
|
||||
используются на практике для различных целей. В предыдущем примере мы
|
||||
[вращали квадрат на плоскости]({{ '/ru/2023/01/05/spinning-square-on-plane.html' | relative_url }})
|
||||
— переходим в трёхмерное пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного
|
||||
объекта, нужно сначала создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать
|
||||
|
@ -24,13 +24,13 @@ date: 2023.01.10
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Параллельная проекция</span>
|
||||
<canvas id="canvas1" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Перспективная проекция</span>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -51,7 +51,7 @@ date: 2023.01.10
|
|||
|
||||
<div>
|
||||
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<form>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Вращаем пространственный крест
|
||||
description: Пишем алгоритм для поворота объёмной фигуры на угол вокруг своего центра по всем трём осям сразу. В предыдущем примере мы вращали куб в пространстве...
|
||||
description: Пишем алгоритм для поворота объёмной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем примере мы вращали куб в пространстве — в этом...
|
||||
sections: [Объёмные фигуры,Матрица поворота,Экспериментальная модель]
|
||||
tags: [javascript,онлайн,canvas,геометрия,матрица,графика,изображение,картинка,квадрат,куб]
|
||||
scripts: [/js/classes-point-cube.js,/js/spinning-spatial-cross.js,/js/spinning-spatial-cross2.js]
|
||||
|
@ -11,10 +11,11 @@ title_translated: Spinning spatial cross
|
|||
date: 2023.01.15
|
||||
---
|
||||
|
||||
Пишем алгоритм для поворота объёмной фигуры на угол вокруг своего центра по всем трём осям сразу. В предыдущем
|
||||
Пишем алгоритм для поворота объёмной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем
|
||||
примере мы [вращали куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }})
|
||||
— теперь кубиков будет много, алгоритм будет почти такой же и формулы будем использовать те же. Рисуем два
|
||||
варианта фигуры: *пространственный крест* и *крест-куб* в двух типах проекций, рассматриваем разницу.
|
||||
— в этом примере кубиков будет много, алгоритм будет почти такой же, и формулы будем использовать те же. Для
|
||||
наглядности возьмём два варианта симметричной объёмной фигуры в двух типах проекций — *пространственный крест*
|
||||
и *крест-куб* — рассматриваем разницу между ними.
|
||||
|
||||
Тестирование экспериментального интерфейса: [Объёмный тетрис]({{ '/ru/2023/01/21/volumetric-tetris.html' | relative_url }}).
|
||||
|
||||
|
@ -24,13 +25,13 @@ date: 2023.01.15
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Параллельная проекция</span>
|
||||
<canvas id="canvas1" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Перспективная проекция</span>
|
||||
<canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,13 +42,13 @@ date: 2023.01.15
|
|||
<div style="display: flex; flex-direction: column; padding-right: 8px;">
|
||||
<span>Параллельная проекция</span>
|
||||
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>Перспективная проекция</span>
|
||||
<canvas id="canvas4" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -64,7 +65,7 @@ date: 2023.01.15
|
|||
|
||||
<div>
|
||||
<canvas id="canvas5" width="300" height="300" style="border: 1px solid gray;">
|
||||
<p>Ваш браузер не поддерживает Canvas</p>
|
||||
<p>Холст для отображения результатов вычислений</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: Объёмный тетрис
|
||||
description: Общеобразовательная игра в широком смысле этого слова. При изучении языков программирования рекомендуется сначала написать свою версию и потом использовать...
|
||||
description: Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования рекомендуется сначала написать свою версию и потом...
|
||||
sections: [Логическая игра,Экспериментальный интерфейс]
|
||||
tags: [javascript,онлайн,canvas,игра,головоломка,геометрия,матрица,графика,квадрат,куб,3d,трёхмерный]
|
||||
tags: [javascript,онлайн,canvas,игра,классика,головоломка,геометрия,матрица,графика,квадрат,куб,3д,трёхмерный]
|
||||
scripts: [/js/classes-point-cube.js,/js/tetris-figures.js,/js/tetris-model.js,/js/tetris-controller.js,/js/tetris-view.js]
|
||||
styles: [/css/pomodoro1.css]
|
||||
canonical_url: /ru/2023/01/21/volumetric-tetris.html
|
||||
|
@ -11,16 +11,17 @@ title_translated: Volumetric tetris
|
|||
date: 2023.01.21
|
||||
---
|
||||
|
||||
Общеобразовательная игра в широком смысле этого слова. При изучении языков программирования рекомендуется
|
||||
сначала написать свою версию и потом использовать её для демонстрации и тестирования другого программного
|
||||
обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas — логика самой игры двухмерная.
|
||||
Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования
|
||||
рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования
|
||||
другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas
|
||||
— логика самой игры двухмерная.
|
||||
|
||||
Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}).
|
||||
|
||||
{% include heading.html text="Экспериментальный интерфейс" hash="experimental-interface" %}
|
||||
|
||||
По умолчанию выключен — можно просто играть в тетрис. В дополнение к плоской версии добавлены два объёмных
|
||||
варианта: *параллельная проекция* и *перспективная проекция* — параметры для каждого из них можно изменять.
|
||||
По умолчанию выключен — можно просто играть в тетрис. В дополнение к двухмерной версии добавлены два объёмных
|
||||
варианта — *параллельная проекция* и *перспективная проекция* — параметры для каждого из них можно изменять.
|
||||
Для перспективной проекции: можно изменять положение экрана наблюдателя и удалённость источника проекции.
|
||||
Наблюдатель смотрит в центр изображения, а центр проекции удалён на расстояние, сопоставимое с размерами
|
||||
игрового поля. Для параллельной проекции: можно изменять вертикальное положение. Для обеих проекций: можно
|
||||
|
@ -28,22 +29,22 @@ date: 2023.01.21
|
|||
точка поля. Для всех вариантов изображения: размер кубика — 32, размер квадратика — 30 и отступ — 2.
|
||||
Начало координат расположено в верхней левой точке, оси направлены: `X` вправо, `Y` вниз и `Z` вдаль.
|
||||
|
||||
*Пример использования:* начинаем игру, набираем какое-то количество фигур на поле, затем ставим игру на
|
||||
паузу, и переключаемся между вариантами объёмного изображения, поворачиваем поле с фигурами, изменяем
|
||||
настройки и так далее.
|
||||
<b>Тестирование:</b> начинаем игру, набираем некоторое количество фигур на поле, ставим игру на паузу,
|
||||
а затем переключаем варианты объёмного изображения, поворачиваем поле с фигурами, изменяем прозрачность,
|
||||
двигаем центральную точку и так далее.
|
||||
|
||||
<b>Управление:</b> кнопки на клавиатуре со стрелками — вправо, влево, вверх, вниз и кнопка пауза `pause`.
|
||||
|
||||
{% include volumetric-tetris-ru.html -%}
|
||||
|
||||
{% include heading.html text="Игровой процесс" hash="gaming-process" %}
|
||||
|
||||
Управление: кнопки на клавиатуре со стрелками — вправо, влево, вверх, вниз и кнопка пауза `pause`.
|
||||
|
||||
Игровые очки начисляются за полностью собранные строки из элементов фигур. Количество набранных очков зависит
|
||||
от количества собранных строк, по 10 очков за каждую строку, если в строке 10 кубиков, и кратно увеличивается,
|
||||
если одновременно собрано: 2 строки — в 3 раза, 3 строки — в 5 раз, 4 строки — в 10 раз.
|
||||
|
||||
Особенность игры: собранные строки сначала моргают и после этого исчезают, при этом игровой процесс на это
|
||||
время не приостанавливается — текущая фигура продолжает падать.
|
||||
<b>Особенность игры:</b> собранные строки сначала моргают и после этого исчезают, при
|
||||
этом игровой процесс на это время не останавливается — текущая фигура продолжает падать.
|
||||
|
||||
Уровень увеличивается при сборе 10 заполненных строк, то есть 100 очков, если в строке 10 кубиков. На каждом
|
||||
новом уровне, скорость фигур повышается и на 21 уровне достигает максимума. В режиме улитки скорость повышается
|
||||
|
|
|
@ -11,22 +11,23 @@ title_translated: Code with comments
|
|||
{%- assign articles = "" | split: "" %}
|
||||
{%- assign articles = articles | push: "Объёмный тетрис" %}
|
||||
{%- capture article_brief %}
|
||||
Общеобразовательная игра в широком смысле этого слова. При изучении языков программирования рекомендуется
|
||||
сначала написать свою версию и потом использовать её для демонстрации и тестирования другого программного
|
||||
обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas — логика самой игры двухмерная.
|
||||
Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования
|
||||
рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования
|
||||
другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на 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 %}
|
||||
Рассматриваем разницу между параллельной и перспективной проекцией. Обе широко используются на практике
|
||||
Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике
|
||||
для различных целей. В предыдущем примере мы вращали квадрат на плоскости — переходим в трёхмерное
|
||||
пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала
|
||||
создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать с неё проекцию и
|
||||
|
|
Loading…
Add table
Reference in a new issue