nested for loop example

4/3/2024

*/

function setup() {

  createCanvas(windowWidth, windowHeight);

  pattern();

}

function pattern() {

  background(" #69976E");

  noStroke(0);

  function mousePressed() {

    pattern();

  }

  // nested loop

  for (var x = 0; x <= width; x += 50) {

    for (var y = 0; y <= width; y += 50) {

      //face

      //fill("orange");

      //ellipse(x, y, 50); //head

      //fill("brown");

      //ellipse(x + 15, y - 10, 10); // right eye

      //ellipse(x - 15, y - 10, 10); // left eye

      //rect(x - 10, y + 10, 20, 5, 2);

    }

  }

  // using transformation

  for (var x = 0; x <= width; x += 50) {

    for (var y = 0; y <= width; y += 50) {

      fill(" #88A075");

      push();

      translate(x, y);

      rect(0, 0, 50, 25, 25, 50);

      fill("#75A454");

      ellipse(10, 1, 30, 40);

      fill("#D8B2D8");

      square(0, 0, 40, 25);

      pop();

​

      // columns

      var cols = 28; // number of columns

      var colWidth = width / cols; //wth canvas/col

      var rows = cols * (height / width);

      var rowHeight = height / rows;

      for (let x = 0; x <= width; x += colWidth) {

        for (let y = 0; y <= width; y += rowHeight) {

          fill("#FFCAD4"); //'#FFFFCC'); //255, 255, 237 //#FFFFED'

          ellipse(x, y, colWidth, rowHeight);

          fill(" #87CEEB"); //#A4D3E8

          rect(x + colWidth / 2.3, y + rowHeight / 2.3, 10);

​

          //randomness

          //noFill();

      var r = random (50, 255);

       var g = random (100, 255); + map(y,0,height,0,100);

       var b = random (100, 255); 

      fill(r, g, b);

          var s = random(1, 5) + map(y, 0, height, 0, 20);

          var yOffset = random(0, map(y, 0, height, 0, 100));

          //ellipse(0, yoffset, s);

        }

      }

}

  }

}

​