Control motion and describe the artwork

Control motion and describe the artwork — guided practice

Add optional time-based change, a reliable pause and a useful text alternative.

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. Inspect the starting state

   Reload the original page and read paused=true and phase 0.

   You should see: Motion starts paused; the composition and controls are visible.

   A person can choose whether to start motion rather than being forced into it.

2. 2. Start and pause

   Click Start motion, observe gentle circle-size changes, then click Pause motion. Change palette while paused.

   You should see: Size changes stop, but palette still updates.

   draw continues while paused; only phase advancement is stopped.

3. 3. Trace elapsed time

   Read Math.min(deltaTime,100)/1000. For deltaTime 50 milliseconds, calculate the phase increment.

   You should see: The phase advances 0.05 when motion runs.

   Conversion to seconds gives a consistent time unit; the cap limits a large jump after a slow frame.

4. 4. Inspect the text support

   Read the describe call, the visible instructions, canvas label and text status. Use Tab to test focus and motion button operation.

   You should see: The text identifies the motif and controls; the motion button’s label and aria-pressed reflect its state.

   Canvas pixels need an accompanying explanation, and controls need their current state conveyed.