​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

}

​

function draw() {

  if (frameCount % 10 == 0) {

    drawPattern();

  }

}

​

function drawPattern() {

  background(255);

  let cols = 20;

  let rows = 20;

  let w = width / cols;

  let h = height / rows;

​

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

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

      let x = i * w;

      let y = j * h;

      let r = random(w / 2); // Random size

​

      fill(random(255), random(255), random(255), 150); // Random color

      if (shapeType == "circle") {

        ellipse(x + w / 2, y + h / 2, r * 2); // Draw circles

      } else {

        rect(x + w / 4, y + h / 4, r * 1.8); // Draw squares

      }

    }

  }

}

​

/*

function mousePressed() {

  drawPattern(); // Refresh the grid on mouse click

}

*/

​

function keyPressed() {

  if (shapeType == "circle") {

    shapeType = "square"; // press spacebar to make the shapes square

  } else {

    shapeType = "circle"; // press spacebar to make the shapes circle

  }

  drawPattern(); // Redraw the grid with the new shape

}

​