​

function setup() {

  // create canvas

  createCanvas(windowWidth, windowHeight);

  textSize(25);

  noStroke();

​

  // create sliders

  rSlider = createSlider(0, 255, 100);

  rSlider.position(20, 20);

  gSlider = createSlider(0, 255, 0);

  gSlider.position(20, 60);

  bSlider = createSlider(0, 255, 255);

  bSlider.position(20, 100);

}

​

function draw() {

  const r = rSlider.value();

  const g = gSlider.value();

  const b = bSlider.value();

  background(r, g, b);

  fill(255);

  rect(rSlider.x * 2 + rSlider.width-5, 15, 150, 25);

  rect(gSlider.x * 2 + gSlider.width-5, 50, 200, 35);

  rect(bSlider.x * 2 + bSlider.width-5, 95, 175, 30);

​

  fill(0);

  text('red   =', rSlider.x * 2 + rSlider.width, 35);

  text(r, rSlider.x * 2 + rSlider.width + 100, 35);

  text('green   =', gSlider.x * 2 + gSlider.width, 75);

  text(g, gSlider.x * 2 + gSlider.width + 150, 75);

  text('blue   =', bSlider.x * 2 + bSlider.width, 120);

  text(b, bSlider.x * 2 + bSlider.width + 125, 120);

}

​

​