darokin:

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.