Beginner Guide to p5.js Doodles
With just setup() and draw(), p5.js turns a blank canvas into playful motion. The gentlest on-ramp, one shape at a time.
setup and draw, that's the whole engine
p5.js gives you two functions and asks almost nothing else. setup() runs once and makes your canvas. draw() runs forever, about sixty times a second, and paints whatever you put inside it.
That loop is the heartbeat. Anything you want to move, you move by changing a number each time draw() runs.
function setup() {
createCanvas(200, 200);
}
function draw() {
background("#E6EFFF");
circle(100, 100, 40);
}
Shapes are friendlier than they look
circle, rect, ellipse, line — each is one function call with a few numbers. No DOM, no CSS classes, no border-radius arithmetic. You describe a shape, it appears.
Because there's no markup to manage, sketching in p5 feels closer to doodling on paper than to writing a component. You can try ten variations in the time one CSS version takes.
Random is your sketchbook pencil
A tiny bit of randomness — a wiggle in a position, a jitter in a color — turns a stiff shape into a doodle. random() is the function that makes p5 feel hand-drawn instead of mechanical.
It's a gateway, not a dead end
p5 skills transfer. The mental model of a draw loop, of shapes as function calls, of motion as changing numbers — all of it shows up again in canvas, in shaders, anywhere you paint pixels directly.
More from the blog
Keep reading
CSS Art for Beginners: How to Think in Shapes
Before you write a single property, see your drawing as circles, ovals, and rounded rectangles stacked together. Once the shapes click, the CSS almost writes itself.
How to Build a Tiny Canvas Scene
A canvas element and a few lines of drawing code can hold a whole little world. We build it one shape at a time.
Pixel Art Basics for Front-End Developers
You already know grids and hex codes. Pixel art is just those, drawn one square at a time — no art degree needed.
Hands on
Want to try the idea?
Pick a spot to sketch it out — nothing you make here is permanent.