2023-12-30

This commit is contained in:
Gennadiy 2023-12-31 00:01:26 +03:00
parent 80533ed026
commit e7072bf822
11 changed files with 32 additions and 24 deletions

View file

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

View file

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

View file

@ -1,3 +1,10 @@
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QG5T3RDYD5"></script>
<script>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('js',new Date());gtag('config','G-QG5T3RDYD5');
</script>
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script> <script>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};

View file

@ -18,6 +18,7 @@ are widely used in practice for various purposes. In the previous example, we
we pass into three-dimensional space. Now, to display the rotation of a three-dimensional object we pass into three-dimensional space. Now, to display the rotation of a three-dimensional object
on the screen plane, we first need to create a *mathematical model* of a three-dimensional object, on the screen plane, we first need to create a *mathematical model* of a three-dimensional object,
rotate it by an angle, draw a projection from it and display already the projection on the screen. rotate it by an angle, draw a projection from it and display already the projection on the screen.
For clarity, we will use the cartesian coordinate system.
Complicated model, many cubes: [Spinning spatial cross]({{ '/en/2023/01/16/spinning-spatial-cross.html' | relative_url }}). Complicated model, many cubes: [Spinning spatial cross]({{ '/en/2023/01/16/spinning-spatial-cross.html' | relative_url }}).
@ -48,8 +49,8 @@ Cube size 200, canvas size 300, origin of coordinates is in the upper left corne
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,
the `Z` axis is directed to the distance. The rotation is performed sequentially around all three axes: first the `Z` axis is directed to the distance. The rotation is performed sequentially around all three axes: first
around the `X` axis, then around the `Y` axis and then around the `Z` axis. Model settings can be controlled, around the `X` axis, then around the `Y` axis and then around the `Z` axis. Model settings can be controlled,
for example, you can switch off redundant rotation around the axes and change the position of the projection for example, you can switch off redundant rotation around the axes and move the central point of the projection
center onto the observer screen. onto the observer screen.
<div> <div>
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
@ -154,8 +155,8 @@ alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %}
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
the projections of the faces by remoteness. Then we draw projections on the plane we link the points the projections of the faces by remoteness. Then we draw projections on the plane we link the points
with lines. We draw with a translucent color first the far faces and atop them the near ones, so that with lines. We draw with an almost transparent color first the far faces and atop them the near ones,
the far faces can be seen through the near ones. so that 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.

View file

@ -15,7 +15,7 @@ lang: en
General educational game in the broad meaning of this word. In the process of learning programming languages, 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 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 software or hardware. The three-dimensional interface is written in JavaScript Canvas the logic of the
game itself is two-dimensional. game itself is two-dimensional. Additional external libraries are not used.
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 }}).

View file

