LEGO, HTML5 and Mathematics can be combined to create LEGO objects, in
this case the physical LEGO bricks are replaced by virtual pixel-art
Creating such a type of animation involves a number of steps.
Firstly, a three-dimensional model, a virtual representation of an
object, has to be translated into so-called voxels; volumetric pixels or three-dimensional pixels
A voxel most often has the shape of a cube.
To create the HTML5 LEGO animation voxels the size of the so-called
Fundamental LEGO Unit (FLU) are used, which, in terms of dimensions,
differ slightly from a cube.
If you want to convert your own 3D model into a voxel representation take a look at
the voxelizer on this website.
The next step is to combine the Fundamental LEGO Units to 2x2, 2x4,
2x6, and 2x8 LEGO bricks, if possible.
The name of the LEGO bricks is based on the number of dots in
horizontal and vertical direction.
The translation from a three-dimensional model into voxels and
eventually into LEGO bricks occurs offline in advance, since this only
needs to be done once and the file size of the 3D model can be quite
The model data needed for the HTML5 LEGO animation is much smaller.
The model data is used to build the LEGO object during
the HTML5 LEGO animation.
In this case the data representing the LEGO object is stored as an image.
By using an image, the data is compressed, so it's
transferred slighty faster and easily on the internet compared to a more common text file.
Once the image is loaded, the model data is translated into numbers and stored on your local computer.
HTML5 LEGO animation
To generate an image or animation by code you have two options in HTML5; you can use either the canvas
The canvas is used for pixel graphics, SVG is used for vector graphics.
The HTML5 LEGO animation is based on pixels, so the canvas is used.
To render each LEGO brick on the canvas, each LEGO brick could be drawn by hand.
For each color and each LEGO brick type an image needs to be drawn.
To reduce the amount of pixel pushing by hand, only one small image
is used, which is the Fundamental LEGO Unit for the HTML5 LEGO animation.
Each type of LEGO brick consists of a combination of these small images.
The initial color of the image is used to indentify
the color of the LEGO brick element. For example, gray means bright color in front, blue
is the color for the darker left side, green is transparent etc.
The exact color drawn on the canvas depends on these initial colors in
combination with the colors used by the LEGO company for real LEGO
To make the LEGO object look less clinical/perfect, more vivid, each LEGO brick has
a slightly different color.
animation, and updating all the elements of the webpage is done in one
and vice versa.
Most recent browsers support a feature called web worker.
A web worker is a seperate process, which doesn't interfere with
the elements on the html page.
By using the web worker - if available - the webpage isn't slowed down
and the HTML5 LEGO animation runs much more smoothly and the webpage remains responsive.
A technique called memoization is used aswell to speed up
The web worker has a limitation, it can't access the elements on the html page
which is not a problem since the web worker is solely used to generate the HTML5 LEGO animation.