/* visuals2.jsx — Chapter 2: Series & Parallel
SeriesWater, ParallelWater, SeriesCircuit, ParallelCircuit.
Reuses flowPeriod, fillRatio, pipeOpenness from visuals.jsx (already on window). */
/* ─── Shared rendering helpers ──────────────────────────────────────────── */
// Build a half-pipe path (top or bottom outline) through any number of
// constrictions. `side` = -1 for top, +1 for bottom. A constriction with
// `gate: true` narrows from the TOP only (a sluice gate): its opening sits on
// the pipe floor, so the downstream water level lines up with it exactly.
function buildPipeSide(pipeStart, pipeEnd, pipeY, baseH, constrictions, side) {
let path = `M ${pipeStart} ${pipeY + side * baseH}`;
for (const c of constrictions) {
const yN = c.gate
? (side < 0 ? pipeY + baseH - 2 * c.narrowH : pipeY + baseH)
: pipeY + side * c.narrowH;
path += ` L ${c.xa - 28} ${pipeY + side * baseH}`;
path += ` C ${c.xa - 6} ${pipeY + side * baseH}, ${c.xa} ${yN}, ${c.xa + 8} ${yN}`;
path += ` L ${c.xb - 8} ${yN}`;
path += ` C ${c.xb} ${yN}, ${c.xb + 6} ${pipeY + side * baseH}, ${c.xb + 28} ${pipeY + side * baseH}`;
}
path += ` L ${pipeEnd} ${pipeY + side * baseH}`;
return path;
}
// Closed interior path (top + reversed bottom).
function buildPipeInterior(pipeStart, pipeEnd, pipeY, baseH, constrictions) {
const top = buildPipeSide(pipeStart, pipeEnd, pipeY, baseH, constrictions, -1);
// Reverse the bottom-side path so the polygon closes cleanly. Easier:
// build top, then descend at pipeEnd, then build bottom in reverse direction.
let path = top;
path += ` L ${pipeEnd} ${pipeY + baseH}`;
// Bottom in reverse (right-to-left)
const revCons = [...constrictions].reverse();
for (const c of revCons) {
const yN = c.gate ? pipeY + baseH : pipeY + c.narrowH;
path += ` L ${c.xb + 28} ${pipeY + baseH}`;
path += ` C ${c.xb + 6} ${pipeY + baseH}, ${c.xb} ${yN}, ${c.xb - 8} ${yN}`;
path += ` L ${c.xa + 8} ${yN}`;
path += ` C ${c.xa} ${yN}, ${c.xa - 6} ${pipeY + baseH}, ${c.xa - 28} ${pipeY + baseH}`;
}
path += ` L ${pipeStart} ${pipeY + baseH} Z`;
return path;
}
// Barrel — reuse the same geometry as Chapter 1 but as a self-contained renderer.
function renderBarrel({ cx, top, bot, rimRx, midRx, fill, idSuffix, deepWater = false }) {
const rimRy = 12;
const waterTop = top + (1 - fill) * (bot - top);
const halfWidthAt = (y) => {
const t = Math.max(0, Math.min(1, (y - top) / (bot - top)));
return rimRx + (midRx - rimRx) * Math.sin(t * Math.PI);
};
const silhouette = `
M ${cx - rimRx} ${top}
C ${cx - midRx - 4} ${top + 60}, ${cx - midRx - 4} ${bot - 60}, ${cx - rimRx} ${bot}
L ${cx + rimRx} ${bot}
C ${cx + midRx + 4} ${bot - 60}, ${cx + midRx + 4} ${top + 60}, ${cx + rimRx} ${top}
Z
`;
const hoopYs = [top + 40, bot - 40];
const staves = [-40, -20, 0, 20, 40];
const clipId = `barrel-clip-${idSuffix}`;
const woodId = `wood-${idSuffix}`;
const waterId = `water-${idSuffix}`;
return (
{deepWater ? (
<>
) : (
<>
)}
{staves.map((dx) => (
))}
{hoopYs.map((hy, i) => {
const hw = halfWidthAt(hy);
return (
);
})}
);
}
// 3D pipe renderer — interior + outlines + flow ripples + outlet end-cap.
// `levels` (optional): [{ fromX, toX, frac }] — renders the pipe as an EMPTY
// tube with water filled to `frac` of its height per segment (pressure-as-level).
// Without `levels`, the pipe renders full of water as before.
function renderPipe({ pipeStart, pipeEnd, pipeY, baseH, constrictions, current, period, idSuffix, showOutletCap = true, levels = null }) {
const top = buildPipeSide(pipeStart, pipeEnd, pipeY, baseH, constrictions, -1);
const bot = buildPipeSide(pipeStart, pipeEnd, pipeY, baseH, constrictions, +1);
const interior = buildPipeInterior(pipeStart, pipeEnd, pipeY, baseH, constrictions);
const centerline = `M ${pipeStart} ${pipeY} L ${pipeEnd} ${pipeY}`;
const clipId = `pipe-clip-${idSuffix}`;
const cylId = `pipe-cyl-${idSuffix}`;
const specId = `pipe-spec-${idSuffix}`;
const waterClipId = `pipe-water-clip-${idSuffix}`;
const flowing = current > 0.05;
// Stepped water polygon + surface line for level mode
const bottomY = pipeY + baseH;
const levelYOf = (f) => bottomY - Math.max(0, Math.min(1, f)) * (2 * baseH);
let waterPath = null, waterSurface = null;
if (levels && levels.length) {
const pts = [];
levels.forEach((s, i) => {
const y = levelYOf(s.frac);
pts.push(`${i === 0 ? "M" : "L"} ${s.fromX} ${y}`);
pts.push(`L ${s.toX} ${y}`);
});
waterSurface = pts.join(" ");
waterPath = `${waterSurface} L ${levels[levels.length - 1].toX} ${bottomY} L ${levels[0].fromX} ${bottomY} Z`;
}
return (
{levels ? (
<>
) : (
<>
)}
{waterPath && }
{/* the water, filled to the pressure level (clipped to the pipe walls) */}
{waterPath && (
)}
{showOutletCap && (() => {
const fs = Math.max(0.65, Math.min(1.05, baseH / 34));
return renderFaucet({ x: pipeEnd, y: pipeY, baseH, on: flowing, s: fs });
})()}
{/* bright surface shimmer */}
{renderWaterCurrent({ x1: pipeStart, x2: pipeEnd, y: pipeY - baseH * 0.35,
amp: Math.max(1.6, baseH * 0.07), period, flowing,
stroke: "rgba(255,255,255,0.55)", width: 1.5, opacity: 0.75 })}
{/* main current */}
{renderWaterCurrent({ x1: pipeStart, x2: pipeEnd, y: levels ? pipeY + baseH * 0.45 : pipeY,
amp: Math.max(2.4, baseH * 0.13), period, flowing,
stroke: "var(--water-soft)", width: 2.8, opacity: 0.85, phase: 19 })}
{/* deep undertow */}
{renderWaterCurrent({ x1: pipeStart, x2: pipeEnd, y: pipeY + baseH * (levels ? 0.72 : 0.4),
amp: Math.max(1.8, baseH * 0.09), period, flowing,
stroke: "var(--water-deep)", width: 1.2, opacity: 0.45, phase: 38 })}
);
}
function renderConstrictionLabels({ constrictions, pipeY, baseH, labels }) {
return (
{constrictions.map((c, i) => {
const mid = (c.xa + c.xb) / 2;
const yTip = c.gate ? pipeY + baseH - 2 * c.narrowH - 6 : pipeY - c.narrowH - 6;
return (
{labels[i]}
);
})}
);
}
function renderOutletDroplets({ pipeEnd, pipeY, current, period, count = 6, baseH = 30 }) {
if (current <= 0.1) return null;
// Jet leaves from the faucet's spout mouth (drawn by renderPipe).
const fs = Math.max(0.65, Math.min(1.05, baseH / 34));
const tip = faucetTip({ x: pipeEnd, y: pipeY, baseH, s: fs });
const reach = 22 + Math.min(140, current * 22);
const landX = tip.x + reach, landY = pipeY + 110;
const arc = `M ${tip.x} ${tip.y} Q ${tip.x + reach * 0.52} ${tip.y + 2}, ${landX} ${landY}`;
const teardrop = "M 6 0 C 2.6 4, -4.5 3, -7 0 C -4.5 -3, 2.6 -4, 6 0 Z";
const n = Math.round(count + Math.min(5, current));
const pd = parseFloat(period);
return (
{current > 1.4 && (
)}
{Array.from({ length: n }, (_, i) => {
const sc = 0.78 + (i % 3) * 0.2;
const begin = `-${(i * pd) / n}s`;
return (
);
})}
);
}
/* ─── SeriesWater ───────────────────────────────────────────────────────── */
function SeriesWater({ voltage = 6, r1 = 3, r2 = 3, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I = voltage / (r1 + r2);
const period = flowPeriod(I);
const fill = fillRatio(voltage);
const barrelCx = 110, barrelTop = 60, barrelBot = 370;
const rimRx = 62, midRx = 80;
const pipeY = 280;
const pipeStart = barrelCx + 60;
const pipeEnd = W - 70;
const baseH = 32;
const span = pipeEnd - pipeStart;
const c1xa = pipeStart + span * 0.22, c1xb = pipeStart + span * 0.38;
const c2xa = pipeStart + span * 0.55, c2xb = pipeStart + span * 0.71;
const nh1 = baseH * (0.12 + 0.88 * pipeOpenness(r1));
const nh2 = baseH * (0.12 + 0.88 * pipeOpenness(r2));
const constrictions = [
{ xa: c1xa, xb: c1xb, narrowH: nh1, gate: true },
{ xa: c2xa, xb: c2xb, narrowH: nh2, gate: true },
];
// Pressure shown as WATER LEVEL. Each gate's opening sits on the pipe floor,
// and the level downstream lines up with it EXACTLY: zero resistance, zero
// pinch, no drop. A looser second gate can't raise the level back up — the
// level only ever steps DOWN (to the tightest gate so far).
const frac1 = nh1 / baseH; // opening of gate 1
const fracMid = Math.min(1, frac1);
const fracEnd = Math.min(fracMid, nh2 / baseH); // tighter gate wins
const m1 = (c1xa + c1xb) / 2, m2 = (c2xa + c2xb) / 2;
const levels = [
{ fromX: pipeStart, toX: m1, frac: 1 },
{ fromX: m1, toX: m2, frac: fracMid },
{ fromX: m2, toX: pipeEnd, frac: fracEnd },
];
return (
);
}
/* ─── ParallelWater ─────────────────────────────────────────────────────── */
/* Water splits into two horizontal branches, each with its own constriction. */
function ParallelWater({ voltage = 6, r1 = 3, r2 = 3, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I1 = voltage / r1;
const I2 = voltage / r2;
const Itot = I1 + I2;
const period1 = flowPeriod(I1);
const period2 = flowPeriod(I2);
const periodMain = flowPeriod(Itot);
const fill = fillRatio(voltage);
const barrelCx = 110, barrelTop = 60, barrelBot = 370;
const rimRx = 62, midRx = 80;
// Layout
const baseH = 22; // branches thinner than main
const baseHMain = 30;
const trunkY = 230;
const topY = 130;
const botY = 330;
const trunkStart = barrelCx + 60;
const splitX = trunkStart + 70;
const branchStartX = splitX + 12;
const branchEndX = W - 200;
const recombineX = branchEndX + 12;
const trunkEnd = recombineX + 70;
const outletX = W - 60;
const branchSpan = branchEndX - branchStartX;
// Constrictions in each branch
const cTop = { xa: branchStartX + branchSpan * 0.28, xb: branchStartX + branchSpan * 0.66,
narrowH: baseH * (0.14 + 0.86 * pipeOpenness(r1)) };
const cBot = { xa: branchStartX + branchSpan * 0.28, xb: branchStartX + branchSpan * 0.66,
narrowH: baseH * (0.14 + 0.86 * pipeOpenness(r2)) };
return (
);
}
/* ─── Circuit drawing helpers ───────────────────────────────────────────── */
function renderBatterySymbol({ cx, cy, halfH, voltage, showLabel }) {
return (
+
−
{showLabel && (
{voltage.toFixed(1)}V
)}
);
}
function renderResistorSymbol({ cx, cy, w = 100, h = 30, r = 3, label, vertical = false }) {
if (vertical) {
// Rotate 90° via transforming
return (
{Array.from({ length: Math.min(8, Math.max(2, Math.round(r + 1))) }).map((_, i, arr) => {
const x = -w/2 + (w / (arr.length + 1)) * (i + 1);
return ;
})}
{label && (
{label}
)}
);
}
return (
{Array.from({ length: Math.min(8, Math.max(2, Math.round(r + 1))) }).map((_, i, arr) => {
const x = cx - w/2 + (w / (arr.length + 1)) * (i + 1);
return ;
})}
{label && (
{label}
)}
);
}
function renderBulbSymbol({ cx, cy, r = 26, glowOpacity, flowing, label }) {
const idGlow = `bulb-glow-${cx}-${cy}`;
const s = r / 26; // scale factor relative to the design size
return (
{/* screw base / cap at the bottom */}
{[15, 19, 23].map((dy, i) => (
))}
{/* glass envelope (pear-ish) */}
{/* filament — two posts + a glowing zigzag */}
{label && (
{label}
)}
);
}
// Returns electrons animating along a closed path (now JS-driven via the
// shared component so they never clump when speed changes).
function renderElectrons({ path, period, count = 6, flowing, color = "var(--current)" }) {
if (!flowing) return null;
return ;
}
/* ─── SeriesCircuit ────────────────────────────────────────────────────── */
function SeriesCircuit({ voltage = 6, r1 = 3, r2 = 3, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I = voltage / (r1 + r2);
const period = flowPeriod(I);
const flowing = I > 0.05;
const periodSec = parseFloat(period);
const L = 130, R = 690, T = 120, B = 360;
const batCx = L, batCy = (T + B) / 2, batHalfH = 32;
const res1Cx = L + (R - L) * 0.32, res2Cx = L + (R - L) * 0.62;
const resCy = T;
const resW = 90, resH = 32;
const bulbCx = R, bulbCy = (T + B) / 2, bulbR = 28;
const wirePath = `
M ${L} ${batCy - batHalfH}
L ${L} ${T}
L ${res1Cx - resW/2} ${T}
M ${res1Cx + resW/2} ${T}
L ${res2Cx - resW/2} ${T}
M ${res2Cx + resW/2} ${T}
L ${R} ${T}
L ${R} ${bulbCy - bulbR}
M ${R} ${bulbCy + bulbR}
L ${R} ${B}
L ${L} ${B}
L ${L} ${batCy + batHalfH}
`;
const loopPath = `
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
`;
const power = voltage * I;
const glow = Math.max(0, Math.min(1, power / 14));
return (
);
}
/* ─── ParallelCircuit ──────────────────────────────────────────────────── */
/* Battery on left, two parallel branches each w/ resistor + bulb, between
top & bottom rails. */
function ParallelCircuit({ voltage = 6, r1 = 3, r2 = 3, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I1 = voltage / r1;
const I2 = voltage / r2;
const Itot = I1 + I2;
const period1 = flowPeriod(I1);
const period2 = flowPeriod(I2);
const T = 110, B = 380;
const Lrail = 110, Rrail = 680;
const batCx = Lrail, batCy = (T + B) / 2, batHalfH = 36;
const b1X = 330, b2X = 540;
const resCy = T + 70, bulbCy = B - 70;
const bulbR = 24;
// Visible wire path
const wirePath = `
M ${Lrail} ${batCy - batHalfH}
L ${Lrail} ${T}
L ${Rrail} ${T}
M ${Lrail} ${B}
L ${Rrail} ${B}
M ${Lrail} ${batCy + batHalfH}
L ${Lrail} ${B}
M ${b1X} ${T}
L ${b1X} ${resCy - 16}
M ${b1X} ${resCy + 16}
L ${b1X} ${bulbCy - bulbR}
M ${b1X} ${bulbCy + bulbR}
L ${b1X} ${B}
M ${b2X} ${T}
L ${b2X} ${resCy - 16}
M ${b2X} ${resCy + 16}
L ${b2X} ${bulbCy - bulbR}
M ${b2X} ${bulbCy + bulbR}
L ${b2X} ${B}
`;
// Loops for electron animation — one per branch
const loop1 = `
M ${Lrail} ${batCy - batHalfH}
L ${Lrail} ${T} L ${b1X} ${T}
L ${b1X} ${B} L ${Lrail} ${B}
L ${Lrail} ${batCy + batHalfH}
L ${Lrail} ${batCy - batHalfH} Z
`;
const loop2 = `
M ${Lrail} ${batCy - batHalfH}
L ${Lrail} ${T} L ${b2X} ${T}
L ${b2X} ${B} L ${Lrail} ${B}
L ${Lrail} ${batCy + batHalfH}
L ${Lrail} ${batCy - batHalfH} Z
`;
const flowing1 = I1 > 0.05;
const flowing2 = I2 > 0.05;
const flowing = flowing1 || flowing2;
const glow1 = Math.max(0, Math.min(1, (voltage * I1) / 14));
const glow2 = Math.max(0, Math.min(1, (voltage * I2) / 14));
return (
);
}
Object.assign(window, { SeriesWater, ParallelWater, SeriesCircuit, ParallelCircuit, renderPipe, renderOutletDroplets });