---
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,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
url_translated: /ru/2023/01/15/spinning-spatial-cross.html
title_translated: Вращаем пространственный крест
date: 2023.01.16
lang: en
---

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 in space]({{ '/en/2023/01/11/spinning-cube-in-space.html' | relative_url }})
— in this example, there are a lot of cubes, the algorithm will be almost the same, and we will use
the same formulas. For clarity, let's take two variants of a symmetrical volumetric figure in two
types of projections — *spatial cross* and *cross-cube* — we consider the difference between them.

Testing the experimental interface: [Volumetric tetris]({{ '/en/2023/01/22/volumetric-tetris.html' | relative_url }}).

{% include heading.html text="Spatial cross" hash="spatial-cross" %}

<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; padding-right: 8px;">
    <span>Parallel projection</span>
    <canvas id="canvas1" width="300" height="300" style="border: 1px solid gray;">
      <p>Canvas for displaying computations results</p>
    </canvas>
  </div>
  <div style="display: flex; flex-direction: column;">
    <span>Perspective projection</span>
    <canvas id="canvas2" width="300" height="300" style="border: 1px solid gray;">
      <p>Canvas for displaying computations results</p>
    </canvas>
  </div>
</div>

{% include heading.html text="Cross-cube" hash="cross-cube" %}

<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; padding-right: 8px;">
    <span>Parallel projection</span>
    <canvas id="canvas3" width="300" height="300" style="border: 1px solid gray;">
      <p>Canvas for displaying computations results</p>
    </canvas>
  </div>
  <div style="display: flex; flex-direction: column;">
    <span>Perspective projection</span>
    <canvas id="canvas4" width="300" height="300" style="border: 1px solid gray;">
      <p>Canvas for displaying computations results</p>
    </canvas>
  </div>
</div>

*Parallel projection* — all cubes are the same size.

*Perspective projection* — the cubes look shrinking in the distance.

{% include heading.html text="Experimental model" hash="experimental-model" %}

Slightly complicated version from the previous example — now there are a lot of cubes. In addition to the
previous settings there can be changed: variant of the figure — *spatial cross* or *cross-cube*, face sorting
direction — *straight perspective* or *reverse perspective* and transparency of the cube walls.

<div>
<canvas id="canvas5" width="300" height="300" style="border: 1px solid gray;">
  <p>Canvas for displaying computations results</p>
</canvas>
</div>
<div>
<form>
  <div>
    <span>Rotation around axes:</span>
    <input type="checkbox" id="rotateX" name="rotateX" checked onchange="changeAxis('x',event)">
    <label for="rotateX">X</label>
    <input type="checkbox" id="rotateY" name="rotateY" checked onchange="changeAxis('y',event)">
    <label for="rotateY">Y</label>
    <input type="checkbox" id="rotateZ" name="rotateZ" checked onchange="changeAxis('z',event)">
    <label for="rotateZ">Z</label>
  </div>
  <span>Center onto observer screen:</span>
  <div>
    <input type="range" id="rangeX" name="rangeX" min="0" max="300" value="150" step="1"
           oninput="resultX.value = rangeX.valueAsNumber; changeTv('x',event)">
    <label for="rangeX">X</label>
    <output id="resultX" name="resultX">150</output>
  </div>
  <div>
    <input type="range" id="rangeY" name="rangeY" min="0" max="300" value="150" step="1"
           oninput="resultY.value = rangeY.valueAsNumber; changeTv('y',event)">
    <label for="rangeY">Y</label>
    <output id="resultY" name="resultY">150</output>
  </div>
  <div>
    <input type="range" id="rangeZ" name="rangeZ" min="50" max="220" value="125" step="1"
           oninput="resultZ.value = rangeZ.valueAsNumber; changeTv('z',event)">
    <label for="rangeZ">Z</label>
    <output name="resultZ">125</output>
  </div>
  <span>Remoteness of projection center:</span>
  <div>
    <input type="range" id="distance" name="distance" min="220" max="800" value="300" step="10"
           oninput="result.value = distance.valueAsNumber; changeDistance(event);">
    <label for="distance">Z</label>
    <output name="result">300</output>
  </div>
  <div>
    <label for="center">Move the central point:</label>
    <input type="checkbox" id="center" name="center" oninput="showCenter(event)">
  </div>
  <span>Transparency of cubes:</span>
  <div>
    <input type="range" id="alpha" name="alpha" min="0" max="100" step="1" value="20"
           oninput="oAlpha.value = alpha.valueAsNumber + '%'; changeAlpha(event)">
    <label for="alpha">A</label>
    <output name="oAlpha">20%</output>
  </div>
</form>
<span>Variant of the figure:</span>
<form oninput="changeFigure(event)">
  <input type="radio" id="first" name="figure" value="first">
  <label for="first">Cross</label>
  <input type="radio" id="second" name="figure" value="second" checked>
  <label for="second">Cube</label>
</form>
<span>Linear perspective:</span>
<form oninput="changeOrder(event)">
  <input type="radio" id="linear" name="order" value="linear" checked>
  <label for="linear">Straight</label>
  <input type="radio" id="reverse" name="order" value="reverse">
  <label for="reverse">Reverse</label>
</form>
</div>

{% include heading.html text="Algorithm description" hash="algorithm-description" %}

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" %}

{% include classes-point-cube-en.md -%}

Create objects according to templates and draw their projections on the plane.

