var boolDoRefresh;

var CircleAmount = 5;

function setup() {

  createCanvas(400, 400);

  background(0);

  noStroke();

}

​

function draw() {

  if (boolDoRefresh) {

    background(0);

​

    var gridSize = 50;

​

    for (var x = gridSize; x <= width - gridSize; x += gridSize) { //

      for (var y = gridSize; y <= height - gridSize; y += gridSize) { //Found the set up https://p5js.org/examples/control-embedded-iteration.html

        if (random(100) <= CircleAmount) { //controls how much circles we can have

          fill(random(100), 50, 50); //psuedo-random color

          ellipse(x+8, y+8, 20, 20); //places & centers cirlce

        }

        else {

          fill(random(100), 50, 50); //psuedo-random color

          rect(x - 1, y - 1, 20, 20); //places & centers square

        }

​

      }

    }

​

  }

}

​

//mouse pressed input 

​

function mousePressed() { //mouse pressed input

  boolDoRefresh = true; 

}

function mouseReleased() {

  boolDoRefresh = false;

}