let sldSaturation;

let sldBrightness;

let sldAlpha;

​

function setup() {

  createCanvas(400, 400)

  noStroke()

  textAlign(CENTER, CENTER)

  textSize(20)

  colorMode(HSB)

  sldHue = createSlider(0, 360, 0)

    createSpan(" HUE")

    createElement("br")

  sldSaturation = createSlider(0, 100, 80)

  createSpan(" SATURATION")

    createElement("br")

  sldBrightness = createSlider(0, 100, 80)

  createSpan(" BRIGHTNESS")

    createElement("br")

  sldAlpha = createSlider(0, 1, 1, 0.01)

  createSpan(" ALPHA")

    createElement("br")

}

​

function draw() {

  let h = sldHue.value()

  let s = sldSaturation.value()

  let b = sldBrightness.value()

  let a = sldAlpha.value()

  background(0)

  fill(204)

  rect(200, 0, 200, 400)

  fill(h, s, b, a)

  circle(200, 200, 180)

  if (a < 0.5){

    fill(h + 180 % 360, 100, 80, 1)

  } else if (b < 50){

    fill(255)

  } else {

      fill(0)

  }

  text(`fill(${h}, ${s}, ${b}, ${a})`, 200, 200)

}