/* visuals3.jsx — Power & Heat. Heated resistor / glowing bulb.
Reuses WaterScene + CircuitScene via shared helpers.
The new contribution is the "thermometer + heat haze" overlay. */
const { useState: _useState3, useEffect: _useEffect3 } = React;
/* ─── WorkWheel ──────────────────────────────────────────────────
The LOAD at the end of the pipe: a waterwheel the outflow drives.
Spin SPEED ∝ power (the rate work happens). The counter accumulates
ENERGY (power × time) — it keeps climbing even at low power.
───────────────────────────────────────────────────────────────── */
function WorkWheel({ cx, cy, r, power, kids, showLabels = true }) {
const angleRef = React.useRef(0);
const energyRef = React.useRef(0);
const lastTickRef = React.useRef(0);
const [, force] = React.useState(0);
const pRef = React.useRef(power);
pRef.current = power;
React.useEffect(() => {
let raf, last = performance.now();
const loop = (now) => {
const dt = Math.min(0.1, (now - last) / 1000); last = now;
const p = pRef.current;
const speed = p > 0.05 ? 26 + Math.min(430, p * 13) : 0; // deg/sec ∝ power
angleRef.current = (angleRef.current + speed * dt) % 36000;
energyRef.current += p * dt; // joules = W · s
if (now - lastTickRef.current > 33) { lastTickRef.current = now; force(n => n + 1); }
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const angle = angleRef.current;
const E = energyRef.current;
const eLabel = E < 1000 ? `${E.toFixed(0)} J` : `${(E / 1000).toFixed(2)} kJ`;
const turns = Math.floor(angle / 360 + (angleRef.current >= 0 ? 0 : 0));
const spinning = power > 0.05;
return (
{/* paddles + spokes rotate; rim and hub stay. Spins CLOCKWISE:
the pour lands on the wheel's outer RIGHT edge, driving that side down. */}
{Array.from({ length: 8 }, (_, i) => {
const a = (i * 45 * Math.PI) / 180;
const x1 = cx + Math.cos(a) * 8, y1 = cy + Math.sin(a) * 8;
const x2 = cx + Math.cos(a) * (r - 4), y2 = cy + Math.sin(a) * (r - 4);
// paddle: short bar perpendicular to the spoke at its tip
const px = Math.cos(a + Math.PI / 2) * 10, py = Math.sin(a + Math.PI / 2) * 10;
return (
);
})}
{/* droplets flung off near the impact zone when it's spinning fast */}
{power > 6 && [0, 1, 2].map(i => (
))}
{/* watt-meter beside the wheel — the needle reads the rate of work NOW */}
{showLabels && (() => {
const gx = cx - r - 84, gy = cy - 24, gr = 36;
const frac = Math.max(0, Math.min(1, power / 20));
const aN = (-118 + frac * 236) * Math.PI / 180;
return (
{[0, 0.25, 0.5, 0.75, 1].map(t => {
const a = (-118 + t * 236) * Math.PI / 180;
return ;
})}
{power.toFixed(1)} W
{kids ? "POWER METER" : "WATT METER"}
{kids ? `${turns} turns so far!` : `ENERGY · ${eLabel}`}
);
})()}
);
}
/* ─── HeatedPipe ─────────────────────────────────────────────────────────
A water pipe scene with the constriction visibly heating up.
Heat scales with P_resistor = I² · R.
───────────────────────────────────────────────────────────────────────── */
function HeatedPipeScene({ voltage = 6, resistance = 3, height = 380, showLabels = true, kids = false }) {
const W = 820, H = 460;
const I = voltage / resistance;
const P = I * I * resistance; // power dissipated in the resistor
const heatLevel = Math.max(0, Math.min(1, P / 20)); // 0..1
const fill = fillRatio(voltage);
const open = pipeOpenness(resistance);
const period = flowPeriod(I);
// Barrel + pipe (compact)
const barrelCx = 110, barrelTop = 70, barrelBot = 370;
const rimRx = 62, midRx = 80;
const pipeY = 290;
const pipeStart = barrelCx + 60;
const pipeEnd = W - 150;
const baseH = 34;
const cXa = pipeStart + (pipeEnd - pipeStart) * 0.42;
const cXb = pipeStart + (pipeEnd - pipeStart) * 0.62;
const narrowH = baseH * (0.12 + 0.88 * open);
// Sluice-gate pinch: opening sits on the pipe floor, and the water level
// downstream drops to line up with it — same as Chapters 1 & 2.
const constrictions = [{ xa: cXa, xb: cXb, narrowH, gate: true }];
const pushFrac = narrowH / baseH;
const pinchMid = (cXa + cXb) / 2;
const levels = [
{ fromX: pipeStart, toX: pinchMid, frac: 1 },
{ fromX: pinchMid, toX: pipeEnd, frac: pushFrac },
];
// Heat color interpolation: ink → orange → red
const heatColor = `rgba(${196 + heatLevel * 59}, ${90 - heatLevel * 60}, ${54 - heatLevel * 40}, ${0.2 + heatLevel * 0.8})`;
const heatGlow = heatLevel * 0.9;
const steamCount = Math.round(heatLevel * 6);
// The load: a waterwheel under the outlet. The outflow arcs out of the pipe
// and lands on the wheel's outer RIGHT edge — the side travelling down.
// Wheel sits clear to the right of the faucet spout so the pour arc reads.
const wheelCx = pipeEnd + 50, wheelCy = pipeY + 108, wheelR = 42;
const pour = I > 0.1;
const pourW = 2.5 + Math.min(13, I * 2.2);
// pour leaves from the faucet's spout mouth (renderPipe draws the tap)
const ftS = Math.max(0.65, Math.min(1.05, baseH / 34));
const ftTip = faucetTip({ x: pipeEnd, y: pipeY, baseH, s: ftS });
const landX = wheelCx + wheelR * 0.78, landY = wheelCy - wheelR * 0.6;
const pourPath = `M ${ftTip.x} ${ftTip.y} C ${ftTip.x + 18} ${ftTip.y + 26}, ${landX + 8} ${wheelCy - wheelR - 32}, ${landX} ${landY}`;
return (
);
}
/* ─── BulbHeatScene ──────────────────────────────────────────────────────
Circuit with a lamp whose glow + temperature scale with power.
───────────────────────────────────────────────────────────────────────── */
function BulbHeatScene({ voltage = 6, resistance = 3, height = 380, showLabels = true }) {
const W = 820, H = 460;
const I = voltage / resistance;
const P = voltage * I;
const period = flowPeriod(I);
const flowing = I > 0.05;
const heatLevel = Math.max(0, Math.min(1, P / 20));
const L = 130, R = 690, T = 130, B = 340;
const batCx = L, batCy = (T + B) / 2, batHalfH = 32;
const resCx = (L + R) / 2, resCy = T;
const bulbCx = R, bulbCy = (T + B) / 2, bulbR = 36;
const wirePath = `
M ${L} ${batCy - batHalfH}
L ${L} ${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
`;
return (
);
}
Object.assign(window, { HeatedPipeScene, BulbHeatScene });