2A
Traffic Light
An if-statement is a decision: "IF this is true, do that." Click the canvas to cycle the light.
Code — copy me into the p5.js editor
Demo — click on it!
🎯 Challenges: add a 4th secret colour · make it go backwards · draw all three lights at once with only the current one bright
2B
Arrow Key Hero
Four if-statements = full movement. This is genuinely how characters move in real games. Click the canvas first so it hears your keyboard!
Code — copy me into the p5.js editor
Demo — click it, then use arrow keys
🎯 Challenges: make the hero faster · stop it leaving the screen (hint: you know if-statements now…) · add a coin at a random spot — can you tell when the hero touches it?
2C
Pattern Machine
A loop means "do this again and again". Two loops together fill the whole screen. Writing 70 circles by hand? No thanks.
Code — copy me into the p5.js editor
Demo — what yours should do
🎯 Challenges: tighter spacing · squares instead of circles · delete the noLoop() line — instant disco · make the size depend on x (hint: circle(x, y, x/10))
The Terminal 🖥️
It's just another way to talk to your computer — with words instead of clicks. Your files are folders inside folders; the terminal is you walking through them.
pwd # "where am I right now?"
ls # "what's in this folder?"
cd projects # "go into the projects folder"
cd .. # "go back up one level"
mkdir my-game # "make a new folder called my-game"
💡 Press Tab and the terminal finishes typing names for you. Press ↑ to repeat your last command. Real engineers use these two keys constantly — lazy typing is professional typing.