Deciding what to do

Use if and else to bounce a circle off the edges, change its colour, and follow the mouse.

Games are full of questions asked 60 times a second: has the ball hit the wall? Is the mouse on the button?

An if runs some code only when a question is true:

if (x > 300) {
  speed = -speed;
}

The question goes in ( ), and the code that runs goes in { }. else is the code for when the answer is no. The questions compare things: > bigger than, < smaller than, === equal to. Two more join questions: || means or and && means and.

The hard part: one = sets a variable (x = 300 makes x 300). Three === asks whether two things are equal. Mixing them up is the most common slip in this lesson.

p5 also keeps the mouse for you: mouseX and mouseY are always where the pointer is on the canvas.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

sketch.js

let x = 150;
let speed = 3;

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

function draw() {
  background(20, 30, 60);
  circle(x, 100, 40);
  x = x + speed;
  if (x > 300) {
    speed = -speed;
  }
}

Only the right edge is checked. What happens at the left edge?

What does the circle do when it reaches the right edge, x > 300?It turns round and moves left, and keeps going left past the other edgeIt bounces back and forth between the edges for everIt stops at the edgeIt slides off the canvas, as before

RunRun it and compare the result with your prediction.

Run

This one checks both edges with ||, and uses if and else to change the colour. Change speed = 3 to a different number and run it again.

sketch.js

let x = 150;
let speed = 3;

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

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

Try it yourselfYour edits are saved in this browser.

I can see the circle bounce at both edges, and change colour as it turns.

InvestigateTrace how each line of code connects to what you see.

Investigate

sketch.js

let x = 150;
let speed = 3;

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

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

Match code with meaning.

How does a negative speed work?

An if that does something strange.

Match each piece of code with what it means.

x > 300 || x < 0

speed = -speed;

if (speed > 0) { ... } else { ... }

x = x + speed;

Why does the circle turn round when speed = -speed runs?3 becomes -3, so x goes down instead of upThe circle is deleted and made againp5 flips the canvasspeed becomes zero

The circle jumps to x = 300 and acts strangely at the edge. Click the line that is wrong.

ModifyChange the code on purpose and check the result.

Modify

Colour the circle by where the mouse is: one colour on the left half of the canvas, another on the right.

Need a hint?

Replace the colour question with one about the mouse: is mouseX bigger than 150?

Another hint

if (mouseX > 150) { fill(255, 120, 160); } else { fill(120, 220, 255); }

Make the circle move up and down as well, and bounce off the top and the bottom.

Need a hint?

Move up and down needs its own variables, like x and speed.

Another hint

Make y and dy, add dy to y each frame, and turn dy round at the top and the bottom.

Try it yourselfYour edits are saved in this browser.

Colour the circle by where the mouse is: one colour on the left half, another on the right.

Run your program. This ticks when your code does all of the above.

My circle bounces off all four edges.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

Bounce and catch

Make a mini bouncing game. The sketch gives you a ball that moves. Add: bounces off the left, right and top walls; a paddle along the bottom that follows mouseX; and the ball bouncing off the paddle. When the ball falls past the bottom, put it back at the top.

Try it yourselfYour edits are saved in this browser.

My ball bounces off the walls, and my paddle follows the mouse and sends the ball back.

Info

Where this leads

Decisions are what turn drawing into a game. Next: lists and loops, so one piece of code can handle a whole row of things.

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 oneOnly bounce one ballUse a bigger canvasCopy the code 20 times

For teachers

Students use if and else to bounce a circle off the edges and change its colour, learn the difference between = (set) and === (ask), use mouseX in a condition, and build a bouncing ball with a paddle that follows the mouse. About 55 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

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.

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

Predict: draw the canvas and the path of the circle on the board with the right edge crossed.
Run: ask what else changes when the circle turns round (the colour).
Investigate: for the bug, ask which line SETS a number and which line ASKS about one.
Modify: each student tests with the mouse on both halves before ticking.
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

The circle sticks at an edge or jumps. Ask: Is the if using one = or three ===? Fix: Use > or < to ask about the edge. A single = sets the variable.
A red line: Unexpected token. Ask: Does each if have its ( ) and its { }, and does each { have a }? Fix: Count the brackets and braces on the line the hint names.
The ball passes through the paddle. Ask: Is the check on the ball's x and its y, and is dy turned round? Fix: Check ballY is near the paddle's row and ballX is between its edges, then dy = -dy.
Nothing happens when the mouse moves. Ask: Did you click the sketch first, and is mouseX used in draw()? Fix: mouseX only changes while the pointer is over the canvas.

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.

Where it leads

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

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.

Now you can

Use if and else to change what happens in a sketch.
Compare values with >, < and ===, and join questions with || and &&.
Make a shape bounce and follow the mouse.

Next lesson4. Lists and loopsKeep many numbers in an array, draw one thing for each with a loop, and build the array with random numbers.

Source: content/code/p5/p5-decide/lesson.md