Open the tap — the bucket fills up. Close the tap and open the
drain — the bucket empties. The bucket can hold water
for later.
That's exactly what a capacitor does with electricity. It
stores charge in a little internal "bucket" and gives it back
when you ask.
And the harder you push (more volts), the more it holds. A bigger
bucket holds more too — so the charge stored is just how big the
bucket is, times how hard you push.
) : (
<>
A capacitor stores charge.
The first three chapters were about flow in steady state. A
capacitor breaks that — it can hold charge, so what
happens at this instant depends on what happened a moment ago.
The water analogy is a bucket: open a pipe into it and the bucket
fills up over time. Open a drain and it empties. Bigger bucket
(bigger C) → more water held → slower
to fill or drain.
Capacitance is measured in farads (F).
One farad is enormous — most real caps are measured in microfarads
(µF) or picofarads (pF). Named for Michael Faraday.
Capacitance is really a ratio: how much charge the cap holds
for every volt across it. That gives the defining equation
Q = C × V — charge
(coulombs) equals capacitance (farads) times voltage. So a
1 F cap at 1 V{" "}
holds 1 coulomb; a
470 µF cap at
10 V holds
470 µF × 10 V = 4.7 mC.
Hit "Charge" and watch the bucket fill. It starts fast — lots of
empty space, lots of room — and slowly tapers as it nears full.
Tighter pinch on the pipe → slower fill. Bigger bucket → slower fill (more to fill up).
) : (
<>
Hook the cap across the battery through a resistor and the voltage
on the cap climbs from zero toward the battery. The rate is fast
at first (big voltage difference, big current) and slows as the
cap fills up.
The shape is an exponential approach:
Vcap(t)
=
Vin·(1 − e−t/τ)
where τ = R·C is the time
constant. After one τ, the cap is at ~63% of Vin.
After 5τ, basically full.
reading the equation in plain words
Vin is just the supply voltage — the "in" means
voltage coming in from the battery (not anything "internal"). The cap
can never charge past it.
The (1 − e−t/τ) part is just "how full, 0 to 1." At the start
t = 0, so e0 = 1 and the bracket is 0 → empty. After a long time
e−big → 0 and the bracket → 1 → full. τ sets how quickly you slide from
0 to 1.
Don't worry about the e for now — the takeaway is just "fast at first, then
eases in, finished after about 5 τ." We'll revisit the exact curve later.
)}
try it
▶ Charge
❚❚ Hold
▼ Drain
);
}
function ModeButton({ mode, current, setMode, children }) {
const active = current === mode;
return (
);
}
function DischargingBeat({ mode, setMode, onView, kids }) {
const ref = useInViewCallback(onView);
return (
§ 03 · letting go
DISCHARGE MODE
Discharging: the drain is open.
{kids ? (
<>
Hit "Drain" and watch the bucket empty. The water rushes out fast
at first — lots of pressure pushing it — then slows as the bucket
empties out.
That stored water did work on the way out. In a real
circuit, a capacitor discharging through a bulb makes the bulb
glow briefly — even after you've unplugged the battery.
And here's a fair question: why does the pinch change how
fast it drains? Because the water leaving the bucket has to squeeze
through the very same pinch it came in by! The circuit is one loop
of pipe — there's no back door. Tight pinch: slow fill AND slow
drain. Wide pinch: fast both ways.
) : (
<>
Disconnect the battery and connect the cap directly through a
resistor. The cap acts as if it were the battery, dumping
its stored charge back through the loop.
Vcap(t)
=
V0·e−t/τ
Same τ = RC. Same exponential shape, mirrored. This is how a
camera flash, a defibrillator, and a TV-remote LED all work —
stored charge dumped fast.
A question worth pausing on: why does R — which sat before
the cap while charging — also govern the drain? Because "before"
and "after" are bookkeeping, not physics: the loop is a single
series path, and the escaping charge must traverse the same R in
reverse. Position in a series loop never matters (chapter 2);
what matters is what's in the loop. One R, so one τ —
both directions. (Flash circuits that need fast dump but gentle
charge use two different paths, steered by diodes — chapter 7.)
)}
try discharging
▶ Charge❚❚ Hold▼ Drain
);
}
function TimeConstantBeat({ R, C, setR, setC, onView, kids }) {
const ref = useInViewCallback(onView);
const tau = R * C;
if (kids) {
return (
§ 04 · how fast or slow
How fast does it fill?
Two things decide how fast the bucket fills (or drains):
The pipe
Tighter pinch R → slower flow → slower fill.
The bucket
Bigger bucket C → more to fill → slower fill.
try changing them
);
}
return (
§ 04 · the time constant
Tau (τ = R · C)
One number summarizes everything about how fast a capacitor settles —
the time constant τ. Bigger R or bigger C → longer τ → slower
response.
right now
τ={fmt(R, 1)}Ω×{fmt(C, 1)}={fmt(tau, 1)}
Roughly: after τ seconds it's 63% there. After 5τ ≈ done.
try it
Note on units. We're using arbitrary "C" units here so the
animation is watchable. Real capacitors range from picofarads (RF
circuits) to thousands of microfarads (power supplies).
);
}
function PlaygroundBeat({ vIn, setVIn, R, setR, C, setC, mode, setMode, vCap, onView, kids }) {
const ref = useInViewCallback(onView);
const tau = R * C;
// hear the RC curve: tone follows the cap level — glides up while charging
// (fast then slowing), down while draining. Active only when this beat is on.
const tone = useToneFollow();
const seen = React.useRef(false);
const vis = useInViewCallback(() => { seen.current = true; });
React.useEffect(() => {
if (!seen.current) return;
const level = Math.max(0, Math.min(1, vCap / Math.max(0.01, vIn)));
if (mode === "hold" || level < 0.005) { tone.stop(); return; }
tone.set(0.12 + level * 0.8, 0.45);
}, [vCap, vIn, mode]);
React.useEffect(() => tone.stop, []);
return (
{ ref.current = el; vis.current = el; }}>
§ 06 · all knobs unlocked
Drive it by hand.
{kids
? "Cycle between Charge and Drain. Change the bucket size. Watch what happens."
: "Cycle modes manually. Pin different RC products and feel the difference between snappy and sluggish."}
▶ Charge❚❚ Hold▼ Drain
state
{kids ? (
Bucket is {fmt((vCap / Math.max(0.01, vIn)) * 100, 0)}% full.
);
}
/* ─── Worked example (adult): camera flash ────────────────────────────── */
function WorkedExampleSection({ kids }) {
if (kids) return null;
return (
§ 07 · a real RC story · the camera flash
A practical story: the camera flash.
Hit the shutter — BRRZT, a few seconds of charging hum,
then the ready light blinks on. Click — and a brilliant flash
dumps in milliseconds. That whole dance is a capacitor.
A typical flash holds about 100 µF{" "}
charged to 300 V. Doing the math:
energy stored
E = ½ · C · V²
E = ½ · 100×10⁻⁶ · 300²
E = 4.5 joules
peak power
That 4.5 J dumps in ~1 ms.
Power = energy / time:
P = 4.5 J / 0.001 s = 4,500 W
A 4.5 kW pulse from a battery that can barely supply 5 W
continuously. This is what capacitors are for: trading
a slow trickle for a brief burst.
);
}
/* ─── Quiz banks ────────────────────────────────────────────────────────
App below. */
const ADULT_QUIZ = [
{
q: "A capacitor is most like which water thing?", kind: "concept",
options: ["A pipe", "A bucket that holds water", "A pump", "A pinch in the pipe"],
correct: 1,
explain: "A capacitor stores charge the way a bucket stores water — fill it, hold it, drain it later.",
},
{
q: "While charging, the capacitor voltage rises…", kind: "concept",
options: ["instantly", "fast at first, then slowing as it fills", "at a steady constant rate", "never"],
correct: 1,
explain: "It's an exponential approach — big gap means fast fill, tapering as it nears full.",
},
{
q: "The time constant is…", kind: "math",
options: ["τ = R + C", "τ = R × C", "τ = R ÷ C", "τ = V × I"],
correct: 1,
explain: "τ = R·C. Bigger resistance or bigger capacitance → longer time constant → slower response.",
},
{
q: "Double the capacitance. The charge time…", kind: "math",
options: ["halves", "stays the same", "doubles", "becomes zero"],
correct: 2,
explain: "τ = RC, so doubling C doubles τ — it takes twice as long to settle.",
},
{
q: "Why can a camera flash deliver a huge burst from a small battery?", kind: "concept",
options: [
"The battery is secretly huge",
"A capacitor stores energy slowly, then dumps it fast",
"It uses no energy at all",
"Light is free",
],
correct: 1,
explain: "The cap trickle-charges over seconds, then releases joules in a millisecond — a brief, enormous power spike.",
},
{
q: "Bigger resistance in the charging path makes the capacitor fill…", kind: "math",
options: ["faster", "slower", "instantly", "backwards"],
correct: 1,
explain: "τ = R·C. A tighter pinch (bigger R) slows the fill.",
},
{
q: "After about 5 time constants, a charging capacitor is…", kind: "math",
options: ["barely started", "halfway", "essentially fully charged", "empty again"],
correct: 2,
explain: "By 5τ the cap is ~99% charged — close enough to call it done.",
},
{
q: "Why does the SAME resistor set both the fill speed AND the drain speed?",
kind: "concept",
options: [
"It doesn't — draining is always faster",
"The circuit is one loop: the escaping charge must squeeze back through the very same R",
"Capacitors remember the resistor",
"Because τ = R + C",
],
correct: 1,
explain: "There's no back door. One series loop means one path — so one τ = RC governs both directions.",
},
{
q: "What genuinely NEW ability does a capacitor add to a circuit?",
kind: "concept",
options: ["More resistance", "Memory — it holds charge, so the present depends on the past", "Free energy", "Color"],
correct: 1,
explain: "The first three chapters were steady state. A cap stores charge over time — circuits gain a sense of time: delay, smoothing, filtering.",
},
{
q: "Q = C·V. A 2 F capacitor charged to 3 V holds…",
kind: "math",
options: ["1.5 C of charge", "5 C of charge", "6 C of charge", "9 C of charge"],
correct: 2,
explain: "Charge = capacitance × voltage = 2 × 3 = 6 coulombs.",
},
{
q: "Can a capacitor charge to a HIGHER voltage than the battery feeding it?",
kind: "concept",
options: ["Yes, if you wait long enough", "Yes, if R is small", "No — the source voltage is the ceiling it approaches", "Only in winter"],
correct: 2,
explain: "The cap climbs toward the battery's voltage and levels off there. The gap drives the flow; no gap, no flow.",
},
{
q: "After ONE time constant τ, the capacitor is roughly…",
kind: "math",
options: ["10% charged", "50% charged", "63% charged", "99% charged"],
correct: 2,
explain: "One τ ≈ 63% of the way there; ~5τ is essentially full.",
},
];
const KIDS_QUIZ = [
{
q: "A capacitor is like…", kind: "concept",
options: ["a pipe", "a bucket", "a pump", "a pinch"],
correct: 1,
explain: "A bucket! It holds water (charge) for later.",
},
{
q: "When you open the tap, the bucket…", kind: "concept",
options: ["empties", "fills up", "explodes", "disappears"],
correct: 1,
explain: "Open the tap and water flows in — the bucket fills.",
},
{
q: "A BIGGER bucket takes — to fill.", kind: "concept",
options: ["less time", "more time", "no time", "the same time"],
correct: 1,
explain: "More room to fill = more time. Bigger bucket, slower fill.",
},
{
q: "You fill the bucket, then shut both the tap and the drain. A minute later it's…", kind: "concept",
options: ["empty", "still full", "frozen", "on fire"],
correct: 1,
explain: "With nowhere to go, the water stays put. The bucket holds its level.",
},
{
q: "What makes a camera flash go off so bright and fast?", kind: "concept",
options: [
"A bucket fills up slowly, then dumps all at once",
"The battery is huge",
"It doesn't use energy",
"Magic mirrors",
],
correct: 0,
explain: "Fill the bucket slowly, then tip it all out at once — a big splash in an instant!",
},
{
q: "A tighter pinch on the pipe makes the bucket fill…", kind: "concept",
options: ["faster", "slower", "never", "sideways"],
correct: 1,
explain: "Less water gets through a tight pinch, so the bucket fills more slowly.",
},
{
q: "When you open the DRAIN, the bucket…", kind: "concept",
options: ["fills up", "empties out", "stays full", "gets bigger"],
correct: 1,
explain: "Open the drain and the stored water rushes out — the bucket empties.",
},
{
q: "The water drains out through the SAME pinch it came in by. So a tight pinch means…",
kind: "concept",
options: ["slow fill AND slow drain", "fast fill, slow drain", "slow fill, fast drain", "no filling at all"],
correct: 0,
explain: "One loop of pipe, no back door! The same squeeze slows the water both ways.",
},
{
q: "You unplug the battery. Can the full bucket still light the bulb?",
kind: "concept",
options: ["No, never", "Yes — briefly, as it dumps its stored water", "Only if you shake it", "Yes, forever"],
correct: 1,
explain: "The full bucket acts like a little battery for a moment — that's how a camera flash works!",
},
];
/* ─── App ─────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "paper",
"showCircuit": true,
"audience": "adult"
}/*EDITMODE-END*/;
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: "begin", label: "The bucket" },
{ id: "charging", label: "Charge" },
{ id: "discharging", label: "Drain" },
{ id: "time-constant", label: kids ? "How fast" : "τ = RC" },
{ id: "predict", label: "Predict" },
{ id: "playground", label: "Playground" },
...(kids ? [] : [{ id: "example", label: "Flash" }]),
{ id: "practice", label: "Practice" },
{ id: "quiz", label: "Quiz" },
{ id: "whats-next", label: "What's next" },
];
return (
<>
setTweak("audience", v)} />
The Bucket.}
chapterSub="Chapter 4 · Capacitors and time"
kids={kids}
lede={kids
? <>So far, water just flows. Now we'll learn how to hold some — like filling a bucket. A capacitor is a bucket for electricity.
: <>The first three chapters were all about steady state. This one is about time. A capacitor can hold charge, so the present depends on the past. Welcome to dynamics.
} />
{
const k = rng.pick([1, 2, 4.7, 10, 22]), uf = rng.pick([10, 47, 100, 220, 470]);
const tau = +(k * 1000 * uf * 1e-6).toFixed(3);
return {
q: { adult: `A ${k} kΩ resistor charges a ${uf} µF capacitor. What is the time constant τ? (Answer in seconds.)`, kids: `A pinch of ${k * 1000} fills a bucket of ${uf} millionths. Time = pinch × bucket. (Answer in seconds.)` },
unit: "s", answer: tau, tol: 0.05,
hint: "\u03c4 = R × C, with R in ohms and C in farads.",
solution: { adult: `\u03c4 = R × C = ${k * 1000} Ω × ${+(uf * 1e-6).toPrecision(6)} F = ${tau} s.`, kids: `${k * 1000} × ${+(uf * 1e-6).toPrecision(6)} = ${tau} seconds.` } };
},
(rng) => {
const n = rng.pick([1, 2, 3]);
const pctMap = { 1: 63, 2: 86, 3: 95 };
return {
q: { adult: `After exactly ${n === 1 ? "one time constant" : n + " time constants"}, roughly what percentage of the supply voltage has the capacitor reached?`, kids: `After ${n} 'time-step${n > 1 ? "s" : ""},' about how full is the bucket — what percent?` },
unit: "%", answer: pctMap[n], tol: 0.12,
hint: "Each \u03c4 closes ~63% of the remaining gap: 63%, 86%, 95%…",
solution: { adult: `After ${n} \u03c4 a capacitor reaches ~${pctMap[n]}% of the supply.`, kids: `About ${pctMap[n]}% full after ${n} time-step${n > 1 ? "s" : ""}.` } };
},
(rng) => {
const uf = rng.pick([100, 220, 470, 1000]), v = rng.int(5, 15, 1);
const mc = +(uf * 1e-6 * v * 1000).toFixed(2);
return {
q: { adult: `How much charge sits on a ${uf} µF capacitor at ${v} V? (Answer in millicoulombs.)`, kids: `A bucket of ${uf} millionths filled to ${v}. Charge = bucket × push. (Answer in thousandths.)` },
unit: "mC", answer: mc, tol: 0.04,
hint: "Q = C × V, then ×1000 for mC.",
solution: { adult: `Q = C × V = ${+(uf * 1e-6).toPrecision(6)} F × ${v} V = ${+(uf * 1e-6 * v).toFixed(5)} C = ${mc} mC.`, kids: `${+(uf * 1e-6).toPrecision(6)} × ${v} = ${+(uf * 1e-6 * v).toFixed(5)} → ${mc} thousandths.` } };
},
]} />
{kids
? <>Try it: open The Sandbox, load “Capacitor (RC)” and watch the charges pile in and slow to a stop as the bucket fills. Then try “Charge & flash” — fill it, then dump it through a light.
: <>See it move: in The Sandbox, the RC example shows the charging current taper to zero as VC rises; Charge & flash stores energy, then dumps it through an LED. Drop a probe on the cap to scope V(t).}
Buckets and pipes. Now you've got memory in your circuits.
: <>Capacitors give your circuits a sense of time. Coupled with R, they filter, delay, smooth, and store. Next: a brutally simple component that built the entire digital world.}
prevHref="chapter3.html"
prevLabel="Chapter 3"
nextHref="chapter5.html"
nextLabel="Chapter 5 · The Switch" />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();