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

Also see p5.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