pokemon-color-search/nearest.js

const getSprite = pokemon => `https://img.pokemondb.net/sprites/sword-shield/icon/${pokemon}.png`

const vectorDot = (u, v) => u.map((x, i) => x * v[i]).reduce((x, y) => x + y);

const vectorMag = v => Math.sqrt(vectorDot(v, v));

// hex codes already include leading # in these functions
// rgb values are [0, 1] in these functions
const hex2luv = $.colorspaces.converter("hex", "CIELUV");
const luv2hex = $.colorspaces.converter("CIELUV", "hex");
const rgb2luv = $.colorspaces.converter("sRGB", "CIELUV");
const luv2rgb = $.colorspaces.converter("CIELUV", "sRGB");
const rgb2hex = $.colorspaces.converter("sRGB", "hex");
const hex2rgb = $.colorspaces.converter("hex", "sRGB");

// scoring functions
const getNormedScorer = (c, q) => {
  const factor = c / vectorMag(q);
  return yVec => factor * vectorDot(q, yVec) / vectorMag(yVec);
};
const getUnnormedScorer = (c, q) => yVec => c * vectorDot(q, yVec);

const onUpdate = () => {
  // Configuration Loading
  const includeX = document.getElementById("include-x")?.checked ?? false;
  const normQY = document.getElementById("norm-q-y")?.checked ?? false;
  const closeCoeff = document.getElementById("close-coeff")?.value ?? 2;
  const useRGB = document.getElementById("color-space")?.textContent === "RGB";
  const numPoke = document.getElementById("num-poke")?.value ?? 20;
  const pokemonName = document.getElementById("pokemon-name")?.value ?? "";
  const targetColor = "#" + (document.getElementById("color-input")?.value?.replace("#", "") ?? "FFFFFF");
  const targetRGB = hex2rgb(targetColor).map(x => x * 255);

  // Update display values
  document.getElementById("x-term").textContent = includeX ? "X(P)" : "";
  document.getElementById("c-value").textContent = closeCoeff;
  document.getElementById("q-vec").textContent = normQY ? "q̂" : "q";
  document.getElementById("y-vec").textContent = normQY ? "Ŷ(P)" : "Y(P)";
  document.getElementById("close-coeff-display").innerHTML = closeCoeff;
  document.getElementById("num-poke-display").textContent = numPoke;

  // calculate luminance to determine if text should be dark or light
  const textColor = vectorDot(targetRGB, [0.3, 0.6, 0.1]) >= 128 ? "#222" : "#ddd";
  document.querySelector("body").setAttribute("style", `background: ${targetColor}; color: ${textColor}`);

  const bestList = document.getElementById("best-list");
  bestList.innerHTML = ''; // do the lazy thing

  // determine metrics from configuration
  const targetInSpace = useRGB ? targetRGB : rgb2luv(targetRGB.map(x => x / 255));
  const xSelector = includeX ? (useRGB ? ({ xRGB }) => xRGB : ({ xLUV }) => xLUV) : () => 0;
  const ySelector = useRGB ? ({ yRGB }) => yRGB : ({ yLUV }) => yLUV;
  const yScorer = (normQY ? getNormedScorer : getUnnormedScorer)(closeCoeff, targetInSpace);

  // actually score pokemon
  database
    .map(info => ({ ...info, score: xSelector(info) - yScorer(ySelector(info)) }))
    .sort((a, b) => a.score - b.score)
    .slice(0, numPoke)
    .forEach(({ name, score, yRGB }) => {
      const li = document.createElement("li");
      const img = document.createElement("img");
      const tile = document.createElement("div");
      const hexColor = rgb2hex(yRGB.map(x => x / 255));
      tile.setAttribute("style", `width: 25px; height: 25px; background-color: ${hexColor}`)
      img.setAttribute("src", getSprite(name));
      li.appendChild(img)
      li.appendChild(document.createTextNode(`${name}: ${score.toFixed(3)}`));
      li.appendChild(tile)
      li.setAttribute("style", "display: flex; flex-flow: row nowrap; justify-content: space-between; width: 320px")
      bestList.appendChild(li);
    });
};

const onRandomColor = () => {
  document.getElementById("color-input").value = rgb2hex([Math.random(), Math.random(), Math.random()]);
  onUpdate();
};

const onToggleSpace = () => {
  const element = document.getElementById("color-space");
  const current = element?.textContent;
  element.textContent = current === "RGB" ? "CIELUV" : "RGB";
  document.getElementById("space-toggle").textContent = `Swap to ${current}`
  onUpdate();
}