​

function setup() {

  c = createCanvas(800, 800);

  background(255);

  rectMode(CENTER)

  textSize(12);

  frameRate(2);

  //noLoop()

​

}

​

function draw() {

  background(30);

  fill(255);

  translate(75,75); //centers the grid in the canvas [hardcoded]

​

  //version 1   

  //let howManyX = floor(map(mouseX, 0, windowHeight, 3, 16))

  //let howManyY = floor(map(mouseY, 0, windowHeight, 3, 16))

  let mySize = 80;

  let howManyX = 5;  //determines number of collumns (elements on x axis)

  let howManyY = 5;  //determines number of rows (elements on y axis)

  let horSpc = 40;    //adds spacing between collumns (vertical gap)

  let verSpc = 40;    //adds spacing between rows (horizontal gap)

  //Outer loop with i as counter -> to calcualte X

  for (let i = 0; i < howManyX; i = i + 1) {

    //Inner loop with j as counter -> to calculate Y

    for (let j = 0; j < howManyY; j = j + 1) {

      //print("Outer loop i: ", i,". Inner loop j: ", j);

      let myX = (mySize + horSpc) * i + mySize;

      let myY = (mySize + verSpc) * j + mySize;

      //print("myX: ", myX,". myY: ", myY);

      fill(125,floor(random(100,180)), floor(random(120,255)) );

      noStroke();

    let myConfigObj = {

    x:myX,

    y:myY,

    myNum: 6 * mySize / 50, //floor(random(3, 10)),

    myStep: 10, //floor(random(2, 25)),

    myStr: random(0.25, 1.25),

    wiggleX: floor(random(-10,11)),

    wiggleY: floor (random(-10,11)),

  }

  //same function but with a configObj

  drawingPyramid4(myConfigObj);

    }

  }

​

  //text('1) Nested for loop.', 200, 30);

}

​

function drawingPyramid4(confObj) {

​

  //unwrapping the confObj parcel

   let x = confObj.x;

   let y = confObj.y;

   let num = confObj.myNum;

   let step = confObj.myStep;

   //let strW = confObj.myStr;

​

  //pyramid drawing code start

  for (let i = 0; i < num; i = i + 1) {

    //this calculates the size of the rect

​

    let s = (num * step) - (step * i);

    let wiggleX = floor(random(-5,6));

    let wiggleY = floor(random (-2,3));

    //noStroke();

    //strokeWeight(strW);

    fill(255,floor(random(100,180)), floor(random(120,255)),60 ); 

    //try and make a rainbow fill maybe?

    rect(x + wiggleX, y + wiggleX, s, s);

  }

​

}

​

function keyPressed() {

    if (key == 's') {

       saveCanvas(c, 'myImage.png');

    }

   if (key == 'x') {

      createCanvas(width,height);

      background(0);

    }

}

​

​