Four Pillars of Computational Thinking¶
Specification¶
The full specification below is extracted from Chapter 1: Computational Thinking and Debugging for Physical Computing.
Type: interactive-infographic
**sim-id:** four-pillars-of-computational-thinking<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) how decomposition, pattern recognition, abstraction, and algorithm design each contribute to solving a physical computing problem.
Canvas: 700x460px default, responsive — recalculate a `cellSize` from `windowWidth` on a `windowResized()` handler so the layout reflows to a single column below 480px wide and a 2x2 grid above it.
Layout: four rounded-rectangle cards arranged in a 2x2 grid (2x2 above 480px, stacked 4x1 below it). Each card has a distinct accent color drawn from the book's theme palette: Decomposition (indigo #3F51B5), Pattern Recognition (raspberry #C2185B), Abstraction (circuit green #2E7D32), Algorithm Design (copper gold #D4AF37 on a dark card background for contrast). Each card shows a short icon (drawn with basic p5.js shapes, not an image file — e.g., Decomposition: a single large rectangle splitting into three smaller rectangles; Pattern Recognition: three repeating small squares; Abstraction: a detailed shape fading into a simplified silhouette; Algorithm Design: a short vertical flow of three connected steps) and the pillar name.
Interaction: clicking a card flips it (or expands a panel beneath the grid) to reveal a one-sentence physical-computing example tied to a robot that must stop before hitting a wall — one example per pillar, matching the four examples given in the surrounding chapter text. Hovering a card (desktop) or tapping once (touch) highlights its border in a lighter tint of its accent color before a second click/tap opens the example, so the interaction works with both mouse and touch input. Include a small "Reset" button (p5.js `createButton`) that collapses all four cards back to their closed state.
Implementation: p5.js. State stored in an array of four objects `{name, color, example, isOpen}`. Draw cards with `rect()` and rounded corners via the `rectMode`/corner-radius argument; render text with `textAlign(CENTER, CENTER)`. Use `mousePressed()` to detect which card was hit via simple rectangle bounds-checking, and toggle that card's `isOpen` state. Parent the canvas to the enclosing `<div>` and call a resize routine inside `windowResized()`.