Procedural real-time webgl animation showing approximately 10,000 individually animated
cubes. All cubes together render a voxel representation of a three-dimensional object.
Initially, each cube is randomly placed in a three-dimensional grid and has a maximum of six
directions in which it can move; left, right, up, down, front, and back; see image below. The cubes may
not leave the minimum and maximum dimensions of the grid and may not share
their position with any other cube.
Based on their current position, the cubes have to find their way to their predefined target
The path from the current position to the target position is unknown, which means that it's
not animated by hand, but based on a number of ground rules. This kind of computer animation is
known as a procedural animation.
As long as a cube has not reached his target position, it has one, two or three preferred
directions in which it can move to reach its target position.
If the vertical position differs from the vertical target position – left image – the
only preferred direction is vertical. If the position above the current position is not
occupied, the cube can be moved upwards, towards the target position.
If the current vertical and horizontal positions differ from the horizontal and vertical
target positions – middle image – the number of preferred directions is two. One
of these directions is randomly chosen. If the chosen direction is not available – because it's occupied
by another cube – the other direction, if available, may be used.
If the current horizontal, vertical and depth positions differ from all of the horizontal, vertical
and depth target positions, the cube can be moved in three directions towards the
predefined target position. Again, one of these preferred directions is randomly chosen, if
the new position to which the cube will be moved is available.
The are sometime no preferred directions available because these are occupied by
one of the other cubes. In this case, one of the non-preferred directions is randomly
chosen. The cube will move away from the target position for a short time. As soon as a
direction towards the target position is available, the cube will move towards the
The described procedure will be repeated until all the cubes have reached their target position.
Once all the cubes have reached their target position, a new model will be loaded and the whole
procedure will be repeated.