From 0393d179b60f8ea701b1391054c4314ce1e3fd53 Mon Sep 17 00:00:00 2001
From: David Young <david@nova-labs.com>
Date: Sat, 12 Oct 2024 12:29:15 -0400
Subject: [PATCH] Updates for trackers

---
 app/src/components/canvas/AudioScope.tsx      |  3 +-
 .../controls/visualSettingsSheet.tsx          |  1 +
 .../visualizers/visualizerModal.tsx           | 68 +++++++++----------
 app/src/lib/appState.ts                       | 18 +++--
 app/src/lib/mappers/valueTracker/common.ts    |  8 ++-
 5 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/app/src/components/canvas/AudioScope.tsx b/app/src/components/canvas/AudioScope.tsx
index 90426ea1..5405a582 100644
--- a/app/src/components/canvas/AudioScope.tsx
+++ b/app/src/components/canvas/AudioScope.tsx
@@ -1,4 +1,3 @@
-import { CanvasBackground } from "@/components/canvas/common";
 import { Canvas } from "@react-three/fiber";
 
 import ModalVisual from "../visualizers/visualizerModal";
@@ -6,7 +5,7 @@ import ModalVisual from "../visualizers/visualizerModal";
 const AudioScopeCanvas = () => {
   return (
     <Canvas>
-      <CanvasBackground />
+      <color attach="background" args={["#010204"]} />;
       <ModalVisual />
     </Canvas>
   );
diff --git a/app/src/components/controls/visualSettingsSheet.tsx b/app/src/components/controls/visualSettingsSheet.tsx
index 32a4a3ac..cf515c77 100644
--- a/app/src/components/controls/visualSettingsSheet.tsx
+++ b/app/src/components/controls/visualSettingsSheet.tsx
@@ -63,6 +63,7 @@ const VisualControlsComponent = () => {
 export const VisualSettingsSheetContent = () => {
   const mode = useMode();
   const { colorBackground, paletteTrackEnergy } = useAppearance();
+  console.log(colorBackground, paletteTrackEnergy);
   const palette = usePalette();
   const { setAppearance } = useAppStateActions();
   const { autoOrbitAfterSleepMs } = useCameraState();
diff --git a/app/src/components/visualizers/visualizerModal.tsx b/app/src/components/visualizers/visualizerModal.tsx
index f6568b78..e98d8c18 100644
--- a/app/src/components/visualizers/visualizerModal.tsx
+++ b/app/src/components/visualizers/visualizerModal.tsx
@@ -1,53 +1,47 @@
+import { useMemo } from "react";
 import { APPLICATION_MODE } from "@/lib/applicationModes";
 import { useMappers, useMode, useVisual } from "@/lib/appState";
 import { type ICoordinateMapper } from "@/lib/mappers/coordinateMappers/common";
 
 const DummyMapper: ICoordinateMapper = { map: () => 0, amplitude: 0 };
-const useScalarTracker = () => {
-  const mode = useMode();
-  const { energyTracker } = useMappers();
-  switch (mode) {
-    case APPLICATION_MODE.AUDIO:
-      return energyTracker;
-    default:
-      return undefined;
-  }
-};
-const useCoordinateMapper = () => {
+const useVisualParams = () => {
   const mode = useMode();
   const {
-    coordinateMapperWaveform,
-    coordinateMapperNoise,
     coordinateMapperData,
+    coordinateMapperNoise,
+    coordinateMapperWaveform,
+    ...rest
   } = useMappers();
-  switch (mode) {
-    case APPLICATION_MODE.WAVE_FORM:
-      return coordinateMapperWaveform;
-    case APPLICATION_MODE.NOISE:
-      return coordinateMapperNoise;
-    case APPLICATION_MODE.AUDIO:
-      return coordinateMapperData;
-    case APPLICATION_MODE.AUDIO_SCOPE:
-    case APPLICATION_MODE.PARTICLE_NOISE:
-      return DummyMapper;
+  const coordinateMapper = useMemo(() => {
+    switch (mode) {
+      case APPLICATION_MODE.WAVE_FORM:
+        return coordinateMapperWaveform;
+      case APPLICATION_MODE.NOISE:
+        return coordinateMapperNoise;
+      case APPLICATION_MODE.AUDIO:
+        return coordinateMapperData;
+      case APPLICATION_MODE.AUDIO_SCOPE:
+      case APPLICATION_MODE.PARTICLE_NOISE:
+        return DummyMapper;
+      default:
+        return mode satisfies never;
+    }
+  }, [
+    mode,
+    coordinateMapperData,
+    coordinateMapperNoise,
+    coordinateMapperWaveform,
+  ]);
 
-    default:
-      return mode satisfies never;
-  }
+  return {
+    coordinateMapper,
+    ...rest,
+  };
 };
 const ModalVisual = () => {
   const visual = useVisual();
-  const coordinateMapper = useCoordinateMapper();
-  const scalarTracker = useScalarTracker();
-  const { textureMapper, motionMapper } = useMappers();
-  return (
-    <visual.ReactiveComponent
-      coordinateMapper={coordinateMapper}
-      scalarTracker={scalarTracker ?? undefined}
-      textureMapper={textureMapper}
-      motionMapper={motionMapper}
-    />
-  );
+  const visualParams = useVisualParams();
+  return <visual.ReactiveComponent {...visualParams} />;
 };
 
 export default ModalVisual;
diff --git a/app/src/lib/appState.ts b/app/src/lib/appState.ts
index 9280337b..fced9c69 100644
--- a/app/src/lib/appState.ts
+++ b/app/src/lib/appState.ts
@@ -18,6 +18,10 @@ import { CoordinateMapper_WaveformSuperposition } from "./mappers/coordinateMapp
 import { type IMotionMapper } from "./mappers/motionMappers/common";
 import { MotionMapper_Noise } from "./mappers/motionMappers/curlNoise";
 import { TextureMapper } from "./mappers/textureMappers/textureMapper";
+import {
+  NoOpScalarTracker,
+  type IScalarTracker,
+} from "./mappers/valueTracker/common";
 import { EnergyTracker } from "./mappers/valueTracker/energyTracker";
 import {
   AVAILABLE_COLOR_PALETTES,
@@ -41,7 +45,7 @@ interface IMappersState {
   coordinateMapperWaveform: CoordinateMapper_WaveformSuperposition;
   coordinateMapperNoise: CoordinateMapper_Noise;
   coordinateMapperData: CoordinateMapper_Data;
-  energyTracker: EnergyTracker | null;
+  energyTracker: IScalarTracker | null;
 }
 interface IAudioState {
   source: TAudioSource;
@@ -168,10 +172,6 @@ const useAppState = create<IAppState>((set) => ({
       set((state) => {
         return {
           mode: newMode,
-          // audio: {
-          //   ...state.audio,
-          //   sourceCounter: state.audio.sourceCounter + 1,
-          // },
           ...(![...state.visual.supportedApplicationModes].includes(newMode)
             ? {
                 visual: Object.values(VISUAL_REGISTRY).find((v) =>
@@ -179,6 +179,13 @@ const useAppState = create<IAppState>((set) => ({
                 ),
               }
             : {}),
+          mappers: {
+            ...state.mappers,
+            energyTracker:
+              newMode === APPLICATION_MODE.AUDIO
+                ? new EnergyTracker(0)
+                : NoOpScalarTracker,
+          },
           appearance: {
             ...state.appearance,
             // Reset paletteTrackEnergy whenever the mode changes
@@ -187,7 +194,6 @@ const useAppState = create<IAppState>((set) => ({
             ...(newMode === APPLICATION_MODE.AUDIO_SCOPE
               ? {
                   palette: "rainbow",
-                  colorBackground: false,
                 }
               : {}),
           },
diff --git a/app/src/lib/mappers/valueTracker/common.ts b/app/src/lib/mappers/valueTracker/common.ts
index eb19d64e..0daac11e 100644
--- a/app/src/lib/mappers/valueTracker/common.ts
+++ b/app/src/lib/mappers/valueTracker/common.ts
@@ -2,6 +2,12 @@
  * Tracks scalar values
  */
 export interface IScalarTracker {
-  // set(value: number): void;
+  set(value: number): void;
   get(): number;
 }
+
+export const NoOpScalarTracker: IScalarTracker = {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  set: () => {},
+  get: () => 0,
+};