let strokeW = 2; // initialize the stroke weight to 2

let c = 0; // initialize the color to 0

let s = 20; // initialize the size of each shape to 20

​

function setup() {

  createCanvas(600, 600); // create canvas with dimensions 600x600

  background(255); // set the background color to white

  strokeWeight(strokeW); // set the stroke weight to the initial value of 2

  stroke(0); // set the stroke color to black

}

​

function draw() {

  // nested for loops to create a grid pattern

  for (let i = 0; i < width; i += s) { 

    for (let j = 0; j < height; j += s) {

      // randomize the color and shape of each square

      fill(random(255), random(255), random(255)); // randomly generate a color for each shape

      if (random(1) > 0.5) { // randomly choose between a rectangle or an ellipse

        rect(i, j, s, s); // draw a rectangle

      } else {

        ellipse(i + s / 2, j + s / 2, s, s); // draw an ellipse

      }

    }

  }

}

​

// function to change the size and stroke weight of the squares on mouse movement

function mouseMoved() {

  s = map(mouseX, 0, width, 10, 50); // map the size of the shapes to the x position of the mouse

  strokeW = map(mouseY, 0, height, 1, 10); // map the stroke weight to the y position of the mouse

  strokeWeight(strokeW); // update the stroke weight with the new mapped value

}

​