/* visuals4.jsx — Capacitor as a water bucket.
The bucket fills/drains over real time according to an RC equation.
This is the first chapter with time-dependent state. */
const { useState: _us4, useEffect: _ue4, useRef: _ur4 } = React;
/* ─── Hook: simulate capacitor charge state ──────────────────────────────
Returns { vCap, reset } where vCap is the live voltage on the capacitor.
mode: "charge" → V_cap → V_in via R.
mode: "discharge" → V_cap → 0 via R.
mode: "hold" → no change.
C is in arbitrary "size" units; combined with R produces a time constant
tau = R * C (seconds). */
function useCapSim({ vIn, R, C, mode }) {
const [vCap, setVCap] = React.useState(0);
const lastTimeRef = React.useRef(performance.now());
React.useEffect(() => {
lastTimeRef.current = performance.now();
let raf;
const tick = (now) => {
const dtMs = Math.min(80, now - lastTimeRef.current);
const dt = dtMs / 1000;
lastTimeRef.current = now;
setVCap(prev => {
const target = mode === "charge" ? vIn
: mode === "discharge" ? 0
: prev;
const tau = Math.max(0.05, R * C / 4); // /4 so it feels lively
const next = prev + (target - prev) * (1 - Math.exp(-dt / tau));
return next;
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [vIn, R, C, mode]);
const reset = React.useCallback(() => setVCap(0), []);
return { vCap, reset, setVCap };
}
/* ─── BucketScene ────────────────────────────────────────────────────────
A water tower (V_in) on the left → pipe with constriction (R) → bucket
(C) on the right. The bucket fills from the top via a tap valve, drains
from the bottom via a drain valve.
───────────────────────────────────────────────────────────────────────── */
function BucketScene({ vIn, R, C, vCap, mode, height = 380, showLabels = true, kids = false }) {
const W = 820, H = 460;
// Currents (sign depends on mode)
const dV = mode === "charge" ? (vIn - vCap)
: mode === "discharge" ? (0 - vCap)
: 0;
const I = Math.max(0, Math.abs(dV) / R);
// Electron/water speed tracks how fast the LEVEL is actually changing:
// rate = |dV| / tau (volts per second). Near-full → slow; small R·C → fast.
const tauForRate = Math.max(0.05, (R * C) / 4);
const levelRate = Math.abs(dV) / tauForRate;
const period = flowPeriod(Math.max(0.05, levelRate * 0.6));
// Barrel on left
const barrelCx = 100, barrelTop = 40, barrelBot = 250;
const rimRx = 50, midRx = 64;
// Pipe from barrel — runs along, then elbows DOWN to pour into the bucket
const pipeStart = barrelCx + 50;
const pipeY = 150;
const baseH = 24;
const cXa = pipeStart + 70, cXb = pipeStart + 170;
const narrowH = baseH * (0.14 + 0.86 * pipeOpenness(R));
const bucketX = 520;
const tapX = bucketX; // pipe elbows down right above the bucket
const pipeEnd = tapX;
// Sluice-gate pinch — downstream water level drops to the gate's opening,
// matching the resistance animation in Chapters 1–3.
const constrictions = [{ xa: cXa, xb: cXb, narrowH, gate: true }];
const pushFrac = narrowH / baseH;
const pinchMid = (cXa + cXb) / 2;
const pipeLevels = [
{ fromX: pipeStart, toX: pinchMid, frac: 1 },
{ fromX: pinchMid, toX: pipeEnd, frac: pushFrac },
];
// Bucket on right — a real pail, sitting LOW so the pipe pours into it.
// Buckets are nearly straight-walled with a mild taper + a bail handle.
// Sized to stay proportional to the barrel (rim 50 / bulge 64): at the
// default C it reads a touch smaller than the source, growing with C.
const bucketTop = 212;
const bucketBot = 392;
const topHalf = 34 + C * 6;
const botHalf = topHalf * 0.82;
const rimRy = 11;
const halfAt = (y) => {
const f = (y - bucketTop) / (bucketBot - bucketTop);
return topHalf + (botHalf - topHalf) * f;
};
const vMaxVisual = 12;
const fillFrac = Math.max(0, Math.min(1, vCap / vMaxVisual));
const waterTop = bucketBot - fillFrac * (bucketBot - bucketTop);
// spigot/tap — comes out the SIDE of the bucket near the bottom, turns down
const spigotY = bucketBot - 30;
const spigotRootX = bucketX + halfAt(spigotY);
const spigotOutX = spigotRootX + 40;
const spigotMouthY = spigotY + 34;
const drainExitX = spigotOutX;
const drainY = spigotMouthY;
// Determine which animations to run
const charging = mode === "charge" && I > 0.02;
const discharging = mode === "discharge" && I > 0.02;
// On-screen settle time. The sim uses tau = R*C/4 (see useCapSim); a cap is
// ~99% settled after ~5 tau. Report that so cause/effect is explicit.
const tauScreen = Math.max(0.05, (R * C) / 4);
const settleSecs = tauScreen * 5;
return (
);
}
/* ─── CapCircuitScene ───────────────────────────────────────────────────
Battery — switch (charge/discharge) — resistor — capacitor.
When charging: battery + R + C in series, capacitor builds up V_cap.
When discharging: battery removed, C discharges through R.
───────────────────────────────────────────────────────────────────────── */
function CapCircuitScene({ vIn, R, C, vCap, mode, height = 380, showLabels = true, kids = false }) {
const W = 820, H = 460;
const dV = mode === "charge" ? (vIn - vCap) : mode === "discharge" ? (-vCap) : 0;
const I = Math.abs(dV) / R;
const period = flowPeriod(Math.max(0.05, I));
const flowing = I > 0.05 && mode !== "hold";
const L = 130, R_ = 690, T = 130, B = 360;
const batCx = L, batCy = (T + B) / 2, batHalfH = 32;
const switchCx = 270, switchCy = T;
const resCx = 430, resCy = T;
const capCx = R_, capCy = (T + B) / 2;
// Discharge bypass: when the battery is switched out, the cap's charge
// coasts around THIS wire instead — it must never run through the battery
// (that would read as the cap recharging the battery).
const bypX = 196;
// Wire path: from + terminal up, across top (with switch + resistor breaks), down to top cap plate
// From bottom cap plate, across bottom, up to - terminal.
const wirePath = `
M ${L} ${batCy - batHalfH}
L ${L} ${T}
L ${switchCx - 22} ${T}
M ${switchCx + 22} ${T}
L ${resCx - 45} ${T}
M ${resCx + 45} ${T}
L ${R_} ${T}
L ${R_} ${capCy - 24}
M ${R_} ${capCy + 24}
L ${R_} ${B}
L ${L} ${B}
L ${L} ${batCy + batHalfH}
`;
// The loop electrons travel: charging runs battery → R → cap; discharging
// coasts cap → R → bypass — skipping the battery entirely.
const loopPath = mode === "discharge"
? `M ${R_} ${capCy - 24} L ${R_} ${T} L ${bypX} ${T} L ${bypX} ${B} L ${R_} ${B} L ${R_} ${capCy + 24} L ${R_} ${capCy - 24} Z`
: `M ${L} ${batCy - batHalfH} L ${L} ${T} L ${R_} ${T} L ${R_} ${B} L ${L} ${B} L ${L} ${batCy + batHalfH} Z`;
return (
);
}
Object.assign(window, { useCapSim, BucketScene, CapCircuitScene });