pomodoro/1
pomodoro/1
1
0
Fork 0
Code Wiki Activity

2023-11-30

Browse source
This commit is contained in:
Gennadiy 2023-12-17 09:49:38 +03:00
parent f2e0e0f461
commit 80533ed026
10 changed files with 30 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jekyll_site/_includes/counters_body.html
View file

@ -1,2 +1,2 @@
<noscript><div><img src="https://mc.yandex.ru/watch/85726914" style="position:absolute; left:-9999px;" alt=""></div></noscript>
<noscript><div><img src="https://mc.yandex.ru/watch/95699479" style="position:absolute; left:-9999px;" alt=""></div></noscript>
<!-- /Yandex.Metrika counter -->

10
jekyll_site/_includes/counters_head.html
View file

@ -1,16 +1,8 @@
<!-- Google tag (gtag.js) -->
<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', 'G-1L7J3YNRZ7');
</script>
<!-- Yandex.Metrika counter -->
<script>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();for(var j=0;j<document.scripts.length;j++){if(document.scripts[j].src===r){return;}}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");
ym(85726914,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});
ym(95699479,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});
</script>

2
jekyll_site/_includes/volumetric-tetris-en.html
View file

@ -102,7 +102,7 @@
<label for="dist">Z</label>
<output id="oDist" name="oDist">640</output>
</div>
<label for="center">Show the central point:</label>
<label for="center">Move the central point:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
</div>

2
jekyll_site/_includes/volumetric-tetris-ru.html
View file

@ -102,7 +102,7 @@
<label for="dist">Z</label>
<output id="oDist" name="oDist">640</output>
</div>
<label for="center">Показать центральную точку:</label>
<label for="center">Двигать центральную точку:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
</div>

4
jekyll_site/en/2023/01/11/spinning-cube-in-space.md
View file

@ -2,7 +2,7 @@
title: Spinning cube in space
description: We consider the difference between parallel and perspective projection. Both are widely used in practice for various purposes. In the previous example, we...
sections: [Linear perspective,Rotation matrix,Experimental model]
tags: [javascript,online,canvas,geometry,graphics,image,picture,square,cube]
tags: [javascript,online,canvas,geometry,graphics,image,picture,square,cube,3d,three-dimensional]
scripts: [/js/classes-point-cube.js,/js/spinning-cube.js,/js/spinning-cube2.js]
styles: [/css/pomodoro1.css]
canonical_url: /en/2023/01/11/spinning-cube-in-space.html
@ -93,7 +93,7 @@ center onto the observer screen.
<output name="result">300</output>
</div>
<div>
<label for="center">Show the central point:</label>
<label for="center">Move the central point:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
</form>

18
jekyll_site/en/2023/01/16/spinning-spatial-cross.md
View file

