convert negative radians into degrees

src/components/ContourAudioControls.tsx

@@ -0,0 +1,142 @@
+import ContourAudioEngine from "@/components/ContourAudioEngine";
+import WebRenderer from "@elemaudio/web-renderer";
+import dynamic from "next/dynamic";
+import React, {useEffect, useState} from "react";
+import styled from "styled-components";
+import {AudioParamsType, KnobRow} from "@/components/FractalPlayer";
+
+type ContourAudioControlsProps = {
+  rowIndex: number;
+  fractalRow: number[];
+  audioContext: AudioContext | null;
+  core: WebRenderer;
+  playing: boolean;
+}
+
+const ContourAudioControls: React.FC<ContourAudioControlsProps> = (
+  {
+    rowIndex,
+    fractalRow,
+    audioContext,
+    core,
+    playing,
+  }) => {
+
+  const [volume, setVolume] = useState<number>(0);
+  const [threshold, setThreshold] = useState<number>(0.09);
+  const [lowest, setLowest] = useState<number>(200);
+  const [highest, setHighest] = useState<number>(6000);
+  const [smoothing, setSmoothing] = useState<number>(0.02);
+  const [audioParams, setAudioParams] = useState<AudioParamsType>({
+    volume: 0,
+    threshold: 0,
+    highest: 0,
+    lowest: 0,
+    smoothing: 0,
+  });
+
+  useEffect(() => {
+    setAudioParams({volume, lowest, highest, threshold, smoothing});
+  }, [volume, lowest, highest, threshold, smoothing, setAudioParams]);
+
+  return (<>
+      <KnobRow>
+        <ContourAudioEngine
+          rowIndex={rowIndex}
+          fractalRow={fractalRow}
+          audioContext={audioContext}
+          core={core}
+          playing={playing}
+          audioParams={audioParams}
+        />
+        <ControlKnob>
+          <Knob
+            id={`contour-volume`}
+            label={"volume"}
+            diameter={30}
+            labelWidth={30}
+            fontSize={11}
+            tooltip={"main volume of this sonified fractal"}
+            knobValue={volume}
+            step={0.01}
+            min={0}
+            max={1}
+            onKnobInput={setVolume}
+          />
+        </ControlKnob>
+      </KnobRow>
+      <KnobRow>
+        <ControlKnob>
+          <Knob
+            id={`contour-lowest`}
+            label={"lowest"}
+            diameter={30}
+            labelWidth={30}
+            fontSize={11}
+            tooltip={"lowest frequency of the oscillator bank (hz)"}
+            knobValue={lowest}
+            step={0.01}
+            min={0}
+            max={500}
+            onKnobInput={setLowest}
+          />
+        </ControlKnob>
+        <ControlKnob>
+          <Knob
+            id={`contour-highest`}
+            label={"highest"}
+            diameter={30}
+            labelWidth={30}
+            fontSize={11}
+            tooltip={"highest frequency of the oscillator bank (hz)"}
+            knobValue={highest}
+            step={0.01}
+            min={20}
+            max={20000}
+            onKnobInput={setHighest}
+          />
+        </ControlKnob>
+        <ControlKnob>
+          <Knob
+            id={`contour-threshold`}
+            label={"thresh"}
+            diameter={30}
+            labelWidth={30}
+            fontSize={11}
+            tooltip={"values below this threshold will be ignored during playback"}
+            knobValue={threshold}
+            step={0.001}
+            min={0}
+            max={1}
+            onKnobInput={setThreshold}
+          />
+        </ControlKnob>
+        <ControlKnob>
+          <Knob
+            id={`contour-smoothing`}
+            label={"smooth"}
+            diameter={30}
+            labelWidth={30}
+            fontSize={11}
+            tooltip={"smoothing of frequency when changing (0.02 = 20ms)"}
+            knobValue={smoothing}
+            step={0.01}
+            min={0}
+            max={0.5}
+            onKnobInput={setSmoothing}
+          />
+        </ControlKnob>
+      </KnobRow>
+    </>
+  );
+};
+
+const Knob = dynamic(() => import("el-vis-audio").then((mod) => mod.KnobParamLabel),
+  {ssr: false}
+)
+
+const ControlKnob = styled.div`
+  margin: -0.5rem 0.4rem 0 0.4rem;
+`;
+
+export default ContourAudioControls;

src/components/ContourAudioEngine.tsx

