p5.js Course Materials
p5.js Course Materials

p5.js Course Materials

Resources that I've developed for using p5.js in education.

Also see p5.js Resourcesp5.js Resources, that includes resources from other people too.

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 💃🏻PoseNet.

Examples & Recipes

p5.js Examples

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

Name
Creation Date
Created
Tags
URL
Screenshot
Animation and Easing
December 11, 2020
Dec 11, 2020 11:34 AM
CCL F20animation
www.openprocessing.org
Detecting Sequences
Dec 10, 2020 6:46 AM
CCL F20
www.openprocessing.org
Detecting Transitions
December 10, 2020
Dec 10, 2020 6:45 AM
CCL F20
www.openprocessing.org
PoseNet Data Solution Set
Dec 9, 2020 1:21 PM
CCL F20ArraysClassesanimation
www.openprocessing.org
Selective Trails 2 – createGraphics
December 2, 2020
Dec 9, 2020 4:39 AM
CCL F20animationcreateGraphics
www.openprocessing.org
Selective Trails 1 – Arrays
December 2, 2020
Dec 9, 2020 4:38 AM
CCL F20animation
www.openprocessing.org
Slice Effect
December 2, 2020
Dec 2, 2020 2:12 PM
CCL F20createGraphics
www.openprocessing.org
Pausing Part of a Sketch (The Alternative to noLoop)
December 2, 2020
Dec 2, 2020 6:27 AM
animationCCL F20loop
www.openprocessing.org
HTML Modes
November 30, 2020
Dec 1, 2020 6:46 AM
HTMLmodesCCL F20
editor.p5js.org
Combining Sketches with OOP
December 1, 2020
Dec 1, 2020 1:43 AM
modesstatedelegationOOPClassesCCL F20
www.openprocessing.org
Split Screen Sketches
November 30, 2020
Nov 30, 2020 9:58 AM
delegationcombining sketchesCCL F20
www.openprocessing.org
Combining Sketches by Renaming
November 30, 2020
Nov 30, 2020 5:36 AM
modesstatedelegationcombining sketchesCCL F20
www.openprocessing.org
Hover Effects
November 29, 2020
Nov 29, 2020 3:00 AM
CCL F20
www.openprocessing.org
Two-Point Transforms
November 28, 2020
Nov 29, 2020 2:59 AM
CCL F20
www.openprocessing.org
Finding the Maximum
November 28, 2020
Nov 29, 2020 2:58 AM
CCL F20HOPArrays
www.openprocessing.org
From Objects to Classes
October 30, 2020
Nov 27, 2020 4:02 AM
CCL F20ClassesAssignment Solutions
www.openprocessing.org
Objects, Arrays, and Conditionals
October 30, 2020
Nov 27, 2020 4:02 AM
CCL F20ClassesArraysConditionalsAssignment Solutions
www.openprocessing.org
Scheduled Events
October 30, 2020
Nov 27, 2020 4:01 AM
CCL F20
www.openprocessing.org
Objects & Arrays
October 30, 2020
Nov 27, 2020 4:01 AM
CCL F20ClassesArrays
www.openprocessing.org
Periodic Actions
October 30, 2020
Nov 27, 2020 4:00 AM
CCL F20
www.openprocessing.org
Use draw as your loop
October 11, 2020
Nov 27, 2020 3:59 AM
CCL F20
www.openprocessing.org
Sequencing
October 29, 2020
Nov 27, 2020 3:59 AM
CCL F20modesstate
www.openprocessing.org
Iteration Activity: Solution
October 7, 2020
Nov 27, 2020 3:58 AM
CCL F20IterationAssignment Solutions
www.openprocessing.org
JavaScript Features
April 21, 2020
Nov 27, 2020 3:56 AM
CCL S20
www.openprocessing.org
Drawing Modes
April 21, 2020
Nov 27, 2020 3:54 AM
CCL S20
www.openprocessing.org
Retained Mode
April 20, 2020
Nov 27, 2020 3:49 AM
CCL S20
www.openprocessing.org
Refactoring to an array
April 13, 2020
Nov 27, 2020 3:48 AM
CCL S20Arrays
www.openprocessing.org
Particle Ports
April 7, 2020
Nov 27, 2020 3:47 AM
CCL S20
www.openprocessing.org
Particles 3
March 10, 2020
Nov 27, 2020 3:41 AM
MPC F19
www.openprocessing.org
Particles 2
March 9, 2020
Nov 27, 2020 3:41 AM
MPC F19
www.openprocessing.org
Particles 1
March 9, 2020
Nov 27, 2020 3:41 AM
MPC F19
www.openprocessing.org