Classroom Lighting Effects Picker¶
Specification¶
The full specification below is extracted from Chapter 13: Programming the Pi 500+'s Per-Key RGB Keyboard Lighting.
Type: interactive-infographic
**sim-id:** classroom-lighting-effects-picker<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/brightness-envelope-comparison<br/>
**Status:** Specified
Learning objective: Students will *evaluate* (Bloom L5: Evaluate) which lighting design — typing speed indicator, notification pattern, accessibility cue, game status indicator, or Pomodoro timer lighting — best fits a given classroom visual-feedback scenario.
Canvas: 700x460px, responsive — recompute the five-card grid layout as fractions of `width` inside `windowResized()`, reflowing from a 5-across row to a 2-column grid below 600px wide.
Layout: five labeled cards, one per classroom effect (Typing Speed Indicator, Notification Lighting Pattern, Accessibility Lighting Cue, Game Status Indicator, Pomodoro Timer Lighting), each showing a small animated preview using a simplified 5-key strip (e.g., the Pomodoro card slowly shrinks a lit segment; the notification card flashes on a timer; the accessibility card pulses a single, deliberately high-contrast color).
Controls: a `createSelect()` dropdown labeled "Classroom Scenario" with five preset scenario descriptions (e.g., "A student wants to know their typing speed while practicing," "The class needs a silent alert when a shared robot's battery is low"), each highlighting the one card judged the best fit when selected.
Interaction: clicking any card opens an infobox with the one-sentence definition of that effect matching the chapter's prose, plus the specific classroom scenario it's built for. Selecting a scenario from the dropdown and then clicking the highlighted card triggers a brief "Correct fit!" confirmation animation, giving the interaction a light self-check quality without being a formal quiz.
Implementation: p5.js. Store the five effects as an array of `{name, definition, scenario, previewFn}` objects, each with its own small animated preview function called every frame. Card layout recalculated on resize; hit-testing via rectangle bounds in `mousePressed()`.