​

const hDisc = [150, 190, 200]

const sBar = [325, 90, 50, 200]

const bBar = [475, 90, 50, 200]

let dragging

​

function setup() {

  createCanvas(600, 420);

  colorMode(HSB, 360, 100, 100)

  stroke(0)

  strokeWeight(3)

}

​

function draw() {

  background(100);

  fill(h, s, b)

  circle(...hDisc)

  rect(...sBar)

  rect(...bBar)

  textSize(60)

  textAlign(CENTER)

  text(h, hDisc[0], hDisc[1]+hDisc[2]/2+90)

  text(s, sBar[0]+25, sBar[1]+sBar[3]+90)

  text(b, bBar[0]+25, bBar[1]+bBar[3]+90)

  textSize(40)

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

  fill(255)

  if (dragging === "s") {

    s = round(map(mouseY, sBar[1], sBar[1]+sBar[3], 100, 0, true))

  }

  if (dragging === "b") {

    b = round(map(mouseY, bBar[1], bBar[1]+bBar[3], 100, 0, true))

  }

  if (dragging === "h") {

    h = round(degrees(-atan2(mouseY-hDisc[1], mouseX-hDisc[0])))

    if (h < 0) h += 360

  }

  circle(hDisc[0], hDisc[1], 100)

  let sy = map(s, 100, 0, sBar[1], sBar[1]+sBar[3])

  rect(sBar[0]-5, sy-5, sBar[2]+10, 10)

  let by = map(b, 100, 0, bBar[1], bBar[1]+bBar[3])

  rect(bBar[0]-5, by-5, bBar[2]+10, 10)

  push()

  rectMode(CENTER)

  translate(hDisc[0], hDisc[1])

  rotate(-radians(h))

  rect(75, 0, 65, 10)

  pop()

}

​

function inRect(x, y, w, h) {

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

}

​

function mousePressed() {

  let sy = map(s, 100, 0, sBar[1], sBar[1]+sBar[3])

  if (inRect(sBar[0]-10, sy-8, 60, 16)) {

    dragging = "s"

  }

  let by = map(b, 100, 0, bBar[1], bBar[1]+bBar[3])

  if (inRect(bBar[0]-10, by-8, 60, 16)) {

    dragging = "b"

  }

  let d = dist(hDisc[0], hDisc[1], mouseX, mouseY)

  if (d >= 45 && d < 105) {

    let deg = round(degrees(-atan2(mouseY-hDisc[1], mouseX-hDisc[0])))

    if (deg < 0) deg += 360

    if (deg - 5 <= h && h <= deg + 5) dragging = "h"

  }

  return false

}

​

function mouseReleased() {

  dragging = null;

  return false

}