p5.js Tutorial

If you are new to programming and/or interested in computer graphics and interactive animations these notes are a great place to start your journey!  Below we’ll learn the basics of coding using a language called p5.js.  p5.js is designed especially for beginners and runs completely in your web browser, so you don’t need to install any special software to get started.  Learning p5.js is a great way to see if programming is something you’d like to pursue further.

1.0 Getting Started with p5.js

1-1 Getting Started with p5.js

1-2 More Drawing Functions

1-3 Colour and Transparency

1-4 More Shapes

1-5 Interactivity

1-6 Event Handling

1-7 Variables

1-8 System Variables and Random Numbers

1-9 Decision Making

1-10 More Complex Conditions

1-11 Putting It All Together!

2.0 p5.js Fundamentals

2-1 Conditional Loops

2-2 Counted Loops

2-3 Creating Simple Functions

2-4 Function Arguments

2-5 Returning a Value

2-6 Object-Oriented Programming (OOP)

2-7 The Power of OOP

2-8 Arrays

2-9 Arrays of Objects

2-11 Putting It All Together!

3.0 Cool p5.js Features

3-1 Transformations

3-2 Using Images

3-3 Image Processing

3-4 Fonts

3-5 Sound

3-6 GUI Elements