// class constructor to initialize the stroke weight, color and size of the shapes

  constructor() {

    this.strokeWeight = 2;

    this.color = 0;

    this.size = 20;

  }

//   drawArt(){

//   }

}

let shapesArr;

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

  for (let i = 0; i < width; i += this.size) { 

    for (let j = 0; j < height; j += this.size) {

      shapesArr.push(new Shape())

      // randomize the color and shape of each square

      this.color = (random(255), random(255), random(255));

      fill(this.color); // randomly generate a color for each shape

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

        rect(i, j, this.size, this.size); // draw a rectangle

      } else {

        ellipse(i + this.size / 2, j + this.size / 2, this.size, this.size); // draw an ellipse

      }

    }

  }

}

​

function draw() {

  // nested for loops to create a grid pattern

  shapesArr

}

​

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

function mouseMoved() {

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

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

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

}

​