Color Wheel and Rainbow Cycle Explorer¶
Specification¶
The full specification below is extracted from Chapter 5: Programmable LED Art with NeoPixel/WS2812B.
Type: interactive-diagram
**sim-id:** color-wheel-rainbow-cycle-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/color-wheel<br/>
**Status:** Specified
Learning objective: Students will *interpret* (Bloom L2: Understand) how rotating a hue value around a color wheel produces a rainbow cycle animation across a simulated NeoPixel strip.
Canvas: 700x460px, responsive — recompute the color wheel's radius and the strip preview's width as fractions of `windowWidth` inside `windowResized()`, stacking the wheel above the strip preview below 500px.
Layout: a circular color wheel (top or left panel) with a draggable pointer showing the current hue angle, and a horizontal 12-pixel strip preview (bottom or right panel) beneath it.
Controls: a `createSlider()` labeled "Rotation Speed" (range 0-10, default 3); a `createButton()` labeled "Run / Pause" toggling continuous rotation; the color wheel pointer is also directly draggable with the mouse for manual exploration when paused.
Interaction: while running, the pointer sweeps continuously around the wheel, and the strip preview updates every frame so each pixel's hue is offset from its neighbor by a fixed angle, producing a visibly flowing rainbow along the strip. Pausing and manually dragging the pointer to a specific angle freezes the strip preview and displays that angle's exact hue value and equivalent RGB value in a readout beneath the wheel, tying the visual position directly back to the numeric color values from the previous diagram.
Implementation: p5.js. Represent hue as a 0-360 degree float advanced each frame by an amount derived from the speed slider; convert hue (plus fixed saturation/brightness) to RGB using p5's `colorMode(HSB)` for the wheel and strip rendering. Compute each of the 12 strip pixels' hue as the pointer's current hue plus `(pixelIndex * offsetDegrees)`, wrapping past 360 back to 0.