3118485Phase perception app: tone editor, blind same/different test, cycling tone, and site buildJeremy Magland 1import { StemPlot } from './StemPlot'
3type Props = {
4 amplitudes: number[]
5 /** degrees */
6 phasesDeg: number[]
7 color: string
8}
10const PHASE_TICKS = [-180, -90, 0, 90, 180]
11const degLabel = (v: number) => `${v}°`
13/** Fourier coefficients of the tone: amplitude and phase per harmonic. */
14export function SpectrumPlot({ amplitudes, phasesDeg, color }: Props) {
15 const aMax = Math.max(1, ...amplitudes)
16 const aTicks = [0, aMax / 2, aMax]
17 return (
18 <div className="spectrum">
19 <div className="plot-label">Amplitude by harmonic</div>
20 <StemPlot values={amplitudes} yMin={0} yMax={aMax * 1.05} yTicks={aTicks} color={color} tickLabel={(v) => v.toFixed(1)} />
21 <div className="plot-label">Phase by harmonic</div>
22 <StemPlot values={phasesDeg} yMin={-190} yMax={190} yTicks={PHASE_TICKS} color={color} tickLabel={degLabel} />
23 </div>
24 )
25}