Button Debounce Visualizer¶
Specification¶
The full specification below is extracted from Chapter 6: Buttons, Photoresistors, and Analog Sensor Input.
Type: microsim
**sim-id:** button-debounce-visualizer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how mechanical switch bounce produces a noisy raw signal and how a debounce delay converts it into a single clean logical event.
Canvas: 700x460px, responsive -- recompute the waveform plot width from `windowWidth` inside `windowResized()` so the trace rescales rather than clipping on narrow screens.
Layout: two stacked oscilloscope-style waveform plots sharing a common time axis. The top plot, labeled "Raw Pin Signal," shows a simulated bouncy transition: a HIGH-to-LOW step that includes 4-6 rapid up-down bounces within roughly the first 15 milliseconds before settling LOW. The bottom plot, labeled "Debounced Signal," shows the same time window but as a single clean HIGH-to-LOW step delayed by the debounce window. A vertical shaded band overlays both plots marking the active debounce delay window (default 20 ms), and a small readout above the plots displays the current delay value in milliseconds.
Controls: a `createButton()` labeled "Simulate Press" that re-triggers the bounce-and-settle animation from the start; a `createSlider()` labeled "Debounce Delay (ms)" (range 0-50, default 20, step 1) that widens or narrows the shaded delay band and, at the extremes, visibly demonstrates the tradeoff -- setting the slider to 0 leaves visible false extra transitions in the bottom plot, while a very large value (over 40 ms) adds a noticeable, labeled "lag" arrow showing delayed response.
Interaction: hovering over either waveform plot shows a tooltip with the exact simulated voltage state (HIGH/LOW) and timestamp at that x-position. Clicking directly on one of the bounce spikes in the top plot opens a small infobox explaining that this spike represents a mechanical contact briefly reconnecting, reusing the plain-language explanation from the surrounding chapter text.
Implementation: p5.js, waveform data stored as an array of `{t, value}` step points generated procedurally at setup (randomized bounce timing within fixed bounds, reseeded on "Simulate Press"). Draw plots with `line()` segments between consecutive step points. Use `millis()`-based animation to sweep a playhead across both plots in sync. Recompute all pixel positions from data coordinates in `windowResized()` rather than caching absolute pixel values.