My Sketch

let cols, rows;

let squareSize = 50;

​

function setup() {

  createCanvas(400, 400);

  cols = width / squareSize;

  rows = height / squareSize;

​

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      drawPattern(i, j);

    }

  }

}

​

function drawPattern(i, j) {

  let x = i * squareSize;

  let y = j * squareSize;

  fill(random(255), random(255), random(255));

  rect(x, y, squareSize, squareSize);

}

​

function mouseClicked() {

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      drawCirclePattern(i, j);

    }

  }

}

​

function drawCirclePattern(i, j) {

  let x = i * squareSize + squareSize / 2;

  let y = j * squareSize + squareSize / 2;

  fill(random(255), random(255), random(255));

  ellipse(x, y, squareSize, squareSize);

}

​

​