The key to any good two dimensional video game is motion. You need to be able to have objects move around automatically on the screen. So, we're going to talk about that in this lecture. Now, there's a little bit of math involved here. And, I talked to Joe, and he said, since I went M.I.T, he trusted me to show you a little bit of calculus. But, just this once. Alright. Now, I promise it's not going to be that scary, anyway, try to keep it simple, I'm going to stay away from the calculus as much as I can and just try to give you a simple explanation of how you derive the formulas to move objects around on the screen. And, hopefully with that, you'll be able to build some very interesting games. Okay. So let's take a simple example and let's think about motion. Right. What, how would I calculate the position of my car if I know it's traveling 25 miles per hour?'Kay? Okay. After zero hours, my position is zero miles away from where I started, right? After one hour, my position is 25 miles. After two hours it's 50 miles, and so on. Right? So, this is the velocity of my car. This is time. Alright? So, the very simplest method of figuring out what your position is, you can say, my position equals velocity times time. Okay, so if I have a velocity of 25 miles per hour, I've been travelling for three hours, I know that I have gone 75 miles. So, this is the most basic way that we can calculate our position. This assumes that velocity is constant, and you're moving at exactly the same speed all the time. And now, I can calculate my position. Okay? So how do I write a program now using this simple equation to figure out how to move a ball across the screen. Let's take a look in an actual Python program that includes motion. First, I just want to run it for you, and show it to you. Here I go. I have a ball that's moving downward on the canvas. And it's just going to keep moving down forever in a constant velocity. And it's going off the canvas and it's still moving. We just can't see it anymore. So how do we do this? Well , I just talked about having a car where you could calculate its position by saying, hey, what's its initial position plus how much time has elapsed times its velocity, and that'll give you its current position. Well. Here we go. We had, need three global variables, we need the initial position, the velocity and the time, all right? Now the initial position is a point on the canvas, so it is a list with two elements where the first element is the x coordinate and the second element is the y coordinate. And I started off in the center of the screen, and we'll talk about the velocity and the time in a second. The bulk of the work of this program is done in these two event handlers here. Okay, and then the rest of the program is pretty standard. And one of the key elements is this timer here. So we have a the timer that ticks once every 100 milliseconds. What does that do? Well, every 100 milliseconds, the tick function is called, and all it does is increment a variable called time. And time initially started off as zero, and then we add one to it every 100 milliseconds. So time represents the number of tenths of a second that have passed since we started running the program. Okay, so that's one element we need. Then the draw handler does, basically does most of the work. Okay, first it calculates the current position of the ball, or ball pause, and then it just simply draws the ball on the screen. So how does it calculate the position of the ball? Well, we use that formula again, okay? But we break it into two components. We have to calculate the X position of the ball first, and then the Y position of the ball. Okay, so here's the X position of the ball, right? The initial position had the X coordinate in innit pause bracket zero. Okay, then we add the elapsed time or time, times the X velocity. Now velocity also had two elements up here, right? It had the numbers of pixels per tick that we move in the X direction and the number of pixels per tick that we want to move in the Y direction, okay? So I add in that pi xels per tick in the X direction here to compute the X value, or X position of the ball. The Y position of the ball is pretty much exactly the same. I start to take the initial position. bracket one for the initial Y position. And I'm, add time times vel bracket one to give me the velocity in the Y direction, okay? And again, what this does. Basically noticing that my velocity was 0,3. It means, every tenth of a second, it moves zero pixels to the side, and three pixels down, okay? Okay? And that's pretty much what's happening right here. Now, I can change this, I can change the velocity to be something else. Now it's going to move diagonally. And you can see the ball moving diagonally. And it's moving faster to the right than it is moving down because I gave it a faster X velocity. I can change the frequency that we tick at. So if we tick once per second, it's going to move a lot slower. And you can see, it looks pretty jerky. So you want to move faster than, or you wanna tick faster than once per second, so that you get smoother motion. Okay, I can tick faster, as well. Sorry. And you can see that, now the ball will speed up. Okay? And that's basically all there is to gaining motion on your screen. Okay. So, I actually snuck in some discussion of points and vectors in that last program, and I want to step back and talk about them explicitly. So here is my drawing area. Okay, and I have X coordinate and a Y coordinate. And I think we understand points. Okay? So if I have a point here, this is the point 3,3. Right? It's three over an X, three down in Y. Okay? And in Python work, we're representing those as lists, like this. All right? If I take another point over here, if you can understand this would have some X coordinate and some Y coordinate okay, so points makes sense. That was the ball position we are representing center of the circle as one of these points with an XY coordinate. Now the velocity however was actually a vector okay, and a vector we had two elements let's say it was six, one. This was the X component of the vector, and this is the Y. So what does that mean? That means move over six. One, two, three, four, five, six, and down one in the Y position. Okay? So that is basically a vector that points to here. Now, when you add a vector to a point, you do exactly what I just drew here. Okay? And I get a new point, which, in this case, is 9,4. I can add that exact same vector over here. And hopefully that went over six. And I have a new point and that was x + six, y + one. All right? So I can take a vector and add it to any point and get a new point. And these two dimensional vectors have these XY components, and this is the way to think of it. That this is the X offset of the vector, and this here, is the Y offset. Okay, now, I can't add two points. I can't take this point here and add it to this point here, that doesn't make any sense. But I can take these vectors. So these velocities so when you're computing your new position in the point, here, here was the velocity. So, one tick can move over here. The next tick you add it in again, and move over here. And the next tick you add it in again, and move over here, and so on. Okay, so what's happening in that program, is you're adding a vector to a point each time. Okay, and we're about to see that you don't have to add exactly the same vector at some point here, you could add a different vector, and then your point would move over there. You could add another vector, and then your point would move over there. Then another vector, and your point would move over there. Here's where we have our small bit of calculus, okay. Basically we have our screen again. We have X going here. Y going there. And we've got two things going on. We have our position, and we have our velocity, okay. And both of these can change with time right. My position is different at different times. So position is a function of time. Your velocity can actually change as well. So velocity is also a function of time, right. So I might have some object, that. moves along smoothly, around in the area that I'm drawing. Okay? And this is maybe your position at time zero, so there's P of zero, and maybe this is your position at time. 25. Okay? And I could compute any of the positions in these intermediate times as well. Alright, now, we've already seen that we're not going to move in exactly a smooth line like this. Right? Those tics should, that if I made them too infrequent. So I'm updating p(t) too infrequently, it was all jerky. Instead, we're gonna have points. So I'm going to have a point, then I'm going to have another point. Then I'm going to have another point, and another point. And I already showed this. Now, this might be p of zero. Forgive my bad writing. Here's p(1), p(2), p(3). And my velocity vector says add this here, add this here, add this here. So here's my velocity at time zero, velocity at time one, my velocity at time two. And they're exactly the same. Right? Now maybe here, something happens, you bounce off something, and your velocity changes. So now here's my velocity. At time three, and my new position four, is now down here. Okay? So basically, what we're doing is we're saying that, your position at t1, + one is equal to, your position at time t. + one you know, the amount of time that elapsed, times the velocity at time t. Okay, all right if I want to calculate where my next position is going to be, I simply add in the velocity. And we saw that we could do that before, by just calculating, you know p(t) + one directly, it's you know the initial, you know p(0) + t + one times your velocity. Right? Or, we can do it incrementally like this, and this is what allows me to basically change the velocity at any time. And that's going to become important. As you'll see in your pawn game, you have to be able to bounce off the walls. You have to be able to bounce off paddles. That's actually a change in velocity. So this is the formula that we care about. And I want to stress that this is math. Okay? In Python, think about what this is going to look like. This will be you know, p(0) = p(0) + v(0) and p(1) = p(1) + v(1). Right. These are the position and the velocity at the current time. This is the new position at the next time. So here's my simple ball motion program, reworked to use an implicit timer. Let's look at this, okay. My ball looks pretty much the same. It's moving down the screen. But the program is different. So what's different? Well. I have ball pause out here. I don't have initial pause, I actually have the ball position. I still have a velocity and I've lost that global variable time. I don't need it anymore. I have one handler now, just the draw handler. I do not need a timer anymore. So what happens in the draw handler? Well every time the draw handler runs, I update the ball position and I use the formula that I just showed you. I take the X value of the ball position and I add the X value of the velocity to it. I take the Y value of the ball, ball position and I add the Y value of the velocity to it. So I'm adding the velocity vector to the current position each time the draw handler runs, and then I'm simply drawing the ball. Okay, so what's happening here, my velocity is, move zero pixels in the X direction every update and one pixel in the Y direction every update so every 60th of a second, my ball moves one pixel down. I can change these numbers, just as before -three, one and the ball shoots off to the left. Okay. I can't change the time exactly now. So, instead of changing the rate at which the time changes, I have to change the velocity. Right, my timer tick here is implicit. It's the 1/60th of a second of the draw handler. And so I have to change the velocity if I want the ball to go slower or faster. Now, this is basically doing the same thing as before. But we have changed it substantively. I now can change the velocity at any time and it doesn't affect the past. So I can have another event handler, that when something happens, I'm going to change the velocity and my ball would start going in a different direction. And this is very interesting and useful. Hopefully, you can see we're dang erously close to being able to build a game now. I've just shown you how you can move objects on the screen. In a previous lecture, we saw how you can use the keyboard to move objects that are on the screen. So we just need a couple more things. We need to be able to contr, combine that control scheme with some more fluid motion. We need to be able to interact with different objects, so we need to have collisions and that sort of thing. But once we've got that, you're going to have a pretty fun game.
