let canvas = 500

//control rectangle size

let rectSize = canvas/10; 

let numCols, numRows;

let currentCol = 0, currentRow = 0;

let r = 0;

​

function setup() {

  createCanvas(canvas, canvas);

  numCols = width / rectSize;

  numRows = height / rectSize;

  background(random(180));

​

  //noLoop(); // Stop looping to only draw once

}

​

function draw() {

  //update rgb vals

  r = r + 1

  //normailze rgb vals

  if(r>255)

    {

      r=0

    }

//reset is mouse is pressed

  if(mouseIsPressed)

    {

      background(random(180))

      currentCol = currentCol*0

      currentRow = currentRow*0

    }

  // Calculate x and y position of the rectangle

  let x = currentCol * rectSize;

  let y = currentRow * rectSize;

​

  // Fill the rectangle with color

  fill(mouseX, r, mouseY, random(100));

  noStroke();

  rect(x, y, rectSize, rectSize);

​

  // Update current column and row to have overlapping squares

  currentCol = currentCol + 0.5;

  if (currentCol >= numCols) 

  {

    currentCol = 0;

    currentRow = currentRow + 0.5;

  }

  // loop drawing if all rows are completed

  if (currentRow >= numRows) 

  {

    currentCol = currentCol*0

    currentRow = currentRow*0

    //noLoop(); // Stops the draw loop

  }

}

​