screenshot lego pixel art animation


LEGO, HTML5 and Mathematics can be combined to create LEGO objects, in this case the physical LEGO bricks are replaced by virtual pixel-art LEGO bricks.

Creating such a type of animation involves a number of steps.

The model

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.

infographic lego brick types
Lego brick types

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 large.
The model data needed for the HTML5 LEGO animation is much smaller.

Model Data

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.

infographic model data as image
Model data as 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 or SVG.
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.

infographic fundamental lego unit
Fundamental Lego Unit

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 bricks.

To make the LEGO object look less clinical/perfect, more vivid, each LEGO brick has a slightly different color.

Web Workers

The process of calculating the HTML5 LEGO animation is processor intensive.
Javascript, the program language used to generate this HTML5 LEGO animation, and updating all the elements of the webpage is done in one single process or thread; if Javascript runs the webpage isn't updated 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 animation.

infographic web workers; duration animation with and without web worker.
Duration animation with (red) and without (gray) Web Worker

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.

Arjan Westerdiep
freelance front-end developer /
visual artist
SOJ Palmelaan 84,
9728VB Groningen,
The Netherlands