Implement new likelihood-based metric

web/index.html

@@ -35,9 +35,11 @@
           </label>
         </div>
         <select class="pill-shape highlight-border ellipsis" name="compare" disabled>
-          <option value="arcDiff">Arc Difference (Ω)</option>
+          <option value="probArcDiff">Unlikely Arc Difference (Ω)</option>
+          <option value="arcDiff">Arc Difference (∮)</option>
           <option value="psi">RMS Deviation (Ψ)</option>
           <option value="theta">Quasi-mean Angular Difference (Θ)</option>
+          <option value="likelihood">Likelihood (ℓ)</option>
           <option value="delta">Euclidean Distance (δ)</option>
           <option value="angDiff">Angular Difference From Mean (φ)</option>
           <option value="psiL">RMS Deviation Lightness (Lᵣₘₛ)</option>
@@ -66,9 +68,12 @@
     </template>
 
     <template id="pkmn-data-template">
-      <div>Ω&nbsp;=&nbsp;<span bind-to="arcDiff"></span></div>
+      <div>Ω&nbsp;=&nbsp;<span bind-to="probArcDiff"></span></div>
+      <div>∮&nbsp;=&nbsp;<span bind-to="arcDiff"></span></div>
+      <div></div>
       <div>|Ψ|&nbsp;=&nbsp;<span bind-to="psi"></span></div>
       <div>Θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
+      <div>ℓ&nbsp;=&nbsp;<span bind-to="likelihood"></span></div>
       <div class="pkmn-data-wide">Ψ&nbsp;=&nbsp;(<span bind-to="psiVec"></span>)</div>
       <div>Cᵣₘₛ&nbsp;=&nbsp;<span bind-to="psiC"></span></div>
       <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>

web/main.js

@@ -172,17 +172,22 @@ const pokemonDisplayLookup = Object.fromEntries(
 );
 
 const calcScores = (data, target) => {
-  const { centroid, unitCentroid, tilt, stddev, chromaMean, chromaDev, hue } = data;
+  const { centroid, unitCentroid, tilt, stddev, stddevTotal, chromaMean, chromaDev, hue } = data;
   const deltaVec = centroid.map((c, i) => c - target.vector[i]);
+  const delta = Math.hypot(...deltaVec);
   const psiVec = stddev.map((s, i) => Math.hypot(s, deltaVec[i]));
   const psi = Math.hypot(...psiVec);
   const theta = Math.acos(Math.min(1, vectorDot(tilt, target.unit))) * rad2deg;
   const deltaC = chromaMean - target.chroma;
   const deltaH = Math.abs(hue - target.hue) * rad2deg;
+  const likelihood = Math.exp(-Math.pow(delta / (2 * stddevTotal), 2)) / stddevTotal;
+  const arcDiff = psi * theta;
 
   return {
     ...data,
-    arcDiff: psi * theta,
+    probArcDiff: arcDiff / likelihood, 
+    arcDiff,
+    likelihood,
 
     psi,
     psiVec,
@@ -193,7 +198,7 @@ const calcScores = (data, target) => {
 
     theta,
 
-    delta: Math.hypot(...deltaVec),
+    delta,
     deltaVec,
     deltaL: Math.abs(deltaVec[0]),
     deltaA: Math.abs(deltaVec[1]),