[MUSIC] Welcome to class. I'm going to kind of continue on in this lecture building up towards doing Pong. Scott's taught you a little bit about how to keyboard input, talked about lists, kind of gave you the basics of kind of doing motion in computer games. What I'm going to do in this lecture is I'm going to talk about math for most of the lecture, and I'm really going to lead up to writing two lines of Python code. So but my method here is kind of to teach you just enough math to get you where you'll understand what you need for Pong, and then later for Asteroids. I'm going to talk about how to compute the distance between two points, I'm going to go back and rehash some of the stuff that Scott discussed about vectors, and then I'm going to go and talk about how you would actually build your pong game. We're going to detect collisions with the walls, and most importantly, understand how reflecting off a wall works. So let's go to class. Let's start by computing the distance between a pair of points on the canvas. You won't use this directly in Pong, but you'll certainly use it in Asteroids when you have to, for example, compute the distance between a missile and a rock. It'll also help us get in kind of a vector mindset that we'll need to use for both Pong and Asteroids. Okay, the starting point is going to be a pair of points on the canvas. So here in my little diagram, there's one point. There's a second point, p and q. And in Python, we're going to store this as a list with two entries. The first component will be the horizontal position of the point the second component will be the vertical position of the point. Here's q, and it's a list of two entries. And so we'd like to compute is we'd like to compute this distance right here. Now you can see here, I've drawn a right triangle, and in fact one leg has a length which is the difference of the first coordinates, the p[0]- q[0]. The vertical leg is the difference of the second coordinates, p[1]- q[1], so it's this distance and this distance. Now, you can remember the Pythagorean Theorem from high school, which relates the lengths of the sides of a right triangle. The Pythagorean theorem says that I'm going to go over here, the length of the hypotenuse squared is equal to the sum of the squares of the legs. So here's one leg's length. We squared it. Here's the other leg's length. We squared it. So, we can compute the right-hand side of that formula very easily. That's easy to build in Python. Left-hand side's a little tricky, but we can just use a square root. We can just take the square root of both sides of this formula. So in math, we can take the square root of this, take the square root of that, the square root of the distant squared, well, that's just the distance. So this expression on the left hand side now would actually give us the distance between the points P and Q, and it's this expression right down here. So that's how you can compute a formula for the distance between a pair of points. So now that we've talked about how to compute the distance between a pair of points, let's use this kind of same idea of the Pythagorean Theorem, and we're going to go back and talk about vectors again. Vectors are important. You're going to use them in Pong, you're going to use them in asteroids. Now, Scott's talked about them, but I'm going to give another cut at them, just to give you another perspective on kind of why we use vectors. So, what is a vector? The way you think about a vector is, it's the difference between a pair of points. So, here I have a point p, here, I have a point q, and I could make a vector by taking their difference. And the way I kind of draw that is, I would draw an arrow whose tail was at q and whose head was at p. Kind of mathematically, I might kind of write some short hand which said that v = p- q. Now, in Python we can't do vector operations. We have to do each component separately. So we would say the horizontal displacement of the vector would be the difference of the horizontal positions of the two points, and the vertical displacement of the vector would be the difference of the vertical positions of the points. Now, we could use that equation and then kind of rewrite it and actually build an equation that would allow us to move points in a consistent manner. So notice I can take this equation up here, and I could rewrite it as p = q + v. A point is equal to a point plus a vector. So in Python I might write it something like this. Now, why would I want to have this? Because now I could go back and look at this update for motion. So Scott derived an equation that talked about how to update the position of a ball on the canvas. This ball physics example. And the update equation was something like this. It said that the new position of a point was equal to the old position of a point plus some multiple of the velocity vector. So we did point equals point plus vector. Now there's a scalar constant here, and that constant reflect the fact that we can take that velocity vector and we can scale it. We can make it longer or shorter, but always pointed the same direction, but for example, can make it half as long by dividing a by half. And so that was our update equation for how to move a point. So in Python, you probably ended up looking at equations that did something like this. We updated each component independently. And, we had this kind of constant a that could control how fast our ball moved. So that being said, let's go now to look at how to do collisions and reflections. Okay. Let's talk about how to actually do collisions now. So we'll start off and recall our equation of motion here. We had kind of a point, and we were updating its old position, adding a multiple of the velocity vector, and getting a new position. So I'm going to just consider the case of moving a point around on the canvas and then a ball around on the canvas. When you do your actual Pong game, there's going to be gutters, so you're going to have to kind of modify these equations slightly but I don't think it's going to be too hard. So let's consider over here on our canvas, let's say we have a point and it's moving to the left. We want to know when it passes off the canvas. Well, what we could do is we could just look at the 0th component of that point, p[0], and just check to see, well, if it's less than or equal to 0 we've moved off the canvas, so that test is really very simple. Now we check to see if the point moved off the right-hand side of the canvas. Well, we could go over here and we're trucking along and we would say kind of, when did this point go off the canvas? So this point is going to move off the canvas whenever its horizontal position is greater than equal to width. Not too hard. Let’s talk about using a ball now. Ball physics, and in Pong, we’re not going to be moving a point, we’re going to be moving a ball. So say our ball has radius r. The question we need to ask is when does the ball lie entirely on the canvas, and when is it touching the left hand side of the canvas, or even kind of partially off the canvas? Well, we notice here if the horizontal component of the center p, okay, if that's greater than r, then we're entirely on the canvas. If it's less than or equal to r, then I'm going to say, at least we're not off the canvas, we're hitting the wall. So it's going to be tied to bounce. So the condition that I want to use is something like p not less than or equal to r. We can do a similar thing now when we're working with the right-hand side of the canvas here. We can think about, okay, is the position of the ball kind of r units or less away from the right-hand side of the canvas? If it is, then we're going to have to go through and say it's hit the right-hand side of the canvas. So remember the right-hand side is the width, so we subtract r from that. And so, this is our condition that we come up with. So these are some conditions for figuring out whenever a ball's actually moving off the left or the right hand side of the canvas. You're going to need to do a little work in Pong, but not too much. Okay, let's about now what would happen if we're trying to actually simulate the effect of the ball being reflected off the side of the canvas. Let's finish off the OneNote part of our lecture. So we start off here we again have, this is our equation of motion. It says the new position is equal to the old position plus the multiple of a velocity vector. So we know how to collide now, we figured out that was just a simple test. We want to know how to update the velocity vector whenever our ball bounces off, say, the left-hand side of the canvas. So we're going to need to modify the two components of the velocity vector. So here's kind of a little diagram to help understand what's going on. So here's the current center of our ball, and it has a current velocity. We'll call it the incoming velocity here. So it's this. And that vector has two components. It has a horizontal component here, and it has a vertical component here. So we'd like to do is now compute kind of the correct velocity vector after this bounce. So the reason I wrote it in kind of terms of the two components is, that notice kind of the vertical component shouldn't change when you bounce off of a vertical wall. The ball will kind of keep moving vertically at the same speed. What about the horizontal component when you bounce off a vertical wall? The horizontal component will just be negated. So you can see up here all we really need to do is just kind of flip the horizontal component and keep the vertical component, and that forms the outgoing velocity vector. And, well that's really, really easy to code up in python because we can just negate the zero component and leave the first component, the vertical component alone. All right, let's go grab Scott's example from ball physics and just make it bounce off the left hand side of the canvas. So let's finish off lecture and take Scott's example of ball physics, and just add in a quick check to see if the ball hits the left hand side of the canvas, and then make it reflect off of the left hand side of the canvas. So to do it we're going to add it right here in the draw handler, we're going to add some code to collide and reflect off of left hand side of canvas. So first we need to check to see if the ball's actually hit the left hand side of the canvas. So we talked about how to do that. I can say if the horizontal component of the ball's position, if that's less than or equal to the ball's radius. What do we need to do? Well, we need to go through and we need to flip the horizontal component of its velocity. So we need to say vel [0] =- vel [0]. And that's it. All that work for two lines of code. Let's run it and see what happens. So there goes our ball. Oh, the tension is just, it's killing me here. And bang. Bounced off the left-hand side of the canvas. Now of course we haven't added a check to keep it from going off on, say, the right-hand side of the canvas, but I'll leave that to you. In fact, you're going to kind of essentially do that in Pong. So that's it for this lecture. I'll be back in a little bit and we'll talk about how to actually then control the paddles in Pong using velocity control.
