Differential Drive Path Simulator¶
Specification¶
The full specification below is extracted from Chapter 7: Building and Programming a No-Display STEM Robot.
Type: microsim
**sim-id:** differential-drive-path-simulator<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/stem-robots/tree/main/docs/sims/differential-drive-simulator<br/>
**Status:** Specified
Learning objective: Students will *predict* (Bloom L3: Apply) a two-wheeled robot's path -- straight, curved, or pivoting -- from a chosen pair of left and right motor speed values.
Canvas: 700x480px, responsive -- recompute the drawing area and top-down robot icon scale from `windowWidth`/`windowHeight` in `windowResized()`.
Layout: a top-down view of an open arena (light gray background with a faint grid) containing a simple top-down robot icon (rounded rectangle body with two wheel rectangles). As the simulation runs, the robot icon moves and turns according to the current left/right speed values, leaving a fading trail line showing its path. A live readout above the arena displays "Left: [value] | Right: [value] | Turning radius: [value or 'straight' or 'pivot']".
Controls: two `createSlider()` elements, "Left Motor Speed" and "Right Motor Speed" (range -100 to 100, default 80 each); a `createButton()` labeled "Reset Position" that returns the robot icon to the center and clears the trail; three `createButton()` presets labeled "Straight," "Gentle Turn," and "Pivot in Place" that set both sliders to the matching example values used in the surrounding chapter text.
Interaction: moving either slider updates the robot's curving motion live and the turning-radius readout recalculates continuously from the ratio of the two speeds. When both sliders are set to equal magnitude but opposite sign, the robot visibly pivots around its own center and the readout displays "pivot -- radius 0." Clicking the robot icon itself pauses the simulation and opens a small infobox reading "Speed difference between wheels is what creates a turn -- not steering."
Implementation: p5.js. Robot pose (x, y, heading) updated each frame using a simple differential-drive kinematics formula: forward speed as the average of left/right speed, angular velocity as proportional to their difference divided by an assumed wheel-base width constant. Trail stored as a capped-length array of past positions, drawn with decreasing opacity toward the older end. Arena bounds wrap or clamp so the robot never permanently leaves the visible canvas.