keyboard + octave in sidebar

src/Index.tsx

@@ -1,7 +1,10 @@
 import ShapeCanvas from "@/components/canvas/ShapeCanvas";
+import ColorKeyboard from "@/components/controls/ColorKeyboard";
+import OctaveSelector from "@/components/controls/OctaveSelector";
 import PresetSelector from "@/components/controls/PresetSelector";
 import { Slider } from "@/components/ui/slider";
 import { Toggle } from "@/components/ui/toggle";
+import { colorScale, noteToFrequency } from "@/constants/colorScale";
 import { useAudioContext } from "@/hooks/useAudioContext";
 import { useShapeState } from "@/hooks/useShapeState";
 import { useSynth } from "@/hooks/useSynth";
@@ -56,10 +59,27 @@ function Index() {
         nodes.oscillatorA.detune.value = detune;
         nodes.oscillatorB.detune.value = detune;
 
+        const note =
+            colorScale.find((entry) => entry.color.toLowerCase() === state.color.toLowerCase())?.note ??
+            colorScale[0].note;
+        const frequency = noteToFrequency(note, state.octave);
+        nodes.oscillatorA.frequency.value = frequency;
+        nodes.oscillatorB.frequency.value = frequency;
+
         const grain = mapGrainToNoise(state.grain);
         const noiseDb = grain === 0 ? Number.NEGATIVE_INFINITY : -40 + (-12 - -40) * grain;
         nodes.noise.volume.value = noiseDb;
-    }, [state.preset, state.roundness, state.size, state.wobble, state.grain, synthRef, pitchTime]);
+    }, [
+        state.preset,
+        state.roundness,
+        state.size,
+        state.wobble,
+        state.grain,
+        state.color,
+        state.octave,
+        synthRef,
+        pitchTime,
+    ]);
 
     const sidebarContent = (
         <div className="flex flex-col gap-4">
@@ -73,6 +93,14 @@ function Index() {
                 <span className="text-sm font-medium">Shape</span>
                 <PresetSelector value={state.preset} onChange={(preset) => setState({ ...state, preset })} />
             </div>
+            <div className="flex flex-col gap-2">
+                <span className="text-sm font-medium">Note/Colour</span>
+                <ColorKeyboard value={state.color} onChange={(color) => setState({ ...state, color })} />
+            </div>
+            <div className="flex flex-col gap-2">
+                <span className="text-sm font-medium">Octave</span>
+                <OctaveSelector value={state.octave} onChange={(octave) => setState({ ...state, octave })} />
+            </div>
             <div className="flex flex-col gap-2">
                 <span
                     className={cn(
@@ -117,15 +145,6 @@ function Index() {
                     onValueChange={([v]) => setState({ ...state, wobbleRandomness: v })}
                 />
             </div>
-            <div className="flex flex-col gap-2">
-                <span className="text-sm font-medium">Noise</span>
-                <Slider
-                    value={[state.grain]}
-                    min={0}
-                    max={100}
-                    onValueChange={([v]) => setState({ ...state, grain: v })}
-                />
-            </div>
         </div>
     );