NeoPixel Animation Studio¶
Specification¶
The full specification below is extracted from Chapter 5: Programmable LED Art with NeoPixel/WS2812B.
Type: microsim
**sim-id:** neopixel-animation-studio<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/neopixel-wiring-diagram<br/>
**Status:** Specified
Learning objective: Students will *create* (Bloom L6: Create) an original NeoPixel animation by combining color fade, chase, sparkle, and rainbow cycle techniques with a chosen color palette on a simulated strip.
Canvas: 700x480px, responsive — recompute the strip preview width and control-panel layout from `windowWidth` inside `windowResized()`.
Layout: a 20-pixel horizontal strip preview along the top, with an animation-technique selector and palette editor beneath it.
Controls: a `createSelect()` dropdown labeled "Technique" with options "Color Fade," "Chase," "Sparkle," and "Rainbow Cycle" (default: "Chase"); a palette editor of three to five clickable color swatches (default palette: orange, pink, purple) that opens an RGB slider popup when clicked to edit that swatch; a `createSlider()` labeled "Frame Rate" (range 1-60, default 24); a `createButton()` labeled "Run / Pause."
Interaction: selecting a technique immediately switches the running animation on the strip preview to that technique, rendered using the current palette's colors (Chase and Sparkle cycle through palette colors per pixel/spark; Fade transitions between consecutive palette colors; Rainbow Cycle ignores the palette and uses the full hue wheel, with a note explaining why). Editing a palette swatch's color updates the running animation's colors live. Dragging the frame rate slider visibly speeds up or slows down the animation, with a readout of the current FPS.
Instructional Rationale: A model-editor / builder pattern is appropriate for this Create-level objective because it gives students direct control over technique, palette, and timing simultaneously, letting them assemble a genuinely original combination rather than only viewing a single fixed example of each technique in isolation.
Implementation: p5.js. Maintain a `currentFrame` counter advanced by `frameRate()`-gated logic; each technique function computes all 20 pixels' colors from `currentFrame`, the selected palette array, and technique-specific parameters (e.g., chase position wraps `currentFrame % 20`; sparkle uses `random()` gated by a per-pixel spawn probability). Use `createSelect()`, `createSlider()`, and `createButton()` exclusively for controls per project convention.