```js
'use strict';
// matrices-templates for cubes
const shape1 = [ // spatial cross
  [[0,0,0,0,0], [0,0,0,0,0], [0,0,1,0,0], [0,0,0,0,0], [0,0,0,0,0]],
  [[0,0,0,0,0], [0,0,0,0,0], [0,0,1,0,0], [0,0,0,0,0], [0,0,0,0,0]],
  [[0,0,1,0,0], [0,0,1,0,0], [1,1,1,1,1], [0,0,1,0,0], [0,0,1,0,0]],
  [[0,0,0,0,0], [0,0,0,0,0], [0,0,1,0,0], [0,0,0,0,0], [0,0,0,0,0]],
  [[0,0,0,0,0], [0,0,0,0,0], [0,0,1,0,0], [0,0,0,0,0], [0,0,0,0,0]]];
const shape2 = [ // cross-cube
  [[0,0,1,0,0], [0,0,1,0,0], [1,1,1,1,1], [0,0,1,0,0], [0,0,1,0,0]],
  [[0,0,1,0,0], [0,0,0,0,0], [1,0,0,0,1], [0,0,0,0,0], [0,0,1,0,0]],
  [[1,1,1,1,1], [1,0,0,0,1], [1,0,0,0,1], [1,0,0,0,1], [1,1,1,1,1]],
  [[0,0,1,0,0], [0,0,0,0,0], [1,0,0,0,1], [0,0,0,0,0], [0,0,1,0,0]],
  [[0,0,1,0,0], [0,0,1,0,0], [1,1,1,1,1], [0,0,1,0,0], [0,0,1,0,0]]];
// cube size, number of cubes in a row, indent
const size = 40, row = 5, gap = 50;
// arrays for cubes
const cubes1 = [], cubes2 = [];
// bypass the matrices, fill the arrays with cubes
for (let x=0; x<row; x++)
  for (let y=0; y<row; y++)
    for (let z=0; z<row; z++) {
      if (shape1[x][y][z]==1)
        cubes1.push(new Cube(x*size+gap,y*size+gap,z*size+gap,size));
      if (shape2[x][y][z]==1)
        cubes2.push(new Cube(x*size+gap,y*size+gap,z*size+gap,size));
    }
// figure center, we'll perform a rotation around it
const t0 = new Point(150,150,150);
// remoteness of the projection center
const d = 300;
// observer screen position
const tv = new Point(150,150,125);
// rotation angle in degrees
const deg = {x:1,y:1,z:1};
```
```js
// we'll draw two pictures for each figure
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
const canvas4 = document.getElementById('canvas4');
// image refresh
function repaint() {
  // spatial cross
  processFigure(cubes1,canvas1,canvas2);
  // cross-cube
  processFigure(cubes2,canvas3,canvas4);
}
```
```js
// rotate the figure and get projections
function processFigure(cubes,cnv1,cnv2) {
  // arrays of projections of faces of cubes
  let parallel = [], perspective = [];
  // rotate the cubes and get projections
  for (let cube of cubes) {
    cube.rotate(deg, t0);
    parallel = parallel.concat(cube.projection('parallel',tv,d));
    perspective = perspective.concat(cube.projection('perspective',tv,d));
  }
  // we do not draw adjacent walls between neighboring cubes
  noAdjacent(parallel);
  noAdjacent(perspective);
  // sort the faces of different cubes by remoteness and inside one cube by tilt
  parallel.sort((a,b)=>Math.abs(b.dist-a.dist)>size ? b.dist-a.dist : b.clock-a.clock);
  // sort the faces by remoteness from the projection center
  perspective.sort((a,b)=>b.dist-a.dist);
  // draw parallel projection
  drawFigure(cnv1, parallel);
  // draw perspective projection
  drawFigure(cnv2, perspective);
}
```
```js
// do not draw adjacent walls between neighboring cubes
function noAdjacent(array) {
  // sort the faces by remoteness
  array.sort((a,b) => b.dist-a.dist);
  // remove the adjacent walls between cubes
  for (let i=0, j=1; i<array.length-1; j=++i+1)
    while (j<array.length && Cube.pEquidistant(array[i],array[j]))
      if (Cube.pAdjacent(array[i],array[j])) {
        array.splice(j,1);
        array.splice(i,1);
        i--; j=array.length;
      } else j++;
}
```
```js
// draw a figure by points from an array
function drawFigure(canvas, proj, alpha=0.8) {
  const context = canvas.getContext('2d');
  // clear the entire canvas
  context.clearRect(0, 0, canvas.width, canvas.height);
  // bypass the array of cube faces
  for (let i = 0; i < proj.length; i++) {
    // bypass the array of points and link them with lines
    context.beginPath();
    for (let j = 0; j < proj[i].length; j++) {
      if (j == 0) {
        context.moveTo(proj[i][j].x, proj[i][j].y);
      } else {
        context.lineTo(proj[i][j].x, proj[i][j].y);
      }
    }
    context.closePath();
    // draw the face of the cube along with the edges
    context.lineWidth = 1.9;
    context.lineJoin = 'round';
    context.fillStyle = 'rgba(200,230,201,'+alpha+')';
    context.strokeStyle = 'rgba(102,187,106,'+(0.2+alpha)+')';
    context.fill();
    context.stroke();
  }
}
```
```js
// after loading the page, set the image refresh rate at 20 Hz
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
```