const palettes = [

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

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

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

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

];

​

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

let usePalette = palettes[usePaletteIndex];

​

let x = 30;

let y = 30;

​

//setting min and max for the square sizing

let szMin = 10;

let szMax = 30;

​

//canvas sizing

let canvasWidth = 600;

let canvasHeight = 600;

​

//adding slider

let sizeSlider, shapeSlider; //declare sliders

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  rectMode(CENTER);

  background(250);

​

//create sliders with initial values

  sizeSlider = createSlider(10, 50, 30);

  sizeSlider.position(10, canvasHeight + 10);

  shapeSlider = createSlider(0, 1, 0, 0.01);

  shapeSlider.position(10, canvasHeight + 40);

}

​

//draw function

function draw() {

  let r = random(1);

  let useMaxSize = random(1) < 0.5;

  let sz = sizeSlider.value(); //use slider value for size

​

//use slider value for shape randomness

  let shapeRandomness = shapeSlider.value();

  let shapeThreshold = 0.5 - shapeRandomness / 2;

​

  //fill or stroke

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

    if (r < shapeThreshold) {

      noStroke();

      fill(random(usePalette));

      rect(x, y, sz, sz);

    } else {

      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;

      background(250); //restart with a blank canvas

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

      usePalette = palettes[usePaletteIndex];

    }

  }

}

​