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 openprocessing.org
Create a "sketch"
Run it, edit it
Change colours, sizes, etc, for a couple of minutes
rename it, save it
Find two sketches you like, show them to your classroom neighbour.
Join the class so we can share future work: https://www.openprocessing.org/class/61910 (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.
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...
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.
(This pose-recognition can't be done on openprocessing as it needs some other libraries (ml5) and openprocessing limits which libraries you can load.)
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 https://p5js.org/reference/
Check out some examples - each function has multiple examples of how it can be used.
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