Going somewhere.

frontend/animation.js

@@ -0,0 +1,66 @@
+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();
+    const z = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
+    // Transform to the desired mean and standard deviation:
+    return z * stdev + mean;
+}
+
+function* brownian(n){
+    let x = 0;
+    for(let i = 0; i < n; i ++){
+        x += gaussianRandom(0, 10);
+        console.log(x);
+        yield x;
+    }
+}
+
+function* pseudoBrownian(n, limit){
+    let x = 0;
+    for(let i = 0; i < n; i ++){
+        let delta = gaussianRandom(0, 10);
+        if(Math.abs(x + delta) > limit){
+            delta = -1 * delta
+        }
+        x += delta;
+        yield x;
+    }
+}
+
+function* keyFrames(duration, framePerSeconds){
+    const deltaX = canvasWidth / (duration * framePerSeconds);
+    const limit = 0.75 * (canvasHeight / 2);
+    for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){
+        yield {translateX: `+=${deltaX}`, translateY: deltaY};
+    }
+}
+
+const duration = 60;
+const timeline = anime.timeline({
+    duration: duration * second,
+    autoplay: false,
+    easing: 'linear'});
+
+for(let i = 1; i <= 12; i++){
+    timeline.add({
+        targets: `#rect-${i}`,
+        keyframes: Array.from(keyFrames(duration, 30)),
+      }, 0)
+}
+
+
+document.querySelector('#play').onclick = timeline.play;
+document.querySelector('#pause').onclick = timeline.pause;
+document.querySelector('#seek').onclick = function(){
+    const seekVal = Number.parseFloat(second * document.querySelector('#seek-value').value);
+    timeline.pause();
+    timeline.seek(seekVal);
+}