From 8c19ceb702ebf1fdd66d1c71e491a21974e9c638 Mon Sep 17 00:00:00 2001 From: julian laplace Date: Tue, 9 May 2023 22:56:44 +0200 Subject: chaos knob --- src/ui/Controls.jsx | 76 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 70 insertions(+), 6 deletions(-) (limited to 'src/ui/Controls.jsx') 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 ( @@ -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 }) { - + {relabi?.waves.map((wave, index) => ( 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]} /> ))} + + + + + {relabi?.waves.map((wave, index) => ( + + ))} + + + + + + + Math.exp(value).toFixed(1)} + color={"#a88"} + /> + + + + + + + + + ); } -- cgit v1.2.3-70-g09d2