p5.js Course Materials
p5.js Course Materials

p5.js Course Materials

These are some resources that I've developed for using p5.js in education.

Also see

, that includes resources from others.

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.

p5.js Tutorials

NameCreation DateCreatedTagsURLScreenshot
Animation and Easing
Dec 11, 2020
Dec 11, 2020 11:34 AM
CCL F20animation
Detecting Sequences
Dec 10, 2020 6:46 AM
CCL F20
Detecting Transitions
Dec 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
Dec 2, 2020
Dec 9, 2020 4:39 AM
CCL F20animationcreateGraphics
Selective Trails 1 – Arrays
Dec 2, 2020
Dec 9, 2020 4:38 AM
CCL F20animation
Slice Effect
Dec 2, 2020
Dec 2, 2020 2:12 PM
CCL F20createGraphics
Pausing Part of a Sketch (The Alternative to noLoop)
Dec 2, 2020
Dec 2, 2020 6:27 AM
animationCCL F20loop
HTML Modes
Nov 30, 2020
Dec 1, 2020 6:46 AM
HTMLmodesCCL F20
Combining Sketches with OOP
Dec 1, 2020
Dec 1, 2020 1:43 AM
modesstatedelegationOOPClassesCCL F20
Split Screen Sketches
Nov 30, 2020
Nov 30, 2020 9:58 AM
delegationcombining sketchesCCL F20
Combining Sketches by Renaming
Nov 30, 2020
Nov 30, 2020 5:36 AM
modesstatedelegationcombining sketchesCCL F20
Hover Effects
Nov 29, 2020
Nov 29, 2020 3:00 AM
CCL F20
Two-Point Transforms
Nov 28, 2020
Nov 29, 2020 2:59 AM
CCL F20
Finding the Maximum
Nov 28, 2020
Nov 29, 2020 2:58 AM
CCL F20HOPArrays
From Objects to Classes
Oct 30, 2020
Nov 27, 2020 4:02 AM
CCL F20ClassesAssignment Solutions
Objects, Arrays, and Conditionals
Oct 30, 2020
Nov 27, 2020 4:02 AM
CCL F20ClassesArraysConditionalsAssignment Solutions
Scheduled Events
Oct 30, 2020
Nov 27, 2020 4:01 AM
CCL F20
Objects & Arrays
Oct 30, 2020
Nov 27, 2020 4:01 AM
CCL F20ClassesArrays
Periodic Actions
Oct 30, 2020
Nov 27, 2020 4:00 AM
CCL F20
Use draw as your loop
Oct 11, 2020
Nov 27, 2020 3:59 AM
CCL F20
Sequencing
Oct 29, 2020
Nov 27, 2020 3:59 AM
CCL F20modesstate
Iteration Activity: Solution
Oct 7, 2020
Nov 27, 2020 3:58 AM
CCL F20IterationAssignment Solutions
JavaScript Features
Apr 21, 2020
Nov 27, 2020 3:56 AM
CCL S20
Drawing Modes
Apr 21, 2020
Nov 27, 2020 3:54 AM
CCL S20
Retained Mode
Apr 20, 2020
Nov 27, 2020 3:49 AM
CCL S20
Refactoring to an array
Apr 13, 2020
Nov 27, 2020 3:48 AM
CCL S20Arrays
Particle Ports
Apr 7, 2020
Nov 27, 2020 3:47 AM
CCL S20
Particles 3
Mar 10, 2020
Nov 27, 2020 3:41 AM
MPC F19
Particles 2
Mar 9, 2020
Nov 27, 2020 3:41 AM
MPC F19
Particles 1
Mar 9, 2020
Nov 27, 2020 3:41 AM
MPC F19