/* visuals5.jsx — The Switch.
A valve in a pipe + a switch in a circuit. Closed = flow, open = no flow.
Truth-table style logic-gate previews. */
/* ─── ValveScene ────────────────────────────────────────────────────────
Barrel → valve → pipe → outlet. Valve handle rotates open/closed.
───────────────────────────────────────────────────────────────────────── */
function ValveScene({ voltage = 6, R = 3, on = true, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I = on ? voltage / R : 0;
const period = flowPeriod(Math.max(0.05, I));
const fill = fillRatio(voltage);
const barrelCx = 110, barrelTop = 60, barrelBot = 360;
const rimRx = 62, midRx = 80;
const pipeY = 270;
const pipeStart = barrelCx + 60;
const pipeEnd = W - 80;
const baseH = 32;
// Valve geometry — sits in the middle of the pipe
const valveCx = (pipeStart + pipeEnd) / 2;
const valveR = 50;
// Pipe is drawn as two segments (before valve, after valve) so we can
// gap them out around the valve body.
const preEnd = valveCx - valveR + 12;
const postStart = valveCx + valveR - 12;
return (
);
}
/* ─── SwitchCircuitScene ────────────────────────────────────────────────
Battery → switch → resistor → bulb. Switch open/closed.
───────────────────────────────────────────────────────────────────────── */
function SwitchCircuitScene({ voltage = 6, R = 3, on = true, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I = on ? voltage / R : 0;
const period = flowPeriod(Math.max(0.05, I));
const flowing = on && I > 0.05;
const L = 130, R_ = 690, T = 130, B = 360;
const batCx = L, batCy = (T + B) / 2, batHalfH = 32;
const swCx = 280, swCy = T;
const resCx = 460, resCy = T;
const bulbCx = R_, bulbCy = (T + B) / 2, bulbR = 30;
const wirePath = `
M ${L} ${batCy - batHalfH}
L ${L} ${T}
L ${swCx - 26} ${T}
M ${swCx + 26} ${T}
L ${resCx - 50} ${T}
M ${resCx + 50} ${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 glowOpacity = Math.max(0, Math.min(1, power / 14));
return (
);
}
/* ─── LogicGateBox — tiny visual of two switches in series (AND) or parallel (OR) ─ */
function LogicGateBox({ kind, a, b }) {
const W = 280, H = 130;
const out = kind === "and" ? (a && b) : (a || b);
const flowing = out;
if (kind === "and") {
// A → B in series, then to bulb
const wirePath = `M 16 80 L 60 80 M 92 80 L 144 80 M 176 80 L 240 80
L 240 110 L 16 110 L 16 80`;
const loop = `M 16 80 L 240 80 L 240 110 L 16 110 Z`;
return (
);
}
// OR — two branches in parallel. Each branch only carries electrons when
// ITS OWN switch is closed, so opening one branch simply stops that branch
// (no more "backwards through the open switch").
const wirePath = `M 16 60 L 60 60 M 92 60 L 220 60
M 16 100 L 60 100 M 92 100 L 220 100
M 220 60 L 220 100
M 220 80 L 246 80
M 16 60 L 16 100`;
const branchA = `M 16 60 L 220 60 L 220 80 L 246 80`; // top branch → bulb
const branchB = `M 16 100 L 220 100 L 220 80 L 246 80`; // bottom branch → bulb
return (
);
}
function SwitchLittle({ x, y, on, label }) {
return (
{label}={on ? 1 : 0}
);
}
Object.assign(window, { ValveScene, SwitchCircuitScene, LogicGateBox });