This site’s other creative-coding tutorials — Hydra for livecoding visuals, ml5.js for machine learning — assume you’re already comfortable making things on screen with code. p5.js is where that comfort usually begins. It’s a JavaScript library, descended from Processing, built specifically to make coding approachable for artists and beginners, and it runs in a free browser editor with nothing to install. Creative Coding for Beginners with p5.js, from The Coding Train, is the canonical starting point, taught with an enthusiasm that has launched countless first sketches.
setup() and draw(): the whole heartbeat
Every p5.js sketch is built on two functions, and understanding them is 90% of getting oriented. setup() runs once at the start — you make the canvas and set initial conditions there. draw() runs about 60 times a second, over and over, for as long as the sketch is open — that repetition is what creates animation and interactivity. Once it clicks that draw() is a loop redrawing the frame continuously, everything else follows: you’re not describing a static picture, you’re describing what happens on every frame.
Coordinates, shapes, and color
The next foundation is the canvas coordinate system — x from left, y from top down (a common first surprise) — and the shape functions that draw into it: ellipse, rect, line, and friends, each taking coordinates and sizes as numbers. Color works the same way, set with fill, stroke, and background. It sounds basic, but this is the actual vocabulary of visual coding: everything sophisticated is these primitives combined and driven by changing numbers. Getting comfortable placing and coloring shapes deliberately is the skill the whole practice is built on.
Making it move and respond
The payoff comes when values change over time. Increment a variable each frame and a shape drifts across the canvas; use the built-in mouseX/mouseY and a sketch starts responding to you; add a splash of randomness and it comes alive. That’s the doorway to everything else this site covers — generative art, interactive pieces, the p5.js WebGPU and compute-shader work in our other coverage all rest on these same fundamentals. Start by animating one shape and reacting to the mouse; from there, creative coding is mostly curiosity and iteration.