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

Chapter 3: Using Variables

Using Variables Examples

Chapter 4: Creating Variables

Creating Variables Examples

Chapter 5: Creating Functions

Creating Functions Examples

Chapter 6: Debugging

Chapter 7: If Statements

If Statements Examples

Chapter 8: Animation

Animation Examples

Chapter 9: Random

Chapter 10: Input

Input Examples

Chapter 11: For Loops

For Loops Examples

Chapter 12: Arrays

Arrays Examples

Chapter 13: Using Objects

Using Objects Examples

Chapter 14: Creating Classes

Creating Classes Examples

Chapter 15: Array Functions

Chapter 16: Images

Images Examples

Chapter 17: From p5.js to Web Dev

Chapter 18: Libraries

Libraries Examples

Chapter 18: What's Next?

More Info

Want more info before you dive into coding? Read these!

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.

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.