/* chapter11.jsx — Ch. 11 · The Divider (Level 1½). Voltage dividers: two pinches share the push in proportion to their squeeze. The tap between them is the most-used trick in electronics. */ const { useState, useEffect, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "paper", "audience": "adult" }/*EDITMODE-END*/; /* ─── Divider scene: real pipe renderer + gates + tap with its own faucet ─ Uses the shared kit (renderPipe, renderFaucet, renderWaterCurrent) so the water has the same texture/levels as chapters 1–3, and every outlet is a proper tap. The first gate's opening lines up with the downstream level. */ function Ch11DividerSVG({ V = 12, r1, r2, kids }) { const frac = Math.max(0.1, r2 / (r1 + r2)); const vout = V * (r2 / (r1 + r2)); const I = V / (r1 + r2); const period = flowPeriod(I * 2); const W = 660, H = 268; const pipeY = 76, baseH = 28; const pipeStart = 22, pipeEnd = 596; const xP1a = 140, xP1b = 218, xP2a = 412, xP2b = 490; const m1 = (xP1a + xP1b) / 2, m2 = (xP2a + xP2b) / 2; const endFrac = 0.1; // Each gate's opening tracks ITS OWN resistor — tighter slider, tighter squeeze. const open1 = 1 - Math.min(0.9, (r1 / 12) * 0.9); const open2 = 1 - Math.min(0.9, (r2 / 12) * 0.9); const constrictions = [ { xa: xP1a, xb: xP1b, narrowH: baseH * (0.1 + 0.9 * open1), gate: true }, { xa: xP2a, xb: xP2b, narrowH: baseH * (0.1 + 0.9 * open2), gate: true }, ]; const levels = [ { fromX: pipeStart, toX: m1, frac: 1 }, { fromX: m1, toX: m2, frac }, { fromX: m2, toX: pipeEnd, frac: endFrac }, ]; // ── the tap: standpipe down from between the gates, elbow, small faucet ── const xTap = 304, tapW = 15; const tapTop = pipeY + baseH - 2; const stubY = tapTop + 58; // centerline of the horizontal stub const stubH = 10; // half-height const stubEnd = xTap + 58; const tip = faucetTip({ x: stubEnd, y: stubY, baseH: stubH, s: 0.72 }); const dripDur = (2.3 - 1.7 * (vout / V)).toFixed(2) + "s"; const dropPath = `M ${tip.x} ${tip.y} q 7 10 9 34`; // cup that catches the drips — its level mirrors V_out const cupX = tip.x - 6, cupW = 46, cupBot = stubY + 78, cupH = 42; const cupFill = cupH * (vout / V); return ( {/* main pipe — shared renderer: water texture, level steps, faucet outlet */} {renderPipe({ pipeStart, pipeEnd, pipeY, baseH, constrictions, current: I * 2, period, idSuffix: "div11", levels })} {renderOutletDroplets({ pipeEnd, pipeY, baseH, current: I * 1.5, period })} {/* gate labels */} {kids ? "first squeeze" : "R₁"} · {r1.toFixed(1)}{kids ? "" : "k"} {kids ? "second squeeze" : "R₂"} · {r2.toFixed(1)}{kids ? "" : "k"} {kids ? `full push · ${V}` : `V_in · ${V} V`} {/* mid-level dashed marker */} {/* ── tap standpipe ── */} {/* the tap's own little faucet */} {renderFaucet({ x: stubEnd, y: stubY, baseH: stubH, on: vout > 0.4, s: 0.72 })} {/* drips — pace follows the tap's push */} {vout > 0.4 && [0, 1].map(i => ( ))} {/* cup with level = V_out */} {kids ? "your tap" : "V_out"} {/* gauge */} {vout.toFixed(1)}{kids ? "" : " V"} {Math.round((r2 / (r1 + r2)) * 100)}% {kids ? "of the push" : "of V_in"} ); } /* ─── §01 + the main interactive ───────────────────────────────────────── */ function Ch11Playground({ kids }) { const [r1, setR1] = useState(6); const [r2, setR2] = useState(6); const V = 12; const vout = V * r2 / (r1 + r2); return (
§ 02 · two squeezes, one tap

The push divides
where the pinches meet.

{kids ? <>Remember chapter 2 — every squeeze uses up some of the push, and the water level steps down after each one. Now put a TAP between two squeezes. The tap's push is whatever level the water sits at right there! : <>Chapter 2 taught that series resistors split the voltage in proportion to their resistance. The divider weaponizes that: put a tap between two resistors and the tap delivers exactly the fraction you chose.}

{kids ? <>Tighten the FIRST squeeze and the middle level drops — less push at the tap. Tighten the SECOND squeeze and the level rises — the water backs up! The two squeezes are having a tug-of-war over your tap. : <>The split follows the ratio: V_out = V_in · R₂/(R₁+R₂). Equal resistors? Half. R₂ three times R₁? Three quarters. The absolute values barely matter — the ratio is the dial.}

{kids ? <>Try making the gauge read exactly half. How many different ways can you find? : <>Notice 6k/6k and 1k/1k both give 6 V — same ratio, same split. (They differ in how much current the divider itself wastes; more on that below.)}
try it · 12 V in
{kids ? "push at the tap" : "V_out = 12 · R₂/(R₁+R₂)"} {vout.toFixed(2)} V
); } /* ─── §03 the potentiometer ───────────────────────────────────────────── */ function Ch11PotSection({ kids }) { const [knob, setKnob] = useState(0.65); // 0..1 wiper position const V = 12; const vout = V * knob; const angle = -135 + knob * 270; return (
§ 03 · the knob is a divider

Every volume knob
is this circuit.

{kids ? <>A potentiometer ("pot") is a divider with a twist — literally. One strip of resistance, and a slider that taps it anywhere along its length. Turning the knob just moves the tap! : <>A potentiometer is a divider whose midpoint moves: one resistive strip, a wiper that taps it anywhere. Turn the shaft and you're sliding the tap — R₁ shrinks as R₂ grows, total fixed.}

{kids ? <>Volume knobs, dimmer dials, joysticks, the speed dial on a fan — they're all the same trick: turn a knob, move a tap, change a push. : <>Volume controls divide the audio signal itself. Joysticks are two pots (one per axis) read by a chip. Old dimmers, tone knobs, analog synth panels — entire interfaces built from moving taps.}

{kids ? <>Sensors play the same game: some parts change their squeeze when the world changes — heat, light, a bend. Put one in a divider and the tap's push reports the world. : <>Sensors complete the picture: a thermistor (R falls with heat) or photoresistor (R falls with light) as one leg makes V_out track temperature or brightness — how a chip with no eyes "reads" the world. The Beacon's light sensor works exactly this way.}
one knob · 12 V across the strip
{/* the strip */} 0 V 12 V {/* wiper */} {vout.toFixed(1)} V {/* the knob */} {kids ? "THE KNOB" : "THE WIPER"}
); } /* ─── §04 the honest catch: loading ────────────────────────────────────── */ function Ch11LoadingSection({ kids }) { const [rl, setRl] = useState(60); const r1 = 6, r2 = 6, V = 12; // loaded divider: R2 ∥ RL const r2eff = (r2 * rl) / (r2 + rl); const vout = V * r2eff / (r1 + r2eff); const sag = 6 - vout; const fracLoaded = Math.max(0.08, vout / V); const Iload = vout / rl; // mini scene geometry const ldW = 560, ldPipeY = 64, ldBaseH = 22, ldStart = 16, ldEnd = 500; const ldP1a = 110, ldP1b = 172, ldP2a = 350, ldP2b = 412; const ldM1 = (ldP1a + ldP1b) / 2, ldM2 = (ldP2a + ldP2b) / 2; const ldTap = 252, ldTapW = 13; const ldBranchY = ldPipeY + ldBaseH + 52; return (
§ 04 · the honest catch

The tap is a promise
only if nobody drinks.

{kids ? <>So far your tap has just been a gauge — nothing actually LEAVES through it. Plug in something that drinks, and the reading drops. Here's the whole mystery, in three steps: : <>So far nothing flows out of the tap — it's just a gauge. Connect a real load and the reading sags. The mechanism is nothing new; it's chapter 2, wearing a disguise:}

  1. {kids ? <>Alone, the middle pool just sits there. Water passes through, but none leaves at the tap — so the level stays exactly where the two squeezes put it. : <>Unloaded, the tap draws zero current. The middle level sits exactly at the ratio: 6 V, for a 6k/6k split of 12.}
  2. {kids ? <>A load is a SECOND exit. Plugging something in opens another pipe out of the middle pool — side-by-side with the second squeeze. Two exits… remember chapter 2? That's a parallel pair! : <>A load is a second exit from the midpoint. Electrically it sits in parallel with R₂ — chapter 2's side-by-side pipes, exactly.}
  3. {kids ? <>Two exits drain easier than one. Water escapes the middle pool faster than before, so the pool can't stay as deep — the level falls, and your promised 6 droops. : <>Two exits = a weaker bottom leg. R₂∥R_L is smaller than R₂ alone, the ratio shifts, and V_out falls — the bottom of the divider hoards less of the push.}

{kids ? <>The thirstier the drinker (a wider, easier exit), the worse the droop. A barely-sipping drinker — like a chip that only wants to look at the level — hardly moves it at all. That's why taps are for telling things a level, never for feeding hungry things. : <>How bad is it? Pure ratio. A load ≥10× R₂ adds only a trickle of an exit — the sag is pennies. At R_L ≈ R₂ the bottom leg effectively halves and your 6 V reads 4. Below that, the promise is gone. Hence the rules: keep R_L ≥ 10×R₂, and use dividers for signals (references, sensor reads, chip inputs) — never for power.}

{kids ? <>(No math needed — just remember: a load is a second exit, and a second exit drops the level.) : <>(The math is chapter 2 verbatim: R₂∥R_L = R₂·R_L/(R₂+R_L), then re-run the divider with that as the bottom leg. Try it once by hand for R_L = 6k — you'll get 4 V — and the practice problems below make it automatic. Chapter 12 has the elegant fix: a follower that reads the tap without sipping.)}
6k/6k divider · promised: 6 V
{renderPipe({ pipeStart: ldStart, pipeEnd: ldEnd, pipeY: ldPipeY, baseH: ldBaseH, constrictions: [ { xa: ldP1a, xb: ldP1b, narrowH: ldBaseH * fracLoaded, gate: true }, { xa: ldP2a, xb: ldP2b, narrowH: ldBaseH * 0.1, gate: true }, ], current: V / (r1 + r2eff), period: flowPeriod(V / (r1 + r2eff) * 1.6), idSuffix: "ld11", levels: [ { fromX: ldStart, toX: ldM1, frac: 1 }, { fromX: ldM1, toX: ldM2, frac: fracLoaded }, { fromX: ldM2, toX: ldEnd, frac: 0.1 }, ] })} R₁ · 6k R₂ · 6k {/* the load: a second exit branching DOWN from the tap */} R_L {Iload > 0.02 && ( )} {kids ? "the drinker — a second exit!" : `the load · draws ${Iload.toFixed(2)} mA`} {/* promised level ghost line */} {kids ? "promised level" : "promised · 6 V"}
{kids ? "what the tap really reads" : "V_out, loaded"} 0.6 ? "oklch(0.55 0.17 35)" : "var(--water-deep)" }}>{vout.toFixed(2)} V
0.6 ? "oklch(0.62 0.17 35)" : "var(--water)", transition: "width 150ms ease" }}>
{kids ? <>Slide left = a thirstier drinker = a wider second exit. Watch the middle pool and the reading droop together — they're the same thing! : <>At R_L = 60k (10×R₂): 5.7 V — fine. At 6k (=R₂): 4.0 V — a third gone. At 1k: 1.6 V — ruined. Watch the pipe's middle level fall in step with the number.}
); } /* ─── App ─────────────────────────────────────────────────────────────── */ function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useCrossChapterPersistence(t, setTweak); useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]); const kids = t.audience === "kids"; const navItems = [ { id: "cover", label: "Cover" }, { id: "playground", label: kids ? "Two squeezes" : "The divider" }, { id: "pot", label: "The knob" }, { id: "loading", label: kids ? "The catch" : "Loading" }, { id: "practice", label: "Practice" }, { id: "quiz", label: "Quiz" }, ]; return ( <> setTweak("audience", a)} />
The Divider.} chapterSub="Two pinches share the push" kids={kids} lede={kids ? <>One pipe, two squeezes, and a tap in the middle. It sounds too simple to matter — and it's secretly inside every knob you've ever turned. : <>Two resistors and a tap between them — the most-used circuit fragment in all of electronics. This chapter is short, and you'll see it everywhere forever. }>
Level 1½ · builds on chapters 1 & 2. If level-steps after a pinch feel fuzzy, skim chapter 2's series section first.
{ const v = rng.pick([9, 12, 24]), r1 = rng.pick([1, 2, 3, 4]), r2 = rng.pick([1, 2, 3, 6]); return { q: { adult: `V_in = ${v} V, R₁ = ${r1} kΩ, R₂ = ${r2} kΩ. What is V_out at the tap?`, kids: `The barrel pushes with ${v}. The first squeeze is ${r1}, the second is ${r2}. What push waits at the tap?` }, unit: "V", answer: v * r2 / (r1 + r2), hint: { adult: "V_out = V_in · R₂/(R₁+R₂).", kids: "Tap push = total push × second ÷ (first + second)." }, solution: { adult: `${v} · ${r2}/(${r1}+${r2}) = ${(v * r2 / (r1 + r2)).toFixed(2)} V.`, kids: `${v} × ${r2} ÷ ${r1 + r2} = ${(v * r2 / (r1 + r2)).toFixed(2)}.` }, }; }, (rng) => { const v = rng.pick([12, 10, 5]), vout = rng.pick([0.5, 0.25, 0.75]); const target = v * vout, r1 = rng.pick([2, 4, 10]); const r2 = r1 * vout / (1 - vout); return { q: { adult: `You need ${target} V from a ${v} V source. R₁ is ${r1} kΩ. What R₂ completes the divider?`, kids: `You want the tap to read ${target} from a push of ${v}. The first squeeze is ${r1}. How big is the second?` }, unit: "kΩ", answer: r2, hint: { adult: "Fraction needed = V_out/V_in. R₂ = R₁ · f/(1−f).", kids: "What fraction do you want? The second squeeze hoards that share." }, solution: { adult: `f = ${vout}. R₂ = ${r1}·${vout}/(1−${vout}) = ${r2.toFixed(2)} kΩ.`, kids: `You want ${vout === 0.5 ? "half" : vout === 0.25 ? "a quarter" : "three quarters"} — so R₂ = ${r2.toFixed(2)}.` }, }; }, (rng) => { const r = rng.pick([2, 4, 6]), rl = r; const r2eff = (r * rl) / (r + rl); const vout = 12 * r2eff / (r + r2eff); return { q: { adult: `A ${r}k/${r}k divider on 12 V should read 6 V. A ${rl} kΩ load attaches to the tap. What does it actually read?`, kids: `Your even divider promised 6. A thirsty straw exactly as big as the second squeeze starts drinking at the tap. What's the real level?` }, unit: "V", answer: vout, hint: { adult: "The load parallels R₂: R₂∥R_L = R·R/(R+R) = R/2. Then redo the divider.", kids: "The drinker makes the bottom squeeze act half as strong." }, solution: { adult: `R₂∥R_L = ${r / 2} k. V = 12·${r / 2}/(${r}+${r / 2}) = ${vout.toFixed(1)} V — a full third lost to loading.`, kids: `The level droops to ${vout.toFixed(1)} — thirsty loads break the promise!` }, }; }, ]} /> Two squeezes + one tap = a push of any size you want. Knobs and sensors are all dividers in disguise. But taps droop when something thirsty drinks! : <>The divider: V_out = V_in·R₂/(R₁+R₂). Ratio sets the split; pots make the ratio turnable; sensors make it world-sensitive. Signals only — loading kills the promise.} prevHref="chapter10.html" prevLabel="Ch. 10 · The Blinker" nextHref="chapter12.html" nextLabel="Ch. 12 · The Gatekeeper" />
); } ReactDOM.createRoot(document.getElementById("root")).render();