FadedHuePickerWheel.pde

float radiusA = 200;
float radiusB = 300;
float fadeSize = 10;
int detail = 1000;

void setup() {
  size(800, 800, P2D);
  colorMode(HSB, 1, 1, 1, 1);
}

void draw() {
  background(0);
  translate(width*.5, height*.5);
  drawHuePicker();
  drawMouseSelection();
}

void drawHuePicker() {
  noStroke();
  beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= detail; i++) {
    float theta = map(i, 0, detail, 0, TAU);
    fill(getColorAtAngle(theta));
    vertex(radiusA*cos(theta), radiusA*sin(theta));
    vertex(radiusB*cos(theta), radiusB*sin(theta));
  }
  endShape();
  drawFadedHuePicker(radiusA, radiusA-fadeSize);
  drawFadedHuePicker(radiusB, radiusB+fadeSize);
}

void drawFadedHuePicker(float colorRadius, float blackRadius) {
  beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= detail; i++) {
    float theta = map(i, 0, detail, 0, TAU);
    fill(getColorAtAngle(theta));
    vertex(colorRadius*cos(theta), colorRadius*sin(theta));
    fill(0);
    vertex(blackRadius*cos(theta), blackRadius*sin(theta));
  }
  endShape();
}

void drawMouseSelection() {
  float theta = atan2(mouseY-width*.5, mouseX-height*.5);
  while (theta < 0) {
    theta += TAU;
  }
  noFill();
  stroke(1);
  strokeWeight(3);
  float radiusMiddleAB = lerp(radiusA, radiusB, 0.5);
  float differenceAB = abs(radiusA - radiusB);
  ellipse(radiusMiddleAB*cos(theta), radiusMiddleAB*sin(theta),
    differenceAB, differenceAB);
  int selectedColor = getColorAtAngle(theta);
  fill(selectedColor);
  noStroke();
  rectMode(CENTER);
  rect(0, 0, 150, 150);
}

int getColorAtAngle(float theta) {
  float norm = norm(theta, 0, TAU);
  return color(norm, 1, 1);
}