Voxel art llama !
Computer generated images based on triangles.
We successively draw (couterclockwise) the 4 triangles formed by:
the inverse intersection of a square and its inner diamond
and conversely, those formed by:
the inverse intersection of this diamond with its outer square.
We start with a size-1 square and multiply its size by a factor 2 at each iteration.
We assume we have 2 groups of 4 functions drawing the triangles, the main algorithm of generating the image should look like this :
// 2 arrays of 4 functions, each one drawing a different triangle
_arrTriangleDrawFunc1 = [drawTriangleUP, drawTriangleLEFT, drawTriangleDOWN, drawTriangleRIGHT];
_arrTriangleDrawFunc2 = [drawTriangleUPLEFT, drawTriangleDOWNLEFT, drawTriangleDOWNRIGHT, drawTriangleUPRIGHT];
_palette = [rgb(80,80,255), rgb(112,112,255), rgb(144,144,255), rgb(176,176,255)];
_size = 1;
loop()
{
// for each of the 4 triangles of each group
for (_indFunc = 0; _indFunc < 4; _indFunc++)
{
_indColor = random(_palette.length);
_arrTriangleDrawFunc1[_indFunc](_size, _palette[_indColor]);
_indColor = random(_palette.length);
_arrTriangleDrawFunc2[_indFunc](_size, _palette[_indColor]);
}
_size *= 2;
}
I’ve done this experiment for fun and because I was a need of ‘creating’ something, basically I started to make a pixel art of something very similar and just gave a try of coding it, and messing around with the algorithm…
Look how a small tweak in the algo reveals a totally different rendering !
Images generated using HTML5 canvas and javascript.