/* visuals555.jsx — Level 2 · The Oscillator.
Two synced sims for "build a blinker from scratch, then meet the chip":
• AstableScene — the discrete two-transistor astable multivibrator.
Two LEDs flip-flop; period T ≈ 1.38·R·C.
• Timer555Scene — the 555 cracked open: divider + 2 comparators +
SR flip-flop + discharge transistor + output, with a
live scope of the cap ramping between ⅓ and ⅔ Vcc.
Self-contained SVG. Shares CSS vars + Slider from shared.jsx. All names
are osc- / t555- prefixed to stay unique in the shared Babel scope. */
const LN2 = Math.log(2);
/* real-time phase 0..1. The TRUE period (seconds) is mapped into a watchable
window by LOG COMPRESSION — not a hard clamp. A hard clamp pinned every fast
setting to the same rate, so sliding RA/RB/C below ~0.7 s did nothing visible
("blinks fast, never changes"). Compression keeps the rate monotonic in R·C
across the whole slider range while staying in ~0.45–5.4 s. The caller still
prints the exact Hz separately. */
function useOscPhase(periodSec, running = true) {
const [phase, setPhase] = React.useState(0);
const pRef = React.useRef(0);
const perRef = React.useRef(periodSec);
perRef.current = 0.45 + 2.4 * Math.log10(1 + Math.max(0, periodSec) / 0.18);
React.useEffect(() => {
if (!running) { return; }
let raf, last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
pRef.current = (pRef.current + dt / perRef.current) % 1;
setPhase(pRef.current);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [running]);
return phase;
}
/* shared domed LED glyph (matches the breadboard look) */
function OscLed({ cx, cy, on, r = 13 }) {
return (
{on && }
{on && }
{on && }
);
}
function oscWire(d, accent, w = 2.5, dash) {
return ;
}
/* ─────────────────────────────────────────────────────────────────────────
AstableScene — the discrete blinker: 2 transistors, 2 LEDs, 2 caps, R's.
───────────────────────────────────────────────────────────────────────── */
function AstableScene({ R = 47, C = 10, kids, running = true, height = 420 }) {
const T = 1.38e-3 * R * C; // seconds (R kΩ, C µF)
const phase = useOscPhase(T, running);
const aOn = phase < 0.5; // LED A lit first half
const chargeU = aOn ? phase / 0.5 : (phase - 0.5) / 0.5; // 0..1 within the half
const W = 860, H = 430;
const railP = 56, railN = 372;
const xL = 250, xR = 610;
const ledY = 120, qY = 300;
const branch = (x, on, idLetter) => (
{/* collector resistor (rail → LED) */}
{oscWire(`M${x} ${railP} L${x} ${ledY - 40}`, "var(--ink-soft)", 2.5)}
{oscWire(`M${x} ${ledY - 26} L${x} ${ledY - 13}`, "var(--ink-soft)", 2.5)}
{/* LED */}
{oscWire(`M${x} ${ledY + 13} L${x} ${qY - 26}`, on ? "var(--current)" : "var(--ink-faint)", on ? 3 : 2.5)}
{/* transistor */}
Q{idLetter}
{/* emitter → ground */}
{oscWire(`M${x} ${qY + 22} L${x} ${railN}`, on ? "var(--current)" : "var(--ink-faint)", on ? 3 : 2.5)}
{/* base resistor from + rail */}
{oscWire(`M${x + (idLetter === "A" ? -70 : 70)} ${railP} L${x + (idLetter === "A" ? -70 : 70)} ${qY} L${x + (idLetter === "A" ? -22 : 22)} ${qY}`, "var(--ink-faint)", 2)}
);
return (
);
}
/* ─────────────────────────────────────────────────────────────────────────
Timer555Scene — the chip cracked open + a live scope, sharing one clock.
───────────────────────────────────────────────────────────────────────── */
function Timer555Scene({ RA = 10, RB = 47, C = 10, kids, running = true, height = 430 }) {
const tHigh = 0.693e-3 * (RA + RB) * C; // s
const tLow = 0.693e-3 * RB * C; // s
const T = tHigh + tLow;
const hiFrac = tHigh / T;
const phase = useOscPhase(T, running);
const charging = phase < hiFrac; // output HIGH while charging
const u = charging ? phase / hiFrac : (phase - hiFrac) / (1 - hiFrac);
// cap voltage normalized to Vcc, bouncing between 1/3 and 2/3
const vcap = charging ? 1 - (2 / 3) * Math.exp(-LN2 * u) : (2 / 3) * Math.exp(-LN2 * u);
const out = charging; // output high during charge
return (
);
}
/* the internal block diagram, with live highlighting */
function Chip555({ vcap, out, charging, kids }) {
const W = 540, H = 430;
const hi = (cond) => (cond ? "var(--current)" : "var(--ink-faint)");
const live = (cond) => (cond ? "var(--water)" : "var(--rule-strong)");
const upperFired = vcap >= 0.66; // threshold comparator near top
const lowerFired = vcap <= 0.34; // trigger comparator near bottom
// chip body
const bx = 150, by = 40, bw = 250, bh = 350;
// divider node ys
const dTop = by + 36, dBot = by + bh - 36;
const n23 = dTop + (dBot - dTop) * (1 / 3);
const n13 = dTop + (dBot - dTop) * (2 / 3);
return (
);
}
/* live scope: cap voltage between ⅓ & ⅔, plus the output square wave */
function Scope555({ vcap, out, running, kids, tHigh, tLow, T }) {
const W = 360, H = 430, x0 = 44, x1 = W - 14, y0 = 30, y1 = 250;
const histRef = React.useRef([]);
const vRef = React.useRef(vcap); vRef.current = vcap;
const oRef = React.useRef(out); oRef.current = out;
const [, force] = React.useState(0);
React.useEffect(() => {
if (!running) { return; }
let raf, last = performance.now();
const tick = (now) => {
if (now - last > 38) {
last = now;
histRef.current.push({ v: vRef.current, o: oRef.current });
if (histRef.current.length > 150) histRef.current.shift();
force((n) => n + 1);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [running]);
const hist = histRef.current;
const n = hist.length;
const X = (i) => x0 + (i / 149) * (x1 - x0);
const Yv = (v) => y1 - v * (y1 - y0);
const capPts = hist.map((p, i) => `${X(i)},${Yv(p.v)}`).join(" ");
// output square wave band below
const oy0 = y1 + 40, oy1 = H - 56;
const Yo = (o) => (o ? oy0 : oy1);
const outPts = hist.map((p, i) => `${X(i)},${Yo(p.o)}`).join(" ");
return (
);
}
/* ─────────────────────────────────────────────────────────────────────
use555Sim — the chapter-10 lesson clock. Bounces a bucket level between
⅓ and ⅔ on the RC pace (exponential ramps, like the real cap), reporting
{ level, high }: level is the absolute fill fraction 0..1, high is true
while filling (output ON). Animation period is clamped to a watchable
window; callers display the TRUE rate from R·C themselves.
───────────────────────────────────────────────────────────────────── */
function use555Sim({ R = 5, C = 2, running = true }) {
const [state, setState] = React.useState({ level: 1 / 3, high: true });
const phaseRef = React.useRef(0);
const halfRef = React.useRef(1);
halfRef.current = Math.max(0.35, Math.min(2.6, (R * C) / 6));
React.useEffect(() => {
if (!running) { return; }
let raf, last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
phaseRef.current = (phaseRef.current + dt / (2 * halfRef.current)) % 1;
const p = phaseRef.current;
const high = p < 0.5;
const u = high ? p / 0.5 : (p - 0.5) / 0.5;
const level = high ? 1 - (2 / 3) * Math.exp(-LN2 * u)
: (2 / 3) * Math.exp(-LN2 * u);
setState({ level, high });
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [running]);
return state;
}
/* ─────────────────────────────────────────────────────────────────────
Astable555Scene — the water side of the 555: a bucket that fills through
a pinch (R) to the ⅔ HIGH mark, then drains to the ⅓ LOW mark, forever.
The lamp is ON while filling. Bucket girth scales with C; the pinch's gap
scales with R — the same vocabulary as chapters 1 & 4.
───────────────────────────────────────────────────────────────────── */
function Astable555Scene({ R = 5, C = 2, level = 0.5, high = true, height = 420, kids }) {
const W = 640, H = 470;
// inlet pipe with the pinch
const pipeY = 92, baseH = 30, pipeStart = 18, pipeEnd = 252;
const open = pipeOpenness(R, 12);
const gap = baseH * (0.16 + 0.84 * open);
const pXa = 96, pXb = 168;
// bucket — girth scales with C
const bcx = 330, bTop = 170, bBot = 400;
const half = 80 + C * 6.5;
const wallW = 5;
const innerTop = bTop + 16;
const levelY = bBot - wallW - level * (bBot - innerTop);
const markY = (f) => bBot - wallW - f * (bBot - innerTop);
const yHi = markY(2 / 3), yLo = markY(1 / 3);
// drain — open while NOT high
const dX = bcx + half - 26, dY = bBot;
// true timing readout
const tHalf = Math.max(0.3, (R * C) / 6);
const fTrue = 1 / (2 * tHalf);
const pourX = pipeEnd + 14;
return (
);
}
/* ─────────────────────────────────────────────────────────────────────
Blink555Chart — rolling strip-chart of the output: the blink over time.
───────────────────────────────────────────────────────────────────── */
function Blink555Chart({ high, R = 5, C = 2, height = 340, kids }) {
const W = 640, H = 330, x0 = 30, x1 = W - 22, yOn = 84, yOff = H - 96;
const histRef = React.useRef([]);
const hRef = React.useRef(high); hRef.current = high;
const [, force] = React.useState(0);
React.useEffect(() => {
let raf, last = performance.now();
const tick = (now) => {
if (now - last > 40) {
last = now;
histRef.current.push(hRef.current);
if (histRef.current.length > 140) histRef.current.shift();
force((n) => n + 1);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const hist = histRef.current;
const n = hist.length;
const X = (i) => x0 + (i / 139) * (x1 - x0);
const pts = hist.map((o, i) => `${X(i)},${o ? yOn : yOff}`).join(" ");
const tHalf = Math.max(0.3, (R * C) / 6);
const fTrue = 1 / (2 * tHalf);
return (
);
}
Object.assign(window, { AstableScene, Timer555Scene, Chip555, Scope555, OscLed, useOscPhase,
use555Sim, Astable555Scene, Blink555Chart });