​

let canvasWidth = 600;

let canvasHeight = 600;

let grid = 20;

let margin = 1

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  boolDoRefresh = true;

}

​

function draw() {

  if (boolDoRefresh) {

    fill (200,250,100);

    noStroke();

    background(100,200, 100);

    drawGrid();

    boolDoRefresh = false;

  }

}

​

function bubbles(i,j) {

  ellipse(i + grid/2, j + grid/2, random(grid), random(grid))

}

​

function drawGrid() {

  for (i=margin; i <canvasWidth; i+= grid + margin){

    for (j=margin; j<canvasHeight; j+=grid + margin) { 

      randNum = int(random(canvasWidth));

      if (randNum%3 == 0) {

        fill(0,50,80);

        bubbles(i,j);

      } else {

        fill(50,160,80);

        rect(i, j, grid, grid);

      }

    }

  }

}

​

function mousePressed() {

  boolDoRefresh = true;

}