let hueSlider, satSlider, brightSlider;

let hue, sat, brightness;

​

let redSlider, greenSlider, blueSlider, alphaSlider;

let r,g,b,a;

​

​

​

function setup() {

  createCanvas(windowWidth, 500);

  hueSlider = createSlider(0, 360, 0, 1);

  satSlider = createSlider(0, 100, 100, 1);

  brightSlider = createSlider(0,100,100,1);

  redSlider = createSlider(0, 255, 255, 1);

  greenSlider = createSlider(0, 255, 0, 1);

  blueSlider = createSlider(0,255,0,1);

  alphaSlider = createSlider(0,255,255,1);

  hueSlider.position(width/4-60,height/4+110);

  satSlider.position(width/4-60,height/4+150);

  brightSlider.position(width/4-60,height/4+190);

  redSlider.position(width*3/4-60,height/4+110);

  greenSlider.position(width*3/4-60,height/4+150);

  blueSlider.position(width*3/4-60,height/4+190);

  alphaSlider.position(width*3/4-60,height/4+230);

}

​

function draw() {

  background(255);

  push();

  //color mode HSB

  colorMode(HSB);

  //assign slider value to a variable

  hue = hueSlider.value();

  sat = satSlider.value();

  brightness = brightSlider.value();

  fill(hue,sat,brightness);

  ellipse(width/4,height/4,200,200);

  fill(0);

  textAlign(RIGHT);

  text('Hue',width/4-70,height/4+123);

  text('Saturation', width/4-70, height/4+163);

  text('Brightness', width/4-70, height/4+203);

  textAlign(LEFT);

  text(hue + '/360',width/4+80,height/4+123);

  text(sat + '/100', width/4+80, height/4+163);

  text(brightness + '/100',width/4+80, height/4+203);

  pop();

  push();

  //colorMode(RGB)

  colorMode(RGB);

  r = redSlider.value();

  g = greenSlider.value();

  b = blueSlider.value();

  a = alphaSlider.value();

  print(r)

  fill(r,g,b,a);

  ellipse(width*3/4,height/4,200,200);

  fill(0);

  textAlign(RIGHT);

  text('R',width*3/4-70,height/4+123);

  text('G', width*3/4-70, height/4+163);

  text('B', width*3/4-70, height/4+203);

  text('alpha', width*3/4-70, height/4+243);

  textAlign(LEFT);

  text(r + '/255',width*3/4+80,height/4+123);

  text(g + '/255', width*3/4+80, height/4+163);

  text(b + '/255',width*3/4+80, height/4+203);

  text(a + '/255', width*3/4+80, height/4+243);

  pop();

​

  }

​