/* visuals6.jsx — The Transistor.
A small "control" stream operates a big "main" valve. Bigger base flow →
wider main valve opening. Tiny input controls big output. */
/* ─── TransistorWaterScene ───────────────────────────────────────────────
Two barrels:
• LEFT-TOP: small "control" barrel feeding a tiny pipe (base)
• LEFT-BOTTOM: big "supply" barrel feeding a wide pipe (collector)
The base flow operates a gate in the main pipe.
───────────────────────────────────────────────────────────────────────── */
function TransistorWaterScene({ vCC = 10, vBase = 0, beta = 50, height = 380, showLabels = true, kids = false }) {
const W = 820, H = 460;
// Normalize: vBase 0-2 V drives gain. Saturate at ~1.5V.
const baseFraction = Math.max(0, Math.min(1, (vBase - 0.6) / 1.2));
const iBase = baseFraction * 0.04; // small current
const iCollector = Math.min(vCC / 1.0, iBase * beta); // amplified
const periodBase = flowPeriod(Math.max(0.05, iBase * 10));
const periodMain = flowPeriod(Math.max(0.05, iCollector));
// Layout: small barrel top-left, big barrel bottom-left
const baseBarrelCx = 90, baseBarrelTop = 50, baseBarrelBot = 130;
const baseRimRx = 28, baseMidRx = 38;
const ccBarrelCx = 90, ccBarrelTop = 200, ccBarrelBot = 380;
const ccRimRx = 50, ccMidRx = 64;
// Pipes
const basePipeY = 90;
const basePipeStart = baseBarrelCx + 36;
const basePipeBaseH = 8;
const mainPipeY = 300;
const mainPipeStart = ccBarrelCx + 50;
const mainPipeEnd = W - 60;
const mainBaseH = 28;
// The gate sits in the main pipe at the same X as where the base pipe arrives
const gateCx = 500;
const gateOpen = baseFraction; // 0..1
const gateHalfH = mainBaseH * (0.08 + 0.92 * gateOpen);
// Lock-gate geometry: a sliding plate (like a canal-lock paddle) that the
// base trickle PULLS UP. Plate has a fixed length; its bottom edge sets the
// opening. Fully open → plate retracted into the housing above the pipe.
const pipeTopY = mainPipeY - mainBaseH;
const pipeBotY = mainPipeY + mainBaseH;
const openingTopY = pipeBotY - 2 * gateHalfH; // bottom of the plate
const plateLen = 2 * mainBaseH;
const plateTopY = openingTopY - plateLen;
const housingTopY = pipeTopY - plateLen - 14; // tall enough to swallow the plate
// water downstream of the gate: level matches the opening; dry when off
const postFrac = iCollector > 0.02 ? gateHalfH / mainBaseH : 0;
// Base pipe routes: from base barrel right, then down to gate
const basePipeEnd = gateCx;
return (
);
}
/* ─── TransistorCircuitScene ────────────────────────────────────────────
NPN BJT symbol: collector top, emitter bottom, base on the left.
Base current controls collector current; gain = beta.
───────────────────────────────────────────────────────────────────────── */
function TransistorCircuitScene({ vCC = 10, vBase = 0, beta = 50, height = 380, showLabels = true, kids = false }) {
const W = 820, H = 460;
const baseFraction = Math.max(0, Math.min(1, (vBase - 0.6) / 1.2));
const iBase = baseFraction * 0.04;
const iCollector = Math.min(vCC / 1.0, iBase * beta);
const periodBase = flowPeriod(Math.max(0.05, iBase * 10));
const periodMain = flowPeriod(Math.max(0.05, iCollector));
// Layout
const Lbat = 130, batCy = 230, batHalfH = 30;
const ccTop = 80;
const txCx = 480, txCy = 230; // transistor center
const bulbCx = 680, bulbCy = ccTop + 50, bulbR = 30;
const ground = 380;
// Wires
// Battery (V_CC) + → up to ccTop → right to bulb → down through bulb → down to collector
// Bulb is "load" hanging on the collector
// Emitter → ground rail → battery −
// Base input on lower left → into base
const wirePathMain = `
M ${Lbat} ${batCy - batHalfH}
L ${Lbat} ${ccTop}
L ${bulbCx} ${ccTop}
L ${bulbCx} ${bulbCy - bulbR}
M ${bulbCx} ${bulbCy + bulbR}
L ${bulbCx} ${txCy - 50}
L ${txCx + 28} ${txCy - 50}
L ${txCx + 28} ${txCy - 16}
M ${txCx + 28} ${txCy + 16}
L ${txCx + 28} ${ground}
L ${Lbat} ${ground}
L ${Lbat} ${batCy + batHalfH}
`;
// Base input wire
const baseWirePath = `M 100 ${ground - 60} L 100 ${txCy + 20} L ${txCx - 30} ${txCy + 20} L ${txCx - 30} ${txCy + 4}`;
// Loop for main electrons
const loopMain = `
M ${Lbat} ${batCy - batHalfH}
L ${Lbat} ${ccTop} L ${bulbCx} ${ccTop}
L ${bulbCx} ${txCy - 16}
L ${txCx + 28} ${txCy - 16} L ${txCx + 28} ${ground}
L ${Lbat} ${ground} L ${Lbat} ${batCy + batHalfH}
L ${Lbat} ${batCy - batHalfH} Z
`;
const loopBase = `M 100 ${ground - 60} L 100 ${txCy + 20} L ${txCx - 30} ${txCy + 20} L ${txCx + 28} ${ground} L 100 ${ground} L 100 ${ground - 60} Z`;
const flowingMain = iCollector > 0.05;
const flowingBase = iBase > 0.001;
const power = vCC * iCollector;
const glowOpacity = Math.max(0, Math.min(1, power / 14));
return (
);
}
Object.assign(window, { TransistorWaterScene, TransistorCircuitScene });