@ -2,7 +2,7 @@
title: Spinning spatial cross
description: We are writing an algorithm for rotating a three-dimensional figure around its center along all three axes at once. In the previous example, we rotated cube...
sections: [Volumetric figures,Rotation matrix,Experimental model]
tags: [javascript,online,canvas,geometry,matrix,graphics,image,picture,square,cube]
tags: [javascript,online,canvas,geometry,matrix,graphics,image,picture,square,cube,3d,three-dimensional]
scripts: [/js/classes-point-cube.js,/js/spinning-spatial-cross.js,/js/spinning-spatial-cross2.js]
styles: [/css/pomodoro1.css]
canonical_url: /en/2023/01/16/spinning-spatial-cross.html
@ -108,7 +108,7 @@ direction — *linear perspective* or *reverse perspective* and transparency of
<output name="result">300</output>
</div>
<div>
<label for="center">Show the central point:</label>
<label for="center">Move the central point:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
<span>Transparency of cubes:</span>
@ -137,13 +137,13 @@ direction — *linear perspective* or *reverse perspective* and transparency of
{% 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
that, we start the rotation along all three axes at once. At each step, we bypass the array of cubes and get
projections of their faces. Then we sort the array of faces by remoteness from the projection center, bypass
this array and throw away the same pairs from it — these are the adjacent walls between neighboring cubes
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.
We prepare a three-dimensional 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 that, we start the rotation along all three axes at once. At each step, we bypass the array of cubes and
get projections of their faces. Then we sort the array of faces by remoteness from the projection center, bypass
this array and throw away the same pairs from it — these are the adjacent walls between neighboring cubes inside
the figure. After that we draw with a translucent color the cube faces — first the distant, and then the near ones,
so that the distant faces can be seen through the near ones.
{% include heading.html text="Implementation in JavaScript" hash="implementation-in-javascript" %}

2
jekyll_site/js/tetris-controller.js
View file

@ -111,7 +111,7 @@ function changeTv2(axis, caller) {
function changeDistance2(caller) {
d2=caller.target.valueAsNumber;
}
// показать центральную точку
// двигать центральную точку
function showCenter(caller) {
tv2.show=!tv2.show;
}

4
jekyll_site/ru/2023/01/10/spinning-cube-in-space.md
View file

@ -2,7 +2,7 @@
title: Вращаем куб в пространстве
description: Рассмотрим разницу между параллельной и перспективной проекцией. Обе широко используются на практике для различных целей. В предыдущем примере мы вращали...
sections: [Линейная перспектива,Матрица поворота,Экспериментальная модель]
tags: [javascript,онлайн,canvas,геометрия,графика,изображение,картинка,квадрат,куб]
tags: [javascript,онлайн,canvas,геометрия,графика,изображение,картинка,квадрат,куб,3д,трёхмерный]
scripts: [/js/classes-point-cube.js,/js/spinning-cube.js,/js/spinning-cube2.js]
styles: [/css/pomodoro1.css]
canonical_url: /ru/2023/01/10/spinning-cube-in-space.html
@ -91,7 +91,7 @@ date: 2023.01.10
<output name="result">300</output>
</div>
<div>
<label for="center">Показать центральную точку:</label>
<label for="center">Двигать центральную точку:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
</form>

21
jekyll_site/ru/2023/01/15/spinning-spatial-cross.md
View file

@ -1,8 +1,8 @@
---
title: Вращаем пространственный крест
description: Пишем алгоритм для поворота объёмной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем примере мы вращали куб в пространстве — в этом...
description: Пишем алгоритм для поворота трёхмерной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем примере мы вращали куб в пространстве — в этом...
sections: [Объёмные фигуры,Матрица поворота,Экспериментальная модель]
tags: [javascript,онлайн,canvas,геометрия,матрица,графика,изображение,картинка,квадрат,куб]
tags: [javascript,онлайн,canvas,геометрия,матрица,графика,изображение,картинка,квадрат,куб,3д,трёхмерный]
scripts: [/js/classes-point-cube.js,/js/spinning-spatial-cross.js,/js/spinning-spatial-cross2.js]
styles: [/css/pomodoro1.css]
canonical_url: /ru/2023/01/15/spinning-spatial-cross.html
@ -11,7 +11,7 @@ title_translated: Spinning spatial cross
date: 2023.01.15
---
Пишем алгоритм для поворота объёмной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем
Пишем алгоритм для поворота трёхмерной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем
примере мы [вращали куб в пространстве]({{ '/ru/2023/01/10/spinning-cube-in-space.html' | relative_url }})
— в этом примере кубиков будет много, алгоритм будет почти такой же, и формулы будем использовать те же. Для
наглядности возьмём два варианта симметричной объёмной фигуры в двух типах проекций — *пространственный крест*
@ -106,7 +106,7 @@ date: 2023.01.15
<output name="result">300</output>
</div>
<div>
<label for="center">Показать центральную точку:</label>
<label for="center">Двигать центральную точку:</label>
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div>
<span>Прозрачность кубиков:</span>
@ -135,12 +135,13 @@ date: 2023.01.15
{% include heading.html text="Описание алгоритма" hash="algorithm-description" %}
Подготавливаем матрицу из нулей и единиц, где единица означает кубик в определенном месте фигуры. Затем
обходим эту матрицу и заполняем массив кубиков с соответствующими координатами вершин. После этого запускаем
вращение по всем трём осям сразу. На каждом шаге обходим массив кубиков и получаем проекции их граней. Затем
сортируем массив граней по удалённости от центра проекции, обходим этот массив и выкидываем из него одинаковые
пары — это есть смежные стенки между соседними кубиками внутри фигуры. После этого полупрозрачным цветом рисуем
грани кубиков — сначала дальние и затем ближние, чтобы через ближние грани было видно дальние.
Подготавливаем трёхмерную матрицу из нулей и единиц, где единица означает кубик в определенном месте фигуры.
Затем обходим эту матрицу и заполняем массив кубиков с соответствующими координатами вершин. После этого
запускаем вращение по всем трём осям сразу. На каждом шаге обходим массив кубиков и получаем проекции их
граней. Затем сортируем массив граней по удалённости от центра проекции, обходим этот массив и выкидываем
из него одинаковые пары — это есть смежные стенки между соседними кубиками внутри фигуры. После этого
рисуем полупрозрачным цветом грани кубиков — сначала дальние, а затем ближние, чтобы через ближние грани
было видно дальние.
{% include heading.html text="Реализация на JavaScript" hash="implementation-in-javascript" %}

2
jekyll_site/ru/index.md
View file

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