Resources that I've developed for using p5.js in education.
Also see
p5.js Templates
p5.js Template (Glitch) – Remix this to create a p5.js project on Glitch. Adapted from a template by J.H. Moon
p5.js Template (GitHub) – Download or clone this to create a p5.js project Visual Studio Code.
p5pose is a p5.js + ml5.js PoseNet starter. I prefer it to the official starter because I prefer for my students to use the for…of statement. Also see
Examples & Recipes
Interactives
Map Explorer is an interactive visualization of the Arduino / Processing / p5.js map()
function.
Step-by-Step Tutorials
This is a library of step-by-step tutorials that demonstrate different techniques in p5.js. They are designed for beginning to intermediate p5.js coders. Some of the end with a sampler of more advanced techniques on the final pages.
Name | Creation Date | Created | Tags | URL | Screenshot |
---|---|---|---|---|---|
Animation and Easing | December 11, 2020 | Dec 11, 2020 11:34 AM | CCL F20animation | ||
Detecting Sequences | Dec 10, 2020 6:46 AM | CCL F20 | |||
Detecting Transitions | December 10, 2020 | Dec 10, 2020 6:45 AM | CCL F20 | ||
PoseNet Data Solution Set | Dec 9, 2020 1:21 PM | CCL F20ArraysClassesanimation | |||
Selective Trails 2 – createGraphics | December 2, 2020 | Dec 9, 2020 4:39 AM | CCL F20animationcreateGraphics | ||
Selective Trails 1 – Arrays | December 2, 2020 | Dec 9, 2020 4:38 AM | CCL F20animation | ||
Slice Effect | December 2, 2020 | Dec 2, 2020 2:12 PM | CCL F20createGraphics | ||
Pausing Part of a Sketch (The Alternative to noLoop) | December 2, 2020 | Dec 2, 2020 6:27 AM | animationCCL F20loop | ||
HTML Modes | November 30, 2020 | Dec 1, 2020 6:46 AM | HTMLmodesCCL F20 | ||
Combining Sketches with OOP | December 1, 2020 | Dec 1, 2020 1:43 AM | modesstatedelegationOOPClassesCCL F20 | ||
Split Screen Sketches | November 30, 2020 | Nov 30, 2020 9:58 AM | delegationcombining sketchesCCL F20 | ||
Combining Sketches by Renaming | November 30, 2020 | Nov 30, 2020 5:36 AM | modesstatedelegationcombining sketchesCCL F20 | ||
Hover Effects | November 29, 2020 | Nov 29, 2020 3:00 AM | CCL F20 | ||
Two-Point Transforms | November 28, 2020 | Nov 29, 2020 2:59 AM | CCL F20 | ||
Finding the Maximum | November 28, 2020 | Nov 29, 2020 2:58 AM | CCL F20HOPArrays | ||
From Objects to Classes | October 30, 2020 | Nov 27, 2020 4:02 AM | CCL F20ClassesAssignment Solutions | ||
Objects, Arrays, and Conditionals | October 30, 2020 | Nov 27, 2020 4:02 AM | CCL F20ClassesArraysConditionalsAssignment Solutions | ||
Scheduled Events | October 30, 2020 | Nov 27, 2020 4:01 AM | CCL F20 | ||
Objects & Arrays | October 30, 2020 | Nov 27, 2020 4:01 AM | CCL F20ClassesArrays | ||
Periodic Actions | October 30, 2020 | Nov 27, 2020 4:00 AM | CCL F20 | ||
Use draw as your loop | October 11, 2020 | Nov 27, 2020 3:59 AM | CCL F20 | ||
Sequencing | October 29, 2020 | Nov 27, 2020 3:59 AM | CCL F20modesstate | ||
Iteration Activity: Solution | October 7, 2020 | Nov 27, 2020 3:58 AM | CCL F20IterationAssignment Solutions | ||
JavaScript Features | April 21, 2020 | Nov 27, 2020 3:56 AM | CCL S20 | ||
Drawing Modes | April 21, 2020 | Nov 27, 2020 3:54 AM | CCL S20 | ||
Retained Mode | April 20, 2020 | Nov 27, 2020 3:49 AM | CCL S20 | ||
Refactoring to an array | April 13, 2020 | Nov 27, 2020 3:48 AM | CCL S20Arrays | ||
Particle Ports | April 7, 2020 | Nov 27, 2020 3:47 AM | CCL S20 | ||
Particles 3 | March 10, 2020 | Nov 27, 2020 3:41 AM | MPC F19 | ||
Particles 2 | March 9, 2020 | Nov 27, 2020 3:41 AM | MPC F19 | ||
Particles 1 | March 9, 2020 | Nov 27, 2020 3:41 AM | MPC F19 |