Shift Register Bit-Shift Visualizer¶
Specification¶
The full specification below is extracted from Chapter 9: Real-Time Clocks and Display Drivers for Clocks and Watches.
Type: microsim
**sim-id:** shift-register-bit-shift-visualizer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/clocks-and-watches/tree/main/docs/sims/shift-register<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) how a 74HC595 shift register converts a serial bit stream, sent one bit at a time, into eight steady parallel output signals.
Canvas: 700x420px, responsive -- recompute the bit-slot and output-pin spacing from `windowWidth` in `windowResized()`.
Layout: a schematic 74HC595 chip drawn as a rectangle with three labeled input pins on the left (Data, Clock, Latch) and eight labeled output pins along the bottom (Q0-Q7), each output pin connected to a small LED icon that lights when that output is HIGH. Above the chip, a horizontal row of 8 bit slots represents the serial data queued to be shifted in, shown as a sequence of filled (1) or empty (0) circles.
Controls: a `createButton()` labeled "Load Random Pattern" that randomizes the 8-bit input sequence; a `createButton()` labeled "Shift Next Bit" that advances one clock pulse, moving the next queued bit into the chip's internal register and shifting all previously loaded bits one position over (visualized as a brief animated pulse traveling along the Clock pin into the chip); a `createButton()` labeled "Latch Output" that copies the chip's current internal register to the eight output LEDs simultaneously, all at once.
Interaction: clicking "Shift Next Bit" repeatedly visibly fills the chip's internal register bit by bit, but the output LEDs do not change until "Latch Output" is clicked -- directly demonstrating that shifting and outputting are two separate steps. Hovering the Latch pin shows a tooltip explaining that separating shift-in from latch-out prevents a display from flickering through every partial, in-progress bit pattern while it's being loaded. A running text readout below the chip states "Bits shifted in: [n] / 8" and, once latched, "Output pattern: [binary value]".
Implementation: p5.js. Internal register modeled as an 8-element boolean array, with `Shift Next Bit` performing an array shift-and-insert operation each click. Output LEDs redraw from a separate "latched" copy of that array, updated only by the Latch button. Recompute chip and pin positions from `windowWidth`/`windowHeight` in `windowResized()`.