Code Art with p5.js — Beginner Guide

Lesson 1 Setting up your canvas

p5.js gives the computer a magic paintbrush! Every sketch has two special functions. Type in the editor below and press Run ▶ to see it come alive!

💻 Live Editor p5.js

1

OUTPUT

setup()Runs once. Create your canvas here — like preparing your art paper.

draw()Runs forever, 60 times per second! Like the computer redrawing your picture constantly.

background(r,g,b)Fills the background. Numbers 0–255. Try (255,0,0) for red or (0,0,255) for blue!

🌈 Try it! Change the numbers in background() in the editor. Try (255, 200, 50) for golden yellow, (100, 0, 180) for purple, or (0, 150, 200) for ocean blue. Press Run each time!

Lesson 2 Drawing shapes

The screen is a grid of pixels. X goes left→right, Y goes top→bottom. Top-left is (0,0). Try adding or changing shapes in the editor!

💻 Live Editor p5.js

1

OUTPUT

circle(x,y,d)Circle at x,y with diameter d.

rect(x,y,w,h)Rectangle at x,y with width and height.

triangle(x1,y1,x2,y2,x3,y3)Triangle with three corner points.

fill(r,g,b)Sets colour for the NEXT shape. Always call before drawing!

🏠 Challenge! Add a window using rect(), or a path using line(x1,y1,x2,y2). Try adding fill(100,200,100) then rect(0,190,400,50) for green grass at the bottom!

Lesson 3 Variables — named boxes for numbers

A variable is a labelled box for a number. Name it once at the top, use it anywhere, change it in one place — and everything updates! Try changing sunX or speed in the editor.

💻 Live Editor p5.js

1

OUTPUT

let sunX = 60;Creates a box called sunX and puts 60 in it.

sunX = sunX + 2;Read the box, add 2, put the answer back. This moves the sun!

speedChange ONE variable and the whole sketch changes. That's the power of variables!

🌞 Challenge! Change speed from 2 to 5 — is the sun faster? Try speed = -2 to make it go the other way! Then add sunY = sunY + 1 to make it move diagonally.

Lesson 4 Functions — your own commands

A function is a recipe. Write the steps once, give it a name, call it with different ingredients (parameters) each time. Try calling drawCloud() a 4th time!

💻 Live Editor p5.js

1

OUTPUT

function name(p1,p2)Define a function. p1, p2 are ingredient slots called parameters.

drawCloud(50,60,140)Call it! 50=x, 60=y, 140=size. Run all the recipe steps instantly.

Reuse!Write once, use many times. Change the function and ALL clouds update!

Quick check: in function greet(name) — what is name called?

Lesson 5 Loops — don't repeat yourself!

A for loop lets you write code ONCE and repeat it automatically. The variable i counts for you. Try changing the loop limit from 8 to 20!

💻 Live Editor p5.js

1

OUTPUT

let i = 0Start: i begins at 0.

i < 8Keep going while i is less than 8. Change 8 to make more!

i++Add 1 to i after each loop. i counts: 0, 1, 2, 3...

i * 40Spreads things out: i=0→0, i=1→40, i=2→80...

🌟 Challenge! Change i < 8 to i < 20 and i * 40 to i * 18. Then try making sizes grow: circle(x, 80, i*8+10). The nested loop below makes a colour grid!

Lesson 6 Animation — making things move!

draw() loops forever — move a shape a tiny bit each frame and it animates! if statements make the ball bounce. Try adding a second ball!

💻 Live Editor p5.js

1

OUTPUT

if (ballX > width)Asks: is the ball past the right edge? If yes, flip the speed!

speedX = -speedXIf speedX was +3 (right), it becomes -3 (left). Direction reversed!

width / heightp5.js gives you these for free — they hold the canvas size.

🎮 Mega Challenge — Two Balls! Add these after the existing variables:
let bX2=50, bY2=80, spX2=-2, spY2=3;
Then move, bounce, and draw a second circle with fill(50,200,255). You've built a game engine!

🎯 What you've learned

✅ Setting up a canvas

✅ Drawing shapes

✅ Variables (named boxes)

✅ Functions (your recipes)

✅ For loops (don't repeat!)

✅ Animation + if statements

🕹️ Next: Add mouseX/mouseY to control things with your mouse
🌸 Use random() inside loops to make generative art
📖 Full reference: p5js.org/reference | thecodingtrain.com