Analog and Digital Watch Face Designer¶
Specification¶
The full specification below is extracted from Chapter 9: Real-Time Clocks and Display Drivers for Clocks and Watches.
Type: microsim
**sim-id:** analog-digital-watch-face-designer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/microsims/tree/main/docs/sims/analog-clock<br/>
**Status:** Specified
Learning objective: Students will *compare* (Bloom L4: Analyze) how analog clock hands and digital clock format each represent the identical real-time clock reading, and observe the visible effect of clock update interval on redraw smoothness.
Canvas: 700x420px, responsive -- recompute both face panels' scale from `windowWidth` in `windowResized()`, stacking them vertically below 600px wide.
Layout: two side-by-side panels sharing one simulated clock time -- a left panel showing an analog watch face (circular outline, hour/minute/second hands as rotated line segments) and a right panel showing the same time in digital clock format on a simulated seven-segment-style readout.
Controls: a `createSlider()` labeled "Simulated Time (minutes since midnight)" (range 0-1439, default set to current time) scrubbing both faces simultaneously; a `createSlider()` labeled "Clock Update Interval (ms)" (range 0-2000, default 1000) controlling how often both faces actually redraw, with a visible small "tick" flash on each redraw event; a `createCheckbox()` labeled "Show Seconds" toggling the second hand on the analog face and a seconds field on the digital readout.
Interaction: at a large update interval (over 1000 ms), the second hand and digital seconds field visibly jump in noticeable steps rather than sweeping smoothly, directly demonstrating the update-interval tradeoff described in the chapter text; at very low intervals the motion looks continuous. Hovering either face's hour or minute value shows a tooltip stating the underlying raw value and its converted angle or formatted string, tying directly back to the `hand_angle_degrees()` and `format_digital()` functions in the surrounding prose.
Implementation: p5.js, hand angles computed each redraw with `map()` from raw time values to 0-360 degrees and drawn with `rotate()`; digital format string built with JavaScript's `padStart(2, '0')` as the direct equivalent of the chapter's Python `"{:02d}"` formatting. Redraw timing gated by a `millis()`-based check against the Clock Update Interval slider value rather than redrawing every animation frame, so the interval's visual effect is genuine rather than simulated.