2023-11-30

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

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 --> <!-- /Yandex.Metrika counter -->

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 --> <!-- 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)};
m[i].l=1*new Date();for(var j=0;j<document.scripts.length;j++){if(document.scripts[j].src===r){return;}} 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)}) 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"); (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> </script>

View file

@ -102,7 +102,7 @@
<label for="dist">Z</label> <label for="dist">Z</label>
<output id="oDist" name="oDist">640</output> <output id="oDist" name="oDist">640</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)"> <input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div> </div>
</div> </div>

View file

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

View file

@ -2,7 +2,7 @@
title: Spinning cube in space 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... 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] 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] scripts: [/js/classes-point-cube.js,/js/spinning-cube.js,/js/spinning-cube2.js]
styles: [/css/pomodoro1.css] styles: [/css/pomodoro1.css]
canonical_url: /en/2023/01/11/spinning-cube-in-space.html 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> <output name="result">300</output>
</div> </div>
<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)"> <input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div> </div>
</form> </form>

View file

@ -2,7 +2,7 @@
title: Spinning spatial cross 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... 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] 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] scripts: [/js/classes-point-cube.js,/js/spinning-spatial-cross.js,/js/spinning-spatial-cross2.js]
styles: [/css/pomodoro1.css] styles: [/css/pomodoro1.css]
canonical_url: /en/2023/01/16/spinning-spatial-cross.html 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> <output name="result">300</output>
</div> </div>
<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)"> <input type="checkbox" id="center" name="center" oninput="showCenter(event)">
</div> </div>
<span>Transparency of cubes:</span> <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" %} {% 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 We prepare a three-dimensional matrix of zeros and ones, where one means a cube in a certain place of the figure.
bypass this matrix and fill in the array of cubes with the corresponding coordinates of the vertices. After Then we bypass this matrix and fill in the array of cubes with the corresponding coordinates of the vertices.
that, we start the rotation along all three axes at once. At each step, we bypass the array of cubes and get After that, we start the rotation along all three axes at once. At each step, we bypass the array of cubes and
projections of their faces. Then we sort the array of faces by remoteness from the projection center, bypass 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 this array and throw away the same pairs from it these are the adjacent walls between neighboring cubes inside
inside the figure. After that we draw cube faces with a translucent color first the distant and then the the figure. After that we draw with a translucent color the cube faces first the distant, and then the near ones,
near ones, so that the distant faces can be seen through 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" %} {% include heading.html text="Implementation in JavaScript" hash="implementation-in-javascript" %}

View file

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

View file

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

View file

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

View file

@ -19,7 +19,7 @@ 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 %}
Пишем алгоритм для поворота объёмной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем Пишем алгоритм для поворота трёхмерной фигуры вокруг своего центра по всем трём осям сразу. В предыдущем
примере мы вращали куб в пространстве в этом примере кубиков будет много, алгоритм будет почти такой примере мы вращали куб в пространстве в этом примере кубиков будет много, алгоритм будет почти такой
же, и формулы будем использовать те же. Для наглядности возьмём два варианта симметричной объёмной фигуры же, и формулы будем использовать те же. Для наглядности возьмём два варианта симметричной объёмной фигуры
в двух типах проекций *пространственный крест* и *крест-куб* рассматриваем разницу между ними. в двух типах проекций *пространственный крест* и *крест-куб* рассматриваем разницу между ними.