ICM Week4

This week we went through the concept of ‘ for loop’. It makes me think of an exhibition I visited last weekend. It’s Vera Molnar’s work.

I decided to remake her work by using ‘for loop’.

I first created two nested for loop functions to draw the outter quads, then I realized I could use three nested for loop to draw the quads inside.

let palette = [	"#ff0054", "#cc2936", "#ffb7c4", "#44e5e7", "#028090", "#9cedeb",	"#ffbc42", "#ff9505",	"#fff3b0", "#E87D1E",];

function setup() {
  createCanvas(500,500);
  frameRate(0.5);
}

function draw() {
  background(255);
  let quadX = 0;
  let quadY = 0;
  let gridSize = 6;
  let quadSize,offset;  
  
  	quadSize = (height - 100) / gridSize;
	offset = (quadSize + 100) / 2;
  
  // for loop part: use i/j to draw the outter quads
  // use k to draw the inner quads
  	for (i = 0; i < gridSize; i++) {
	for (j = 0; j < gridSize; j++) {
	for (k = 4; k > 0; k--) {

	quadX = i * quadSize + offset;
	quadY = j * quadSize + offset;
     
  // change the color of quad    
  stroke(random(palette));
      
  quad((quadX - (quadSize * (k / 4)) / 2) + random(-2, 2),
	   (quadY - (quadSize * (k / 4)) / 2) + random(-2, 2),

	   (quadX + (quadSize * (k / 4)) / 2) + random(-2, 2),
	   (quadY - (quadSize * (k / 4)) / 2) + random(-2, 2),
  
	   (quadX + (quadSize * (k / 4)) / 2) + random(-2, 2),
	   (quadY + (quadSize * (k / 4)) / 2) + random(-2, 2),

	   (quadX - (quadSize * (k / 4)) / 2) + random(-2, 2),
	   (quadY + (quadSize * (k / 4)) / 2) + random(-2, 2));
                }
            }
        }
}

Reference Links

https://www.openprocessing.org/sketch/103125

https://www.openprocessing.org/sketch/817539

http://dam.org/artists/phase-one/vera-molnar/artworks-bodies-of-work/144-trap-zes