Flowchart and Pseudocode Explorer¶
Specification¶
The full specification below is extracted from Chapter 1: Computational Thinking and Debugging for Physical Computing.
Type: interactive-diagram
**sim-id:** flowchart-pseudocode-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) the correspondence between a flowchart's graphical steps and the equivalent lines of pseudocode for a simple sense-and-react algorithm.
Canvas: 700x500px, split into two responsive panels — a flowchart panel on the left (or top, on narrow screens below 600px) and a pseudocode panel on the right (or bottom). Use `windowResized()` to switch between side-by-side and stacked layout at the 600px breakpoint.
Content: render the "stop before the wall" algorithm as four connected flowchart shapes (Start oval → "Read distance sensor" rectangle → "distance < 10 cm?" diamond → two branches: "Stop motors" rectangle on the Yes path, "Keep driving" rectangle on the No path → arrow looping back to the Read step). In the pseudocode panel, render the four corresponding lines of monospaced text shown in the surrounding chapter prose.
Interaction: clicking any flowchart shape highlights it with a colored outline (raspberry red `#C2185B`) and simultaneously highlights the matching line(s) of pseudocode in the same color. Clicking a pseudocode line does the reverse, highlighting the matching flowchart shape. Only one shape/line pair is highlighted at a time; clicking elsewhere on the canvas clears the highlight. Add a small legend text reading "Click a shape or a line to see its match."
Implementation: p5.js. Store shapes and pseudocode lines as parallel arrays sharing a common `matchId` field. Use rectangle/point-in-polygon hit-testing in `mousePressed()` against each shape's bounding box and each text line's bounding box. Redraw the full diagram every frame from state rather than mutating drawn pixels, so highlight state stays consistent after a resize.