0:07

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.

Â