// ====== ACOUSTICS EXPERIMENTS ======
// ---------- 1. Sound Propagation ----------
function SoundPropagationExp({ category, name, catColor }) {
const [medium, setMedium] = useState('air'); // air, water, solid, vacuum
const [isRinging, setIsRinging] = useState(false);
const [time, setTime] = useState(0);
const rafRef = useRef();
const mediumData = {
air: { name: '空气', speed: 340, color: '#87CEEB', transmit: 0.7 },
water: { name: '水', speed: 1500, color: '#4DB8FF', transmit: 0.9 },
solid: { name: '木头', speed: 4500, color: '#8B5A2B', transmit: 1.0 },
vacuum: { name: '真空', speed: 0, color: '#141416', transmit: 0 },
};
const m = mediumData[medium];
useEffect(() => {
if (!isRinging) return;
let last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000;
last = now;
setTime(t => t + dt);
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [isRinging]);
// draw bell + sound waves
const canvasW = 700, canvasH = 420;
const cx = canvasW / 2, cy = canvasH / 2;
const waves = [];
if (isRinging && m.speed > 0) {
const waveCount = 6;
const interval = 0.15; // seconds between waves
for (let i = 0; i < waveCount; i++) {
const t = time - i * interval;
if (t > 0) {
const r = t * m.speed * 0.3; // scale for visual
if (r < 400) waves.push({ r, opacity: Math.max(0, 1 - r / 400) });
}
}
}
const bellAngle = isRinging ? Math.sin(time * 15) * 0.12 : 0;
const panelTabs = [
{ id: 'controls', label: '操作' },
{ id: 'data', label: '数据/公式' },
{ id: 'principle', label: '原理' },
];
const panelContent = (tab) => {
if (tab === 'controls') return (
<>
介质选择
{Object.entries(mediumData).map(([k, v]) => (
))}
振源控制
);
if (tab === 'data') return (
<>
0 ? '传播中' : '不能传声'} unit="" />
v = ${m.speed} m/s`,
`距离 s = v · t，声音随时间向四周扩散`,
m.transmit === 0
? '真空不能传声！声音需要介质'
: `介质密度越大，分子间作用力越强，声速越快`,
]}
/>
);
if (tab === 'principle') return (
产生：声音由物体振动产生，振动停止，发声也停止。
传播：声音的传播需要介质，真空不能传声。
声速：v固体 {'>'} v液体 {'>'} v气体
15℃空气中声速约 340 m/s。
声音以波的形式传播，叫声波。
);
};
return (
);
}
// ---------- 2. Pitch & Frequency ----------
function PitchFrequencyExp({ category, name, catColor }) {
const [freq, setFreq] = useState(440); // Hz
const [stringLen, setStringLen] = useState(50); // cm
const [isPlaying, setIsPlaying] = useState(false);
const [time, setTime] = useState(0);
const rafRef = useRef();
// Relationship: f ∝ 1/L (for string), adjust freq based on length
// base freq at L = 50cm
const actualFreq = Math.round(freq * 50 / stringLen);
useEffect(() => {
if (!isPlaying) return;
let last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000;
last = now;
setTime(t => t + dt);
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [isPlaying]);
const canvasW = 700, canvasH = 420;
// waveform
const wavePoints = [];
const amplitude = 40;
for (let x = 0; x <= canvasW - 60; x += 2) {
const t = x / (canvasW - 60) * (2 * Math.PI * 3) + time * actualFreq * 2 * Math.PI * 0.1;
const y = Math.sin(t) * amplitude;
wavePoints.push(`${x + 30},${canvasH / 2 + y}`);
}
// string vibration visualization
const stringY = 120;
const stringVib = isPlaying ? Math.sin(time * actualFreq * 2 * Math.PI) * 8 : 0;
const panelTabs = [
{ id: 'controls', label: '操作' },
{ id: 'data', label: '数据/公式' },
{ id: 'principle', label: '原理' },
];
const getPitchDesc = (f) => {
if (f < 80) return '低沉';
if (f < 200) return '低音';
if (f < 500) return '中音';
if (f < 1500) return '高音';
return '尖锐';
};
const panelContent = (tab) => {
if (tab === 'controls') return (
<>
振动控制
);
if (tab === 'data') return (
<>
f = ${actualFreq} Hz`,
`周期 T = ${(1/actualFreq*1000).toFixed(3)} ms`,
`琴弦越短，振动越快，频率越高，音调越高`,
]}
/>
Math.sin(i / 80 * 2 * Math.PI * (actualFreq / 200)) * 25)}
yLabel="波形" color={catColor} yMin={-60} yMax={60} />
);
if (tab === 'principle') return (
音调：声音的高低叫音调。
频率：物体每秒振动的次数，单位 Hz。
频率越高，音调越高；频率越低，音调越低。
弦乐器：弦越短、越细、越紧，音调越高。
人耳听觉范围：20 Hz ~ 20000 Hz
);
};
return (
);
}
// ---------- 3. Loudness & Amplitude ----------
function LoudnessAmplitudeExp({ category, name, catColor }) {
const [amplitude, setAmplitude] = useState(30);
const [freq, setFreq] = useState(440);
const [isPlaying, setIsPlaying] = useState(false);
const [time, setTime] = useState(0);
const rafRef = useRef();
useEffect(() => {
if (!isPlaying) return;
let last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000;
last = now;
setTime(t => t + dt);
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [isPlaying]);
const canvasW = 700, canvasH = 420;
const speakerX = 120, speakerY = canvasH / 2;
const wavePoints = [];
for (let x = 0; x <= canvasW - 200; x += 2) {
const t = x / (canvasW - 200) * Math.PI * 4 + time * freq * 2 * Math.PI * 0.1;
const y = Math.sin(t) * amplitude;
wavePoints.push(`${x + 170},${speakerY + y}`);
}
const loudness = Math.round(amplitude / 60 * 100);
const loudnessLevel = loudness > 70 ? '响亮' : loudness > 40 ? '中等' : loudness > 15 ? '较轻' : '微弱';
const panelTabs = [
{ id: 'controls', label: '操作' },
{ id: 'data', label: '数据/公式' },
{ id: 'principle', label: '原理' },
];
const panelContent = (tab) => {
if (tab === 'controls') return (
<>
控制
);
if (tab === 'data') return (
<>
A = ${amplitude} mm`,
`频率 f = ${freq} Hz`,
`振幅越大，响度越大；振幅越小，响度越小`,
`响度还与距离发声体的远近、声音分散程度有关`,
`注意：响度是主观感觉，振幅是客观物理量`,
]}
/>
Math.sin(i / 100 * 2 * Math.PI * 4) * amplitude)}
yLabel="波形" color={catColor} yMin={-70} yMax={70} />
);
if (tab === 'principle') return (
响度：声音的大小（强弱）叫响度。
振幅：物体振动时偏离原位置的最大距离。
振幅越大，响度越大；振幅越小，响度越小。
注意：音调和响度是两个不同的特性。
音调由频率决定，响度由振幅决定。
);
};
// speaker cone vibration
const coneOffset = isPlaying ? Math.sin(time * freq * 2 * Math.PI) * amplitude * 0.3 : 0;
return (
);
}
// Export
Object.assign(window, {
SoundPropagationExp,
PitchFrequencyExp,
LoudnessAmplitudeExp,
});