If you want to convert your own 3D model into a voxel representation take a look at
the voxelizer on this website.
miscellaneous
doodles
drububu
General
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.
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
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.
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.
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.
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.
Voxels and Lego, The size of a voxel is most likely 1.0 x 1.0 x 1.0; a cube. A 2x2 lego brick has a slightly different size, namely 1.0 x 0.6 x 1.0.
Changing the voxel size to 1.0 x 0.6 x 1.0 will result in voxels with the same dimensions as those of 2x2 lego bricks.
The last step is to combine the 2x2 lego bricks to 2x4, 2x6 or 2x8 lego bricks, if possible.
These steps will allow to convert any 3D object into a lego object of any size.
The voxel data can be used to build a real lego object the size of one metre (image above).
The choice to use a height of one metre was based on the estimated costs, since I had to buy every single lego brick.
You could start to build a lego brick object from scratch and rely on your artistic modelling skills. Since the data was available, however, I decided not to adopt this approach.
By generating a blueprint (image below) which shows me exactly how the lego bricks have to be positioned, the process of building is as efficient as possible. The final result is not a surprise; it is ideally equal to the virtual lego object.
Lego Blueprint, Once the complete blueprint has been generated, it's time to generate a blue print for each horizontal layer of lego bricks and start building the real lego object.
Reproducing the blueprints on a one-on-one basis is not sufficient to build the real lego object.
The real object is not rigid enough to withstand gravity. For this
project the lego bricks on the outside needed to be approxiamately 3
lego units thick.
For instance, to prevent the arms from falling down, more bricks are
needed. The inside needed a internal structure as well to prevent the
object from collapsing from under it's weight.
During the building phase these additional lego bricks are applied.
The image above is one of the many horizontal layers of the lego brick object.
Click on the icon on the right to view the complete set of blueprints for the horizontal layers.
3D Lego Animation, The voxel data can be used to generate a three-dimensional animation as well.
The so-called physics animation shows the virtual lego object which falls apart.
The 3D lego animation is made with blender, a non-commercial, free 3dD program.
