// https://www.youtube.com/watch?v=cnRD9o6odjk&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=18&t=687s

// https://www.youtube.com/watch?v=1c1_TMdf8b8&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=19

​

// global scope, applies to everything no matter what ‘function draw’ section it’s in

let X1, Y1; // coordinates

// ‘let’ means allow this variable to be defined later on

​

function setup() {

  createCanvas(400, 400); // (width, height)

  background(0); // in function setup so it doesn't form new layers every frame, stays the same throughout

}

​

function draw() {

  // restrictions of the bigger squares -- loops

  // horizontal: X1

  for (var X1 = 8; X1 <= width; X1 += 32) {

    // variable X1 starts at point 8 (out of 400) on the x-axis; it cannot get exceed the width of the canvas; it adds 32 to the space between each square

    // vertical: Y1

    for (var Y1 = 8; Y1 <= height; Y1 += 32) {

      // variable Y1 starts at point 8 (out of 400) on the y-axis; it cannot get exceed the height of the canvas; it adds 32 to the space between each square

​

      // bigger square shape parameters

      noStroke();

      rectMode(CENTER);

      fill(0, random(0, 255), random(0, 255), 150); // last value is alpha; it determines how transparent the shape is from a level of 0-255

      rect(X1, Y1, 20, 20); // (x coordinate, y coordinate, width, height)

​

      // smaller square shape parameters

      noStroke();

      rectMode(CENTER);

      fill(0, random(0, 255), random(0, 255), 150); // last value is alpha; it determines how transparent the shape is from a level of 0-255

      rect(X1, Y1, 10, 10); // (x coordinate, y coordinate, width, height)

    }

  }

}

​