/* visuals9.jsx — Inductor: the flywheel.
A heavy paddlewheel in the pipe. It resists CHANGES in flow: slow to start
spinning, but once spinning it keeps the water going (momentum). Mirror of
the capacitor. `drive` = source on/off; the wheel speed lags the drive. */
/* Hook: wheel "current" chases the target with inductive lag (L sets how slow). */
function useInductorSim({ driveOn, L = 2, running = true }) {
const [cur, setCur] = React.useState(0);
const ref = React.useRef(0);
React.useEffect(() => {
if (!running) return;
let raf, last = performance.now();
const tick = (now) => {
const dt = Math.min(0.05, (now - last) / 1000); last = now;
const target = driveOn ? 1 : 0;
const tau = Math.max(0.15, L / 2.2); // bigger L = slower change
ref.current += (target - ref.current) * (1 - Math.exp(-dt / tau));
setCur(ref.current);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [driveOn, L, running]);
return cur; // 0..1
}
/* ─── InductorWaterScene ─────────────────────────────────────────────────
Barrel → pipe with a paddlewheel → outlet. Wheel spin speed = `cur`.
Spin angle accumulates so it visibly keeps turning.
───────────────────────────────────────────────────────────────────────── */
function InductorWaterScene({ voltage = 6, cur = 0, driveOn = true, height = 360, showLabels = true }) {
const W = 820, H = 460;
const I = cur * (voltage / 3);
const period = flowPeriod(Math.max(0.05, I));
const fill = fillRatio(voltage);
const barrelCx = 110, barrelTop = 70, barrelBot = 360;
const rimRx = 62, midRx = 80;
const pipeY = 270, pipeStart = barrelCx + 60, pipeEnd = W - 80, baseH = 34;
const wheelCx = (pipeStart + pipeEnd) / 2, wheelR = 46;
// accumulate spin angle from cur
const angleRef = React.useRef(0);
const curRef = React.useRef(cur);
curRef.current = cur;
const [angle, setAngle] = React.useState(0);
React.useEffect(() => {
let raf, last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
angleRef.current = (angleRef.current + dt * curRef.current * 320) % 360;
setAngle(angleRef.current);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
return (
);
}
/* ─── InductorChart — current vs time, showing the lag ──────────────────── */
function InductorChart({ cur = 0, driveOn = true, height = 360, showLabels = true }) {
const W = 820, H = 460, x0 = 70, x1 = W - 50, y0 = 60, y1 = H - 70;
const histRef = React.useRef([]);
const curRef = React.useRef(cur);
curRef.current = cur;
const driveRef = React.useRef(driveOn);
driveRef.current = driveOn;
const [, force] = React.useState(0);
React.useEffect(() => {
let raf, last = performance.now();
const tick = (now) => {
if (now - last > 40) {
last = now;
histRef.current.push(curRef.current);
if (histRef.current.length > 120) histRef.current.shift();
force(n => n + 1);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const h = histRef.current;
const yFor = (v) => y1 - v * (y1 - y0);
const pts = h.map((v, i) => `${(x0 + (i / 119) * (x1 - x0)).toFixed(1)},${yFor(v).toFixed(1)}`);
const d = pts.length ? "M " + pts.join(" L ") : "";
return (
);
}
Object.assign(window, { useInductorSim, InductorWaterScene, InductorChart });