constructor(x, y, w, h) {

    Object.assign(this, { x, y, w, h })

    this.value = 0

  }

  draw() {

    fill(bars[0].value, bars[1].value, bars[2].value)

    rect(this.x, this.y, this.w, this.h)

    textSize(60)

    textAlign(CENTER)

    text(this.value, this.x+this.w/2, this.y+this.h+90)

    fill(255)

    let y0 = map(this.value, 255, 0, this.y, this.y+this.h)

    rect(this.x-5, y0-5, this.w+10, 10)

  }

  update() {

    this.value = round(map(mouseY, this.y, this.y+this.h, 255, 0, true))

  }

  knobSelected() {

    let y0 = map(this.value, 255, 0, this.y, this.y+this.h)

    let [x, y, w, h] = [this.x-10, y0-8, 60, 16]

    return x <= mouseX && mouseX <= x+w && y <= mouseY && mouseY <= y+h

  }

}

​

const bars = [

  new Bar(125, 90, 50, 200),

  new Bar(275, 90, 50, 200),

  new Bar(425, 90, 50, 200),

]

​

let barBeingDragged = null

​

function setup() {

  createCanvas(600, 420);

  colorMode(RGB, 255, 255, 255)

  stroke(0)

  strokeWeight(3)

  textAlign(CENTER)

}

​

function draw() {

  background(255);

  fill(bars[0].value, bars[1].value, bars[2].value)

  textSize(40)

  text('RGB COLOR SELECTOR', width/2, 40)

  for (let bar of bars) {

    bar.draw()

    if (barBeingDragged === bar) bar.update()

  }

}

​

function mousePressed() {

  for (let bar of bars) {

    if (bar.knobSelected()) barBeingDragged = bar

  }

  return false

}

​

function mouseReleased() {

  barBeingDragged = null;

  return false

}

​