diff options
Diffstat (limited to 'src/ui')
| -rw-r--r-- | src/ui/App.jsx | 59 | ||||
| -rw-r--r-- | src/ui/Controls.jsx | 76 |
2 files changed, 98 insertions, 37 deletions
diff --git a/src/ui/App.jsx b/src/ui/App.jsx index fbbbd35..db3d762 100644 --- a/src/ui/App.jsx +++ b/src/ui/App.jsx @@ -6,7 +6,6 @@ import * as React from "react"; import { useState, useEffect, useRef } from "react"; import Relabi from "../relabi"; -import { Kalimba, Drums } from "../lib/instruments"; import Controls from "./Controls.jsx"; export default function App() { @@ -19,45 +18,43 @@ export default function App() { useEffect(() => { if (!relabi) { const relabiGenerator = new Relabi({ + settings: { + speed: 1.0, + feedback: 0.2, + }, waves: [ - { shape: "sine", frequency: 0.75 }, - { shape: "sine", frequency: 1.0 }, - { shape: "sine", frequency: 1.617 }, - { shape: "sine", frequency: 3.141 }, + { shape: "sine", frequency: 0.75, weight: 1 }, + { shape: "sine", frequency: 1.0, weight: 1 }, + { shape: "sine", frequency: 1.617, weight: 1 }, + { shape: "sine", frequency: 3.141, weight: 1 }, ], bounds: [ { - level: -0.75, - color: "#f33", - sounds: [ - { instrument: Drums, index: 0 }, - { instrument: Drums, index: 1 }, - ], - }, - { - level: 0.75, - color: "#f83", - sounds: [ - { instrument: Drums, index: 2 }, - { instrument: Drums, index: 3 }, - ], - }, - { level: -0.25, - color: "#3b8", - sounds: [ - { instrument: Kalimba, frequency: 440 }, - { instrument: Kalimba, frequency: (440 * 3) / 2 }, - ], + color: "#f33", + sounds: [{ instrument: "Kick" }, { instrument: "Snare" }], }, { level: 0.25, - color: "#36f", - sounds: [ - { instrument: Kalimba, frequency: (440 * 6) / 5 }, - { instrument: Kalimba, frequency: (440 * 6) / 7 }, - ], + color: "#f83", + sounds: [{ instrument: "Hat" }, { instrument: "Perc" }], }, + // { + // level: -0.25, + // color: "#3b8", + // sounds: [ + // { instrument: Kalimba, frequency: 440 }, + // { instrument: Kalimba, frequency: (440 * 3) / 2 }, + // ], + // }, + // { + // level: 0.25, + // color: "#36f", + // sounds: [ + // { instrument: Kalimba, frequency: (440 * 6) / 5 }, + // { instrument: Kalimba, frequency: (440 * 6) / 7 }, + // ], + // }, ], }); relabiGenerator.start(); 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> ); } |