Breadboard Anatomy Explorer¶
Specification¶
The full specification below is extracted from Chapter 3: Breadboard Wiring and Electrical Fundamentals.
Type: interactive-diagram
**sim-id:** breadboard-anatomy-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/stem-robots/tree/main/docs/sims/breadboard-layout-explorer<br/>
**Status:** Specified
Learning objective: Students will *identify* (Bloom L1: Remember) which holes on a breadboard are electrically connected, and *trace* (Bloom L2: Understand) a circuit path from a power rail through a component to ground.
Canvas: 700x420px default, responsive — recompute hole spacing as a fraction of `windowWidth` inside `windowResized()` so the full breadboard stays visible without horizontal scrolling down to 360px wide.
Layout: a top-down illustration of a half-size breadboard: two power rails along the top (red VCC line, blue ground line) and two along the bottom, with a central gap separating two five-row, many-column terminal strip sections drawn as a grid of small circles.
Interaction: clicking any single hole highlights every other hole electrically connected to it in raspberry `#C2185B`, and shows a small label ("Row E, columns 12-16" or "Bottom ground rail") in an infobox beneath the diagram. A `createButton()` labeled "Place Jumper Wire" lets a student click two holes in sequence to draw a wire between them and see immediately whether the two holes were already connected (wire turns green) or genuinely bridges two separate groups (wire turns gold). A "Clear Wires" button resets all placed wires.
Implementation: p5.js. Store the breadboard's internal connectivity as a lookup table mapping each hole's (row, column) position to a connection-group ID; clicking a hole highlights every hole sharing its group ID. Draw holes with `ellipse()` in a nested loop over rows and columns, and jumper wires as `bezier()` curves connecting two hole centers. Recalculate all hole coordinates from canvas width inside `windowResized()`.