1A
Shape Sandbox
Everything on screen lives at a coordinate. (0,0) is the top-left. Bigger x → right. Bigger y → down (yes, down — computers are weird).
Code — copy me into the p5.js editor
Demo — what yours should do
🎯 Challenges: move the sun to the other corner · give the house two windows · add a tree · then delete everything and draw your own scene
1B
The Pulse
A variable is just a number with a name. Change the number every frame and the picture comes alive.
Code — copy me into the p5.js editor
Demo — what yours should do
🎯 Challenges: make it pulse faster · make it grow huge before shrinking · make the colour change with the size (hint: use the size variable inside fill)
1C
Follow Me
One line of maths makes the ball chase your mouse smoothly. Nobody fully understands this line the first time. That's fine.
Code — copy me into the p5.js editor
Demo — move your mouse on it!
🎯 Challenges: set speed to 1 — what happens? · set it to 0.01 · add a second, slower ball that also chases the mouse (copy the pattern!)