Objects and stars

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can make an object with properties and read one with a dot.
• I can keep many objects in an array and visit each with a for-of loop.
• I can add my own property to an object.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 20 min

Before class

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.

Running the lesson

1. Predict: write the object on the board and cross out the old y when it changes.
2. Run: ask where in the code each star's speed lives.
3. Investigate: for the bug, ask 'whose speed is it?' and point at the star.
4. Modify: students ask each other what a size property changes, then test.
5. Make: choose a second kind of thing and list its properties before writing code.

The hard part (on purpose)

The dot: star.speed, not speed. Say it as 'this star's speed'.

When students get stuck

Answers to the checks

1. Predict: What does console.log(star.y) show?
   32. star.y starts at 30, then star.y = star.y + star.speed adds 2, so it is 32 when it is printed. console.log writes to the Output box under the sketch.
2. What does each line do?: Match each line with what it does.
   stars.push({ x: 25, y: 10, speed: 2 }); → C. adds a new star object to the list; for (let star of stars) { → B. does the code in the braces for each star in turn; star.y = star.y + star.speed; → A. moves this star down by its own speed; circle(star.x, star.y, 12); → D. draws this star where it is now
3. Their own speeds: Why does each star fall at its own speed?
   Each star object has its own speed property
   speed is stored inside each object. star.speed in the loop reads the speed of whichever star the loop is on, so six stars means six speeds.
4. Spot the bug: This stops with an error: speed is not defined. Click the line that causes it.
   line 15
   There is no variable called speed. The speed belongs to the star, so it is star.speed.
5. Where this leads: You want to write the code that restarts a star at the top in one place and use it for stars, clouds and bubbles. What do you need?
   A function that takes the thing to restart
   A function is code you name once and use many times. Next lesson: make your own functions and give them parameters.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Twelve stars

let stars = [];

function setup() {
  createCanvas(300, 200);
  for (let i = 0; i < 12; i++) {
    stars.push({ x: 15 + i * 24, 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;
    }
  }
}

Modify › Their own size

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), size: random(6, 18) });
  }
}

function draw() {
  background(20, 30, 60);
  fill(255, 210, 0);
  for (let star of stars) {
    circle(star.x, star.y, star.size);
    star.y = star.y + star.speed;
    if (star.y > 210) {
      star.y = -10;
    }
  }
}

another list

let stars = [];
let clouds = [];

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) });
  }
  for (let i = 0; i < 3; i++) {
    clouds.push({ x: random(300), y: 30 + i * 50, speed: random(0.3, 1) });
  }
}

function draw() {
  background(20, 30, 60);
  fill(200, 200, 220);
  for (let cloud of clouds) {
    ellipse(cloud.x, cloud.y, 60, 20);
    cloud.x = cloud.x + cloud.speed;
    if (cloud.x > 330) {
      cloud.x = -30;
    }
  }
  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;
    }
  }
}

Stretch and support

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.

Exit ticket

What does star.speed mean inside the loop?

The speed property of the star the loop is currently on.

What each step is for

• Investigate: An object keeps one thing's values together; a for-of loop visits each object, and star.speed is that star's own value.
• Modify: A new property gives each object another value of its own; the loop can use it with the dot.
• another list: Goals only: a second list of objects with its own properties, moved and drawn in its own loop.

Where it leads

Next lesson: functions with parameters, so restarting a star, or drawing a flower, is code with a name.