[MUSIC] Welcome to class, I hope you enjoyed building pong. We're here in week five and we're going to learn a few things in week five. I'm going to show you how to use the mouse to control things on the canvas. Scot's going to talk more about list and kind of work on how you might use a list to control multiple objects on the screen. I'm going to finish things off by talking about images, and then you'll work on a fairly straightforward mini project this week based on the card game memory. So before I go there, I have a kind of quick little piece of advice about gaming. And then I'll just give you a really long kind of walk-through for building an application using mouse input, see you in a sec. Now, if you play enough video games, you're going to lose. So it's part of my tip to you here are three excuses you can use whenever you lose at a video game. First excuse, I lagged. I was watching a raid in World of Warcraft once and watched 25 people charge into the battle and one person stand there. And everybody else died because of this and afterwards they're like, why did you just stand there? The player's like, I lagged, I lagged, I lagged. There was a thunderstorm in my area and my network was bad and lag, good excuse. Another excuse that I actually think is funny as I'll hear people say, wait a second, my mom distracted me. That was why I didn't do anything. Well, look, probably don't want to use that one unless you're in middle school or you want everybody to think you're in middle school. And the last one, and this one is a classic is, I got hacked, you hacked me, that's why I lost. So here's my official excuse for losing at Pong. Rainbows and Unicorns Scott, I got hacked. Let's go to class. All right, let's build an example of using the mouse to interact with the canvas. The application that I'm going to build is fairly straightforward, I'm going to build an application where if I click on the canvas will draw a red circle centered where I've clicked. Every time I click in a new location the old circle will disappear and we'll draw a new circle there. So we're only going to have one circle on the canvas at any time. Then I'm going to extend this so that if I click on an existing circle, the color will change to green. [INAUDIBLE] kind of doing in preparation to what Scott is going to do later when he's going to show you how to actually put down lots of circles using lists. And then if you would like to select one, you can use kind of the same technique I'm going to show you here to select a particular circle. So this is going to be kind of leading up to using mouse clicks to do selection. I'm going to shoot this all in one take, so I may make a few mistakes as I can. That's fine, we'll work through them. You're going to see my thought processes in action as we go through and build our example. So let's get started. So the first thing we need to do if we want to use the mouse is we actually have to understand what functions we need to call to make it work. So let's go out here and go to the docs. And we'll go over to simple GUI and we're going to have, let's see, my control object. And what are we going to have, we're going to have mouse clicks here. So what we can see here is that there's going to be one function here, set mouseclick handler that let's us register the event handler for mouseclick. More importantly, here's what our handler has to look like for a mouseclick. So it's going to be a function that's going to take a parameter. What's that parameter? That parameter is a pair of numbers, it's the position and canvas coordinates where we just click. And so, I want to point your attention to one thing here, this is actually a tuple of two integers. Okay, it's not unless it's actually a tuple, so that means it's immutable. Like about tuples, remember they're immutable lists. So we're going to actually kind of anticipate that when we're building our handler here, we're going to look back at that particular issue. So we're going to need to go through and add in statements of this form, a statement of this form and figure out what we need to really do. All right, let's go back to our code and see if we can kind of start building here. So here I've got a stub, it actually has a lot of things already implement for. So I have the height and the width of the canvas. So I've gotta variable that's to position of the circle, I've got its color, I've gotta fix radius, I've got a draw handler with a stub here. And then I've got some simple GUI calls to create a canvas with a white background. So let's go through it first, just get it drawing a circle instead of the canvas. So one more thing to see in this example is, I'm not going to write all my code and then try to debug it. I'm going to write a little bit debug it, write a little bit debug it. That way, that if something breaks, I kind of have a good idea of where things broke. It's where I made that last change. So, let's get this, work this [INAUDIBLE] right here. We're going to go and we're going to do the following. Let's say canvas.drawcircle, what do we need to do? We need to draw that the ball position and we need to use the ball radius and let's see. What is the next parameter? The next parameter I think its the, with the outline added so let's make that one and then the. This is the color of the outline of the circle. And then the last thing we need to add is we actually need to add what we're going to fill the circle with, that's going to be it's color. And we actually have, we want to put red in there but we want to get a variable called ball color. So we're going to use that because later on I'm going to actually modify it, so that it says ball color and that looks pretty good. Let's run that and see if we got it going, so there we go. We actually have drawn kind of a red circle in the middle of the canvas. So, now we like to modify this. So, if I click some place else on the canvas, we draw the circle wherever we clicked. Well let's see if we can do that. So, what are we going to need to do? We need to go through and do two things. We need to create a mouse handler, we need to register it. So registering it is easier I've already actually got the statement in here to register it, set mouse click handler, the call back is click. So we need to go through now, and define handler here, which whenever we click is going to set ball position to be whatever the position was when we clicked. So, let's see, well we could say something like ball_pos = pos. Now, I made a big deal when I looked at the definition of what a mouse handler looked back to point out that that was actually a tuple. Remember tuples can't be modified, so I'm going to be a little safe here. What I'm going to do is I'm going to observe that if this is a tuple and I do this assignment. What's going to happen is ball position is going to be a reference to that tuple. Now in this example I'm never going to modify a piece of ball position. But in subsequent examples, subsequent programs, you may want to go try and modify a little piece of what ball position is. If this points to a tuple, you're going to throw an error. So I'm going to make a simple suggestion, you'll do this occasionally when ever you want to solve reference issues. If you're worried about a reference issue, we can simply say list of position? What is that do? That makes a new copy of that tuple. That's going to be a list, that's why we call it a list and now we set ball position to be that. That will give us something that we can then modify at a later date. So if reference issues confuse you sometimes, remember list is your friend. You can make a copy of things, so you can modify one but not the other. All right, we need to do one more thing here. Opposition is going to be a global variable. So what do we need to do? We need to say, global ball_opposition, all right. So we made a copy of it, and we set it to be global. Let's give a ride I think this is going to work. Not too hard. Okay, so I click, it gives me the position I make a copy of it, I sight it to ball position. Now, inside the draw handler we use the update of the ball position whenever we're drawing. Alright, what was the next thing we wanted to do? We wanted to add some functionality that allowed us to change the color of the ball if we clicked inside the circle, all right. So how can we tell if we're clicking close to the previous position we've clicked? Ball position contains that position, so we get the new position we need to check to see if the distance between the new and the old positions is less than the radius of the ball. So I have got a helper function here that I'm going to use, you use the other examples. I am going to write a helper function that computes distance between two points in canvas coordinates, now you actually should know how to do this. We talked about this, for examples when we did collisions and reflections. And let's see what do we need to do we're going to take the square root. This actually comes from the Pythagorean theorem the square root of what? The sum of the squares of the legs of a right triangle, so kind of of we need to think about this. That we're computing a distance between two points, that's the hypotenuse of the right triangle. The difference in the horizontal direction is one leg, the difference in the vertical direction is the other leg. So to do that, let's see, where going to need to do to something where we take. The square of the link of the horizontal leg plus the square of the link of the vertical leg and now we need to get the link of those legs. So how can we do that, cp zero minus key zero. And that's going to be the length in the horizontal direction. Now we need to have the length in the vertical direction. So that helper function now gives us the distance, okay. So now we could use that helper function down here inside click. So now we're going to modify click to do one of two things. If the new click is close to the old click, we just change the color. Otherwise, we update the position. So we're going to need to add a test here before, if the distance, let's see, between the position and the ball position. What's that going to have to be less than the ball radius What do we need to do? We need to go through an update the color. We click inside the old position of the old ball, the old circle, we should change the color to be green. So we need to say ball_color = "green" What else what should we do? I'll could go through now and update position. So let's see, let's try that, well I see an issue here we want to update ball color. Ball color is a global variable, so we better make define it a global Now I know there's one more issue but we're going to just run it and we'll see what the issue here in just a second. So let's try that and see what happens. Okay, working good, working good, working good. All right, now let's click inside and see if it changes green, excellent Alright, click inside it stays green. Notice I click over here, it made a new circle, but it colored it green. Now that's probably, that's not what we want to do if we're trying to actually make this mimic selection. If we click someplace else, it probably should unselect the previous ball that was green, the previous circle that was green. So what we should do is that one more statement here which is something maybe ever form ball_color = red. And now we create that new circle, will have a new position and it will go back to being red. So let's run that looks good click in there it's green, click there it's red, click there. All right, so you got something that's kind of close to the functionality we're going to need if we're going to do selection with a bunch of circles. Scott will talk about that in a couple of lectures. So building something that uses a mouse is really easy okay, go look at the docs. There are also more examples out there on the web. We've got plenty of examples and concepts of examples. Take a look at them I think it'll help you understand what's going on. Okay, I'll be back in a little while, and we'll talk about images.
