Workshop on migrating to p5.js

(Rough) workshop outline - migrating to p5.js and

Bookmark Neill's longer notes on migrating from khan academy's processing.js to p5.js. You can read them at home.

Make an account on

Create a "sketch"

Run it, edit it

Change colours, sizes, etc, for a couple of minutes

rename it, save it

Browse the gallery

Find two sketches you like, show them to your classroom neighbour.

Follow neill and ali (TODO: ali what user number?)

Join the class so we can share future work: (Ask Neill or Ali for the access code.)

Play with this starting sketch

  • read the code - do you understand every line?

  • change something about it!

  • press fork/"create a fork" (the equivalent of "spin-off") and save it.

  • Change the title to reflect your work.

audio analysis demos

Play with this sketch processing audio from your microphone

Play with and edit this (simpler example of audio analysis). What could you animate from your khan academy projects, with the different energies of bass, mid, and treble? Size, speed, rotation, colour, words, position, direction...

web cam demos

Play with this webcam-processing sketch and this one, too. The first has hardly any code.

Play with this posenet p5.js sketch on codepen - stand far back from the camera for best results! It is complicated, you don't need to understand it.

Pose-recognition from webcam - demo

(This pose-recognition can't be done on openprocessing as it needs some other libraries (ml5) and openprocessing limits which libraries you can load.)

Bookmark Daniel Shiffman

Subscribe to Daniel Shiffman's "coding train" channel!

Add the recommended course "Code! Programming with p5.js" to your list of stuff to watch.


Find the documentation

Check out some examples - each function has multiple examples of how it can be used.

Migrate one of your khan academy projects

Create a new sketch, and bring your favourite project across from khan academy.

You will need to consider these notes about migrating from khan academy processing.js to p5.js

Other starting points