going somewhere

frontend/main.js

@@ -1,5 +1,7 @@
 import anime from "https://esm.sh/animejs@3.2.2";
 import m from "https://esm.sh/mithril@2.2.2"
+import colormap from "https://esm.sh/colormap@2.3.2"
+
 
 const second = 1000;
 
@@ -68,23 +70,29 @@ document.querySelector('#seek').onclick = function(){
 
 function generatePoints(points, frames){
     const lst = [];
-    for(const point of points.points){
+    const colors = colormap({
+        colormap: 'viridis',
+        nshades: new Set(points.map(p => p.objectId)).size,
+        format: 'hex',
+        alpha: 1
+    });
+    for(const point of points){
         if(frames.indexOf(point.frameIndex) !== -1){
-            lst.push(m("circle", {cx: point.y, cy: point.x, r: 3, fill: point.color}));
+            lst.push(m("text", {x: point.y, y: point.x, fill: colors[point.objectId]}, point.objectId));
         }
     }
     return m("g", lst);
 }
 
 function getTimeStamp(points, frameId){
-    for(const point of points.points){
+    for(const point of points){
         if(point.frameIndex === frameId){
             return `${point.frameTimestamp / 1000} seconds`;
         }
     }
 }
 
-const url = "/dodgeball-tracker/outputs/output.json";
+const url = "/dodgeball-tracker/outputs/output-lmbn_n_cuhk03_d.json";
 const resp = await fetch(url);
 const points = await resp.json();
 
@@ -97,5 +105,5 @@ function range(min, max){
     return ret
 }
 
-m.render(document.getElementById("first"), generatePoints(points, range(-10, 400)));
-m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points, 80)));
+m.render(document.getElementById("first"), generatePoints(points.points, range(-10, 400)));
+m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points.points, 80)));