From fb49164b15105257cdd2f206fae9286cb3855cbb Mon Sep 17 00:00:00 2001 From: golovin Date: Sun, 17 Dec 2023 08:48:26 +0300 Subject: [PATCH] 2023-09-30 --- jekyll_site/_config_color.yml | 4 ++-- jekyll_site/_config_older.yml | 4 ++-- .../en/2023/01/06/spinning-square-on-plane.md | 16 ++++++++-------- .../en/2023/01/11/spinning-cube-in-space.md | 12 ++++++------ .../en/2023/01/16/spinning-spatial-cross.md | 10 +++++----- jekyll_site/en/2023/01/22/volumetric-tetris.md | 9 +++++---- .../ru/2023/01/05/spinning-square-on-plane.md | 16 ++++++++-------- .../ru/2023/01/10/spinning-cube-in-space.md | 12 ++++++------ .../ru/2023/01/15/spinning-spatial-cross.md | 10 +++++----- jekyll_site/ru/2023/01/21/volumetric-tetris.md | 9 +++++---- 10 files changed, 52 insertions(+), 50 deletions(-) diff --git a/jekyll_site/_config_color.yml b/jekyll_site/_config_color.yml index f54592b..86304ad 100644 --- a/jekyll_site/_config_color.yml +++ b/jekyll_site/_config_color.yml @@ -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 diff --git a/jekyll_site/_config_older.yml b/jekyll_site/_config_older.yml index 3457ba1..68860ef 100644 --- a/jekyll_site/_config_older.yml +++ b/jekyll_site/_config_older.yml @@ -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 diff --git a/jekyll_site/en/2023/01/06/spinning-square-on-plane.md b/jekyll_site/en/2023/01/06/spinning-square-on-plane.md index 5def89a..83c27f2 100644 --- a/jekyll_site/en/2023/01/06/spinning-square-on-plane.md +++ b/jekyll_site/en/2023/01/06/spinning-square-on-plane.md @@ -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" %}
@@ -39,7 +39,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20
-### HTML {#html1} +{% include heading.html text="HTML" hash="html1" type="3" %} ```html @@ -47,7 +47,7 @@ with lines and draw lines on the canvas. We renew the image at a frequency of 20 ``` -### 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 -### HTML {#html2} +{% include heading.html text="HTML" hash="html2" type="3" %} ```html @@ -128,7 +128,7 @@ central point — counterclockwise. This code works in conjunction with the prev ``` -### JavaScript {#javascript2} +{% include heading.html text="JavaScript" hash="javascript2" type="3" %} ```js 'use strict'; diff --git a/jekyll_site/en/2023/01/11/spinning-cube-in-space.md b/jekyll_site/en/2023/01/11/spinning-cube-in-space.md index 07dc5e4..b0c98e1 100644 --- a/jekyll_site/en/2023/01/11/spinning-cube-in-space.md +++ b/jekyll_site/en/2023/01/11/spinning-cube-in-space.md @@ -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. -## 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 -%} diff --git a/jekyll_site/en/2023/01/16/spinning-spatial-cross.md b/jekyll_site/en/2023/01/16/spinning-spatial-cross.md index 3c3bcbc..17d2b84 100644 --- a/jekyll_site/en/2023/01/16/spinning-spatial-cross.md +++ b/jekyll_site/en/2023/01/16/spinning-spatial-cross.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" %}
@@ -38,7 +38,7 @@ Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volum
-## Cross-cube {#cross-cube} +{% include heading.html text="Cross-cube" hash="cross-cube" %}
@@ -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
-## 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 -%} diff --git a/jekyll_site/en/2023/01/22/volumetric-tetris.md b/jekyll_site/en/2023/01/22/volumetric-tetris.md index d5ec3a2..3ef80a2 100644 --- a/jekyll_site/en/2023/01/22/volumetric-tetris.md +++ b/jekyll_site/en/2023/01/22/volumetric-tetris.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`. diff --git a/jekyll_site/ru/2023/01/05/spinning-square-on-plane.md b/jekyll_site/ru/2023/01/05/spinning-square-on-plane.md index 99ac8ad..e32f116 100644 --- a/jekyll_site/ru/2023/01/05/spinning-square-on-plane.md +++ b/jekyll_site/ru/2023/01/05/spinning-square-on-plane.md @@ -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" %}
@@ -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
-### HTML {#html1} +{% include heading.html text="HTML" hash="html1" type="3" %} ```html @@ -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 ``` -### 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));
-### HTML {#html2} +{% include heading.html text="HTML" hash="html2" type="3" %} ```html @@ -127,7 +127,7 @@ document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50)); ``` -### JavaScript {#javascript2} +{% include heading.html text="JavaScript" hash="javascript2" type="3" %} ```js 'use strict'; diff --git a/jekyll_site/ru/2023/01/10/spinning-cube-in-space.md b/jekyll_site/ru/2023/01/10/spinning-cube-in-space.md index 9495ead..6b96414 100644 --- a/jekyll_site/ru/2023/01/10/spinning-cube-in-space.md +++ b/jekyll_site/ru/2023/01/10/spinning-cube-in-space.md @@ -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 -## Поворот точки в пространстве {#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 -%} diff --git a/jekyll_site/ru/2023/01/15/spinning-spatial-cross.md b/jekyll_site/ru/2023/01/15/spinning-spatial-cross.md index c5aac8f..6db3e5c 100644 --- a/jekyll_site/ru/2023/01/15/spinning-spatial-cross.md +++ b/jekyll_site/ru/2023/01/15/spinning-spatial-cross.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" %}
@@ -35,7 +35,7 @@ date: 2023.01.15
-## Крест-куб {#cross-cube} +{% include heading.html text="Крест-куб" hash="cross-cube" %}
@@ -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
-## Описание алгоритма {#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 -%} diff --git a/jekyll_site/ru/2023/01/21/volumetric-tetris.md b/jekyll_site/ru/2023/01/21/volumetric-tetris.md index 59cd898..41e1172 100644 --- a/jekyll_site/ru/2023/01/21/volumetric-tetris.md +++ b/jekyll_site/ru/2023/01/21/volumetric-tetris.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`.