pokemon-color-search/web/metrics.js

const metrics = {
  alpha: { // combine sigma and bigTheta
    option: "Geometric Difference (α)",
    displayName: String.raw`\alpha`,
    displayBody: p => String.raw`
      \sqrt{\sigma\left(${p}\right)^{2 - \sqrt{L\left(\vec{q}\right)}} \Theta\left(${p}\right)^{\sqrt{L\left(\vec{q}\right)}}}
    `,
    evaluate: () => 0, // calculated below
  },
  sigma: { // RMS
    option: "RMS Deviation (σ)",
    displayName: String.raw`\sigma`,
    displayBody: p => String.raw`
      \sqrt{I\left(${p}\right) - 2\vec{q}\cdot\vec{\mu}\left(${p}\right) + \left|\left|\vec{q}\right|\right|^2}
    `,
    evaluate: (data, target) => Math.sqrt(data.inertia - 2 * vectorDot(data.mu.vector, target.vector) + target.sqMag),
  },
  bigTheta: { // 1 - arith mean of cosine similarity
    option: "Cosine Difference (Θ)",
    displayName: String.raw`\Theta`,
    displayBody: p => String.raw`
      1 - \hat{q}\cdot\vec{\nu}\left(${p}\right)
    `,
    evaluate: (data, target) => 1 - vectorDot(data.nu, target.unit),
  },
  theta: { // angle of mean
    option: "Angular Difference (θ)",
    displayName: String.raw`\theta`,
    displayBody: p => String.raw`
      \cos^{-1}\left( \hat{q}\cdot\hat{\mu}\left(${p}\right) \right)
    `,
    evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.mu.unit, target.unit)),
  },
  phi: { // hue angle
    option: "Hue Azimuth (ϕ)",
    displayName: String.raw`\phi`,
    displayBody: (p, space) => String.raw`
      \angle \left(\text{oproj}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{q}}, \text{oproj}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)} \right)
    `,
    evaluate: (data, target) => { 
      const raw = Math.abs(data.mu.hue - target.hue); 
      return Math.min(raw, 360 - raw);
    },
  },
  delta: { // euclidean
    option: "Euclidean (δ)",
    displayName: String.raw`\delta`,
    displayBody: p => String.raw`
      \left|\left| \vec{q} - \vec{\mu}\left(${p}\right) \right|\right|
    `,
    evaluate: (data, target) => vectorMag(data.mu.vector.map((x, i) => x - target.vector[i])),
  },
  manhattan: { // manhattan distance
    option: "Manhattan (M)",
    displayName: "M",
    displayBody: p => String.raw`
      \sum_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
    `,
    evaluate: (data, target) => data.mu.vector.map((x, i) => Math.abs(x - target.vector[i])).reduce((x, y) => x + y),
  },
  ch: { // chebyshev
    option: "Chebyshev (Ч)",
    displayName: "Ч",
    displayBody: p => String.raw`
      \max_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
    `,
    evaluate: (data, target) => Math.max(...data.mu.vector.map((x, i) => Math.abs(x - target.vector[i]))),
  },
  lightnessDiff: {
    option: "Lightness (ℓ)",
    displayName: String.raw`\ell`,
    displayBody: (p, space) => String.raw`
      \left| \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{q}} - \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)} \right|
    `,
    evaluate: (data, target) => Math.abs(data.mu.lightness - target.lightness),
  },
  inertia: {
    option: "Inertia (I)",
    displayName: "I",
    displayBody: p => String.raw`
      \frac{1}{\left|${p}\right|} \sum_{p\in ${p}}{\left|\left|\vec{p}\right|\right|^2}
    `,
    evaluate: data => data.inertia,
  },
  muNuAngle: {
    option: "Mu-Nu Angle (V)",
    displayName: "V",
    displayBody: p => String.raw`\angle \left( \vec{\mu}\left(${p}\right), \vec{\nu}\left(${p}\right) \right)`,
    evaluate: data => data.muNuAngle,
  },
  size: {
    option: "Size (N)",
    displayName: "N",
    displayBody: p => String.raw`\left|${p}\right|`,
    evaluate: data => data.size,
  },
  lightness: {
    option: "Mean Lightness (L)",
    displayName: "L",
    displayBody: (p, space) => String.raw`
      \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)}
    `,
    evaluate: data => data.mu.lightness,
  },
  chroma: {
    option: "Mean Chroma (C)",
    displayName: "C",
    displayBody: p => String.raw`\text{chroma}\left(\vec{\mu}\left(${p}\right)\right)`,
    evaluate: data => data.mu.chroma,
  },
  intensity: {
    option: "Visual Intensity (γ)",
    displayName: String.raw`\gamma`,
    displayBody: p => String.raw`\sqrt[3]{C\left(${p}\right) L\left(${p}\right)^2}`,
    evaluate: data => Math.cbrt(data.mu.chroma * data.mu.lightness * data.mu.lightness)
  },
};

const applyMetrics = (data, target) => {
  const scores = Object.fromEntries(
    Object.entries(metrics)
      .map(([name, metric]) => [name, metric.evaluate(data, target)])
  );
  // rearranges to geometric mean of sigma and bigTheta
  const power = Math.sqrt(target.lightness)
  scores.alpha = Math.sqrt(Math.pow(scores.sigma, 2 - power) * Math.pow(scores.bigTheta, power));
  return scores;
};