WEBVTT 0 00:01.930 --> 00:03.380 Welcome back! 1 00:03.430 --> 00:08.350 In this lecture, I'm going to show you how to animate the ball. 2 00:08.370 --> 00:09.360 Let's get started. 3 00:11.490 --> 00:14.700 I need to track the position of the ball on the board. 4 00:14.700 --> 00:22.880 To do that I'm going to declare two variables like so. px means the X position of the ball, and py means 5 00:22.880 --> 00:25.150 the Y position of the ball. 6 00:25.160 --> 00:27.670 Let me also remove the smiley code from here. 7 00:27.680 --> 00:30.920 I don't need it anymore. Since I have the ball position, 8 00:30.940 --> 00:33.060 let me set its position on the board, 9 00:33.080 --> 00:33.590 like so. 10 00:37.530 --> 00:42.630 As you can see, right now, the ball is in the top left corner of the screen because the zero value of 11 00:42.630 --> 00:44.670 these variables is zero. 12 00:45.680 --> 00:50.550 Okay I want animate the ball so I need to change the x and y positions. 13 00:50.660 --> 00:59.220 As an example, let's increment the x and y positions like so. As you can see, it prints the ball one row 14 00:59.220 --> 01:01.740 below and one column to the right. 15 01:01.740 --> 01:06.370 So, by using these variables, I can control the position of the ball on the board. 16 01:07.190 --> 01:11.290 Now let's go ahead and actually animate the ball. To do that, 17 01:11.360 --> 01:17.660 I need a drawing loop that calculates the next ball position and draws the board to the screen. 18 01:17.660 --> 01:24.620 I want the animation to keep going for 60 seconds and I want to display twenty frames per second. So 19 01:24.620 --> 01:25.760 I'm going to loop like this. 20 01:29.340 --> 01:32.140 Let's put this value into a constant like so. 21 01:38.810 --> 01:41.370 As you can see, there is an indexing error. 22 01:41.390 --> 01:47.700 This happens because the program keeps incrementing the positions. So I cannot just do that. 23 01:47.810 --> 01:50.630 I need a robust handling for the movement of the ball. 24 01:51.700 --> 01:56.310 To do that, I can use a concept from physics called the "velocity". 25 01:56.470 --> 02:03.400 Velocity is a measure of how fast something moves in a particular direction. So it doesn't only about 26 02:03.400 --> 02:04.810 the speed of the ball. 27 02:04.810 --> 02:07.460 It also describes its direction. 28 02:07.460 --> 02:09.620 You will see it as in action in a minute. 29 02:09.670 --> 02:16.990 So let me declare velocities for the X and Y dimensions like so. I initialize them to 1 30 02:17.080 --> 02:21.180 because I want to move the ball one step at a time. Remember, 31 02:21.250 --> 02:25.460 velocity describes the speed and direction at the same time. 32 02:25.570 --> 02:32.620 For example when vx equal to 1, it means that the ball moves to the right one step at a time. 33 02:33.010 --> 02:40.210 Otherwise, if it equals to -1, then it means that the ball moves to the left, again one step at 34 02:40.210 --> 02:40.570 a time. 35 02:41.050 --> 02:47.160 So here, I set the velocities so that the ball will move to the right and downwards. 36 02:47.300 --> 02:53.530 Okay now instead of updating the ball position as in here I'm going to update it by using the velocities 37 02:53.590 --> 02:54.680 like so. 38 02:54.740 --> 02:59.440 So the position of the ball is going to change on each update slightly. 39 02:59.440 --> 03:04.670 The ball needs to bounce back in the opposite direction when it hits to a border. 40 03:04.750 --> 03:11.070 So first, I'm going to check whether the ball hits to the left border, or if it hits to the right border 41 03:11.140 --> 03:12.390 like so. 42 03:12.610 --> 03:19.540 By the way, the ball may move beyond the horizontal edges of the board, and when it does there will be 43 03:19.540 --> 03:20.580 an indexing error. 44 03:21.400 --> 03:28.140 So I need to subtract one from the width like so because the ball's velocity is 1. 45 03:28.420 --> 03:36.630 By doing so, the ball won't be able to go beyond the borders. OK if the ball hits to the left or right 46 03:36.640 --> 03:44.110 border, I'm going to change its direction like so. Remember, the velocity also describes a direction so 47 03:44.110 --> 03:49.620 multiplying the velocity by minus one reverses the direction of the ball. 48 03:49.620 --> 03:52.910 Let me also do the same thing for the vertical position 49 03:52.950 --> 03:53.430 like so. 50 03:58.270 --> 04:00.420 As you can see, there isn't an error. 51 04:00.670 --> 04:05.760 However, each time the program draws the board there are multiple balls. 52 04:06.010 --> 04:09.500 But in my animation there should be only one ball. 53 04:09.580 --> 04:15.610 This happens because the program only sets the ball positions but it never cleans the previous ball. 54 04:16.300 --> 04:18.310 To clear the previous ball, 55 04:18.340 --> 04:20.230 I'm going to copy this loop here, 56 04:23.670 --> 04:24.870 to here. 57 04:24.870 --> 04:29.910 Okay then I'm going to set all the positions of the board to false. 58 04:30.210 --> 04:34.430 So this will practically remove all the balls from the board. 59 04:34.440 --> 04:36.620 Okay let's try it again. 60 04:36.840 --> 04:39.540 Now it works okay but it's too fast. 61 04:41.500 --> 04:42.940 Let's slow it down a little 62 04:42.970 --> 04:49.160 like so. So it will draw the board 20 times per second. 63 04:49.220 --> 04:57.860 Then also move the duration to a constant like so. So I can control it afterward easily. I think it's 64 04:57.860 --> 04:58.860 getting better. 65 04:59.000 --> 05:03.340 However, it still prints a lot of boards instead of only one board. 66 05:03.410 --> 05:06.220 I mean, the program doesn't actually animate the board. 67 05:06.230 --> 05:09.110 Instead it prints a board after a board. 68 05:09.110 --> 05:16.190 However, what I want is a smooth animation, and I need to print the board in the same position, to do that. 69 05:16.280 --> 05:20.780 So the program needs to clear the screen every time it draws the board. 70 05:20.900 --> 05:27.560 To do that, I'm going to use my screen package's MoveTopLeft function like so. This function positions 71 05:27.560 --> 05:34.040 the cursor to the top left corner of the screen, so that the program always draws the board to the same 72 05:34.040 --> 05:35.840 position on the screen. 73 05:35.840 --> 05:41.990 If you don't know how to use it, as I said before, please watch the retro led clock section. In there 74 05:41.990 --> 05:43.600 I've explained this in detail. 75 05:47.430 --> 05:47.950 Cool! 76 05:48.000 --> 05:50.070 Now it's almost perfect. 77 05:50.070 --> 05:53.400 However, there is still one little thing left to do. 78 05:53.430 --> 06:00.330 Let's say you run the program like this. As you can see, it starts drawing on top of the existing characters. 79 06:00.330 --> 06:07.980 I can prevent that by clearing the screen using the Clear function of the screen package like so. 80 06:08.020 --> 06:13.480 Now it looks awesome. I think you have learned a lot of cool things along the road. 81 06:13.480 --> 06:18.290 Now you know how to use a slice as a buffer, and how to reuse it, and so on. 82 06:18.290 --> 06:18.800 All right. 83 06:18.850 --> 06:19.710 That's all for now. 84 06:19.810 --> 06:21.040 See you in the next lecture, bye bye!