Raspberry Pi Product Family Explorer¶
Specification¶
The full specification below is extracted from Chapter 2: Choosing the Right Raspberry Pi Product.
Type: interactive-infographic
**sim-id:** raspberry-pi-product-family-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/pico-hardware-overview<br/>
**Status:** Specified
Learning objective: Students will *compare* (Bloom L4: Analyze) the price, chip, memory, and wireless capability of the Raspberry Pi Pico, Pico W, Pico 2, Pi 500+, and Pi 5.
Canvas: 700x480px default, responsive — recompute a `cardWidth` from `windowWidth` inside `windowResized()` so five cards lay out in a single row above 900px, a 3+2 grid between 500-900px, and a single scrollable column below 500px.
Layout: five vertical cards, one per board (Pico, Pico W, Pico 2, Pi 500+, Pi 5), each showing a simple silhouette icon drawn with basic p5.js shapes (a small rectangle with two pin rows for the Picos, a keyboard-shaped rectangle for the Pi 500+, a squarer board shape for the Pi 5), the board's name, and its approximate price tag. Color the microcontroller cards indigo (`#3F51B5`) and the single-board-computer cards circuit green (`#2E7D32`) so the two-family split from the chapter text is visible at a glance.
Controls: a `createSelect()` dropdown labeled "Compare by" with options "Price," "Chip," "Clock Speed," and "Wireless" (default: "Price"). Changing the dropdown re-sorts the five cards left-to-right by the selected attribute and updates a small value label on each card.
Interaction: clicking any card expands it in place to reveal four data rows — Chip (RP2040 / RP2350 / BCM2712), Clock Speed, RAM, and Wireless (Yes/No) — pulled from the product comparison table in the surrounding chapter text. Clicking an expanded card collapses it again. Only one card is expanded at a time. Hovering a card (non-touch devices) shows a one-line tooltip summarizing what tier of project it fits best (e.g., "Best for: first breadboard projects").
Implementation: p5.js. Store board data as an array of five objects `{name, price, chip, clockSpeed, ram, wireless, family}`. Draw cards with `rect()`, sort the array in place when the dropdown changes, and animate card position changes with a simple `lerp()` over a few frames rather than an instant jump. Parent the canvas to the enclosing `<div>` and recalculate layout inside `windowResized()`.