elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +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',
min = 55,
max = 7040,
initial = 220,
}) {
const oscRef = useRef();
const activeRef = useRef();
const freqRef = useRef(220);
const freqRef = useRef(initial);
const historyRef = useRef([freqRef.current]);
const frameRef = useRef();
const canvasRef = useRef();
@ -139,6 +140,15 @@ export function PitchSlider({
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 (
<>
<span className="font-mono">
@ -148,7 +158,7 @@ export function PitchSlider({
<>
{min}Hz * 2
<sup>
<span className="text-yellow-500">{(freq2pitchSlider(hz) * Math.log2(max / min)).toFixed(2)}</span>
<span className="text-yellow-500">{exponent}</span>
</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:
<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