@@ -0,0 +1,139 @@
+import {AudioParamsType} from "@/components/FractalPlayer";
+import dynamic from "next/dynamic";
+import React, {useEffect, useState} from "react";
+import {el, NodeRepr_t} from "@elemaudio/core";
+import WebRenderer from "@elemaudio/web-renderer";
+import styled from "styled-components";
+
+const OscilloscopeSpectrogram = dynamic(() => import('el-vis-audio').then((mod) => mod.OscilloscopeSpectrogram), {ssr: false});
+
+require("events").EventEmitter.defaultMaxListeners = 0;
+
+type AudioEngineProps = {
+  rowIndex: number;
+  fractalRow: number[];
+  audioContext: AudioContext | null;
+  core: WebRenderer;
+  playing: boolean;
+  audioParams: AudioParamsType;
+}
+
+const AudioEngine: React.FC<AudioEngineProps> = ({
+                                                   rowIndex,
+                                                   fractalRow,
+                                                   audioContext,
+                                                   core,
+                                                   playing,
+                                                   audioParams: {volume, lowest, highest, threshold, smoothing}
+                                                 }) => {
+
+  const [audioVizData, setAudioVizData] = useState<any>();
+  const [fftVizData, setFftVizData] = useState<any>();
+  const [ampScale, setAmpScale] = useState<number>(0);
+
+  useEffect(() => {
+    return () => {
+      if (audioContext) {
+        audioContext.suspend();
+      }
+    }
+  }, [audioContext]);
+
+  useEffect(() => {
+    if (audioContext) {
+      const SignalSynth = (signal: NodeRepr_t) => {
+        if (playing && signal && core) {
+          let synth = el.mul(
+            signal,
+            el.sm(el.const({key: `main-amp`, value: volume}))
+          ) as NodeRepr_t;
+          synth = el.scope({name: `scope-contour`}, synth);
+          synth = el.fft({name: `fft-contour`}, synth);
+          core.render(synth, synth);
+        }
+      };
+
+      const Resynth = () => {
+        let accum = 0;
+        const linearRange = Math.log10(highest) - Math.log10(lowest);
+        const linearInterval = linearRange / fractalRow.length;
+
+        const allVoices = [...Array(fractalRow.length)].map((_, i) => {
+          const amplitude = fractalRow[i] > threshold ? fractalRow[i] : 0;
+          const key = `osc-freq-${i}`;
+          const linearFreq = Math.log10(lowest) + (i * linearInterval);
+          const freq = 10 ** linearFreq;
+
+          if (freq < audioContext.sampleRate / 2) {
+            accum += amplitude;
+            const freqSignal = el.const({key, value: freq});
+            const ampSignal = el.const({key: `osc-amp-${i}`, value: amplitude});
+            const smoothFreqSignal = el.smooth(el.tau2pole(smoothing), freqSignal);
+            const smoothAmpSignal = el.smooth(el.tau2pole(smoothing), ampSignal);
+            return el.mul(el.cycle(smoothFreqSignal), smoothAmpSignal);
+          } else {
+            return el.const({key, value: 0});
+          }
+        });
+
+        const addMany = (ins: NodeRepr_t[]): NodeRepr_t => {
+          return el.add(...ins) as NodeRepr_t;
+        };
+        const rowMult = accum !== 0 ? 1 / accum : 0;
+        setAmpScale(rowMult);
+        const rowAmp = el.const({key: "row-gain", value: rowMult});
+        const smoothRowAmp = el.smooth(el.tau2pole(smoothing), rowAmp);
+        return el.mul(addMany(allVoices as NodeRepr_t[]), smoothRowAmp) as NodeRepr_t;
+      }
+
+      if (playing) {
+        audioContext.resume();
+        if (fractalRow?.length > 0) SignalSynth(Resynth());
+      } else {
+        audioContext.suspend();
+      }
+    }
+  }, [playing, volume, lowest, highest, threshold, fractalRow, audioContext, core, smoothing]);
+
+  core?.on("scope", function (e) {
+    if (e.source === `scope-contour`) {
+      e.data.length && setAudioVizData(e.data[0]);
+    }
+  });
+
+  core?.on("fft", function (e) {
+    if (e.source === `fft-contour`) {
+      setFftVizData(e.data.real);
+    }
+  });
+
+  return (
+    <FlexColumn>
+      <StyledOscilloscopeSpectrogram>
+        <OscilloscopeSpectrogram
+          audioVizData={audioVizData}
+          fftVizData={fftVizData}
+          width={156}
+          height={38}
+        />
+        <br/><br/><br/><br/><br/>
+      </StyledOscilloscopeSpectrogram>
+    </FlexColumn>
+  );
+};
+
+const FlexColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 0.5rem;
+`;
+
+const StyledOscilloscopeSpectrogram = styled.div`
+  outline: 1px solid #000000;
+  font-size: 1.5rem;
+  width: 156px;
+  height: 38px;
+  cursor: pointer;
+`;
+export default AudioEngine;