const palettes = [

  ['#f9d1d1', '#ffa4b6', '#f765a3', '#a155b9', '#165baa', '#0b1354'],

  ['#C70039', '#900C3E', '#571845', '#FFC300', '#FF5733'],

  ['#003049', '#d62828', '#f77f00', '#fcbf49', '#eae2b7'],

  ['#022E40', '#277A8C', '#37A6A6', '#F26666', '#F2F2F2'],

];

​

//using math.floor definetly saved a lot of unnecessary codes but really a big experimentation to see what works and doesn't work

let usePaletteIndex = Math.floor(Math.random() * palettes.length);

let usePalette = palettes[usePaletteIndex];

​

//setting min and max for the shape sizing

let szMin = 10;

let szMax = 30;

let canvasWidth = 600;

let canvasHeight = 600; //fixed the canvas sizing

​

//canvas setup

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  rectMode(CENTER);

  background(250);

    frameRate(30); // Set the frame rate to 30 fps

}

​

function draw() {

  let r = random(1);

  let useMaxSize = random(1) < 0.5;

  let sz = useMaxSize ? szMax : szMin;

//canvas border and making sure the draw stays inside

if (mouseX < canvasWidth - szMax / 2 && mouseY < canvasHeight - szMax / 2) {

  if (r < 0.5) {

    noStroke();

    fill(random(usePalette));

    rect(mouseX, mouseY, sz, sz);

  } else {

    noFill();

    stroke(random(usePalette));

    rect(mouseX, mouseY, sz / 2, sz / 2);

  }

      //sending the used palette to the back to use the next palette

      usePaletteIndex = Math.floor(Math.random() * palettes.length);

      usePalette = palettes[usePaletteIndex];

    }

}

​