Improved frontend.

dodgeballtracker/__init__.py

@@ -6,7 +6,7 @@ import numpy as np
 
 here = Path(__file__).parent
 input_dir = here / '..' / 'data'
-output_dir = here / '..' / 'data'
+output_dir = here / '..' / 'outputs'
 
 if __name__ == "__main__":
     detected_box_objects = [

dodgeballtracker/logic.py

@@ -10,6 +10,7 @@ import numpy as np
 
 Color = tuple[int, int, int]
 
+
 class DetectedObjectBox:
     def __init__(self, min_threshold: float, color: Color):
         self.min_threshold = min_threshold
@@ -90,3 +91,5 @@ def main(input_filename: Path, output_filename: Path, detected_box_objects):
     writer.release()
     cv2.destroyAllWindows()
 
+
+

frontend/index.html

@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <title>Animation</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <meta name="description" content="" />
-  <link rel="icon" href="favicon.png">
-  <script src="main.js" type="module"></script>
+    <meta charset="UTF-8" />
+    <title>Animation</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="" />
+    <link rel="icon" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+
+    <script src="main.js" type="module"></script>
 </head>
 <body>
   <h1>Hello, world!</h1>
-  <svg height="300" width="1000" style="border: solid;">
+  <svg  width="900" height="450" >
+      <rect x="0" y="0" width="900" height="450" class="court-border"></rect>
+      <line x1="450" y1="0" x2="450" y2="450" class="court-border"></line>
+      <line x1="300" y1="0" x2="300" y2="450" class="return-line"></line>
+      <line x1="600" y1="0" x2="600" y2="450" class="return-line"></line>
     
     <rect x="0" y="157.5" width="15" height="15" 
           style="fill: red;" id="rect-1"></rect>

frontend/main.js

@@ -2,6 +2,9 @@ import anime from "https://esm.sh/animejs@3.2.2";
 
 const second = 1000;
 
+const canvasWidth = Number.parseFloat(document.querySelector("svg").getAttribute("width"));
+const canvasHeight = Number.parseFloat(document.querySelector("svg").getAttribute("height"));
+
 function gaussianRandom(mean=0, stdev=1) {
     const u = 1 - Math.random(); // Converting [0,1) to (0,1]
     const v = Math.random();
@@ -33,8 +36,9 @@ function* pseudoBrownian(n, limit){
 }
 
 function* keyFrames(duration, framePerSeconds){
-    const deltaX = 1000 / (duration * framePerSeconds);
-    for(const deltaY of pseudoBrownian(duration * framePerSeconds, 100)){
+    const deltaX = canvasWidth / (duration * framePerSeconds);
+    const limit = 0.75 * (canvasHeight / 2);
+    for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){
         yield {translateX: `+=${deltaX}`, translateY: deltaY};
     }
 }

frontend/style.css

@@ -0,0 +1,11 @@
+.court-border {
+    stroke: red;
+    stroke-width: 4px;
+    fill-opacity: 0;
+}
+
+.return-line {
+    stroke: yellow;
+    stroke-width: 2px;
+    fill-opacity: 0;
+}