Welcome back!
In this lecture, I'm going to show you how to animate the ball.
Let's get started.
I need to track the position of the ball on the board.
To do that I'm going to declare two variables like so. px means the X position of the ball, and py means
the Y position of the ball.
Let me also remove the smiley code from here.
I don't need it anymore. Since I have the ball position,
let me set its position on the board,
like so.
As you can see, right now, the ball is in the top left corner of the screen because the zero value of
these variables is zero.
Okay I want animate the ball so I need to change the x and y positions.
As an example, let's increment the x and y positions like so. As you can see, it prints the ball one row
below and one column to the right.
So, by using these variables, I can control the position of the ball on the board.
Now let's go ahead and actually animate the ball. To do that,
I need a drawing loop that calculates the next ball position and draws the board to the screen.
I want the animation to keep going for 60 seconds and I want to display twenty frames per second. So
I'm going to loop like this.
Let's put this value into a constant like so.
As you can see, there is an indexing error.
This happens because the program keeps incrementing the positions. So I cannot just do that.
I need a robust handling for the movement of the ball.
To do that, I can use a concept from physics called the "velocity".
Velocity is a measure of how fast something moves in a particular direction. So it doesn't only about
the speed of the ball.
It also describes its direction.
You will see it as in action in a minute.
So let me declare velocities for the X and Y dimensions like so. I initialize them to 1
because I want to move the ball one step at a time. Remember,
velocity describes the speed and direction at the same time.
For example when vx equal to 1, it means that the ball moves to the right one step at a time.
Otherwise, if it equals to -1, then it means that the ball moves to the left, again one step at
a time.
So here, I set the velocities so that the ball will move to the right and downwards.
Okay now instead of updating the ball position as in here I'm going to update it by using the velocities
like so.
So the position of the ball is going to change on each update slightly.
The ball needs to bounce back in the opposite direction when it hits to a border.
So first, I'm going to check whether the ball hits to the left border, or if it hits to the right border
like so.
By the way, the ball may move beyond the horizontal edges of the board, and when it does there will be
an indexing error.
So I need to subtract one from the width like so because the ball's velocity is 1.
By doing so, the ball won't be able to go beyond the borders. OK if the ball hits to the left or right
border, I'm going to change its direction like so. Remember, the velocity also describes a direction so
multiplying the velocity by minus one reverses the direction of the ball.
Let me also do the same thing for the vertical position
like so.
As you can see, there isn't an error.
However, each time the program draws the board there are multiple balls.
But in my animation there should be only one ball.
This happens because the program only sets the ball positions but it never cleans the previous ball.
To clear the previous ball,
I'm going to copy this loop here,
to here.
Okay then I'm going to set all the positions of the board to false.
So this will practically remove all the balls from the board.
Okay let's try it again.
Now it works okay but it's too fast.
Let's slow it down a little
like so. So it will draw the board 20 times per second.
Then also move the duration to a constant like so. So I can control it afterward easily. I think it's
getting better.
However, it still prints a lot of boards instead of only one board.
I mean, the program doesn't actually animate the board.
Instead it prints a board after a board.
However, what I want is a smooth animation, and I need to print the board in the same position, to do that.
So the program needs to clear the screen every time it draws the board.
To do that, I'm going to use my screen package's MoveTopLeft function like so. This function positions
the cursor to the top left corner of the screen, so that the program always draws the board to the same
position on the screen.
If you don't know how to use it, as I said before, please watch the retro led clock section. In there
I've explained this in detail.
Cool!
Now it's almost perfect.
However, there is still one little thing left to do.
Let's say you run the program like this. As you can see, it starts drawing on top of the existing characters.
I can prevent that by clearing the screen using the Clear function of the screen package like so.
Now it looks awesome. I think you have learned a lot of cool things along the road.
Now you know how to use a slice as a buffer, and how to reuse it, and so on.
All right.
That's all for now.
See you in the next lecture, bye bye!