2023-12-30
This commit is contained in:
parent
80533ed026
commit
e7072bf822
11 changed files with 32 additions and 24 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)};
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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 }}).
|
||||||
|
|
||||||
|
|
|
@ -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" %}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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();
|
||||||
// стакан с игрой
|
// стакан с игрой
|
||||||
|
|
|
@ -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)}." %}
|
||||||
|
|
||||||
Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани
|
Сначала обходим вершины куба и поворачиваем их на угол относительно центральной точки. Затем обходим грани
|
||||||
куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем
|
куба и получаем проекции входящих в них вершин. После этого сортируем проекции граней по удалённости. Затем
|
||||||
рисуем проекции на плоскости — соединяем точки линиями. Рисуем полупрозрачным цветом сперва дальние грани и
|
рисуем проекции на плоскости — соединяем точки линиями. Рисуем почти прозрачным цветом сперва дальние грани
|
||||||
поверх них ближние, чтобы сквозь ближние грани было видно дальние.
|
и поверх них ближние, чтобы сквозь ближние грани было видно дальние.
|
||||||
|
|
||||||
На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением
|
На каждом шаге отображения фигуры повторяем сортировку граней по удалённости, так как с изменением
|
||||||
угла поворота, координаты смещаются, и ближние грани становятся дальними.
|
угла поворота, координаты смещаются, и ближние грани становятся дальними.
|
||||||
|
|
|
@ -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 }}).
|
||||||
|
|
||||||
|
|
|
@ -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: "Вращаем квадрат на плоскости" %}
|
||||||
|
|
Loading…
Add table
Reference in a new issue