Deciding what to do

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 use if and else to change what happens in a sketch.
• I can compare values with >, < and ===, and join questions with || and &&.
• I can make a shape bounce and follow the mouse.

Timing

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

Before class

Read the unit primer first. This lesson revisits the turtle course's decisions lesson in JavaScript: the same idea, new spellings (if (x > 300) { ... } with brackets and braces; || and && for or and and). The hard part is = versus ===: one sets, three asks. The bug task is that slip. speed = -speed turns a direction round and is the engine of every bounce. Students often write x === 300 for the edge, which can be jumped over by a step bigger than 1; the lesson suggests > and <. The Make step is a small Pong: the paddle's collision check is the hardest line, so offer the finished sol-make idea only after students have tried the first three parts.

Running the lesson

1. Predict: draw the canvas and the path of the circle on the board with the right edge crossed.
2. Run: ask what else changes when the circle turns round (the colour).
3. Investigate: for the bug, ask which line SETS a number and which line ASKS about one.
4. Modify: each student tests with the mouse on both halves before ticking.
5. Make: build in four steps: walls, paddle, bounce off paddle, reset at the bottom.

The hard part (on purpose)

= versus === in an if, and the long condition for the paddle. Read conditions aloud in words before typing them.

When students get stuck

Answers to the checks

1. Predict: What does the circle do when it reaches the right edge, x > 300?
   It turns round and moves left, and keeps going. speed becomes -3, so x goes down, but nothing checks the left edge, so it slides off the left side. That needs a second check.
2. What does it mean?: Match each piece of code with what it means.
   x > 300 || x < 0 → A. x is past the right edge or past the left edge; speed = -speed; → D. turn round: the opposite direction; if (speed > 0) { ... } else { ... } → B. one colour when moving right, another when not; x = x + speed; → C. move by the speed, which can be negative
3. Turning round: Why does the circle turn round when speed = -speed runs?
   3 becomes -3, so x goes down instead of up
   A negative speed is added to x, so x gets smaller and the circle moves left. Running speed = -speed again makes it positive and it moves right.
4. Spot the bug: The circle jumps to x = 300 and acts strangely at the edge. Click the line that is wrong.
   line 12
   if (x = 300) sets x to 300, rather than asking whether it is. To ask, use three equals: x === 300. Comparing with > is often better for movement, because a step can jump over an exact number.
5. Where this leads: A game has 20 balls. How would you write the bounce for each, without 20 copies of the same code?
   A list of balls and a loop that checks each one
   Copying code 20 times is slow and every fix has to be made 20 times. A list holds all the balls and a loop does the same thing for each of them: the next lesson.

Solutions

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

Modify › Mouse colour

let x = 150;
let speed = 3;

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(20, 30, 60);
  if (mouseX > 150) {
    fill(255, 120, 160);
  } else {
    fill(120, 220, 255);
  }
  circle(x, 100, 40);
  x = x + speed;
  if (x > 300 || x < 0) {
    speed = -speed;
  }
}

Modify › All four edges

let x = 150;
let y = 100;
let dx = 3;
let dy = 2;

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(20, 30, 60);
  fill(255, 210, 0);
  circle(x, y, 40);
  x = x + dx;
  y = y + dy;
  if (x > 300 || x < 0) {
    dx = -dx;
  }
  if (y > 200 || y < 0) {
    dy = -dy;
  }
}

bounce and catch

let ballX = 150;
let ballY = 60;
let dx = 3;
let dy = 3;

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(20, 30, 60);
  fill(255, 210, 0);
  circle(ballX, ballY, 20);
  fill(120, 220, 255);
  rect(mouseX - 30, 185, 60, 8);
  ballX = ballX + dx;
  ballY = ballY + dy;
  if (ballX > 300 || ballX < 0) {
    dx = -dx;
  }
  if (ballY < 0) {
    dy = -dy;
  }
  if (ballY > 175 && dy > 0 && ballX > mouseX - 30 && ballX < mouseX + 30) {
    dy = -dy;
  }
  if (ballY > 200) {
    ballY = 0;
  }
}

Stretch and support

Stretch: Add a score that goes up on each paddle hit, and make the ball a little faster each time.

Support: Give students the wall checks written and ask only for the paddle.

Exit ticket

What is the difference between = and === ?

One = sets a variable to a value; three === asks whether two values are equal.

What each step is for

• Investigate: An if asks a question every frame; speed = -speed flips the direction, and one = sets while === compares.
• Modify: A condition can be about the mouse as well as the circle; two variables of speed let a shape bounce in both directions.
• bounce and catch: Goals only: a ball bounces off three walls, and a paddle that follows the mouse sends it back.

Where it leads

Next lesson: lists and loops, so one piece of code handles many things.