Updates for wip anims

dcyoung · Feb 12, 2024 · 439ab3a · 439ab3a
1 parent 7e581ed
commit 439ab3a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 25 deletions.
diff --git a/app/src/components/visualizers/boxes/base.tsx b/app/src/components/visualizers/boxes/base.tsx
@@ -22,11 +22,12 @@ const BaseBoxes = ({
   gridSize?: number;
   cellSize?: number;
 }) => {
+  const rotateDurationMs = 250;
   const nRows = gridSize;
   const nCols = gridSize;
   const detector = useMemo(
-    () => new ScalarMovingAvgEventDetector(0.65, 150, 500),
-    [],
+    () => new ScalarMovingAvgEventDetector(0.65, 150, 2 * rotateDurationMs),
+    [rotateDurationMs],
   );
   const meshRef = useRef<InstancedMesh>(null!);
   const tmpMatrix = useMemo(() => new Matrix4(), []);
@@ -36,11 +37,13 @@ const BaseBoxes = ({
   const cellAssignments = useMemo(
     () =>
       Array.from({ length: nBoxes }, (_) => {
+        const row = Math.floor(nRows * Math.random());
+        const col = Math.floor(nCols * Math.random());
         return {
-          //   row: Math.floor(nRows * (idx / nBoxes)),
-          //   col: Math.floor(nCols * (idx / nBoxes)),
-          row: Math.floor(nRows * Math.random()),
-          col: Math.floor(nCols * Math.random()),
+          fromRow: row,
+          fromCol: col,
+          toRow: row,
+          toCol: col,
         };
       }),
     [nBoxes, nRows, nCols],
@@ -63,25 +66,37 @@ const BaseBoxes = ({
       const rowJitter = Math.floor(Math.random() * 3) - 1;
       const colJitter = Math.floor(Math.random() * 3) - 1;
       for (let i = 0; i < nBoxes; i++) {
-        cellAssignments[i].col += (Math.random() > 0.5 ? 1 : -1) * colJitter;
-        cellAssignments[i].row += (Math.random() > 0.5 ? 1 : -1) * rowJitter;
+        cellAssignments[i].fromRow = cellAssignments[i].toRow;
+        cellAssignments[i].fromCol = cellAssignments[i].toCol;
+        cellAssignments[i].toRow += (Math.random() > 0.5 ? 1 : -1) * colJitter;
+        cellAssignments[i].toCol += (Math.random() > 0.5 ? 1 : -1) * rowJitter;
       }
     }
 
+    const alpha = Math.min(
+      1,
+      Math.max(0, detector.timeSinceLastEventMs / rotateDurationMs),
+    );
+
     let normCubeX, normCubeY, x, y, z;
-    cellAssignments.forEach(({ row, col }, instanceIdx) => {
-      // Find a random cell
-      normCubeX = row / (nRows - 1);
-      normCubeY = col / (nCols - 1);
+    cellAssignments.forEach(
+      ({ fromRow, fromCol, toRow, toCol }, instanceIdx) => {
+        const row = fromRow + alpha * (toRow - fromRow);
+        const col = fromCol + alpha * (toCol - fromCol);
+
+        // Find a random cell
+        normCubeX = row / (nRows - 1);
+        normCubeY = col / (nCols - 1);
 
-      x = nRows * cellSize * (normCubeX - 0.5);
-      y = nCols * cellSize * (normCubeY - 0.5);
-      z = 0;
-      // Position
-      tmpMatrix.setPosition(x, y, z);
+        x = nRows * cellSize * (normCubeX - 0.5);
+        y = nCols * cellSize * (normCubeY - 0.5);
+        z = 0;
+        // Position
+        tmpMatrix.setPosition(x, y, z);
 
-      meshRef.current.setMatrixAt(instanceIdx, tmpMatrix);
-    });
+        meshRef.current.setMatrixAt(instanceIdx, tmpMatrix);
+      },
+    );
 
     // Update the instance
     meshRef.current.instanceMatrix.needsUpdate = true;

diff --git a/app/src/lib/analyzers/eventDetector.ts b/app/src/lib/analyzers/eventDetector.ts
@@ -1,13 +1,17 @@
 import { Clock } from "three";
 
 export interface IEventDetector {
+  timeSinceLastEventMs: number;
   step(scalar: number): boolean;
 }
 
 export class ScalarMovingAvgEventDetector implements IEventDetector {
   private clock = new Clock(true);
   private bufferSize = 1000;
   private lastEventElapsedMs = 0;
+  public get timeSinceLastEventMs() {
+    return this.clock.elapsedTime * 1000 - this.lastEventElapsedMs;
+  }
   private buffer: {
     value: number;
     elapsedTimeMs: number;
@@ -45,11 +49,6 @@ export class ScalarMovingAvgEventDetector implements IEventDetector {
     return stats.count > 0 ? stats.sum / stats.count : 0;
   }
 
-  private onCooldown() {
-    const nowMs = this.clock.elapsedTime * 1000;
-    return nowMs - this.lastEventElapsedMs < this.cooldownMs;
-  }
-
   public step(scalar: number) {
     const ms = this.clock.getElapsedTime() * 1000;
     // Add the observation
@@ -59,7 +58,7 @@ export class ScalarMovingAvgEventDetector implements IEventDetector {
     this.observationCount++;
 
     // Can't trigger in cooldown
-    if (this.onCooldown()) {
+    if (this.timeSinceLastEventMs < this.cooldownMs) {
       return false;
     }