// Ripple Counter: How Four Toggle Flip-Flops Count to Sixteen — Manimo lesson scene. // // Chain four T-mode (J=K=1) flip-flops with each Q output driving the // next stage's CLK. Each stage halves the frequency; together they spell // out a 4-bit binary count from 0 to 15. Genuine animation lives in // Beat 3 (CountWalkBeat): a clock pulse advances once per period, the // four-bit register lights amber on each toggle, and the decimal readout // updates in lockstep. Beat 4 stacks the four Q waveforms vertically so // the divide-by-2 chain reads off visually. // // Beats (placeholder timings — overwritten by scripts/rewire-scene.js): // 0.00– 5.00 Manimo enters; hook caption // 5.00–14.00 Chain configuration — four T-FF boxes wired Q→CLK // 14.00–32.00 Count walk — clock ticks, bits toggle, decimal increments // 32.00–44.00 Divide-by-2 waveforms — five stacked timing rows // 44.00–50.00 Takeaway — N flip-flops count to 2^N − 1 // // Authoring notes: // • SvgFadeIn inside

); } // ─── Beat 3: Count walk — clock ticks, bits toggle, decimal increments ─── // One "tick" lasts TICK seconds. The count starts at 0, advances by 1 on // each tick, and shows the four bits (Q3 Q2 Q1 Q0) as lit/dim cells. // We also overlay a small clock-pulse glyph that fires at each tick. function CountWalkBeat() { const portrait = usePortrait(); const { localTime } = useSprite(); const HOLD = 1.0; const TICK = 1.0; // count = floor((localTime − HOLD) / TICK), clamped to 0..15 const t = Math.max(0, localTime - HOLD); const rawCount = Math.floor(t / TICK); const count = Math.min(15, Math.max(0, rawCount)); // Sub-tick fraction (0..1) within the current count — used to flash a // bit cell briefly when it just toggled. const sub = (t / TICK) - rawCount; // Which bits flipped on this tick (i.e. differ from count−1)? Used to // animate a brief glow on each toggling cell. const prevCount = count === 0 ? 0 : count - 1; const flipped = [0, 1, 2, 3].map(b => { if (count === 0) return false; if (!(sub < 0.35)) return false; // glow window const now = (count >> b) & 1; const prev = (prevCount >> b) & 1; return now !== prev; }); const bits = [3, 2, 1, 0].map(b => (count >> b) & 1); // MSB → LSB const G = portrait ? { vbW: 600, vbH: 880, cellW: 86, cellGap: 18, cellY: 200, cellH: 110, labelY: 156, decimalY: 380, decimalFs: 92, clockX: 300, clockY: 480, clockR: 24, captionY: 760, fontCellLabel: 14, fontCaption: 14 } : { vbW: 1120, vbH: 440, cellW: 96, cellGap: 22, cellY: 110, cellH: 120, labelY: 78, decimalY: 320, decimalFs: 88, clockX: 920, clockY: 260, clockR: 26, captionY: 410, fontCellLabel: 14, fontCaption: 14 }; // Cell row centred horizontally const rowW = 4 * G.cellW + 3 * G.cellGap; const x0 = (G.vbW - rowW) / 2; const cellLeft = i => x0 + i * (G.cellW + G.cellGap); // Clock pulse: brief flash at each tick (sub < 0.18) const clockPulse = (sub < 0.18 && t > 0) ? 1 - (sub / 0.18) : 0; return (

); } // ─── Beat 4: Divide-by-2 waveforms — CLK, Q0, Q1, Q2, Q3 stacked ───────── function DivideByTwoBeat() { const portrait = usePortrait(); const { localTime } = useSprite(); // We display N_CYCLES of CLK across the panel. Each Q_i is at half the // frequency of Q_{i-1}, so we need at least 16 CLK cycles to see one // full Q_3 cycle. Show 16 cycles. const N_CYCLES = 16; // Q_i toggles on each falling edge of Q_{i-1} (CLK for i=0). With CLK // square at 50% duty, Q_0 toggles on each falling edge of CLK; that // gives a square wave at half the CLK frequency. // For drawing, sample each row at SAMPLES_PER_CYCLE points per CLK // cycle so the edges read cleanly. const SAMPLES_PER_CYCLE = 12; const SAMPLES = N_CYCLES * SAMPLES_PER_CYCLE; // Row geometry const G = portrait ? { vbW: 600, vbH: 1000, labelW: 60, panelX: 90, panelW: 470, rowH: 100, rowGap: 20, topY: 110, periodLabelX: 575, captionY: 940, fontMain: 20, fontCaption: 14 } : { vbW: 1120, vbH: 460, labelW: 60, panelX: 110, panelW: 880, rowH: 56, rowGap: 14, topY: 50, periodLabelX: 1010, captionY: 430, fontMain: 18, fontCaption: 14 }; // 5 rows: CLK, Q0, Q1, Q2, Q3 const rowNames = ['CLK', 'Q₀', 'Q₁', 'Q₂', 'Q₃']; const periods = ['T', '2T', '4T', '8T', '16T']; // Reveal cursor: sweeps from left to right across the panel as the // beat progresses, so the waveform is built up over time. const HOLD = 0.6; const SWEEP = 8.0; // seconds const sFrac = clamp((localTime - HOLD) / SWEEP, 0, 1); const cursorPx = G.panelX + sFrac * G.panelW; // Sample value: row 0 is CLK, rows 1..4 are Q_i. Use half-cycle // sampling. CLK: high in the second half of each cycle (matches the // jk-flip-flop scene's clkAt). function rowVal(rowIdx, sampleIdx) { // sampleIdx ∈ [0, SAMPLES). Each CLK cycle has SAMPLES_PER_CYCLE // samples; convert to a fractional CLK cycle index. const t = sampleIdx / SAMPLES_PER_CYCLE; if (rowIdx === 0) { // CLK square wave: high for the second half of each unit period. return ((t % 1) >= 0.5) ? 1 : 0; } else { // Q_i toggles every 2^i CLK cycles. Easiest: count the number of // falling edges of CLK that have happened up to time t, then // count of falling edges of Q_{i-1}, etc. But there's a clean // closed form: Q_i is high when the (i+1)-th bit of floor(t) is // set (after the first CLK falling edge resets bit 0). // CLK falls at t = 1, 2, 3, ... So count = floor(t). const k = Math.floor(t); return (k >> (rowIdx - 1)) & 1; } } // Build a square-wave path for each row (transitions between samples). function rowPath(rowIdx, yMid) { const yHi = yMid - G.rowH * 0.32; const yLo = yMid + G.rowH * 0.32; const pxPerSample = G.panelW / SAMPLES; const pts = []; let prevV = rowVal(rowIdx, 0); let prevX = G.panelX; pts.push(`M ${prevX} ${prevV ? yHi : yLo}`); for (let i = 1; i <= SAMPLES; i++) { const v = rowVal(rowIdx, i); const x = G.panelX + i * pxPerSample; if (v !== prevV) { // vertical transition at the boundary pts.push(`L ${x.toFixed(2)} ${prevV ? yHi : yLo}`); pts.push(`L ${x.toFixed(2)} ${v ? yHi : yLo}`); prevV = v; } else { pts.push(`L ${x.toFixed(2)} ${v ? yHi : yLo}`); } } return pts.join(' '); } const rowColours = [ 'var(--chalk-100)', // CLK 'var(--amber-300)', // Q0 'var(--amber-300)', // Q1 'var(--amber-300)', // Q2 'var(--amber-300)', // Q3 ]; const clipId = `rippleSweepClip`; return (

); } // ─── Beat 5: Takeaway ──────────────────────────────────────────────────── function TakeawayBeat() { const portrait = usePortrait(); return (

N flip-flops → counts 0 .. 2^N − 1 Asynchronous is simple; ripple delay grows with N. For wide, fast counters, prefer a synchronous design. the building block of every timer, frequency divider, and event counter

); } window.sceneNarration = NARRATION; // ─── Mount ──────────────────────────────────────────────────────────────── function App() { return ( ); } ReactDOM.createRoot(document.getElementById('root')).render();