Lighting Animation Loop and Gradient Simulator¶
Specification¶
The full specification below is extracted from Chapter 13: Programming the Pi 500+'s Per-Key RGB Keyboard Lighting.
Type: microsim
**sim-id:** lighting-animation-loop-simulator<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how an animation loop's per-frame hue calculation, based on key position and time, produces a moving color gradient effect.
Canvas: 700x360px, responsive — recompute the simulated key grid's cell size as a fraction of `width` inside `windowResized()`.
Layout: a simplified row of 20 keys rendered as colored squares, each key's color computed live from a formula matching the chapter's `rainbow_wave` code (`hue = (x * factor + time * speed) % 256`), animating a smooth traveling gradient across the row.
Controls: a `createSlider()` labeled "Gradient Spread (x factor)" (range 1-10, default 3) controlling how much each key's horizontal position affects its hue; a `createSlider()` labeled "Animation Speed" (range 0-100, default 50) controlling the time-based component; a `createButton()` labeled "Pause/Resume."
Interaction: dragging either slider updates the animation live, letting a student see how increasing "Gradient Spread" packs more color variety across the same 20 keys, while increasing "Animation Speed" makes the gradient visibly scroll faster. Clicking any individual key square pauses the animation and opens an infobox showing that key's current computed hue value and the formula used to compute it, tying the visual directly back to the code shown in the chapter.
Implementation: p5.js, recomputing each key's hue every frame with `(x * spreadSlider.value() + frameCount * speedSlider.value() / 20) % 256`, converted to RGB for `fill()` using `colorMode(HSB)`. Square positions recalculated on `windowResized()`. Rectangle hit-testing for the click interaction.