/* visuals.jsx — animated SVGs for water + circuit
Babel-in-browser. Defines components on window. */
const { useMemo } = React;
/* ─── Shared faucet/tap for pipe outlets ───────────────────────────
(x, y) = pipe end-wall center; baseH = pipe half-height. Draws a sealed
end wall, a tapering spout low on the wall (water exits at the bottom,
where the pressure is), a rimmed mouth, and a T-handle valve stem.
`s` scales the whole fitting; the spout tip is at faucetTip(...). */
function faucetTip({ x, y, baseH, s = 1 }) {
return { x: x + 34 * s, y: y + baseH * 0.45 };
}
function renderFaucet({ x, y, baseH, on = false, s = 1 }) {
const tip = faucetTip({ x, y, baseH, s });
const tx = tip.x, ty = tip.y;
const mouthR = Math.min(11 * s, baseH * 0.45);
const rootR = Math.min(16 * s, baseH * 0.62);
return (
{/* sealed end wall */}
{/* spout — tapering nose */}
{/* mouth rim — wet when flowing */}
{/* valve stem + T-handle */}
);
}
// Drift speed tracks flow: lazy when pinched, rushing when wide open.
// Deliberately dramatic — current IS the speed of the water, and the eye
// should feel it. I=0.5 → ~11s/loop crawl; I=2 → 1.3s; I=6+ → 0.16s sprint.
function flowPeriod(current) {
if (current <= 0.001) return "9999s";
const seconds = Math.max(0.16, Math.min(11.0, 3.8 / Math.pow(current, 1.5)));
return seconds.toFixed(3) + "s";
}
function fillRatio(v, max = 12) {
return Math.max(0, Math.min(1, v / max));
}
// Resistance → pipe openness. R=0.5 wide open; R=10 nearly pinched shut.
function pipeOpenness(r, max = 10) {
const t = Math.max(0, Math.min(1, (r - 0.5) / (max - 0.5)));
return 1.0 - t * 0.94;
}
/* ─── Water-current texture ──────────────────────────────────────────────
A drifting sine streak that reads as moving water (replaces the old
marching dashes). The wavelength MUST match the translateX distance in
styles.css → @keyframes water-drift, so each animation loop lands one
full wavelength along and repeats seamlessly.
───────────────────────────────────────────────────────────────────────── */
const WATER_WAVELENGTH = 56;
function renderWaterCurrent({ x1, x2, y, amp = 4, period, flowing,
stroke = "var(--water-soft)", width = 2.5,
opacity = 0.85, phase = 0 }) {
const lam = WATER_WAVELENGTH;
// Start two wavelengths early so the rightward drift never exposes a gap
// on the left edge (the path is clipped to the water anyway).
const x0 = x1 - 2 * lam + (phase % lam);
let d = `M ${x0} ${y}`;
for (let x = x0; x < x2; x += lam) {
d += ` q ${lam / 4} ${-amp * 2} ${lam / 2} 0 q ${lam / 4} ${amp * 2} ${lam / 2} 0`;
}
return (
);
}
/* ─── WaterScene ──────────────────────────────────────────────────────────
Wooden water barrel on the left (the "pressure source"), with a
horizontal pipe running off the bottom-right, narrowing in the middle
(the resistance). Water level in the barrel follows voltage.
───────────────────────────────────────────────────────────────────────── */
function WaterScene({ voltage = 6, resistance = 3, current = 2, showLabels = true, height = 380 }) {
const W = 820, H = 460;
const fill = fillRatio(voltage);
const open = pipeOpenness(resistance);
const period = flowPeriod(current);
// Barrel geometry — sits on the left half
const barrelCx = 150;
const barrelTop = 70;
const barrelBot = 380;
const rimRx = 82; // half-width at the rim
const midRx = 102; // half-width at the bulge
const rimRy = 14; // ellipse for top rim (perspective)
// Pipe geometry — exits the BOTTOM of the barrel's side (pressure is
// highest at the bottom, and the barrel can drain fully).
const pipeBaseHalfHeight = 38;
const pipeY = barrelBot - pipeBaseHalfHeight; // pipe floor flush with the barrel floor
const pipeStart = barrelCx + 78; // overlaps the barrel a little
const pipeEnd = W - 200; // leaves room for the faucet + jet arc INSIDE the viewBox
// Constriction (40% – 60% of pipe length) — drawn as a GATE coming down
// from the top wall, so its opening sits on the pipe floor and lines up
// exactly with the downstream water level. R=0 → gate fully raised → no pinch.
const cX1 = pipeStart + (pipeEnd - pipeStart) * 0.40;
const cX2 = pipeStart + (pipeEnd - pipeStart) * 0.60;
const narrowHalfHeight = pipeBaseHalfHeight * (0.10 + 0.90 * open);
const yThroatTop = pipeY + pipeBaseHalfHeight - 2 * narrowHalfHeight; // top of the gate opening
// Pressure shown as WATER LEVEL: full before the pinch, and after it the
// level sits EXACTLY at the gate's opening — the pinch IS the new level.
// Zero resistance → gate raised → no drop. Flow dashes stay uniform.
const pinchCx = (cX1 + cX2) / 2;
const bottomY = pipeY + pipeBaseHalfHeight;
const topY = pipeY - pipeBaseHalfHeight;
const fracAfter = narrowHalfHeight / pipeBaseHalfHeight; // opening ÷ full height
const pinchFrac = (pinchCx - pipeStart) / (pipeEnd - pipeStart); // where the pinch sits along the pipe
const washMax = Math.min(0.82, (1 - fracAfter) * 0.85); // how much the water pales after the pinch
const waterPath = `M ${pipeStart} ${topY} L ${pinchCx} ${topY} L ${pinchCx} ${yThroatTop} L ${pipeEnd} ${yThroatTop} L ${pipeEnd} ${bottomY} L ${pipeStart} ${bottomY} Z`;
const waterSurface = `M ${pipeStart} ${topY} L ${pinchCx} ${topY} L ${pinchCx} ${yThroatTop} L ${pipeEnd} ${yThroatTop}`;
const outletY = Math.max(pipeY, (yThroatTop + bottomY) / 2); // spurt exits at the low level
// Water level inside the barrel
const waterTop = barrelTop + (1 - fill) * (barrelBot - barrelTop);
// half-width of barrel at any y (bulged sinusoidally)
const halfWidthAt = (y) => {
const t = Math.max(0, Math.min(1, (y - barrelTop) / (barrelBot - barrelTop)));
return rimRx + (midRx - rimRx) * Math.sin(t * Math.PI);
};
// Barrel silhouette path — bottom edge bows down (we look slightly down
// on a cylinder, so the base reads as the front of an ellipse)
const barrelSilhouette = `
M ${barrelCx - rimRx} ${barrelTop}
C ${barrelCx - midRx - 4} ${barrelTop + 70}, ${barrelCx - midRx - 4} ${barrelBot - 70}, ${barrelCx - rimRx} ${barrelBot}
A ${rimRx} 13 0 0 0 ${barrelCx + rimRx} ${barrelBot}
C ${barrelCx + midRx + 4} ${barrelBot - 70}, ${barrelCx + midRx + 4} ${barrelTop + 70}, ${barrelCx + rimRx} ${barrelTop}
Z
`;
// Pipe paths — flat floor; only the TOP wall dips down at the gate
const topPath = `
M ${pipeStart} ${pipeY - pipeBaseHalfHeight}
L ${cX1 - 28} ${pipeY - pipeBaseHalfHeight}
C ${cX1 - 6} ${pipeY - pipeBaseHalfHeight}, ${cX1} ${yThroatTop}, ${cX1 + 8} ${yThroatTop}
L ${cX2 - 8} ${yThroatTop}
C ${cX2} ${yThroatTop}, ${cX2 + 6} ${pipeY - pipeBaseHalfHeight}, ${cX2 + 28} ${pipeY - pipeBaseHalfHeight}
L ${pipeEnd} ${pipeY - pipeBaseHalfHeight}
`;
const botPath = `
M ${pipeStart} ${pipeY + pipeBaseHalfHeight}
L ${pipeEnd} ${pipeY + pipeBaseHalfHeight}
`;
const interiorPath = `
M ${pipeStart} ${pipeY - pipeBaseHalfHeight}
L ${cX1 - 28} ${pipeY - pipeBaseHalfHeight}
C ${cX1 - 6} ${pipeY - pipeBaseHalfHeight}, ${cX1} ${yThroatTop}, ${cX1 + 8} ${yThroatTop}
L ${cX2 - 8} ${yThroatTop}
C ${cX2} ${yThroatTop}, ${cX2 + 6} ${pipeY - pipeBaseHalfHeight}, ${cX2 + 28} ${pipeY - pipeBaseHalfHeight}
L ${pipeEnd} ${pipeY - pipeBaseHalfHeight}
L ${pipeEnd} ${pipeY + pipeBaseHalfHeight}
L ${pipeStart} ${pipeY + pipeBaseHalfHeight}
Z
`;
const centerline = `M ${pipeStart} ${pipeY} L ${pipeEnd} ${pipeY}`;
// Stave x positions (vertical wood planks)
const stavesX = [-50, -25, 0, 25, 50];
// ── Faucet at the pipe's end ───────────────────────────────
// The pipe ends in a barrel tap. Physics of the jet:
// · exit SPEED ← pressure left after the pinch (reach + droplet pace)
// · thickness ← current (how much water is actually moving)
const FAUCET_S = 1.55; // chunky, readable tap
const tip = faucetTip({ x: pipeEnd, y: pipeY, baseH: pipeBaseHalfHeight, s: FAUCET_S });
const tipX = tip.x, tipY = tip.y;
const pressureLeft = voltage * fracAfter; // 0..12 — the push at the outlet
const pNorm = Math.max(0, Math.min(1, pressureLeft / 12));
const spurt = current > 0.1;
const spurtReach = 12 + pNorm * 100; // speed → distance before gravity wins (kept inside viewBox)
const landX = tipX + spurtReach;
const landY = 436;
const spurtPath = `M ${tipX} ${tipY} Q ${tipX + spurtReach * 0.55} ${tipY + 4}, ${landX} ${landY}`;
// droplet travel time ← exit speed (pressure), NOT flow volume
const jetSecs = Math.max(0.45, 2.4 - pNorm * 1.8);
const jetPeriod = jetSecs.toFixed(2) + "s";
const droplets = spurt ? Array.from({ length: Math.round(5 + Math.min(6, current)) }, (_, i) => i) : [];
// Stream thickness ← current: a thin trickle at low flow, a fat jet at high.
const jetWidth = 2.5 + Math.min(15, current * 2.6);
const dropScale = 0.55 + Math.min(1.15, current * 0.22);
// teardrop pointing in +x (bulb leads, tail trails) — rotate="auto" aligns it to the arc
const teardrop = "M 7 0 C 3 4.5, -5 3.5, -8 0 C -5 -3.5, 3 -4.5, 7 0 Z";
// Hoops (horizontal metal bands) — drawn as ellipses sized to the barrel's
// half-width at that y. The bottom half of each ellipse is hidden by the
// barrel; only the top arc reads as a wrapping hoop. We also draw a short
// flat band underneath to suggest the hoop's thickness.
const hoopYs = [110, 340];
return (
);
}
/* ─── CircuitScene ────────────────────────────────────────────────────────
Battery on left, resistor on top, lamp on right. Electrons travel
around a closed loop using SMIL animateMotion — clearer & slower
than dashed-line marching.
───────────────────────────────────────────────────────────────────────── */
function CircuitScene({ voltage = 6, resistance = 3, current = 2, showLabels = true, height = 380 }) {
const W = 820, H = 460;
const period = flowPeriod(current);
const flowing = current > 0.05;
const periodSec = parseFloat(period);
// Loop corners
const L = 140, R = 680, T = 130, B = 360;
// Battery position (vertical, on left wire)
const batCx = L, batCy = (T + B) / 2;
const batHalfH = 30; // half the vertical extent of the schematic battery
// Resistor on top wire
const resCx = (L + R) / 2, resCy = T;
const resW = 130, resH = 38;
// Bulb on right wire
const bulbCx = R, bulbCy = (T + B) / 2;
const bulbR = 30;
// Visible wire segments (drawn with breaks at battery / bulb)
const wirePath = `
M ${L} ${batCy - batHalfH}
L ${L} ${T}
L ${resCx - resW/2} ${T}
M ${resCx + resW/2} ${T}
L ${R} ${T}
L ${R} ${bulbCy - bulbR}
M ${R} ${bulbCy + bulbR}
L ${R} ${B}
L ${L} ${B}
L ${L} ${batCy + batHalfH}
`;
// Continuous closed loop for animateMotion (electrons travel through everything,
// including the battery & lamp interior). Conventional current direction:
// from + terminal (top of battery) → top-left → right along top → through R →
// continue right → down → through bulb → bottom-right → left along bottom →
// up to − terminal → back through battery to +.
const electronLoop = `
M ${L} ${batCy - batHalfH}
L ${L} ${T}
L ${R} ${T}
L ${R} ${B}
L ${L} ${B}
L ${L} ${batCy + batHalfH}
L ${L} ${batCy - batHalfH}
Z
`;
// Direction arrowheads at fixed positions along the loop
const arrows = [
{ x: (L + R) / 2 - 80, y: T, angle: 0 },
{ x: (L + R) / 2 + 80, y: T, angle: 0 },
{ x: R, y: (T + B)/2 + 60, angle: 90 },
{ x: (L + R) / 2, y: B, angle: 180 },
{ x: L, y: (T + B)/2 - 60, angle: 270 },
];
// Power → bulb glow & subtle scale
const power = voltage * current;
const glowOpacity = Math.max(0, Math.min(1, power / 14));
const bulbScale = 1 + Math.min(0.08, power / 180);
// Electrons — 7 evenly spaced around the loop
const electronCount = 7;
const electrons = flowing
? Array.from({ length: electronCount }, (_, i) => i)
: [];
return (
);
}
Object.assign(window, { WaterScene, CircuitScene, flowPeriod, fillRatio, pipeOpenness, renderWaterCurrent, renderFaucet, faucetTip });