p5.js Tutorials
p5.js is a coding language for making creative, animated, interactive, and artistic projects. It’s designed for folks who are new to coding, so it’s the perfect place to start. It’s also built on top of JavaScript, so it’s a great way to learn the fundamentals of coding, even if your eventual goal is to learn other languages.
Chapter 1:
Welcome to Coding
Chapter 2:
Calling Functions
Calling Functions Examples
Circles
Use circles to create an interesting pattern.
Arcs
Draw a circular pattern using the arc function.
Chapter 3:
Using Variables
Using Variables Examples
Chapter 4:
Creating Variables
Creating Variables Examples
Random Skull
Use the random() function to draw a random skull.
Chapter 5:
Creating Functions
Creating Functions Examples
drawHouse
Create a function that draws a house.
drawTown
Create a function that draws a town.
drawCity
Use functions to draw a random city.
Chapter 6:
Debugging
Debugging
Learn how to debug your p5.js code.
Chapter 7:
If Statements
If Statements Examples
Chapter 8:
Animation
Animation Examples
Chapter 9:
Random
Random
The power and beauty of the random function.
Chapter 10:
Input
Input
Use mouse and keyboard input to make interactive sketches.
Input Examples
Grouchy Face
Make your computer mad when you click the mouse.
Chapter 11:
For Loops
For Loops
Use patterns to repeat work without repeating code.
For Loops Examples
Menorah
Code your own virtual menorah!
Code Rocket
Make a rocket from the whitespace in your code.
Chapter 12:
Arrays
Arrays
Create variables that hold multiple values.
Arrays Examples
Chapter 13:
Using Objects
Using Objects Examples
Chapter 14:
Creating Classes
Creating Classes Examples
Bonsai Tree
Use recursion to create a digital bonsai tree.
Loopers
Draw lines that loop around the screen.
Planets
Show planets orbiting a sun
Chapter 15:
Array Functions
Chapter 16:
Images
Images
Display and manipulate image files.
Images Examples
Genuary 19
Increase the randomness of an image along the Y-axis.
Chapter 17:
From p5.js to Web Dev
Chapter 18:
Libraries
Libraries
Use libraries to expand what p5.js can do.
Libraries Examples
More Info
Want more info before you dive into coding? Read these!
Editors
Which p5.js editor should I use?
From Processing to p5.js
These tutorials assume you’re already familiar with the fundamentals of coding and that you’ve already read the Processing tutorials and the JavaScript tutorials.
Review
Review Processing, HTML, and JavaScript topics.
Other Resources
- p5 spooky sketches is a printout I made for CC Fest in 2019. It contains a bunch of halloween-themed examples of drawing and image manipulation.