Skip to content

Robot State Machine Simulator

Run MicroSim in Fullscreen

Specification

The full specification below is extracted from Chapter 1: Computational Thinking and Debugging for Physical Computing.

Type: microsim
**sim-id:** robot-state-machine-simulator<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/automating-instructional-design/tree/main/docs/sims/state-machine-template<br/>
**Status:** Specified

Learning objective: Students will *analyze* (Bloom L4: Analyze) how a robot's state machine transitions between states in response to events, and compare how those events are detected under polling versus interrupt-driven designs.

Canvas: 700x480px, responsive layout recalculating node positions from `width`/`height` fractions on `windowResized()`.

Layout: a node-link diagram with three state nodes — "Idle" (gray), "Driving" (circuit green `#2E7D32`), "Avoiding" (raspberry `#C2185B`) — connected by labeled directional arrows: Idle → Driving ("start button pressed"), Driving → Avoiding ("distance < 10 cm"), Avoiding → Driving ("path clear"), Driving → Idle ("stop button pressed"). The currently active state node is drawn with a thicker highlighted border.

Controls: a `createSelect()` dropdown labeled "Detection Mode" with two options, "Polling" and "Interrupt" (default: Polling); a `createSlider()` labeled "Polling Interval (ms)" (range 100–2000, default 500, disabled/grayed out when "Interrupt" is selected); a `createButton()` labeled "Trigger Event" that simulates the distance sensor crossing its threshold.

Interaction: in Polling mode, clicking "Trigger Event" arms a pending event, but the diagram only transitions states at the next scheduled poll tick — visualized as a small pulse animation sweeping outward from the active node on each tick, drawn at the interval set by the slider. In Interrupt mode, clicking "Trigger Event" transitions the state immediately, visualized as an instant flash on the arrow being followed, with a small on-screen timestamp comparison (e.g., "Polling: reacted in ~340 ms · Interrupt: reacted in ~2 ms") that updates after each trigger so students can directly compare response latency. Clicking any state node opens a short pseudocode snippet beneath the diagram showing that state's `IF` condition and transition, reusing the same pseudocode style introduced earlier in the chapter.

Implementation: p5.js, `millis()`-based timers for the polling tick and for measuring simulated interrupt latency. Node and arrow hit-testing via bounding-box or distance checks in `mousePressed()`. Keep the two detection-mode code paths in clearly separate functions so the "polling delay" versus "interrupt immediacy" behavior stays easy to tell apart while implementing.