Button Debounce Simulator¶
Specification¶
The full specification below is extracted from Chapter 4: Digital I/O, PWM, and the MicroPython Workflow.
Type: microsim
**sim-id:** button-debounce-simulator<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) why a mechanical button's raw electrical signal bounces between high and low immediately after a press, and *evaluate* (Bloom L5: Evaluate) how a debounce delay filters that bounce into a single clean transition.
Canvas: 700x420px, responsive — recompute the oscilloscope-style trace width from `windowWidth` inside `windowResized()`.
Layout: an oscilloscope-style horizontal trace along the top of the canvas, showing signal voltage over time as a stepped line (high near the top, low near the bottom), with time in milliseconds along the x-axis. A second trace directly beneath shows the same time window after debounce filtering is applied, initially hidden until the student enables it.
Controls: a `createButton()` labeled "Press Button" that, when clicked, generates a randomized bounce pattern (3-6 rapid high/low transitions within the first 15 milliseconds, based on `random()`) followed by a stable high signal; a `createSlider()` labeled "Debounce Delay (ms)" (range 0-100, default 30) controlling the filtered trace; a `createButton()` labeled "Reset" clearing both traces.
Interaction: after clicking "Press Button," the raw trace animates left to right showing the bouncy signal, and a counter beneath it displays "Raw transitions detected: N" updating live as the trace draws, dramatizing how many false presses an undebounced program would register. The filtered trace beneath it shows only one clean transition, and a second counter reads "Debounced transitions detected: 1." Changing the debounce-delay slider to 0 removes filtering entirely, making the filtered counter match the raw counter, so students can directly see the delay's effect by dragging it up and down.
Implementation: p5.js. Generate the raw bounce pattern as an array of `{time, state}` transition events at `mousePressed()` time; the debounce filter walks that same array and discards any transition occurring within `debounceDelay` milliseconds of the previous accepted one. Draw both traces with `line()` segments computed from the transition array, redrawing on every animation frame during the trace-in animation and on slider change afterward.