​

//listing palette of colors: This is easier that using 'let' statements

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];

​

let x = 30;

let y = 30;

​

//setting min and max for the shape sizing

let szMin = 30;

let szMax = 60;

let canvasWidth, canvasHeight;

​

//canvas setup

function setup() {

  canvasWidth = windowWidth; // Set canvasWidth here

  canvasHeight = windowHeight; // Set canvasHeight here

​

  createCanvas(canvasWidth, canvasHeight);

  rectMode(CENTER);

  background(0);

}

​

function draw() {

  let sz = random(1) < 0.5 ? szMax : szMin;

​

  //canvas border and making sure the draw stays inside

  if (x < canvasWidth - szMax / 2 && y < canvasHeight - szMax / 2) {

    noFill();

    stroke(random(usePalette));

    rect(x, y, sz / 2, sz / 2);

​

    x = x + szMax;

​

    if (x >= canvasWidth - szMax / 2) {

      x = 30;

      y = y + szMax;

    }

​

    if (y >= canvasHeight - szMax / 2) {

      x = 30;

      y = 30;

      //     save('Project#2.jpg'); //file name and file type to save

​

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

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

      usePalette = palettes[usePaletteIndex];

    }

  }

}

​