40-Pin GPIO Header Explorer¶
Specification¶
The full specification below is extracted from Chapter 14: Raspberry Pi 5 Hardware: Storage, Camera, and Cooling.
Type: interactive-diagram
**sim-id:** gpio-header-pin-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *identify* (Bloom L1: Remember) the function of pins on the Raspberry Pi 5's 40-pin GPIO header and *explain* (Bloom L2: Understand) how a kernel driver and device tree overlay let the operating system recognize an attached HAT.
Canvas: 700x520px, responsive — recompute pin spacing as a fraction of `height` inside `windowResized()` so all 40 pins remain visible and legible down to 360px wide by shrinking pin circle radius before shrinking spacing.
Layout: two vertical columns of 20 pins each, matching the physical header (pin 1 top-left), drawn as small circles labeled with pin number. Color-code by function: power pins (red, 3.3V and 5V), ground pins (black), general-purpose digital pins (circuit green `#2E7D32`), and dedicated I2C/SPI/UART pins (indigo `#3F51B5`). Include a small rectangular outline labeled "HAT" hovering above the header to represent an attached add-on board.
Interaction: clicking any pin opens an infobox beneath the diagram showing the pin's number, name (e.g., "GPIO 2 / SDA"), and function in one sentence. Clicking the "HAT" rectangle plays a short two-step sequence (advance with a "Next" `createButton()`): step 1 highlights the pins the HAT uses in gold `#D4AF37` and shows the label "Device tree overlay tells the kernel which pins are in use"; step 2 shows the label "Kernel driver lets Python talk to the HAT through those pins." A `createButton()` labeled "Reset" clears any open infobox and returns the sequence to step 0.
Implementation: p5.js. Pin data stored as an array of 40 objects `{number, name, function, category}`. Hit-testing via `dist()` between mouse and each pin's center compared to its radius. Keep the HAT sequence state in a single integer variable so `draw()` can render the correct highlight and label each frame without recomputing pin categories.