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.