Introduction

This body of work is intended for people who have started programming, but aren't quite sure how to get from beginner to intermediate. The goal of this project is to be the "best second resource" for learning creative coding after Daniel Shiffman's The Coding Train (opens in a new tab) and before Patricio Gonzalez Vivo's The Book of Shaders (opens in a new tab).

By now, you've already gotten the hang of procedural programming: stuff like if, else, while, for, and basic data types. You've also probably been exposed to functions and objects at least once, but maybe you haven't quite gotten the hang of that yet.

Maybe you also still don't feel comfortable making a whole new program from scratch, and instead rely on finding examples to jump off of or having an AI start writing the program for you. This series of tutorials and lessons is made to help you think about the structure of and logic of a program, so it doesn't feel so intimidating when you dive into the code. The tutorials are broken up by their components so that you can ostensibly complete them in any order before tying them all together.

If you've gotten into creative code, you're also pretty familiar with p5.js. If you've used p5, Processing, or openFrameworks, you'll feel right at home here. If you think you need a refresher, check out Hello p5 to get started. There's also a lot of great tutorials on getting started over at The Coding Train.

As you go through the tutorials, take your time to read through the explainations. Programming concepts can be unintuitive at times and they don't come to you all at once, so don't expect to just skim through and get it right away.

Space

Vectors, coordinates, and transformations are the vocabulary of visual computing. In this section, we build up that vocabulary gently — starting from the basics of 2D position and movement, and working toward the kind of spatial reasoning that lets you build cameras, scrolling worlds, and physics-aware scenes.

You don't need to have taken a linear algebra course. By the end, you will have used the ideas anyway.

Time

Every animation is really a question: what should this look like right now? Answering that question well means understanding the difference between frame count and elapsed time — and why that difference matters the moment your sketch runs on someone else's machine.

In this section we move from simple frame-based motion to a proper time-driven animation model, building up a small animation library along the way.

Form

As your sketches grow, the code starts to get complicated. Functions multiply, variables blur together, and the logic of one thing bleeds into the logic of another.

This section is about managing that complexity. We'll use objects and classes to give form to our ideas — grouping related data and behavior into types that are easy to reason about, reuse, and extend. Along the way we'll encounter a few classic design patterns that show up in a lot of places in interactive software.