chaos knob

1 files changed, 70 insertions, 6 deletions

diff --git a/src/ui/Controls.jsx b/src/ui/Controls.jsx
index f999e4f..3bc1c2e 100644
--- a/src/ui/Controls.jsx
+++ b/src/ui/Controls.jsx
@@ -10,7 +10,7 @@ import Slider from "rc-slider";
 import TooltipSlider, { handleRender } from "./TooltipSlider.tsx";
 import "rc-slider/assets/index.css";
 
-const WAVE_SHAPE_NAMES = ["sine", "triangle", "saw", "square"];
+const WAVE_SHAPE_NAMES = ["sine", "triangle", "saw", "reverse_saw", "square"];
 
 export default function Controls({ relabi }) {
   /**
@@ -21,16 +21,26 @@ export default function Controls({ relabi }) {
       if (type === "bound") {
         relabi.bounds[index].level = value;
       }
+      if (type === "shape") {
+        relabi.waves[index].shape = WAVE_SHAPE_NAMES[value];
+      }
       if (type === "frequency") {
         relabi.waves[index].frequency = Math.exp(value);
       }
-      if (type === "shape") {
-        relabi.waves[index].shape = WAVE_SHAPE_NAMES[value];
+      if (type === "weight") {
+        relabi.waves[index].weight = value;
+      }
+      if (type === "settings") {
+        relabi.settings[index] = index === "speed" ? Math.exp(value) : value;
       }
     },
     [relabi]
   );
 
+  if (!relabi) {
+    return null;
+  }
+
   return (
     <ControlRow>
       <ControlBox>
@@ -45,6 +55,7 @@ export default function Controls({ relabi }) {
               min={-1}
               max={1}
               step={0.01}
+              tipFormatter={(value) => -value}
               defaultValue={bound.level}
               color={bound.color}
               reverse
@@ -54,7 +65,7 @@ export default function Controls({ relabi }) {
       </ControlBox>
 
       <ControlBox>
-        <Label>Wave speeds</Label>
+        <Label>Wave frequencies</Label>
         <SliderRow>
           {relabi?.waves.map((wave, index) => (
             <ControlSlider
@@ -66,6 +77,7 @@ export default function Controls({ relabi }) {
               max={3}
               step={0.001}
               defaultValue={Math.log(wave.frequency)}
+              tipFormatter={(value) => Math.exp(value).toFixed(1)}
               color={"#8a8"}
             />
           ))}
@@ -82,15 +94,67 @@ export default function Controls({ relabi }) {
               index={index}
               onChange={onChange}
               min={0}
-              max={3}
+              max={WAVE_SHAPE_NAMES.length - 1}
               step={1}
               defaultValue={WAVE_SHAPE_NAMES.indexOf(wave.shape)}
-              color={"#998"}
+              color={"#aa8"}
               tipFormatter={(value) => WAVE_SHAPE_NAMES[value]}
             />
           ))}
         </SliderRow>
       </ControlBox>
+
+      <ControlBox>
+        <Label>Wave weights</Label>
+        <SliderRow>
+          {relabi?.waves.map((wave, index) => (
+            <ControlSlider
+              rel={`weight_${index}`}
+              type="weight"
+              index={index}
+              onChange={onChange}
+              min={0}
+              max={2}
+              step={0.01}
+              defaultValue={wave.weight}
+              color={"#99b"}
+            />
+          ))}
+        </SliderRow>
+      </ControlBox>
+
+      <ControlBox>
+        <Label>Speed</Label>
+        <SliderRow>
+          <ControlSlider
+            type="settings"
+            index="speed"
+            onChange={onChange}
+            min={-2}
+            max={3}
+            step={0.01}
+            defaultValue={Math.log(relabi.settings.speed)}
+            tipFormatter={(value) => Math.exp(value).toFixed(1)}
+            color={"#a88"}
+          />
+        </SliderRow>
+      </ControlBox>
+
+      <ControlBox>
+        <Label>Chaos</Label>
+        <SliderRow>
+          <ControlSlider
+            type="settings"
+            index="feedback"
+            onChange={onChange}
+            min={0}
+            max={0.5}
+            step={0.01}
+            defaultValue={relabi.settings.feedback}
+            color={"#a88"}
+          />
+        </SliderRow>
+      </ControlBox>
     </ControlRow>
   );
 }