If Statements (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Whoo hoo! Another animation.

This time we've got a ball
moving across the screen,

and you guys know how this is done.

We've got a variable, "x,"
that tells us the position of the ball,

a variable "speed" that tells us
how far the ball moves every time,

and a familiar draw loop

where we're redrawing
the background every time

setting fill colors and drawing
the ellipse at position x,

and every single time,

we're going to change "x"
to be the old value "x,"

plus the variable "speed."

So if I make "speed" smaller,
you can see it moves slower.

I can make it negative,
so we move backwords,

or I can make it zero,
and the ball would stop moving.

But as long as speed is not zero,

eventually the ball
is going to go off the screen.

And I can always press
the restart button to bring it back,

but you know, after awhile,
that gets old.

You restart, and restart...

So, how about this? When the ball reaches
the right edge of the screen,

instead of going off the edge
of the screen like it's doing now,

I want it to turn around.

And, I know how to turn the ball around,
I can just say, "speed" gets negative 5.

If I make the speed negative,
then the ball would go backwards.

But here is the problem.

I only want to change the speed
if the ball has reached the right edge.

Hmmm... so I think I already said it.

I only want to change the speed,
if the ball has reached the right edge.

I think this calls for an "if" statement.

Up until now, we've only been giving

the computer commands
to run no matter what.

If statements are a way to say,

"Hey dude, I want you to run this code,

but only under these
specific circumstances."

"So only change the speed
if the ball has reached the right edge."

And here's how it looks in code.

All you do is type "IF"

and then a pair of parentheses,
and then a pair of brackets.

Inside the parentheses
we're going to put the condition.

Inside the brackets
we're going to put the code to run.

So the way it works is,
"If this condition is true,

then run this code;
otherwise, don't bother."

So in our case, the condition
is the ball reaching the right edge.

How do we know if the ball
has reached the right edge?

We've got this variable "x"
that tells us where the ball is,

and I know that the edge of the canvas
x position 400, so let's see.

When "x" is greater than 400,

then we know that the ball has gone
past the right edge a little bit.

So let's see how that works.

And the code to run, we already said
before, we're just going to change speed.

Speed gets negative five. We're going
to press restart and see what happens.

So this time, when the ball reaches
the right edge, it bounces! Yaaaay!

And then it keeps going off the screen.

But that's OK, because we can keep doing
the same thing on the other side.

So this time, we want to check
if the ball has reached the left edge.

And that's when x is less than zero,
and what we want to do

is make speed positive again,
so speed gets 5.

Alright, and then we're going
to press restart, and this time...

boing...

boing... boing...

yay! It works.

And I know we're checking to see
if the ball has gone past the edges

but it feels like it's going
a little too far past the edges.

And if you remember,
these two parameters control

where the center of the ellipse is drawn.

So right now, by the time
the center reaches the edge,

half the ellipse has already gone
past the edge.

So if we want to fix that,
we just stop the ellipse a little sooner.

So if our edge is here, at 400 and we want
to stop our ellipse when it gets here,

and we can see from the function
call that the ellipse has width 50,

so that means from the center
to the edge, that's going to be 25.

So we want to stop it
when the center reaches 375,

that's 400 minus 25.

So instead of checking
for x greater than 400,

we're going to check for
x greater than 375.

Instead of checking for x less than 0.

I'll check for x less than 25.

And now it's perfect! Yay!
Look at at that ball bounce.