Sense-Think-Act Cycle Explorer¶
Specification¶
The full specification below is extracted from Chapter 1: Computational Thinking and Debugging for Physical Computing.
Type: microsim
**sim-id:** sense-think-act-cycle-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/stem-robots/tree/main/docs/sims/physical-computing-explorer<br/>
**Status:** Specified
Learning objective: Students will *understand* (Bloom L2: Understand) how a sensor reading, a decision, and an actuator command form a repeating feedback loop in a physical computing system.
Canvas: 700x480px, responsive via `windowResized()` recalculating node positions as fractions of `width`/`height` rather than fixed pixels.
Layout: three large circular nodes arranged in a triangle labeled "Sense" (left, colored raspberry `#C2185B`), "Think" (top, colored copper gold `#D4AF37`), and "Act" (right, colored circuit green `#2E7D32`), connected by curved directional arrows Sense → Think → Act → Sense, forming a visible loop. Inside each node, show a small representative icon: Sense shows a simple sensor glyph, Think shows a small gear/chip glyph, Act shows a simple motor/LED glyph.
Controls (p5.js built-ins per project convention): a `createSlider()` labeled "Cycle Speed" (range 1–10, default 5) controlling how fast a small animated dot travels around the loop; a `createButton()` labeled "Run / Pause" toggling the animation; a `createButton()` labeled "Toggle Feedback Arrow" that shows or hides a highlighted return arrow from Act back to Sense, since feedback loops are optional in some designs but present in most robot behaviors.
Interaction: clicking any of the three nodes pauses the animation and opens a small text panel below the diagram naming two example components for that stage, pulled from the table earlier in this chapter (e.g., clicking "Sense" shows "Example: photoresistor, time-of-flight distance sensor"). Clicking the same node again, or clicking "Run / Pause", resumes the animation and hides the panel.
Implementation: p5.js, animated dot position computed from an accumulating angle variable advanced each frame by an amount derived from the slider value, following a triangular or curved path defined by three anchor points. Node hit-testing via `dist()` between mouse position and each node's center compared to its radius.