@ -15,7 +15,7 @@ lang: en
General educational game in the broad meaning of this word. In the process of learning programming languages, 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 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 software or hardware. The three-dimensional interface is written in JavaScript Canvas the logic of the
game itself is two-dimensional. game itself is two-dimensional. Additional external libraries are not used.
{%- endcapture %} {%- endcapture %}
{%- assign articles = articles | push: article_brief %} {%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning spatial cross" %} {%- assign articles = articles | push: "Spinning spatial cross" %}
@ -33,7 +33,7 @@ We consider the difference between parallel and perspective projection. Both are
for various purposes. In the previous example, we rotated square on plane we pass into three-dimensional for various purposes. In the previous example, we rotated square on plane we pass into three-dimensional
space. Now, to display the rotation of a three-dimensional object on the screen plane, we first need to space. Now, to display the rotation of a three-dimensional object on the screen plane, we first need to
create a *mathematical model* of a three-dimensional object, rotate it by an angle, draw a projection from create a *mathematical model* of a three-dimensional object, rotate it by an angle, draw a projection from
it and display already the projection on the screen. it and display already the projection on the screen. For clarity, we will use the cartesian coordinate system.
{%- endcapture %} {%- endcapture %}
{%- assign articles = articles | push: article_brief %} {%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning square on plane" %} {%- assign articles = articles | push: "Spinning square on plane" %}

View file

@ -154,7 +154,7 @@ function refreshParams() {
document.getElementById('tv2Z').max = d2/2; document.getElementById('tv2Z').max = d2/2;
document.getElementById('tv2Z').value = tv2.z; document.getElementById('tv2Z').value = tv2.z;
document.getElementById('tv2Zo').value = tv2.z; document.getElementById('tv2Zo').value = tv2.z;
document.getElementById('dist').max = d2*2; document.getElementById('dist').max = d2max;
document.getElementById('dist').value = d2; document.getElementById('dist').value = d2;
document.getElementById('oDist').value = d2; document.getElementById('oDist').value = d2;
refreshDisabled(); refreshDisabled();

View file

@ -44,7 +44,7 @@ let deg={}; deg.setDefault = function() {
}; };
deg.setDefault(); deg.setDefault();
// параллельная проекция: центр и экран наблюдателя // параллельная проекция: центр и экран наблюдателя
let d1 = 600, tv1={}; tv1.reCalc = function() { let d1, tv1 = {}; tv1.reCalc = function() {
this.x=columns*(size+gap)/2; this.x=columns*(size+gap)/2;
this.y=(size+gap)*2; this.y=(size+gap)*2;
this.z=(size+gap)*2; this.z=(size+gap)*2;
@ -52,12 +52,12 @@ let d1 = 600, tv1={}; tv1.reCalc = function() {
} }
tv1.reCalc(); tv1.reCalc();
// перспективная проекция: центр и экран наблюдателя // перспективная проекция: центр и экран наблюдателя
let d2 = 600, tv2 = {}; tv2.reCalc = function() { let d2, d2max, tv2 = {}; tv2.reCalc = function() {
this.x = columns*(size+gap)/2; this.x = columns*(size+gap)/2;
this.y = rows*(size+gap)/2; this.y = rows*(size+gap)/2;
this.z = (size+gap)*2; this.z = (size+gap)*2;
this.show=false; this.show=false;
d2 = Math.max(rows,columns)*(size+gap); d2 = Math.max(rows,columns)*(size+gap); d2max = d2*2;
}; };
tv2.reCalc(); tv2.reCalc();
// стакан с игрой // стакан с игрой

View file

@ -16,7 +16,7 @@ date: 2023.01.10
[вращали квадрат на плоскости]({{ '/ru/2023/01/05/spinning-square-on-plane.html' | relative_url }}) [вращали квадрат на плоскости]({{ '/ru/2023/01/05/spinning-square-on-plane.html' | relative_url }})
переходим в трёхмерное пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного переходим в трёхмерное пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного
объекта, нужно сначала создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать объекта, нужно сначала создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать
с неё проекцию и отобразить на экране уже проекцию. с неё проекцию и отобразить на экране уже проекцию. Для наглядности будем использовать декартову систему координат.
Усложнённая модель, много кубиков: [Вращаем пространственный крест]({{ '/ru/2023/01/15/spinning-spatial-cross.html' | relative_url }}). Усложнённая модель, много кубиков: [Вращаем пространственный крест]({{ '/ru/2023/01/15/spinning-spatial-cross.html' | relative_url }}).
@ -47,7 +47,7 @@ date: 2023.01.10
в середине холста. Ось `X` направлена вправо, ось `Y` направлена вниз, ось `Z` направлена вдаль. в середине холста. Ось `X` направлена вправо, ось `Y` направлена вниз, ось `Z` направлена вдаль.
Выполняется поворот последовательно по всем трём осям: сначала по оси `X`, затем по оси `Y` и затем Выполняется поворот последовательно по всем трём осям: сначала по оси `X`, затем по оси `Y` и затем
по оси `Z`. Настройками модели можно управлять, например можно отключать лишнее вращение по осям и по оси `Z`. Настройками модели можно управлять, например можно отключать лишнее вращение по осям и
изменять положение центра проекции на экране наблюдателя. двигать центральную точку проекции на экране наблюдателя.
<div> <div>
<canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;"> <canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
@ -151,8 +151,8 @@ alt="{(x-x_1)\over(y-y_1)}={(x_2-x_1)\over(y_2-y_1)}." %}
Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани
куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем
рисуем проекции на плоскости соединяем точки линиями. Рисуем полупрозрачным цветом сперва дальние грани и рисуем проекции на плоскости соединяем точки линиями. Рисуем почти прозрачным цветом сперва дальние грани
поверх них ближние, чтобы сквозь ближние грани было видно дальние. и поверх них ближние, чтобы сквозь ближние грани было видно дальние.
На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением
угла поворота, координаты смещаются, и ближние грани становятся дальними. угла поворота, координаты смещаются, и ближние грани становятся дальними.

View file

@ -14,7 +14,7 @@ date: 2023.01.21
Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования
рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования
другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas
логика самой игры двухмерная. логика самой игры двухмерная. Дополнительные внешние библиотеки не используются.
Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}). Описание алгоритма графики: [Вращаем куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }}).

View file

@ -14,7 +14,7 @@ title_translated: Code with comments
Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования Общеобразовательная игра в широком смысле этого слова. В процессе изучения языков программирования
рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования рекомендуется сначала написать свою версию и потом использовать её для демонстрации и тестирования
другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas другого программного обеспечения или оборудования. Трёхмерный интерфейс написан на JavaScript Canvas
логика самой игры двухмерная. логика самой игры двухмерная. Дополнительные внешние библиотеки не используются.
{%- endcapture %} {%- endcapture %}
{%- assign articles = articles | push: article_brief %} {%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Вращаем пространственный крест" %} {%- assign articles = articles | push: "Вращаем пространственный крест" %}
@ -30,8 +30,8 @@ title_translated: Code with comments
Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике
для различных целей. В предыдущем примере мы вращали квадрат на плоскости переходим в трёхмерное для различных целей. В предыдущем примере мы вращали квадрат на плоскости переходим в трёхмерное
пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала
создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать с неё проекцию и создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать с неё проекцию
отобразить на экране уже проекцию. и отобразить на экране уже проекцию. Для наглядности будем использовать декартову систему координат.
{%- endcapture %} {%- endcapture %}
{%- assign articles = articles | push: article_brief %} {%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Вращаем квадрат на плоскости" %} {%- assign articles = articles | push: "Вращаем квадрат на плоскости" %}