p5 calls draw() about 60 times a second. A variable that changes a little each time makes a shape move.
An animation is a picture redrawn very quickly, a tiny bit different each time. p5 does the redrawing for you.
Last lesson's sketch drew once. function draw() { ... } is different: p5 runs it again and again, about 60 times a second, for as long as the sketch runs. Each pass is a frame.
Two parts make movement:
let x = 0; makes one called x. It goes at the top of the sketch, outside every function, so every frame can see it.draw() changes it a little and draws with it: x = x + 2; means "make x two bigger".background(...) at the start of draw() paints over the last frame, so only the newest picture shows.
Make your prediction first. Help opens once you've locked it in.
let x = 0;
function setup() {
createCanvas(300, 200);
}
function draw() {
background(20, 30, 60);
circle(x, 100, 40);
x = x + 2;
}
You never call draw(). Who does, and how often?
The number in the corner is x. Press Run again to start from the beginning. Change x + 2 to x + 5, then run it again.
let x = 0;
function setup() {
createCanvas(300, 200);
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
circle(x, 100, 40);
fill(255);
text(x, 10, 20);
x = x + 2;
}
let x = 0;
function setup() {
createCanvas(300, 200);
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
circle(x, 100, 40);
fill(255);
text(x, 10, 20);
x = x + 2;
}
Follow x for four frames.
Why is there a background in draw?
A circle that stays still.
x starts at 0. Fill in where the circle is drawn, and what x is after each frame.
| frame | circle drawn at x | x after the frame |
|---|---|---|
| 1 | 0 | 2 |
| 2 | ||
| 3 | ||
| 4 |
The circle never moves, however long you wait. Click the line that is wrong.
Make the circle fall down the canvas instead of sliding across.
Use a different variable for the other direction. y counts down.
Make let y = 0; at the top, draw circle(150, y, 40), and add 2 to y each frame.
Add a second circle that moves at a different speed.
A second shape needs its own variable, made at the top and changed in draw().
Give it a different step, for example y = y + 4, so it moves faster, and a different place to start.
Make at least two things move in different ways: one faster than the other, one going the other direction, one growing. The sketch gives you t, a number that goes up by 1 every frame. circle(t, ...) slides, circle(300 - t, ...) slides the other way, and circle(150, 100, t) grows. A % operator is the remainder: t % 300 goes from 0 up to 299, then starts again.
You have a loop that runs 60 times a second and numbers that change. Next: make the sketch decide, so a circle can bounce.
Students meet draw() (about 60 times a second) and variables that keep their value between frames, follow a circle's x frame by frame, see why background belongs in draw, fix a variable made inside draw, then move things down and at different speeds. About 50 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Read the unit primer first. The big idea is that draw() runs by itself, again and again; students never call it. A variable made at the top (outside functions) keeps its value between frames, and x = x + 2 reads as "make x two bigger", not as a maths equation. Students who did Python Foundations will recognise x = x + 1 from the variables lesson; the new part is that the loop is built in. The let in the bug task is the classic mistake: a variable made inside draw() starts again every frame. % (remainder) appears only in the Make step's text. The playground's number in the corner is text(x, 10, 20).
Seeing that draw() repeats, so a variable made inside it starts again. The trace table and the let-in-draw bug are for that.
Stretch: Make a circle that moves in both directions at once (x and y), or one that grows and shrinks.
Support: Give students the sketch with let y = 0; already made, and ask for the draw() changes only.
Next lesson: if, so circles can bounce, and the mouse.