2023-07-31

This commit is contained in:
Gennadiy 2023-12-17 08:08:38 +03:00
parent 09b0d8c349
commit 41e768b9ac
20 changed files with 93 additions and 98 deletions

2
.gitignore vendored
View file

@ -2,4 +2,4 @@
*.iml
*.zip
_site*
.repo_*.sh
.repo_*

View file

@ -1,7 +1,7 @@
## Дерево каталогов
<pre>
.
<a href='.'>.</a>
├─ <a href='jekyll_site'>jekyll_site</a>
│ ├─ <a href='jekyll_site/_includes'>_includes</a>
│ │ ├─ <a href='jekyll_site/_includes/classes-point-cube-en.md'>classes-point-cube-en.md</a>
@ -10,19 +10,13 @@
│ │ ├─ <a href='jekyll_site/_includes/counters_head.html'>counters_head.html</a>
│ │ ├─ <a href='jekyll_site/_includes/volumetric-tetris-en.html'>volumetric-tetris-en.html</a>
│ │ └─ <a href='jekyll_site/_includes/volumetric-tetris-ru.html'>volumetric-tetris-ru.html</a>
│ ├─ <a href='jekyll_site/css'>css</a>
│ │ └─ <a href='jekyll_site/css/pomodoro1.css'>pomodoro1.css</a>
│ ├─ <a href='jekyll_site/css'>css</a>/<a href='jekyll_site/css/pomodoro1.css'>pomodoro1.css</a>
│ ├─ <a href='jekyll_site/en'>en</a>
│ │ ├─ <a href='jekyll_site/en/2023'>2023</a>
│ │ │ └─ <a href='jekyll_site/en/2023/01'>01</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/06'>06</a>
│ │ │ │ └─ <a href='jekyll_site/en/2023/01/06/spinning-square-on-plane.md'>spinning-square-on-plane.md</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/11'>11</a>
│ │ │ │ └─ <a href='jekyll_site/en/2023/01/11/spinning-cube-in-space.md'>spinning-cube-in-space.md</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/16'>16</a>
│ │ │ │ └─ <a href='jekyll_site/en/2023/01/16/spinning-spatial-cross.md'>spinning-spatial-cross.md</a>
│ │ │ └─ <a href='jekyll_site/en/2023/01/22'>22</a>
│ │ │ └─ <a href='jekyll_site/en/2023/01/22/volumetric-tetris.md'>volumetric-tetris.md</a>
│ │ ├─ <a href='jekyll_site/en/2023'>2023</a>/<a href='jekyll_site/en/2023/01'>01</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/06'>06</a>/<a href='jekyll_site/en/2023/01/06/spinning-square-on-plane.md'>spinning-square-on-plane.md</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/11'>11</a>/<a href='jekyll_site/en/2023/01/11/spinning-cube-in-space.md'>spinning-cube-in-space.md</a>
│ │ │ ├─ <a href='jekyll_site/en/2023/01/16'>16</a>/<a href='jekyll_site/en/2023/01/16/spinning-spatial-cross.md'>spinning-spatial-cross.md</a>
│ │ │ └─ <a href='jekyll_site/en/2023/01/22'>22</a>/<a href='jekyll_site/en/2023/01/22/volumetric-tetris.md'>volumetric-tetris.md</a>
│ │ └─ <a href='jekyll_site/en/index.md'>index.md</a>
│ ├─ <a href='jekyll_site/img'>img</a>
│ │ ├─ <a href='jekyll_site/img/central-projection.svg'>central-projection.svg</a>
@ -46,28 +40,25 @@
│ │ ├─ <a href='jekyll_site/js/tetris-model.js'>tetris-model.js</a>
│ │ └─ <a href='jekyll_site/js/tetris-view.js'>tetris-view.js</a>
│ ├─ <a href='jekyll_site/ru'>ru</a>
│ │ ├─ <a href='jekyll_site/ru/2023'>2023</a>
│ │ │ └─ <a href='jekyll_site/ru/2023/01'>01</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/05'>05</a>
│ │ │ │ └─ <a href='jekyll_site/ru/2023/01/05/spinning-square-on-plane.md'>spinning-square-on-plane.md</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/10'>10</a>
│ │ │ │ └─ <a href='jekyll_site/ru/2023/01/10/spinning-cube-in-space.md'>spinning-cube-in-space.md</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/15'>15</a>
│ │ │ │ └─ <a href='jekyll_site/ru/2023/01/15/spinning-spatial-cross.md'>spinning-spatial-cross.md</a>
│ │ │ └─ <a href='jekyll_site/ru/2023/01/21'>21</a>
│ │ │ └─ <a href='jekyll_site/ru/2023/01/21/volumetric-tetris.md'>volumetric-tetris.md</a>
│ │ ├─ <a href='jekyll_site/ru/2023'>2023</a>/<a href='jekyll_site/ru/2023/01'>01</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/05'>05</a>/<a href='jekyll_site/ru/2023/01/05/spinning-square-on-plane.md'>spinning-square-on-plane.md</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/10'>10</a>/<a href='jekyll_site/ru/2023/01/10/spinning-cube-in-space.md'>spinning-cube-in-space.md</a>
│ │ │ ├─ <a href='jekyll_site/ru/2023/01/15'>15</a>/<a href='jekyll_site/ru/2023/01/15/spinning-spatial-cross.md'>spinning-spatial-cross.md</a>
│ │ │ └─ <a href='jekyll_site/ru/2023/01/21'>21</a>/<a href='jekyll_site/ru/2023/01/21/volumetric-tetris.md'>volumetric-tetris.md</a>
│ │ └─ <a href='jekyll_site/ru/index.md'>index.md</a>
│ ├─ <a href='jekyll_site/Gemfile_color'>Gemfile_color</a>
│ ├─ <a href='jekyll_site/Gemfile_older'>Gemfile_older</a>
│ ├─ <a href='jekyll_site/_config_color.yml'>_config_color.yml</a>
│ ├─ <a href='jekyll_site/_config_older.yml'>_config_older.yml</a>
│ └─ <a href='jekyll_site/robots.txt'>robots.txt</a>
├─ <a href='.gitattributes'>.gitattributes</a>
├─ <a href='.gitignore'>.gitignore</a>
├─ <a href='CONTRIBUTING.md'>CONTRIBUTING.md</a>
├─ <a href='DIRECTORY-TREE.md'>DIRECTORY-TREE.md</a>
├─ <a href='DIRECTORY_TREE.md'>DIRECTORY_TREE.md</a>
├─ <a href='LICENSE.md'>LICENSE.md</a>
├─ <a href='OPEN_LICENSE.txt'>OPEN_LICENSE.txt</a>
├─ <a href='README.en.md'>README.en.md</a>
├─ <a href='README.md'>README.md</a>
├─ <a href='WIKI.md'>WIKI.md</a>
├─ <a href='build.sh'>build.sh</a>
├─ <a href='package.sh'>package.sh</a>
└─ <a href='serve.sh'>serve.sh</a>

