H-Bridge Motor Driver Explorer¶
Specification¶
The full specification below is extracted from Chapter 7: Building and Programming a No-Display STEM Robot.
Type: microsim
**sim-id:** h-bridge-motor-driver-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how an H-bridge's four switch positions determine a DC motor's direction, braking, or stall condition.
Canvas: 700x460px, responsive -- recompute the H-bridge schematic's scale from `windowWidth` in `windowResized()` so the diagram shrinks rather than clipping below 500px wide.
Layout: a schematic H-bridge drawn in the shape of the letter H using p5.js `line()` and `rect()` primitives -- four labeled switches (S1 top-left, S2 bottom-left, S3 top-right, S4 bottom-right) at the four corners of the H, a motor symbol (circle with "M") on the crossbar, and power rail (+) at top, ground rail at bottom. Each switch is drawn as a clickable toggle (open gap or closed line). A small animated arrow inside the motor circle shows current direction and spins visually when the motor is "on."
Controls: four `createButton()` elements, one per switch (S1-S4), toggling that switch open/closed; a `createButton()` labeled "Preset: Forward" that sets S1+S4 closed, S2+S3 open; a `createButton()` labeled "Preset: Reverse" that sets S2+S3 closed, S1+S4 open; a `createButton()` labeled "Preset: Brake" that closes S1+S2 (or S3+S4); a `createButton()` labeled "Preset: Stall (Danger)" that closes all four switches simultaneously.
Interaction: the motor symbol's arrow animates clockwise for the Forward preset, counter-clockwise for Reverse, freezes immediately for Brake, and for the Stall preset the entire H-bridge schematic flashes red with a text warning "Both directions active -- overcurrent risk!" reusing the safety warning from the surrounding chapter text. Clicking any individual switch button that creates an invalid same-side-closed combination (e.g., S1 and S2 both closed) triggers the same red-flash stall warning. Hovering any switch shows a tooltip naming which transistor pair it represents.
Implementation: p5.js. Switch states stored as four booleans in an array; current path and motor rotation direction computed each frame from the boolean combination via a small lookup table (forward / reverse / brake / stall / off). Redraw the full schematic every frame from state. Use `windowResized()` to rescale all drawing coordinates as fractions of canvas width/height rather than fixed pixels.