Improved frontend.

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};
     }
 }