/* visuals8.jsx — AC: the wave.
A sloshing reservoir that pushes water back and forth, and an oscilloscope
trace. `freq` = how fast it sloshes; `amp` = how hard. A phase clock drives
both the water motion and the scope. DC shown as a flat line for contrast. */
/* live animation hook: returns a phase 0..1 advancing at `freq` Hz (scaled). */
function useAcPhase(freq, running = true) {
const [phase, setPhase] = React.useState(0);
const ref = React.useRef(0);
React.useEffect(() => {
if (!running) return;
let raf, last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
ref.current = (ref.current + dt * freq) % 1;
setPhase(ref.current);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [freq, running]);
return phase;
}
/* ─── AcWaterScene ───────────────────────────────────────────────────────
A U-shaped tube. The water surface tilts back and forth (AC) or sits
steady tilted (DC). A paddle/piston at the left drives it.
───────────────────────────────────────────────────────────────────────── */
function AcWaterScene({ mode = "ac", amp = 1, phase = 0, height = 360, showLabels = true }) {
const W = 820, H = 460;
const cx = W / 2, baseY = 250, tubeW = 520, tubeH = 150;
const left = cx - tubeW / 2, right = cx + tubeW / 2;
// surface offset: AC oscillates, DC is a fixed tilt
const swing = 54 * amp;
const s = mode === "ac" ? Math.sin(phase * Math.PI * 2) : 1;
const leftLevel = baseY - s * swing;
const rightLevel = baseY + s * swing;
// piston position (drives the left column)
const pistonY = leftLevel - 36;
// arrows show instantaneous flow direction
const flowing = mode === "dc" || Math.abs(s) > 0.08;
const dir = mode === "dc" ? 1 : (Math.cos(phase * Math.PI * 2) >= 0 ? 1 : -1);
return (
);
}
/* ─── ScopeScene ─────────────────────────────────────────────────────────
An oscilloscope trace: sine for AC (amp & freq), flat line for DC.
───────────────────────────────────────────────────────────────────────── */
function ScopeScene({ mode = "ac", amp = 1, freq = 1, phase = 0, height = 360, showLabels = true }) {
const W = 820, H = 460;
const x0 = 70, x1 = W - 50, midY = H / 2, span = 150 * amp;
const cycles = mode === "ac" ? Math.max(1, Math.round(freq * 2)) : 0;
// build the trace path
const pts = [];
const N = 240;
for (let i = 0; i <= N; i++) {
const x = x0 + (i / N) * (x1 - x0);
let y = midY;
if (mode === "ac") {
const t = i / N;
y = midY - Math.sin((t * cycles + phase) * Math.PI * 2) * span;
} else {
y = midY - span * 0.7; // steady DC level
}
pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
}
const d = "M " + pts.join(" L ");
// moving dot at the left edge (the "now" sample)
const dotY = mode === "ac" ? midY - Math.sin(phase * Math.PI * 2) * span : midY - span * 0.7;
return (
);
}
Object.assign(window, { useAcPhase, AcWaterScene, ScopeScene });