Reactive Event-Driven Lighting Explorer¶
Specification¶
The full specification below is extracted from Chapter 13: Programming the Pi 500+'s Per-Key RGB Keyboard Lighting.
Type: microsim
**sim-id:** reactive-event-driven-lighting-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how a key press event and a key release event each independently trigger a reactive lighting change.
Canvas: 700x360px, responsive — recompute the simulated keyboard row's cell size as a fraction of `width` inside `windowResized()`.
Layout: a simulated row of 10 clickable keys. Clicking and holding a key simulates a key press event; releasing simulates a key release event. On press, that key's square instantly flashes bright white then fades to a chosen accent color over roughly one second; on release, a smaller secondary ripple effect briefly lights the two adjacent keys, visually distinguishing the two separate events.
Controls: a `createSelect()` dropdown labeled "Reactive Style" with two options, "Solid Reactive" (single key flashes) and "Ripple Reactive" (flash spreads outward to neighboring keys before fading), swapping which built-in-style effect is simulated.
Interaction: each simulated press/release logs a one-line timestamped entry to a small event log below the keyboard row, explicitly labeled "Key Press Event" or "Key Release Event," reinforcing that these are two distinct, separately detectable moments. Clicking a log entry re-highlights the corresponding key.
Implementation: p5.js, using `mousePressed()`/`mouseReleased()` on each key's bounding box to fire the two separate simulated events. Fade animation implemented with a per-key "time since triggered" value decremented each frame and mapped to brightness. Event log stored as a capped array of strings rendered with `text()`.