Non-Maximum Suppression Demo¶
Specification¶
The full specification below is extracted from Chapter 17: Building a Real-Time Object Detection Pipeline.
Type: microsim
**sim-id:** non-maximum-suppression-demo<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) a non-maximum suppression overlap threshold to eliminate duplicate overlapping bounding boxes while keeping the highest-confidence detection in each cluster.
Canvas: 700x460px, responsive — single image-panel canvas recomputed as a fraction of `width`/`height` inside `windowResized()`.
Layout: an illustrated scene with one real object (a simple oval "dog" shape) surrounded by five overlapping candidate bounding boxes with varying confidence scores (e.g., 0.91, 0.85, 0.78, 0.64, 0.55), all clustered around the same object, drawn with semi-transparent fills so overlaps are visible.
Controls: a `createSlider()` labeled "Overlap Threshold" (range 0.1-0.9, step 0.05, default 0.5, describing how much two boxes must overlap to be considered duplicates); a `createButton()` labeled "Run NMS" that executes the suppression algorithm at the current threshold; a `createButton()` labeled "Reset" that restores all five original boxes.
Interaction: clicking "Run NMS" applies the pseudocode logic from the surrounding chapter text: the highest-confidence box (0.91) is always kept and highlighted solid green; any other box overlapping it by more than the current threshold fades to a dashed gray outline labeled "suppressed (duplicate)"; boxes that do not sufficiently overlap the kept box remain visible as separate candidates for a second pass. A live readout beneath the canvas states "Kept: X · Suppressed: Y" after each run. Moving the "Overlap Threshold" slider after a run and clicking "Run NMS" again lets students see stricter or looser thresholds change the outcome.
Implementation: p5.js. Store the five candidate boxes as objects `{confidence, x, y, w, h}`. Implement standard rectangle intersection-over-union (IoU) as the overlap measure. On "Run NMS," sort boxes by confidence descending and apply the greedy suppression loop from the pseudocode, storing each box's resulting kept/suppressed state for rendering.