Skip to content

Plan: migrate examples to p5.js 2.x + ml5.js 1.x (timing TBD) #20

Description

@jonfroehlich

Goal

Plan (and eventually execute) migrating the examples from p5.js 1.11.13 / p5.sound 1.11.13 / ml5.js 0.12.2 to p5.js 2.x + the split-out p5.sound + ml5.js 1.x.

This is a tracking/planning issue, not scheduled — timing depends on when p5.js 2.0 is adopted in teaching, which is still TBD. Nothing is broken today: every example is pinned to known-good versions, so there is no urgency. The point is to capture scope now so the switch is a deliberate, low-surprise change later.

Current state

  • CDN versions are pinned (no @latest): p5.js & p5.sound 1.11.13, ml5.js 0.12.2. See CLAUDE.md and scripts/audit_libraries.py.
  • Zero-toolchain by design (open index.html; no build). Any migration must preserve that.

Breaking changes that affect this repo

p5.js 2.0

  • preload() is removed. Examples that load assets in preload() (images, fonts, sounds, mp3s) must move to async loading. Affects e.g. Sound/FrequencyBubbles2-Image, Sound/SoundLevelBubbles2-Image, Sound/SoundVis3/SoundVis4 (mp3), several Games/* sprite/image loaders, Art/* using images/fonts.
  • p5.sound is split out into a separate library — its script include changes, and some APIs differ.
  • getMasterVolume() is gone (already removed from the 3 SoundVis debug print()s in 1cc55d8; double-check none remain).
  • General 2.0 API/behavior deltas to audit (e.g. loadImage/loadSound return values, color/typography tweaks).

ml5.js 1.x

  • poseNet(...).on() / handpose(...).on() callback APIs were replaced by bodyPose / handPose + detectStart(...).
  • Affected examples: ml5js/PoseNet/* (ElmoGenerator, ElmoGeneratorMultiperson, Skeleton), ml5js/HandPose/*, Games/FlappyArm, WebSerial/ml5js/* (HandWaveDetector, HandWaver, NoseTracker), Node/RemoteHandWave.
  • Games/SnakeSpeech has a pre-existing runtime error (its ml5 sound-classifier callback does results[0] when the classifier errors headless) — fold the fix into this migration.

Suggested approach (when we decide to switch)

  1. Decide the trigger: pin to a specific p5.js 2.x patch release once teaching adopts it.
  2. Migrate in small, verified, committed chunks per category (same workflow used for the accessibility pass): branch off main, verify each example in-browser, fast-forward merge.
  3. Update the version pins + scripts/audit_libraries.py / fix_libraries.py defaults and the _libraries/ offline copies together.
  4. Start with the preload() → async conversions (mechanical, broad), then p5.sound include/API, then the ml5 0.12→1.x rewrite (largest, most behavioral).
  5. Keep the zero-toolchain constraint: CDN includes only, no npm/build.

Open questions

  • Pin to which exact p5.js 2.x release?
  • Do we want a brief teaching note in affected examples explaining the 1.x→2.x difference (since students may have older references)?
  • Any examples worth retiring instead of migrating?

Out of scope

Accessibility (done: canvas describe(), control labels, audio/score captions) and the minor cleanups (duplicated Color CSS/font, implicit globals, per-frame print() debug spam, sparse comments) are tracked separately.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions