NeoPixel Library Method Explorer¶
Specification¶
The full specification below is extracted from Chapter 5: Programmable LED Art with NeoPixel/WS2812B.
Type: microsim
**sim-id:** neopixel-library-method-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/pixel-indexing-explorer<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) the fill, set pixel color, and show methods, together with brightness scaling, to produce a target appearance on a simulated 12-pixel NeoPixel strip.
Canvas: 700x420px, responsive — recompute the strip preview and code-panel widths from `windowWidth` inside `windowResized()`, stacking vertically below 550px.
Data Visibility Requirements:
Stage 1: Show a 12-pixel strip preview, all pixels dark, alongside an empty code-so-far panel.
Stage 2: As the student clicks method buttons (below), append the corresponding line of code to the code panel and update an internal "pending color buffer" -- but do NOT update the visible strip preview yet, so students see the gap between setting colors and displaying them.
Stage 3: Only when "show()" is clicked does the strip preview update to match the pending buffer, visually demonstrating that fill/set-pixel-color changes are invisible until show() runs.
Controls: a `createButton()` labeled "fill(color)" that opens a small RGB slider popup and appends `strip.fill((r,g,b))` when confirmed; a `createButton()` labeled "setPixelColor(index, color)" that opens both a pixel-index slider (0-11) and an RGB slider popup; a `createSlider()` labeled "Brightness Scaling" (range 0.0-1.0, default 1.0) that dims the buffer's effect whenever "show()" is next clicked; a `createButton()` labeled "show()"; a `createButton()` labeled "Reset."
Interaction: the code panel accumulates a runnable-looking script line by line as the student clicks method buttons, letting them build up a short sequence (e.g., fill blue, then setPixelColor 5 to red, then show) and see the exact resulting strip only once show() is pressed, reinforcing the "nothing changes until show()" rule from the chapter text.
Instructional Rationale: A step-through, data-visible pattern is appropriate for this Apply-level objective because the core misconception this diagram targets -- that fill/setPixelColor alone update the physical strip -- can only be corrected by making the "no visible change yet" state explicit and separate from the "now it's visible" state after show().
Implementation: p5.js. Maintain two parallel 12-element color arrays: `pendingBuffer` (updated by fill/setPixelColor button actions) and `displayedBuffer` (only copied from `pendingBuffer`, scaled by the brightness slider, when "show()" fires). Render the strip from `displayedBuffer` only. Use `createButton()` and `createSlider()` exclusively for controls per project convention.