2023-07-31
This commit is contained in:
parent
09b0d8c349
commit
41e768b9ac
20 changed files with 93 additions and 98 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -2,4 +2,4 @@
|
||||||
*.iml
|
*.iml
|
||||||
*.zip
|
*.zip
|
||||||
_site*
|
_site*
|
||||||
.repo_*.sh
|
.repo_*
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
## Дерево каталогов
|
## Дерево каталогов
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
.
|
<a href='.'>.</a>
|
||||||
├─ <a href='jekyll_site'>jekyll_site</a>
|
├─ <a href='jekyll_site'>jekyll_site</a>
|
||||||
│ ├─ <a href='jekyll_site/_includes'>_includes</a>
|
│ ├─ <a href='jekyll_site/_includes'>_includes</a>
|
||||||
│ │ ├─ <a href='jekyll_site/_includes/classes-point-cube-en.md'>classes-point-cube-en.md</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/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-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/_includes/volumetric-tetris-ru.html'>volumetric-tetris-ru.html</a>
|
||||||
│ ├─ <a href='jekyll_site/css'>css</a>
|
│ ├─ <a href='jekyll_site/css'>css</a>/<a href='jekyll_site/css/pomodoro1.css'>pomodoro1.css</a>
|
||||||
│ │ └─ <a href='jekyll_site/css/pomodoro1.css'>pomodoro1.css</a>
|
|
||||||
│ ├─ <a href='jekyll_site/en'>en</a>
|
│ ├─ <a href='jekyll_site/en'>en</a>
|
||||||
│ │ ├─ <a href='jekyll_site/en/2023'>2023</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'>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/06'>06</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/06/spinning-square-on-plane.md'>spinning-square-on-plane.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/11'>11</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/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/en/index.md'>index.md</a>
|
||||||
│ ├─ <a href='jekyll_site/img'>img</a>
|
│ ├─ <a href='jekyll_site/img'>img</a>
|
||||||
│ │ ├─ <a href='jekyll_site/img/central-projection.svg'>central-projection.svg</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-model.js'>tetris-model.js</a>
|
||||||
│ │ └─ <a href='jekyll_site/js/tetris-view.js'>tetris-view.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'>ru</a>
|
||||||
│ │ ├─ <a href='jekyll_site/ru/2023'>2023</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'>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/05'>05</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/05/spinning-square-on-plane.md'>spinning-square-on-plane.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/10'>10</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/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/ru/index.md'>index.md</a>
|
||||||
│ ├─ <a href='jekyll_site/Gemfile_color'>Gemfile_color</a>
|
│ ├─ <a href='jekyll_site/Gemfile_color'>Gemfile_color</a>
|
||||||
│ ├─ <a href='jekyll_site/Gemfile_older'>Gemfile_older</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_color.yml'>_config_color.yml</a>
|
||||||
│ ├─ <a href='jekyll_site/_config_older.yml'>_config_older.yml</a>
|
│ ├─ <a href='jekyll_site/_config_older.yml'>_config_older.yml</a>
|
||||||
│ └─ <a href='jekyll_site/robots.txt'>robots.txt</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='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='LICENSE.md'>LICENSE.md</a>
|
||||||
├─ <a href='OPEN_LICENSE.txt'>OPEN_LICENSE.txt</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='README.md'>README.md</a>
|
||||||
|
├─ <a href='WIKI.md'>WIKI.md</a>
|
||||||
├─ <a href='build.sh'>build.sh</a>
|
├─ <a href='build.sh'>build.sh</a>
|
||||||
├─ <a href='package.sh'>package.sh</a>
|
├─ <a href='package.sh'>package.sh</a>
|
||||||
└─ <a href='serve.sh'>serve.sh</a>
|
└─ <a href='serve.sh'>serve.sh</a>
|
16
README.en.md
16
README.en.md
|
@ -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.
|
|
15
README.md
15
README.md
|
@ -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.
|
- Используемые форматы — Markdown, Liquid, YAML.
|
||||||
- Инструмент сборки — Jekyll с помидорными темами оформления.
|
- Инструмент сборки — Jekyll с помидорными темами оформления.
|
||||||
- Автоматизация процессов — Bash скрипты для командной строки.
|
- Управление процессами — Bash скрипты.
|
||||||
- [build.sh](build.sh) — Сборка сайта в двух помидорных темах и оптимизация результатов.
|
|
||||||
- [serve.sh](serve.sh) — Локальное развёртывание для проверки корректности сборки.
|
|
||||||
- [package.sh](package.sh) — Подготовка архива для последующего развёртывания.
|
|
||||||
|
|
29
WIKI.md
Normal file
29
WIKI.md
Normal 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>
|
|
@ -1,10 +1,10 @@
|
||||||
<!-- Google tag (gtag.js) -->
|
<!-- 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>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
function gtag(){dataLayer.push(arguments);}
|
function gtag(){dataLayer.push(arguments);}
|
||||||
gtag('js', new Date());
|
gtag('js', new Date());
|
||||||
gtag('config', 'UA-209134013-1');
|
gtag('config', 'G-1L7J3YNRZ7');
|
||||||
</script>
|
</script>
|
||||||
<!-- Yandex.Metrika counter -->
|
<!-- Yandex.Metrika counter -->
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -60,7 +60,7 @@ let t0 = {x:150, y:150};
|
||||||
let deg = 1;
|
let deg = 1;
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// figure rotation and image update
|
// figure rotation and image refresh
|
||||||
function repaint() {
|
function repaint() {
|
||||||
// rotate the original array of points by an angle
|
// rotate the original array of points by an angle
|
||||||
for (let i = 0; i < square.length; i++)
|
for (let i = 0; i < square.length; i++)
|
||||||
|
@ -103,7 +103,7 @@ function drawFigure(canvas, arr) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```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));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -139,7 +139,7 @@ let square2 = [];
|
||||||
let t2 = {x:100, y:100};
|
let t2 = {x:100, y:100};
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// figure rotation and image update
|
// figure rotation and image refresh
|
||||||
function repaint2() {
|
function repaint2() {
|
||||||
// rotate the point in the opposite direction
|
// rotate the point in the opposite direction
|
||||||
t2 = rotateOnDegree(t0, t2, -deg);
|
t2 = rotateOnDegree(t0, t2, -deg);
|
||||||
|
@ -156,6 +156,6 @@ function repaint2() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```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));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -12,12 +12,12 @@ date: 2023.01.11
|
||||||
lang: en
|
lang: en
|
||||||
---
|
---
|
||||||
|
|
||||||
We consider the difference between parallel and perspective projection.
|
We consider the difference between parallel and perspective projection. Both
|
||||||
Both are widely used in practice for various purposes. In the previous example, we
|
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 }})
|
[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
|
— 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,
|
on the screen plane, we first need to create a *mathematical model* of a three-dimensional object,
|
||||||
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.
|
||||||
|
|
||||||
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 }}).
|
||||||
|
|
||||||
|
@ -184,7 +184,7 @@ const tv = new Point(150,150,80);
|
||||||
const deg = {x:0,y:1,z:0};
|
const deg = {x:0,y:1,z:0};
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// figure rotation and image update
|
// figure rotation and image refresh
|
||||||
function repaint() {
|
function repaint() {
|
||||||
cube.rotate(deg, t0);
|
cube.rotate(deg, t0);
|
||||||
// draw parallel projection
|
// draw parallel projection
|
||||||
|
@ -224,6 +224,6 @@ function drawFigure(canvas, proj) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```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));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -270,6 +270,6 @@ function drawFigure(canvas, proj, alpha=0.8) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```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));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -20,18 +20,19 @@ is two-dimensional.
|
||||||
{%- 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" %}
|
||||||
{%- capture article_brief %}
|
{%- capture article_brief %}
|
||||||
We are writing an algorithm for rotating a three-dimensional figure by an angle around its center along all three
|
We are writing an algorithm for rotating a three-dimensional figure by an angle around its center along
|
||||||
axes at once. In the previous example, we rotated cube in space — now there are a lot of cubes, the algorithm is
|
all three axes at once. In the previous example, we rotated cube in space — now there are a lot of cubes,
|
||||||
almost the same and we use the same formulas. We draw two variants of the figure: *spatial cross* and *cross-cube*
|
the algorithm is almost the same and we use the same formulas. We draw two variants of the figure:
|
||||||
in two types of projections, consider the difference.
|
*spatial cross* and *cross-cube* in two types of projections, consider the difference.
|
||||||
{%- endcapture %}
|
{%- endcapture %}
|
||||||
{%- assign articles = articles | push: article_brief %}
|
{%- assign articles = articles | push: article_brief %}
|
||||||
{%- assign articles = articles | push: "Spinning cube in space" %}
|
{%- assign articles = articles | push: "Spinning cube in space" %}
|
||||||
{%- capture article_brief %}
|
{%- capture article_brief %}
|
||||||
We consider the difference between parallel and perspective projection. Both are widely used in practice for various
|
We consider the difference between parallel and perspective projection. Both are widely used in practice
|
||||||
purposes. In the previous example, we rotated square on plane — we pass into three-dimensional space. Now, to display
|
for various purposes. In the previous example, we rotated square on plane — we pass into three-dimensional
|
||||||
the rotation of a three-dimensional object on the screen plane, we first need to create a three-dimensional object,
|
space. Now, to display the rotation of a three-dimensional object on the screen plane, we first need to
|
||||||
rotate it by an angle, draw a projection from it and display already the projection on the screen.
|
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 %}
|
{%- 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" %}
|
||||||
|
|
|
@ -53,5 +53,5 @@ function drawFigure(canvas, proj) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
|
|
|
@ -51,5 +51,5 @@ function centerPoint(canvas) {
|
||||||
context.arc(tv3.x, tv3.y, 5.5, 0, 2*Math.PI);
|
context.arc(tv3.x, tv3.y, 5.5, 0, 2*Math.PI);
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint3,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint3,50));
|
||||||
|
|
|
@ -112,5 +112,5 @@ function drawFigure(canvas, proj, alpha=0.8) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
|
|
|
@ -92,5 +92,5 @@ function centerPoint(canvas) {
|
||||||
context.arc(tv5.x, tv5.y, 6.5, 0, 2*Math.PI);
|
context.arc(tv5.x, tv5.y, 6.5, 0, 2*Math.PI);
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint5,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint5,50));
|
||||||
|
|
|
@ -48,5 +48,5 @@ function drawFigure(canvas, arr) {
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
|
|
|
@ -22,5 +22,5 @@ function repaint2() {
|
||||||
drawFigure(canvas2, square2);
|
drawFigure(canvas2, square2);
|
||||||
}
|
}
|
||||||
|
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
|
||||||
|
|
|
@ -102,7 +102,7 @@ function drawFigure(canvas, arr) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -155,6 +155,6 @@ function repaint2() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint2,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -11,12 +11,12 @@ title_translated: Spinning cube in space
|
||||||
date: 2023.01.10
|
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 }}).
|
||||||
|
|
||||||
|
@ -221,6 +221,6 @@ function drawFigure(canvas, proj) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -266,6 +266,6 @@ function drawFigure(canvas, proj, alpha=0.8) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
```js
|
```js
|
||||||
// после загрузки страницы, задаём интервал обновления изображения
|
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||||||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|
||||||
```
|
```
|
||||||
|
|
|
@ -18,18 +18,19 @@ title_translated: Code with comments
|
||||||
{%- assign articles = articles | push: article_brief %}
|
{%- assign articles = articles | push: article_brief %}
|
||||||
{%- assign articles = articles | push: "Вращаем пространственный крест" %}
|
{%- assign articles = articles | push: "Вращаем пространственный крест" %}
|
||||||
{%- capture article_brief %}
|
{%- capture article_brief %}
|
||||||
Пишем алгоритм для поворота объёмной фигуры на угол вокруг своего центра по всем трём осям сразу. В предыдущем
|
Пишем алгоритм для поворота объёмной фигуры на угол вокруг своего центра по всем трём осям сразу. В
|
||||||
примере мы вращали куб в пространстве — теперь кубиков будет много, алгоритм будет почти такой же и формулы
|
предыдущем примере мы вращали куб в пространстве — теперь кубиков будет много, алгоритм будет почти
|
||||||
будем использовать те же. Рисуем два варианта фигуры: *пространственный крест* и *крест-куб* в двух типах проекций,
|
такой же и формулы будем использовать те же. Рисуем два варианта фигуры: *пространственный крест* и
|
||||||
рассматриваем разницу.
|
*крест-куб* в двух типах проекций, рассматриваем разницу.
|
||||||
{%- endcapture %}
|
{%- endcapture %}
|
||||||
{%- assign articles = articles | push: article_brief %}
|
{%- assign articles = articles | push: article_brief %}
|
||||||
{%- assign articles = articles | push: "Вращаем куб в пространстве" %}
|
{%- assign articles = articles | push: "Вращаем куб в пространстве" %}
|
||||||
{%- capture article_brief %}
|
{%- capture article_brief %}
|
||||||
Рассматриваем разницу между параллельной и перспективной проекцией. Обе широко используются на практике для
|
Рассматриваем разницу между параллельной и перспективной проекцией. Обе широко используются на практике
|
||||||
различных целей. В предыдущем примере мы вращали квадрат на плоскости — переходим в трёхмерное пространство.
|
для различных целей. В предыдущем примере мы вращали квадрат на плоскости — переходим в трёхмерное
|
||||||
Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала создать трёхмерный
|
пространство. Теперь, чтобы отобразить на плоскости экрана поворот трёхмерного объекта, нужно сначала
|
||||||
объект, повернуть его на угол, срисовать с него проекцию и отобразить на экране уже проекцию.
|
создать *математическую модель* трёхмерного объекта, повернуть её на угол, срисовать с неё проекцию и
|
||||||
|
отобразить на экране уже проекцию.
|
||||||
{%- 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