p5.js Tutorials

From drawing your first shape to building real-time audio visualisers and WebGL shaders — everything you need to use p5.js creatively.

Starter

No experience needed

01What is p5.js? 02Setting Up Your Environment 03Your First Sketch 04Canvas & Coordinates 05Drawing Shapes 06Color & Style 07Variables & Animation 08Mouse Interaction 09Keyboard Input 10Saving & Sharing

Beginner

Building foundations

01Functions & Code Organisation 02Loops & Patterns 03Conditionals & Logic 04Arrays & Data 05Working with Images 06Text & Typography 07Sound Basics 08Randomness & Noise 09Trigonometry for Creative Coding 10Intro to Object-Oriented Programming

Intermediate

Going deeper

01Classes & Objects 02Particle Systems 03Physics Simulation 04Generative Patterns 05Working with Video 06Data Visualisation 07DOM Manipulation 08WebGL & 3D 09Shaders in p5.js 10APIs & External Data

Expert

Production-ready

01Advanced Shader Programming 02Machine Learning with ml5.js 03Real-time Audio Visualisation 04Generative Art Systems 05Custom Renderers 06Performance Optimisation 07WebRTC & Live Collaboration 08Hardware Integration 09Procedural World Generation 10Publishing & Portfolio