View file

@ -1,16 +0,0 @@
## Website pages
- [Volumetric tetris](https://pomodoro1.mircloud.ru/en/2023/01/22/volumetric-tetris.html) — 22.01.2023.
- [Spinning spatial cross](https://pomodoro1.mircloud.ru/en/2023/01/16/spinning-spatial-cross.html) — 16.01.2023.
- [Spinning cube in space](https://pomodoro1.mircloud.ru/en/2023/01/11/spinning-cube-in-space.html) — 11.01.2023.
- [Spinning square on plane](https://pomodoro1.mircloud.ru/en/2023/01/06/spinning-square-on-plane.html) — 06.01.2023.
## [Source texts](README.md)
- Series of the static websites [«Pomodori»](https://hub.mos.ru/golovin.gg/pomodoro/blob/master/README.en.md).
- Used formats — Markdown, Liquid, YAML.
- Build tool — Jekyll with tomato design themes.
- Automation of processes — Bash scripts for command line.
- [build.sh](build.sh) — Building a site in two tomato themes and optimizing the results.
- [serve.sh](serve.sh) — Local deployment to verify the correctness of the build.
- [package.sh](package.sh) — Preparing an archive for subsequent deployment.

View file

@ -1,16 +1,5 @@
## Страницы вёб-сайта
## Исходные тексты
- [Объёмный тетрис](https://pomodoro1.mircloud.ru/ru/2023/01/21/volumetric-tetris.html) — 21.01.2023.
- [Вращаем пространственный крест](https://pomodoro1.mircloud.ru/ru/2023/01/15/spinning-spatial-cross.html) — 15.01.2023.
- [Вращаем куб в пространстве](https://pomodoro1.mircloud.ru/ru/2023/01/10/spinning-cube-in-space.html) — 10.01.2023.
- [Вращаем квадрат на плоскости](https://pomodoro1.mircloud.ru/ru/2023/01/05/spinning-square-on-plane.html) — 05.01.2023.
## [Исходные тексты](README.en.md)
- Серия статических вёб-сайтов [«Помидоры»](https://hub.mos.ru/golovin.gg/pomodoro/blob/master/README.md).
- Используемые форматы — Markdown, Liquid, YAML.
- Инструмент сборки — Jekyll с помидорными темами оформления.
- Автоматизация процессов — Bash скрипты для командной строки.
- [build.sh](build.sh) — Сборка сайта в двух помидорных темах и оптимизация результатов.
- [serve.sh](serve.sh) — Локальное развёртывание для проверки корректности сборки.
- [package.sh](package.sh) — Подготовка архива для последующего развёртывания.
- Управление процессами — Bash скрипты.

29
WIKI.md Normal file
View file

@ -0,0 +1,29 @@
<hr>
<details open>
<summary><h3>Оглавление</h3></summary>
<hr>
- [Объёмный тетрис](https://pomodoro1.mircloud.ru/ru/2023/01/21/volumetric-tetris.html) — 21.01.2023.
- [Вращаем пространственный крест](https://pomodoro1.mircloud.ru/ru/2023/01/15/spinning-spatial-cross.html) — 15.01.2023.
- [Вращаем куб в пространстве](https://pomodoro1.mircloud.ru/ru/2023/01/10/spinning-cube-in-space.html) — 10.01.2023.
- [Вращаем квадрат на плоскости](https://pomodoro1.mircloud.ru/ru/2023/01/05/spinning-square-on-plane.html) — 05.01.2023.
</details>
<hr>
<details open>
<summary><h3>Contents</h3></summary>
<hr>
- [Volumetric tetris](https://pomodoro1.mircloud.ru/en/2023/01/22/volumetric-tetris.html) — 22.01.2023.
- [Spinning spatial cross](https://pomodoro1.mircloud.ru/en/2023/01/16/spinning-spatial-cross.html) — 16.01.2023.
- [Spinning cube in space](https://pomodoro1.mircloud.ru/en/2023/01/11/spinning-cube-in-space.html) — 11.01.2023.
- [Spinning square on plane](https://pomodoro1.mircloud.ru/en/2023/01/06/spinning-square-on-plane.html) — 06.01.2023.
</details>
<hr>

View file

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

View file

@ -60,7 +60,7 @@ let t0 = {x:150, y:150};
let deg = 1;
```
```js
// figure rotation and image update
// figure rotation and image refresh
function repaint() {
// rotate the original array of points by an angle
for (let i = 0; i < square.length; i++)
@ -103,7 +103,7 @@ function drawFigure(canvas, arr) {
}
```
```js
// after loading the page, set the image refresh interval
// after loading the page, set the image refresh rate at 20 Hz
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```
@ -139,7 +139,7 @@ let square2 = [];
let t2 = {x:100, y:100};
```
```js
// figure rotation and image update
// figure rotation and image refresh
function repaint2() {
// rotate the point in the opposite direction
t2 = rotateOnDegree(t0, t2, -deg);
@ -156,6 +156,6 @@ function repaint2() {
}
```
```js
// after loading the page, set the image refresh interval
// after loading the page, set the image refresh rate at 20 Hz
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
```

View file

@ -12,12 +12,12 @@ date: 2023.01.11
lang: en
---
We consider the difference between parallel and perspective projection.
Both are widely used in practice for various purposes. In the previous example, we
We consider the difference between parallel and perspective projection. Both
are widely used in practice for various purposes. In the previous example, we
[rotated square on plane]({{ '/en/2023/01/06/spinning-square-on-plane.html' | relative_url }})
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 three-dimensional object, rotate it by an angle,
draw a projection from it and display already the projection on the screen.
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.
Complicated model, many cubes: [Spinning spatial cross]({{ '/en/2023/01/16/spinning-spatial-cross.html' | relative_url }}).
@ -184,7 +184,7 @@ const tv = new Point(150,150,80);
const deg = {x:0,y:1,z:0};
```
```js
// figure rotation and image update
// figure rotation and image refresh
function repaint() {
cube.rotate(deg, t0);
// draw parallel projection
@ -224,6 +224,6 @@ function drawFigure(canvas, proj) {
}
```
```js
// after loading the page, set the image refresh interval
// after loading the page, set the image refresh rate at 20 Hz
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```

View file

@ -270,6 +270,6 @@ function drawFigure(canvas, proj, alpha=0.8) {
}
```
```js
// after loading the page, set the image refresh interval
// after loading the page, set the image refresh rate at 20 Hz
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```

View file

@ -20,18 +20,19 @@ is two-dimensional.
{%- 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 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.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning cube in space" %}
{%- capture article_brief %}
We consider the difference between parallel and perspective projection. Both are widely used in practice 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 create a three-dimensional object,
rotate it by an angle, draw a projection from it and display already the projection on the screen.
We consider the difference between parallel and perspective projection. Both are widely used in practice
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
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.
{%- endcapture %}
{%- assign articles = articles | push: article_brief %}
{%- assign articles = articles | push: "Spinning square on plane" %}

View file

@ -53,5 +53,5 @@ function drawFigure(canvas, proj) {
}
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));

View file

@ -51,5 +51,5 @@ function centerPoint(canvas) {
context.arc(tv3.x, tv3.y, 5.5, 0, 2*Math.PI);
context.stroke();
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint3,50));

View file

@ -112,5 +112,5 @@ function drawFigure(canvas, proj, alpha=0.8) {
}
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));

View file

@ -92,5 +92,5 @@ function centerPoint(canvas) {
context.arc(tv5.x, tv5.y, 6.5, 0, 2*Math.PI);
context.stroke();
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint5,50));

View file

@ -48,5 +48,5 @@ function drawFigure(canvas, arr) {
context.stroke();
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));

View file

@ -22,5 +22,5 @@ function repaint2() {
drawFigure(canvas2, square2);
}
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));

View file

@ -102,7 +102,7 @@ function drawFigure(canvas, arr) {
}
```
```js
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```
@ -155,6 +155,6 @@ function repaint2() {
}
```
```js
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
```

View file

@ -11,12 +11,12 @@ title_translated: Spinning cube in space
date: 2023.01.10
---
Рассматриваем разницу между параллельной и перспективной проекцией.
Обе широко используются на практике для различных целей. В предыдущем примере мы
Рассматриваем разницу между параллельной и перспективной проекцией. Обе
широко используются на практике для различных целей. В предыдущем примере мы
[вращали квадрат на плоскости]({{ '/ru/2023/01/05/spinning-square-on-plane.html' | relative_url }})
переходим в трёхмерное пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного
объекта, нужно сначала создать трёхмерный объект, повернуть его на угол, срисовать с него проекцию и
отобразить на экране уже проекцию.
объекта, нужно сначала создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать
с неё проекцию и отобразить на экране уже проекцию.
Усложнённая модель, много кубиков: [Вращаем пространственный крест]({{ '/ru/2023/01/15/spinning-spatial-cross.html' | relative_url }}).
@ -221,6 +221,6 @@ function drawFigure(canvas, proj) {
}
```
```js
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```

View file

@ -266,6 +266,6 @@ function drawFigure(canvas, proj, alpha=0.8) {
}
```
```js
// после загрузки страницы, задаём интервал обновления изображения
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```

View file

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