LESSON 1 ยท p5.js

Make the computer
do stuff

Every box below is a tiny program you can break, fix and remix. Change a number in the code, hit Run, and watch what happens. That's coding.

01

Bouncy Ball

A ball, a speed, and one rule: if you hit a wall, turn around. This is what variables are for.

Code โ€” edit me
Result
๐ŸŽฏ Challenges: make the ball faster ยท make it bigger ยท change its colour ยท make it start in a corner
02

Paint With Your Mouse

The computer always knows where your mouse is. mouseX and mouseY are how you ask it.

Code โ€” edit me
Result โ€” move your mouse on it!
๐ŸŽฏ Challenges: make the brush huge ยท paint in one colour only ยท uncomment the top line in draw() and see what changes
03

Confetti Clicker

Click the canvas and it explodes. Under the hood: a list (array) of tiny pieces of confetti, each with its own speed.

Code โ€” edit me
Result โ€” click on it!
๐ŸŽฏ Challenges: more confetti per click ยท stronger gravity ยท make it fall like snow instead (hint: tiny gravity, spawn at the top)
04

Blank Canvas

Your turn. No instructions. The cheat-sheet is in the comments โ€” draw literally anything.

Code โ€” edit me
Result
๐ŸŽฏ Challenge: draw a face. Any face. Ugly faces score double points.