/* osc-compare.jsx — The Oscillator bench: a discrete two-transistor astable and an NE555 astable, wired to the SAME R·C timing, blinking in lockstep so you can see they are the same machine. A shared oscilloscope reads any of the eight 555 pins and overlays the matching node on the discrete board, proving the two circuits carry the same signals. Self-contained (own LED glyph, own clock) so it has no load-order deps. All names OC_/oc prefixed to stay unique in the shared Babel scope. */ const OC_LN2 = Math.log(2); const { useState: ocUseState, useEffect: ocUseEffect, useRef: ocUseRef } = React; /* ── shared real-time clock ────────────────────────────────────────────── One phase 0..1 drives BOTH boards and the scope, so they are always in lockstep. The on-screen period is clamped to a watchable 1.2–6 s window; the TRUE frequency from R·C is reported separately. */ function ocUsePhase(periodSec, running) { const [phase, setPhase] = ocUseState(0); const pRef = ocUseRef(0); const perRef = ocUseRef(periodSec); perRef.current = Math.max(1.2, Math.min(6, periodSec)); ocUseEffect(() => { 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; } /* ── the canonical 555-astable pin model ───────────────────────────────── Given the phase and duty, returns every pin's voltage as a fraction of Vcc. This is the textbook astable: TRIG(2) & THR(6) tie to the cap; the cap ramps ⅓→⅔ while OUT(3) is HIGH, then ⅔→⅓ while OUT is LOW and DIS(7) sinks it. */ function ocPinModel(phase, duty) { const charging = phase < duty; const u = charging ? phase / duty : (phase - duty) / (1 - duty); // cap voltage, normalized to Vcc, bouncing between ⅓ and ⅔ const vcap = charging ? 1 - (2 / 3) * Math.exp(-OC_LN2 * u) : (2 / 3) * Math.exp(-OC_LN2 * u); const out = charging ? 1 : 0; return { charging, vcap, out, pins: { 1: { v: 0, label: "GND", name: "Ground" }, 2: { v: vcap, label: "TRIG", name: "Trigger" }, 3: { v: out, label: "OUT", name: "Output" }, 4: { v: 1, label: "RST", name: "Reset" }, 5: { v: 2 / 3, label: "CTRL", name: "Control" }, 6: { v: vcap, label: "THR", name: "Threshold" }, 7: { v: charging ? vcap : 0, label: "DIS", name: "Discharge" }, 8: { v: 1, label: "VCC", name: "Supply" }, }, }; } /* For the discrete two-transistor astable, the comparable nodes: OUT ↔ Q1 collector square wave (in phase with the 555 output) THR/TRIG ↔ a base node ramp (cap charging through R — same shape as the 555 cap node). Pins with no discrete counterpart return null. */ function ocDiscreteNode(pinNo, phase) { // discrete astable: 50% duty, symmetric const m = ocPinModel(phase, 0.5); switch (pinNo) { case 3: return m.out; // collector square case 2: case 6: return m.vcap; // base/cap ramp case 1: return 0; // ground shared case 8: return 1; // supply shared default: return null; // RST/CTRL/DIS are 555-internal } } /* ── shared LED glyph ─────────────────────────────────────────────────── */ function OcLed({ cx, cy, on, r = 13 }) { return ( {on && } {on && } {on && } ); } const ocWire = (d, c, w, dash) => ; const ocRes = (x, y, vertical, label, c) => ( {vertical ? : } {label && {label}} ); /* ───────────────────────────────────────────────────────────────────────── The DISCRETE board: 2 transistors, 2 caps, 2 collector R, 2 base R, 2 LEDs. Q1 lit while charging (OUT high); Q2 antiphase. ───────────────────────────────────────────────────────────────────────── */ function OcDiscreteBoard({ phase, scopedPin, kids }) { const W = 440, H = 340; const railP = 44, railN = 300; const xL = 150, xR = 310; const ledY = 104, qY = 232; const m = ocPinModel(phase, 0.5); const q1On = m.charging; // Q1 conducts (its LED + collector LOW) — show LED lit while ON // OUT node we compare = Q1 collector; lit LED tracks q1On const scopeHitsOut = scopedPin === 3; const scopeHitsCap = scopedPin === 2 || scopedPin === 6; const branch = (x, on, tag, baseSide) => ( {ocWire(`M${x} ${railP} L${x} ${ledY - 32}`, "var(--ink-soft)", 2.2)} {ocRes(x, ledY - 32, false, "R", scopeHitsOut ? "var(--current-deep)" : "var(--ink-soft)")} {ocWire(`M${x} ${ledY - 18} L${x} ${ledY - 13}`, "var(--ink-soft)", 2.2)} {ocWire(`M${x} ${ledY + 13} L${x} ${qY - 24}`, on ? "var(--current)" : "var(--ink-faint)", on ? 3 : 2.2)} {/* transistor */} {tag} {ocWire(`M${x} ${qY + 20} L${x} ${railN}`, on ? "var(--current)" : "var(--ink-faint)", on ? 3 : 2.2)} {/* base resistor up to + rail */} {ocWire(`M${x + baseSide} ${railP} L${x + baseSide} ${qY} L${x - 20} ${qY}`, scopeHitsCap ? "var(--water)" : "var(--ink-faint)", scopeHitsCap ? 2.4 : 1.8)} ); return ( ); } /* ───────────────────────────────────────────────────────────────────────── The 555 board: an 8-pin DIP wired as an astable (RA, RB, C, LED), with every pin numbered + labelled and a live voltage tag. The scoped pin glows. ───────────────────────────────────────────────────────────────────────── */ function Oc555Board({ phase, duty, scopedPin, onPickPin, kids }) { const W = 440, H = 340; const m = ocPinModel(phase, duty); const railP = 44, railN = 300; // chip body const bx = 150, bw = 140, by = 120, bh = 150; // pin geometry: 1–4 down the left, 5–8 down the right (DIP order, 8 top-right) const pinY = (row) => by + 28 + row * ((bh - 56) / 3); // row 0..3 const leftPins = [1, 2, 3, 4]; const rightPins = [8, 7, 6, 5]; const pinPos = {}; leftPins.forEach((p, r) => pinPos[p] = { x: bx, y: pinY(r), side: -1 }); rightPins.forEach((p, r) => pinPos[p] = { x: bx + bw, y: pinY(r), side: +1 }); const Pin = ({ n }) => { const pos = pinPos[n], info = m.pins[n]; const sel = scopedPin === n; const stub = 18; const ex = pos.x + pos.side * stub; const lit = info.v > 0.55; return ( onPickPin(n)}> {ocWire(`M${pos.x} ${pos.y} L${ex} ${pos.y}`, sel ? "var(--current)" : (lit ? "var(--current-soft)" : "var(--ink-faint)"), sel ? 3.2 : 2.2)} {n} {info.label} ); }; return ( ); } /* ───────────────────────────────────────────────────────────────────────── The shared OSCILLOSCOPE: pick a 555 pin; it plots that pin's waveform and, when the discrete board has a matching node, overlays it (dashed) so you can confirm they coincide. ───────────────────────────────────────────────────────────────────────── */ function OcScope({ scopedPin, duty, fTrue, dutyPct, running, kids }) { const W = 900, H = 250, x0 = 150, x1 = W - 24, y0 = 30, y1 = H - 54; const histRef = ocUseRef([]); const phRef = ocUseRef(0); const [, force] = ocUseState(0); // own sampling clock, synced to the same watchable period const perRef = ocUseRef(1); perRef.current = Math.max(1.2, Math.min(6, 1 / fTrue)); ocUseEffect(() => { if (!running) return; let raf, last = performance.now(), acc = 0; const tick = (now) => { const dt = (now - last) / 1000; last = now; phRef.current = (phRef.current + dt / perRef.current) % 1; acc += dt; if (acc > 0.03) { acc = 0; const p = phRef.current; const fiveFifty = ocPinModel(p, duty); histRef.current.push({ p }); if (histRef.current.length > 260) histRef.current.shift(); force(n => n + 1); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [running, duty]); const info = ocPinModel(0, duty).pins[scopedPin]; const hist = histRef.current; const n = hist.length; const X = (i) => x0 + (i / 259) * (x1 - x0); const Yv = (v) => y1 - v * (y1 - y0); const v555 = (p) => ocPinModel(p, duty).pins[scopedPin].v; const vDisc = (p) => ocDiscreteNode(scopedPin, p); const has = vDisc(0) != null; const pts555 = hist.map((h, i) => `${X(i)},${Yv(v555(h.p))}`).join(" "); const ptsDisc = has ? hist.map((h, i) => `${X(i)},${Yv(vDisc(h.p))}`).join(" ") : ""; return ( ); } /* ───────────────────────────────────────────────────────────────────────── OscCompareBench — the whole mode. Shared R/C controls, two boards in lockstep, one scope. ───────────────────────────────────────────────────────────────────────── */ function OscCompareBench({ kids }) { const [running, setRunning] = ocUseState(true); const [scopedPin, setScopedPin] = ocUseState(3); // OUT by default // shared timing parts (RA, RB in kΩ; C in µF). Duty from the 555 formula. const [RA, setRA] = ocUseState(10); const [RB, setRB] = ocUseState(47); const [C, setC] = ocUseState(10); const tHigh = 0.693e-3 * (RA + RB) * C; // s const tLow = 0.693e-3 * RB * C; // s const T = tHigh + tLow; const duty = tHigh / T; const fTrue = 1 / T; const dutyPct = Math.round(duty * 100); const phase = ocUsePhase(T, running); const ctlBtn = (active) => ({ cursor: "pointer", fontSize: 12, padding: "5px 11px", background: active ? "var(--ink)" : "transparent", color: active ? "var(--bg-card)" : "var(--ink-soft)", border: `1.5px solid ${active ? "var(--ink)" : "var(--rule-strong)"}`, borderRadius: 7, fontFamily: "IBM Plex Mono, monospace", }); const Row = ({ label, val, set, opts, unit }) => (

{label} {opts.map(o => )}

); return (

{kids ? "two blinkers, one beat" : "the same machine, built two ways"}

{kids ? <>On the left, a blinker made from two transistors and two buckets. On the right, the same job done by one 555 chip. They share the SAME squeeze (R) and bucket (C) — so they blink together. Tap any chip pin to watch its wiggle. : <>Left: the discrete two-transistor astable. Right: an NE555 wired as an astable. Both run off the same R·C timing, so they oscillate in lockstep. Tap any of the 555's eight pins to scope it — where the discrete board has a matching node, the scope overlays it to prove the signals coincide.}

{/* shared component controls */}

shared timing · both circuits use these

f ≈ {fTrue < 1 ? fTrue.toFixed(2) : fTrue.toFixed(1)} Hz · 555 duty {dutyPct}%

{/* the two boards */}

DISCRETE {kids ? "2 transistors + 2 buckets" : "two-transistor astable · 50% duty"}

NE555 {kids ? "one chip does it all" : "555 astable · RA, RB, C"}

{/* pin selector */}

scope pin: {[1, 2, 3, 4, 5, 6, 7, 8].map(n => { const lbl = ocPinModel(0, duty).pins[n].label; return ( ); })}

{/* the scope */}

{kids ? <>Pins 4, 5 and 7 live inside the chip — the transistor blinker doesn't have them, so the scope shows only the chip's line there. : <>Pins 1/3/2/6/8 map onto the discrete board (ground, output, the cap/base ramp, supply). Pins 4 (reset), 5 (control) and 7 (discharge) are internal to the 555 — no discrete counterpart. The discrete astable runs a clean 50% duty; the 555's is {dutyPct}% (set by R_A,R_B) — add a steering diode across R_B to pull it to 50%.}

); } Object.assign(window, { OscCompareBench });