This is a place for p5.js related tools, helpers, tutorials, examples, and demos created by people in the community. Things others might use or learn from. Feel free to add things you create here (just click the "Edit" button).

For syllabi or teaching specific materials and tools, please see the education page.

Demos

• Video intro tutorial: p5.js, Scott Garner
• differential equations with p5.js, Peter Farrell
• Box2D Physics Tutorial, Robert Cook

Tools

p5.js sketch creator

Simple app for the creation of p5.js sketches. Similar to openframeworks-project generator and cinder-tinderbox, this app will create a directory with all dependencies (html, css, js, etc.) required for a p5.js project. Created by Ken Frederick.

• overview
• github
• vimeo demo

p5.js seed project

You can use this project to quickly bootstrap your p5js project and a supporting dev environment. The seed contains a basic p5js application and is pre-configured to install the p5js framework and a bunch of development tools such as a simple server and live-reload.

p5.js-cli

Little node app to run a p5.js script from the command line.

angular-p5.js

AngularJS wrapper for p5.js

p5.js-screen-saver

You can create your original screen saver using p5.js!

sprite class for p5.js

Created by Nick Fox-Gieg.

p5.js sandbox w/ edit/save/browse - demo

Created by Gene Kogan

Examples

Nature of Code x p5.js

Examples from Dan Shiffman's Nature of Code ported to p5.js.

Monash University Creative Coding Sketches on p5

Sketches from the Creative Coding Course found at FutureLearn given by Jon McCormack from Monash University separated by weeks. See the link at the title for the github repository where all the examples can be found:

1. Week 1:
   • w1_01 "Draw your name!"
   • w1_02 "Draw your name! (part 2)"
   • w1_03 "Draw your name! (part 3)"
   • w1_04 "Graphics Shapes and Drawing Order"
2. Week 2:
   • w2_01 "Nine Squares"
   • w2_01_ConditionsAndBranching_if
   • w2_02 "Nine Squares, part 2"
   • w2_02_ConditionsAndBranching_switch
   • w2_03 "n squares"
   • w2_03_Interaction_mouse
   • w2_04 "The Clocks"
   • w2_04_Interaction_keyboard
   • w2_05 "Moving Patterns 1"
   • w2_05_AdvancedGraphics
   • w2_06 "Moving Patterns 2"
   • 25 Squares gone to party (Proposed solution to exercise)
3. Week 3:
   • w3_01 "Using map() to map mouse co-ordinates to background colour"
   • w3_02 "Array with sin()"
   • w3_02 "Processing functions"
   • w3_03 "Using sin(), cos(), dist() to make a dynamic pattern"
   • w3_04 "Spinning top: curved motion with sin() and cos()"
   • w3_05 "Spinning top: dynamic motion"
   • w3_06 "Rule-based system"
   • w3_06 "Rule-based system: final version"
   • Rainbow Tops (Proposed solution to excercise)
4. Week 4:
   • Some of these examples require external resources, so I think is better to give the link to the Github repository, so yo can download the examples and host them in a local web server, the sixth example required a Perlin algorithm implementation I'm not sure I can use on my example, so I left it out. Here are the examples
5. Week 5:
   • Some of these examples require an extra javascript file and/or a font (.otf) file. Here are the examples
6. Week 6:
   • w6_01 "Recursive functions"

Network visualization

By Hanbyul Jo - code

face tracking and p5.js

clmtracker.js + p5.js

Saving animated gifs

Uses gif.js to create animated gifs from a sketch.

device orientation example

Stacked area chart

Lets you simply input a data file to create a stacked chart.