elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-23 03:28:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

better exponent display

Browse Source
This commit is contained in:
Felix Roos 2023-07-21 18:42:47 +02:00
parent 7373138e3d
commit aa3cb35f09
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/src/components/PitchSlider.jsx
View File

@ -48,10 +48,11 @@ export function PitchSlider({
pitchStep = '0.001', pitchStep = '0.001',
min = 55, min = 55,
max = 7040, max = 7040,
initial = 220,
}) { }) {
const oscRef = useRef(); const oscRef = useRef();
const activeRef = useRef(); const activeRef = useRef();
const freqRef = useRef(220); const freqRef = useRef(initial);
const historyRef = useRef([freqRef.current]); const historyRef = useRef([freqRef.current]);
const frameRef = useRef(); const frameRef = useRef();
const canvasRef = useRef(); const canvasRef = useRef();
@ -139,6 +140,15 @@ export function PitchSlider({
startOsc(hz); startOsc(hz);
}; };
let exponent = freq2pitchSlider(hz) * Math.log2(max / min);
const semitones = parseFloat((exponent * 12).toFixed(2));
if (semitones % 12 === 0) {
exponent = semitones / 12;
} else if (semitones % 1 === 0) {
exponent = `${semitones}/12`;
} else {
exponent = exponent.toFixed(2);
}
return ( return (
<> <>
<span className="font-mono"> <span className="font-mono">
@ -148,7 +158,7 @@ export function PitchSlider({
<> <>
{min}Hz * 2 {min}Hz * 2
<sup> <sup>
<span className="text-yellow-500">{(freq2pitchSlider(hz) * Math.log2(max / min)).toFixed(2)}</span> <span className="text-yellow-500">{exponent}</span>
</sup> </sup>
</> </>
)} )}

2
website/src/pages/understand/pitch.mdx
View File

@ -64,7 +64,7 @@ In musical terms, a pitch with double the frequency of another is an `octave` hi
Because octaves are pretty far apart, octaves are typically divided into 12 equal parts: Because octaves are pretty far apart, octaves are typically divided into 12 equal parts:
<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} /> <PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
## Definition ## Definition