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
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