WEBVTT 00:00:02.751 --> 00:00:03.876 Whoo hoo! Another animation. 00:00:03.877 --> 00:00:06.377 This time we've got a ball moving across the screen, 00:00:06.378 --> 00:00:09.500 and you guys know how this is done. 00:00:09.501 --> 00:00:11.127 We've got a variable, "x," that tells us the position of the ball, 00:00:11.128 --> 00:00:14.124 a variable "speed" that tells us how far the ball moves every time, 00:00:14.125 --> 00:00:15.125 and a familiar draw loop 00:00:15.126 --> 00:00:17.417 where we're redrawing the background every time 00:00:17.417 --> 00:00:23.208 setting fill colors and drawing the ellipse at position x, 00:00:23.209 --> 00:00:24.209 and every single time, 00:00:24.210 --> 00:00:26.178 we're going to change "x" to be the old value "x," 00:00:26.178 --> 00:00:29.533 plus the variable "speed." 00:00:29.542 --> 00:00:33.876 So if I make "speed" smaller, you can see it moves slower. 00:00:33.876 --> 00:00:39.041 I can make it negative, so we move backwords, 00:00:39.042 --> 00:00:39.049 or I can make it zero, and the ball would stop moving. 00:00:39.050 --> 00:00:40.459 But as long as speed is not zero, 00:00:40.501 --> 00:00:43.833 eventually the ball is going to go off the screen. 00:00:43.834 --> 00:00:46.204 And I can always press the restart button to bring it back, 00:00:46.204 --> 00:00:48.168 but you know, after awhile, that gets old. 00:00:48.365 --> 00:00:52.696 You restart, and restart... 00:00:52.709 --> 00:00:55.751 So, how about this? When the ball reaches the right edge of the screen, 00:00:55.751 --> 00:00:58.785 instead of going off the edge of the screen like it's doing now, 00:00:58.785 --> 00:01:00.495 I want it to turn around. 00:01:00.495 --> 00:01:04.525 And, I know how to turn the ball around, I can just say, "speed" gets negative 5. 00:01:04.525 --> 00:01:10.335 If I make the speed negative, then the ball would go backwards. 00:01:10.448 --> 00:01:12.857 But here is the problem. 00:01:12.876 --> 00:01:18.249 I only want to change the speed if the ball has reached the right edge. 00:01:18.250 --> 00:01:20.751 Hmmm... so I think I already said it. 00:01:20.751 --> 00:01:25.918 I only want to change the speed, if the ball has reached the right edge. 00:01:25.919 --> 00:01:29.625 I think this calls for an "if" statement. 00:01:29.626 --> 00:01:31.208 Up until now, we've only been giving 00:01:31.209 --> 00:01:32.976 the computer commands to run no matter what. 00:01:32.976 --> 00:01:34.585 If statements are a way to say, 00:01:34.586 --> 00:01:37.085 "Hey dude, I want you to run this code, 00:01:37.086 --> 00:01:39.542 but only under these specific circumstances." 00:01:39.542 --> 00:01:42.542 "So only change the speed if the ball has reached the right edge." 00:01:42.543 --> 00:01:45.857 And here's how it looks in code. 00:01:45.876 --> 00:01:47.210 All you do is type "IF" 00:01:47.211 --> 00:01:50.960 and then a pair of parentheses, and then a pair of brackets. 00:01:50.961 --> 00:01:54.334 Inside the parentheses we're going to put the condition. 00:01:54.335 --> 00:01:57.085 Inside the brackets we're going to put the code to run. 00:01:57.086 --> 00:02:00.082 So the way it works is, "If this condition is true, 00:02:00.083 --> 00:02:03.001 then run this code; otherwise, don't bother." 00:02:03.002 --> 00:02:06.542 So in our case, the condition is the ball reaching the right edge. 00:02:06.543 --> 00:02:10.374 How do we know if the ball has reached the right edge? 00:02:10.375 --> 00:02:16.417 We've got this variable "x" that tells us where the ball is, 00:02:16.417 --> 00:02:22.958 and I know that the edge of the canvas x position 400, so let's see. 00:02:22.959 --> 00:02:25.082 When "x" is greater than 400, 00:02:25.083 --> 00:02:30.458 then we know that the ball has gone past the right edge a little bit. 00:02:30.459 --> 00:02:33.036 So let's see how that works. 00:02:33.042 --> 00:02:38.985 And the code to run, we already said before, we're just going to change speed. 00:02:38.986 --> 00:02:45.291 Speed gets negative five. We're going to press restart and see what happens. 00:02:45.292 --> 00:02:48.144 So this time, when the ball reaches the right edge, it bounces! Yaaaay! 00:02:48.163 --> 00:02:50.541 And then it keeps going off the screen. 00:02:50.542 --> 00:02:51.625 But that's OK, because we can keep doing the same thing on the other side. 00:02:51.667 --> 00:02:52.667 So this time, we want to check if the ball has reached the left edge. 00:02:52.668 --> 00:02:57.959 And that's when x is less than zero, and what we want to do 00:02:57.959 --> 00:03:03.041 is make speed positive again, so speed gets 5. 00:03:03.042 --> 00:03:08.084 Alright, and then we're going to press restart, and this time... 00:03:08.125 --> 00:03:11.708 boing... 00:03:11.709 --> 00:03:14.418 boing... boing... 00:03:14.499 --> 00:03:16.666 yay! It works. 00:03:16.667 --> 00:03:18.917 And I know we're checking to see if the ball has gone past the edges 00:03:18.959 --> 00:03:21.418 but it feels like it's going a little too far past the edges. 00:03:21.626 --> 00:03:23.668 And if you remember, these two parameters control 00:03:23.669 --> 00:03:25.335 where the center of the ellipse is drawn. 00:03:25.542 --> 00:03:31.500 So right now, by the time the center reaches the edge, 00:03:31.501 --> 00:03:36.917 half the ellipse has already gone past the edge. 00:03:36.918 --> 00:03:42.082 So if we want to fix that, we just stop the ellipse a little sooner. 00:03:42.083 --> 00:03:47.333 So if our edge is here, at 400 and we want to stop our ellipse when it gets here, 00:03:47.334 --> 00:03:53.124 and we can see from the function call that the ellipse has width 50, 00:03:53.125 --> 00:03:58.626 so that means from the center to the edge, that's going to be 25. 00:03:58.626 --> 00:04:04.625 So we want to stop it when the center reaches 375, 00:04:04.626 --> 00:04:06.875 that's 400 minus 25. 00:04:06.876 --> 00:04:08.997 So instead of checking for x greater than 400, 00:04:08.998 --> 00:04:10.969 we're going to check for x greater than 375. 00:04:10.970 --> 00:04:13.293 Instead of checking for x less than 0. 00:04:13.294 --> 00:04:15.542 I'll check for x less than 25. 00:04:15.584 --> 00:04:19.584 And now it's perfect! Yay! Look at at that ball bounce.