let bg;

let squ;

​

function setup() {

  createCanvas(innerWidth, innerHeight);

  gui = new dat.GUI();

  bg = {

    r: 0,

    g: 0,

    b: 0

  };

  squ = {

    strokeR: 0,

    strokeG: 0,

    strokeB: 0,

    fillR: 0,

    fillG: 0,

    fillB: 0

  }

  let bgFolder = gui.addFolder("Background");

  let squFolder = gui.addFolder("Square");

  bgFolder.add(bg, "r", 0, 255);

  bgFolder.add(bg, "g", 0, 255);

  bgFolder.add(bg, "b", 0, 255);

  squFolder.add(squ, "strokeR", 0, 255);

  squFolder.add(squ, "strokeG", 0, 255);

  squFolder.add(squ, "strokeB", 0, 255);

  squFolder.add(squ, "fillR", 0, 255);

  squFolder.add(squ, "fillG", 0, 255);

  squFolder.add(squ, "fillB", 0, 255);

  bgFolder.open();

  squFolder.open();

}

​

function draw() {

  background(bg.r, bg.g, bg.b);

  fill(squ.fillR, squ.fillG, squ.fillB);

  stroke(squ.strokeR, squ.strokeG, squ.strokeB);

  strokeWeight(5);

  rectMode(CENTER);

  rect(width / 2, height / 2, 300, 300);

}