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.