False Positive and False Negative Explorer¶
Specification¶
The full specification below is extracted from Chapter 16: The AI HAT+ and Neural Network Fundamentals.
Type: interactive-diagram
**sim-id:** false-positive-negative-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *classify* (Bloom L4: Analyze) a model's prediction outcomes as correct detections, false positives, or false negatives, and connect the pattern of those outcomes to overall model accuracy.
Canvas: 700x460px, responsive — a 2x2 grid of quadrant boxes recomputed as fractions of `width`/`height` inside `windowResized()`, stacking into a single column below 480px wide.
Layout: a 2x2 grid labeled by "Actual: Present" / "Actual: Absent" (rows) and "Predicted: Present" / "Predicted: Absent" (columns), producing four quadrants: correct detection (top-left, circuit green `#2E7D32`), false positive (top-right, raspberry `#C2185B`), false negative (bottom-left, copper gold `#D4AF37`), correct rejection (bottom-right, gray). Each quadrant shows a running count of example items sorted into it.
Controls: a `createButton()` labeled "Add Example" that generates one new randomly-outcome example (weighted toward mostly-correct results with occasional errors) and animates it dropping into the correct quadrant based on its actual/predicted values; a `createSlider()` labeled "Model Accuracy" (range 50-99, default 90) controlling how frequently new examples land in the two error quadrants versus the two correct quadrants.
Interaction: clicking any quadrant opens an infobox defining that quadrant's term (using the chapter's definitions for false positive and false negative, plus one-sentence definitions for the two correct-outcome quadrants) and shows that quadrant's current count as a fraction of the total examples added so far, connecting back to the model accuracy definition. A running "Overall Accuracy" readout beneath the grid recalculates after every added example.
Implementation: p5.js. Track four quadrant counts in a simple object. "Add Example" uses the slider's accuracy value as a probability to decide whether the new example is correct or an error, and a second coin flip to decide which of the two error types (if an error) or which of the two correct types (if correct). Animate the new example as a small circle moving from a spawn point into its target quadrant using `lerp()`, then increment that quadrant's stored count and redraw.