Draw and animate with JavaScript and p5.js: shapes, movement, decisions, lists, objects and functions, ending in a small game you build yourself.
Each lesson works two ways. Students can work through the online tutorial at their own pace (it checks their answers and saves their progress in their browser), or you can teach it to the whole class from the slides, then send students into the tutorial for the Modify and Make steps.
Every lesson guide has plain-language notes, the answers to every check, a solution for every task, and slides and a worksheet for Waypoints Prepare. These guide pages are not linked from student pages, but they are not secret either: keep printed Teacher editions for answers you do not want students to find.
Whole-course cheat sheet: Open to print (every command, grouped by unit: a handout for the final challenge)
Draw on a canvas, make it move every frame, and make decisions.
p5.js draws on a canvas: a rectangle of pixels where (0, 0) is the top left and y counts down. A sketch has two special functions that p5 runs for you. setup() runs once; draw() runs about 60 times a second, and each run is a frame. Movement is a small change to a variable every frame, drawn again where it now is. if and comparisons let the sketch decide, for example to turn round at an edge or to react to mouseX.
A flick book: each page is a frame and the movement is the tiny change between them. It breaks because a flick book's pages are fixed, while draw() works out each page as it goes.
circle(...).fill(...) below the shape. What happens, and why?draw().y counts down from the top, so a bigger y is lower on the canvas.fill only colours shapes drawn after it.background(...) at the start of draw() clears it each frame.This is turtle drawing and the events lesson in JavaScript: the same loops, variables and decisions, with a different way of saying them.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Lists and loops, objects, and functions of your own.
Three tools for keeping a sketch short. An array is a list: [40, 90, 150], read by place (heights[0] is the first, because counting starts at 0). An object keeps the values of one thing together: { x: 20, y: 30, speed: 2 }, read with a dot (star.speed). A function is code with a name: you define it once and call it as often as you like, giving it values through parameters and getting an answer back with return. A list of objects, a loop over it, and a function that works on one object make the shape of most games.
drawFlower(x, y, size) says what the code is for.A recipe card: the recipe is written once (the definition) and cooked as many times as you like (the calls), with the amounts changed each time (the parameters). It breaks because a recipe is not cooked by writing it; a function does nothing until it is called.
size property to each star.speed is not defined? The speed belongs to the star: write star.speed.i? The counter of a for loop: 0, then 1, then 2, and so on.These are the lists, objects (without classes) and functions of the Python units, in JavaScript. Next: the final challenge puts them all in one game.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Build a click-to-catch game with a score, lives and a restart. One optional lesson makes moving art.
An event function is one p5 calls when something happens: mousePressed() on each click, keyPressed() on each key. The game keeps a list of falling balls (objects). When the player clicks, the event function checks each ball: if dist(mouseX, mouseY, ball.x, ball.y) < 20 the click is close, so the score goes up and the ball restarts. A missed ball costs a life, and at zero lives the game shows GAME OVER until a key starts it again. The optional lesson uses sin, cos and map to make moving patterns.
A doorbell: nothing happens until someone presses it, and then a short piece of code runs. It breaks because the doorbell rings once, while draw() also keeps running between clicks.
< 20 to < 40. Is it easier or harder?lives variable and take one away when a ball falls off the bottom.> where it should be <.This is Catch the turtle in JavaScript, and a first game for the microStudio course. Beyond it: p5.js's own reference, or the DOM course for changing real web pages.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown