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 19: 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 and 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.