Boot Process Explorer¶
Specification¶
The full specification below is extracted from Chapter 11: Booting, the Desktop, and the Linux Terminal on the Pi 500+.
Type: interactive-diagram
**sim-id:** boot-process-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) the sequence of steps a Raspberry Pi 500+ follows between power-on and a usable Linux desktop.
Canvas: 700x440px default, responsive — recompute step-box positions as fractions of `width` inside `windowResized()`, reflowing from a horizontal row to a stacked column below 480px wide.
Layout: a horizontal row (vertical stack on narrow screens) of five connected step boxes with arrows between them: "1. Power on — firmware finds the SD card," "2. Bootloader loads the Linux kernel," "3. Kernel initializes hardware," "4. Operating system starts background services," "5. Desktop environment appears." Boxes are tinted a gradient from copper gold `#D4AF37` (early, low-level steps) to circuit green `#2E7D32` (later, higher-level steps) to visually reinforce the hardware-to-software progression.
Controls: a `createButton()` labeled "Step Forward" advancing a highlighted marker one box at a time, and a `createButton()` labeled "Reset." A `createSlider()` labeled "Auto-Play Speed" (0 = off to 5 = fast) auto-advances the marker.
Interaction: clicking any step box jumps the marker there and opens an infobox with a one-sentence explanation matching the chapter's prose (e.g., clicking box 2 explains what the Linux kernel is and that it's now being loaded into memory). Only one infobox is open at a time. A small always-visible caption above the diagram reads "SD card imaging (Raspberry Pi Imager) happens before step 1, on a separate computer."
Implementation: p5.js. Store the five steps as an array of `{label, definition}` objects. Track `currentStep`; redraw all boxes each frame with the active box outlined in a brighter stroke. Rectangle bounds-checking for click hit-testing in `mousePressed()`. Parent the canvas to the enclosing `<div>` per project convention.