Keep everything about one star (its place and its speed) together in an object, and move a whole list of them.
A falling star has a place, a speed and a size. An object keeps them together, so a hundred stars are a hundred objects, not three hundred loose numbers.
An object holds named values together: { x: 20, y: 30, speed: 2 }. Each name is a property, read with a dot: star.y is that star's y. You change one the same way: star.y = star.y + star.speed;.
A list of objects is a list of things, each with its own values: stars. The loop to visit each one is the easiest kind:
for (let star of stars) {
// star is each object in turn
}
Read it as "for each star in stars". It does not need a counter at all.
The hard part is the dot. Inside the loop, speed on its own means nothing: it is star.speed that is this star's speed. The error message "speed is not defined" is the clue.
Make your prediction first. Help opens once you've locked it in.
function setup() {
let star = { x: 20, y: 30, speed: 2 };
star.y = star.y + star.speed;
console.log(star.y);
}
Work out star.y line by line.
Each star is an object with its own x, y and speed. draw() visits every star in the list, draws it, moves it, and sends it back to the top if it has fallen off the bottom. Press Run again and watch how the speeds differ.
let stars = [];
function setup() {
createCanvas(300, 200);
for (let i = 0; i < 6; i++) {
stars.push({ x: 25 + i * 50, y: random(200), speed: random(1, 3) });
}
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
for (let star of stars) {
circle(star.x, star.y, 12);
star.y = star.y + star.speed;
if (star.y > 210) {
star.y = -10;
}
}
}
let stars = [];
function setup() {
createCanvas(300, 200);
for (let i = 0; i < 6; i++) {
stars.push({ x: 25 + i * 50, y: random(200), speed: random(1, 3) });
}
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
for (let star of stars) {
circle(star.x, star.y, 12);
star.y = star.y + star.speed;
if (star.y > 210) {
star.y = -10;
}
}
}
Match code with meaning.
Where each speed lives.
A name that p5 does not know.
Match each line with what it does.
This stops with an error: speed is not defined. Click the line that causes it.
Make 12 stars, spread across the canvas.
Two numbers in setup() decide how many stars there are and where they start.
Change 6 to 12 in the loop, and change the 50 so they spread across the 300 pixels.
Give each star its own size.
A property is added where the star is made, and read where it is drawn.
Add size: random(6, 18) to the object in push, and use star.size in circle.
Give each star its own size.
Run your program. This ticks when your code does all of the above.
Add a second kind of thing with its own list and its own loop: clouds that drift sideways, snowflakes that wobble, bubbles that rise. Make each object with the properties it needs, push them in setup(), and move and draw them with a for (let ... of ...) loop in draw(). Draw the clouds before the stars so the stars are on top.
You can now hold many things, each with its own values. Next: functions, so a piece of code has a name and you can use it again.
Students keep one star's place and speed in an object, read and change properties with a dot, make a list of objects with push and random, move them with a for-of loop, find a speed missing its star., and add a property and a second list of their own. About 55 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Read the unit primer first. This is the Python Objects with turtles unit in JavaScript, without classes: one object per thing, a list of objects, a loop. { x: 20, y: 30 } is an object; star.y reads and changes a property. for (let star of stars) is the easy loop: no counter, and star is the object itself, so star.y = ... changes the real star. The classic slip is writing speed instead of star.speed; the playground's hint for "x is not defined" suggests spelling, so say the dot aloud when you meet it. The Predict uses console.log so students compare a printed number: the Output box sits under the sketch. This lesson uses random and push from the last one without re-teaching them.
The dot: star.speed, not speed. Say it as 'this star's speed'.
Stretch: Make the stars twinkle by changing their size a little every frame, or give each one a colour property chosen with random.
Support: Give students the cloud objects and loop already written, and ask only for the stars' size property.
Next lesson: functions with parameters, so restarting a star, or drawing a flower, is code with a name.