WS2812B Addressable LED Protocol Explorer¶
Specification¶
The full specification below is extracted from Chapter 5: Programmable LED Art with NeoPixel/WS2812B.
Type: interactive-diagram
**sim-id:** ws2812b-addressable-led-protocol-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) how a chained LED protocol uses pixel index to deliver color data to a specific addressable LED over a single data line.
Canvas: 700x420px default, responsive — recompute LED spacing as a fraction of `windowWidth` inside `windowResized()` so a 12-pixel strip stays fully visible down to 380px wide, wrapping to two rows if needed.
Layout: a horizontal row of 12 circular NeoPixel icons, each labeled with its pixel index (0-11) beneath it, connected left to right by a highlighted data line, with the Pico icon at the far left as the data source.
Controls: a `createSlider()` labeled "Target Pixel Index" (range 0-11, default 3); a color swatch picker built from three `createSlider()` instances (Red, Green, Blue, each 0-255); a `createButton()` labeled "Send Data."
Interaction: clicking "Send Data" animates a small colored packet traveling from the Pico icon along the data line, pausing briefly at each LED in sequence from index 0 upward. At each LED, a brief flash and a "0" or "1" style data-symbol animation shows the LED either "keeping" its assigned color data (if its index matches the slider's target) and lighting up in the chosen RGB color, or "passing it along" (if its index doesn't match) and staying dark while the packet continues rightward. A text log beneath the strip narrates each hop: "Pixel 0: not for me, forwarding..." ending with "Pixel 3: this one's mine!"
Implementation: p5.js. Model the 12 pixels as an array of objects `{index, color}`; animate the packet's x-position with a per-frame increment, checking proximity to each pixel's x-coordinate to trigger its flash/log-line event. Use `createSlider()` and `createButton()` exclusively for controls per project convention, repositioning them inside `windowResized()`.