PImage srcImg;
PImage dstImg;
color[] palette = {
  color(0xF0, 0xF0, 0xF0),
  color(0xF2, 0xB2, 0x33),
  color(0xE5, 0x7F, 0xD8),
  color(0x99, 0xB2, 0xF2),
  color(0xDE, 0xDE, 0x6C),
  color(0x7F, 0xCC, 0x19),
  color(0xF2, 0xB2, 0xCC),
  color(0x4C, 0x4C, 0x4C),
  color(0x99, 0x99, 0x99),
  color(0x4C, 0x99, 0xB2),
  color(0xB2, 0x66, 0xE5),
  color(0x25, 0x31, 0x92),
  color(0x7F, 0x66, 0x4C),
  color(0x57, 0xA6, 0x4E),
  color(0xCC, 0x4C, 0x4C),
  color(0x19, 0x19, 0x19),
};

void displayColor(color c, float x, float y) {
  fill(c);
  rect(x, y, 20, 20);
  fill(color(1.0, 1.0, 1.0));
  textSize(14);
  text("(" + nf(hue(c), 1, 2) + "," +
             nf(saturation(c), 1, 2) + "," +
             nf(brightness(c), 1, 2) + ")",
       x + 25, y + 16);
}

float rgbDist(color c1, color c2) {
  float rd = red(c2) - red(c1);
  float gd = green(c2) - green(c1);
  float bd = blue(c2) - blue(c1);
  return rd * rd + gd * gd + bd * bd;
}

float hsbDist(color c1, color c2) {
  float hd = hue(c2) - hue(c1);
  float sd = saturation(c2) - saturation(c1);
  float bd = brightness(c2) - brightness(c1);
  if (0.5 < abs(hd)) {
    hd = 1.0 - abs(hd);
  }
  return sqrt(hd * hd) + 0.05 * sqrt(sd * sd) + 0.01 * sqrt(bd * bd);
}

color findColor(color c) {
  color result = palette[0];
  float min_dist = MAX_FLOAT;
  for (int i = 0; i < palette.length; i++) {
    float d;
    if (saturation(c) < 0.25 || brightness(c) < 0.25) {
      d = rgbDist(palette[i], c);
    } else {
      d = hsbDist(palette[i], c);
    }
    if (min_dist > d) {
      min_dist = d;
      result = palette[i];
    }
  }
  return result;
}

void setup() {
  size(640, 480);
  colorMode(RGB, 1.0, 1.0, 1.0);
  srcImg = loadImage("face.png", "png");
  dstImg = createImage(srcImg.width, srcImg.height, RGB);

  srcImg.loadPixels();
  for (int i = 0; i < srcImg.width * srcImg.height; i++) {
    dstImg.pixels[i] = findColor(srcImg.pixels[i]);
  }
  dstImg.updatePixels();
}

void draw() {
  background(0);

  float lm = 25;
  float tm = 5;
  displayColor(palette[0],    0 + lm,  0 + tm);
  displayColor(palette[1],  140 + lm,  0 + tm);
  displayColor(palette[2],  280 + lm,  0 + tm);
  displayColor(palette[3],  420 + lm,  0 + tm);
  displayColor(palette[4],    0 + lm, 25 + tm);
  displayColor(palette[5],  140 + lm, 25 + tm);
  displayColor(palette[6],  280 + lm, 25 + tm);
  displayColor(palette[7],  420 + lm, 25 + tm);
  displayColor(palette[8],    0 + lm, 50 + tm);
  displayColor(palette[9],  140 + lm, 50 + tm);
  displayColor(palette[10], 280 + lm, 50 + tm);
  displayColor(palette[11], 420 + lm, 50 + tm);
  displayColor(palette[12],   0 + lm, 75 + tm);
  displayColor(palette[13], 140 + lm, 75 + tm);
  displayColor(palette[14], 280 + lm, 75 + tm);
  displayColor(palette[15], 420 + lm, 75 + tm);

  float srcX = (width - srcImg.width) / 2;
  float srcY = 110;
  image(srcImg, srcX, srcY);

  float dstX = (width - dstImg.width) / 2;
  float dstY = 110 + 172 + 10;
  image(dstImg, dstX, dstY);

  if ((dstX <= mouseX && mouseX < dstX + dstImg.width &&
       dstY <= mouseY && mouseY < dstY + dstImg.height) ||
      (srcX <= mouseX && mouseX < srcX + srcImg.width &&
       srcY <= mouseY && mouseY < srcY + srcImg.height)) {
    color c = get(mouseX, mouseY);
    text("RGB(" +
     nf(red(c), 1, 2) + "," +
     nf(green(c), 1, 2) + "," +
     nf(blue(c), 1, 2) + ")",
     srcX + srcImg.width + 20, 130);
    text("HSB(" +
         nf(hue(c), 1, 2) + "," +
         nf(saturation(c), 1, 2) + "," +
         nf(brightness(c), 1, 2) + ")",
         srcX + srcImg.width + 20, 150);
  }
}