Add pointer and keyboard controls

Add pointer and keyboard controls — guided practice

Trace input events to bounded state changes with equivalent visible controls.

Save index.html and sketch.js from the practice files in the same new folder. Open index.html in a modern browser while online; the page loads the free p5.js 2.3.3 library from the CDN URL listed by the official download page. No account is needed. If you need offline use, download that library as p5.min.js from the official page and change only the library script src to p5.min.js. Edit sketch.js with a plain-text code editor, save, and reload the page after code changes. Use browser developer tools Console to inspect errors. Restore the original constants after each changed case unless instructed otherwise.

1. 1. Test pointer and button

   Click the canvas once, note the palette change, then click Next palette.

   You should see: Both advance the same palette state through nextPalette.

   Equivalent inputs can share one function instead of duplicating logic.

2. 2. Test keyboard spacing

   Tab to the canvas so its focus outline is visible. Press Right once from spacing 70, then Left once.

   You should see: The status shows 75, then 70 pixels.

   The key handler is scoped to the focused canvas and prevents arrow scrolling for those handled keys.

3. 3. Test equivalent buttons

   Use More spacing until the value stops, then Less spacing until it stops.

   You should see: The allowed range is 40–80 pixels.

   Visible buttons provide the same adjustment without requiring a canvas-specific keyboard gesture.

4. 4. Inspect the guard

   Read Math.max(40,Math.min(80,spacing+amount)). From 75, predict three +5 requests.

   You should see: The results are 80,80,80.

   Clamping constrains state before drawing uses it.