Lecture 11 | Programming Methodology (Stanford)

this presentation is delivered by the Stanford center for professional development so today is going to be a little slide heavy day because we didn't have the vote so far but we'll try to do some some more board stuff as well so here's a class hierarchy you saw before and we covered a lot of the class hierarchy last time but there were still a few bits that we have left to cover which is G image G polygon and G compound so you'll see those and then you'll be ready to do all kinds of cool stuff today as no matter of fact today we're going to like break out things you can do with the mouse and graphic and more graphics kind of stuff with the mouse and it's just a whole bunch fund like you'll be doing in breakout ok so G image all the G images and this is a funky way that you can put pictures inside your program like pictures that you take with a camera or whatever your phone you can just stick them in your program and the way you do this is there's a class called G image and so you can create an object of type G image by saying new G image you give it the name of the file okay that's the full file name that you know with what a dot and whatever ending it has and then the XY location for where you want to display that image the XY is the upper left-hand corner of the image okay so the file image file is the name of the file containing the image and X and Y's I just mentioned are those coordinates now where'd you have to stick this file that's something to remember so when it looks for this file what it will do is it will look in your current project folder and if it does not find that file name in your current project folder then it will look in the subdirectory named images okay so you can have a subfolder if you have a whole bunch of pictures called images inside the folder for your project for all your images there will also look there as well if it's not neither one of these places bad things happen if you want to know what bad things happen you can actually try it but I wouldn't you know encourage you to just try to do bad things so just stick it in the folder with your project and you'll be fine and you'll get the image so let me show you an example of what that actually looks like um just so you know a both gif or Jif format some people say jiff even though the G stands for graphics over here which is kind of a hard G and then JPEG which is another graphic standard and you'll see the ending for files either dot jpg or jpg which is just another format both of them are supported and so most cameras or phones or whatever actually end up taking pictures in one of these formats so here's a simple example so if we had some program run we can say I want to some image that's AG image so I create one and let's say I have the Stanford seal which hopefully we have rights to I would hope it's probably like some guy in Kansas actually has rights to the Stanford seal and charges every time we use it it would not be the first time something like that has happened but that's not important right now what is important is that Stanford seal gif right it looks for that file inside the folder for our project and then it's going to just we're going to add that particular image at location zero zero so here I did it the way that I just specify the file name without giving the x and y coordinates you can give it the X&Y coordinates if you want to begin with but if you don't it's kind of funky to say hey load that image and now I can get like the sides of that image like at center in the screen or whatever if you want to do that you can also what's also sort of fun is you can remember G image L implements this particular interface called resizable okay so we can actually say hey image I want you to scale like one and a half times in the x-direction and point five times the y-direction it's kind of like stanford comes to school and you know checks into the dorm and gets on the meal plan and puts on the Freshman Fifteen it's like oh I'm fat stanford now but you can do like you know take four pictures your friends and just distort them in funky ways it's just a good time okay so you can do all kinds of you know a bunch of different options on things like images that's just one of them okay there's also this class called polygons and polygons is kind of a fun kind of interesting cool class and what it lets you do is it represents graphical object to bound by line segments right so we need to get a little bit more formal but here's like a little diamond here's a hexagon they're just polygons right and all polygons basically is is just something that has multiple sides on that's where poly comes from it just means many okay so the basic idea that's interesting about polygons is a polygon has a reference point okay so when I create a polygon I'm actually going to tell the computer sort of all the points on the polygon all of those points that I specified like let's say the four corners of a diamond are all in some relation to some particular reference point that I pick and so in this case I might for example pick the center of the diamond and in fact in most cases all of the vertices that I lay out since they're going to be relative to some reference point that reference point often it's convenient to pick the center okay it just turns out it doesn't have to be you could actually have your reference point be like upper left corner of the bounding box or whatever you want you've got to make sure that when you sort of tell it what the vertices are you lay them out in the right order but oftentimes the center of the polygon if it's a regular polygon which means it's sort of symmetric all around then the center is often easiest I'll show you some examples of this how you actually construct one of these gee polygon objects okay so first thing you do is you say create an empty polygon okay so you create an empty polygon object and then what you're going to do is you're going to specify the vertices of that polygon one at a time using a method called add vertex and add vertex is going to take an x and y coordinate these action y coordinates are relative to your reference point so if you think of your reference points as being the center of the object and you say oh my X Y is 1 comma 1 that's one pixel over in 1 pixel down from wherever you think of your reference point is being you never actually specify the reference point to the G polygon the reference points just in your mind all of the vertices are just relative to whatever reference point you happen to pick and I'll show you an example of this to make it concrete in just a second after you set an initial vertex so you need to set the first one with something called add vertex after you set the initial vertex you can set all the remaining vertices in one of two ways because we just give you options we like you one way is just to keep adding vertices and what and when you call add vertex again what it does it add the new vertex again relative to the reference point and it essentially creates an imaginary line between the last vertex you just added and the new vertex you added that's how you're getting edges of your polygon you're sort of specifying the corner points another way instead of specifying corner points after you've specified the first point you can explicitly add edge and add edge adds a new vertex relative to the preceding one and here it's going to do it with offsets of DX and dy so relative to where we were before we actually specify sort of an offset in the X Direction offset in the Y direction it's kind of like you were almost creating a line and it's going to add an edge this one's using absolute coordinates relative to the reference point that's kind of a the key difference between these two things and I'll show you an example of both of them ok one final thing is you know the polygon is in some sense closed for you so if you're drawing a diamond and let's back up so I can show you the diamond if you're drawing a diamond you might specify that as the first vertex then this is the second and this is the third and then this is the fourth how does it know that the fourth and first are what should be attached to each other it just closes it for you so after you've added the last vertex to the polygon basically what it does is it just automatically sort of links up the first and last segments or first and last vertices to sort of close the polygon for you that's how you actually specified so you never actually need to go back to the first vertex again it just does it so that's kind of a whole bunch of stuff in theory what does it look like in practice okay so we're going to create a diamond we're actually going to create it using some method that will see called crate diamond and so one we call create diamond we're expected to give us back a G polygon here's all the interesting stuffs going on so here's the create diamond method create diamond is going to return a G polygon so it needs to create one because it's going to return it back to us and what it's getting is the width and height of what that diamond should look like so the first thing it does is it says create a new polygon right it creates a new empty polygon just like you syrup saw before then what does it need to do it needs to add the first vertex so it adds the first vertex and it's going to do this relative to some imaginary reference point that I pick the reference point that I'm going to pick is going to be the center of the diamond which means my first vertex in the X direction is going to be minus with over two so let me just show you where that vertex would be so if I think of the imaginary center and I just executed that line at a vertex I would say relative to my imaginary center my first vertex is at half the width of the diamond over in the negative x-direction and on that same line so zero in the Y direction okay then where do I go from there well I'm going to add the next vertex the next vertex that I'm going to add relative to my center is going to be at the same x-coordinate as the center but it's going to be minus height divided by two upward so what I get essentially is this is the next vertex and it just kind of creates the segments in between them where's my next vertex it's going to be over here it's with / - from my imaginary center point okay and on the same line as the imaginary center point so the Y offset is 0 and then last but not least the last vertex I'm going to add is on the same x coordinate as the imaginary center but the height is half the height of the diamonds downward so I get that and now if I say return diamond it matches up the first and last vertex so what I get back is a closed polygon I actually get that diamond and that's what's returned back to me in my run function over here so diamond is now this little polygon question it depends on if you do something like add edges versus add vertex so again I would try it and especially if you try things like where your lines would have crossed you'll see sort of funky things between add edge and add vertex it's you never specify the reference point all of the computation we did here are all relative to some imaginary reference point but we never specify the reference point exactly it's always a good idea if you're thinking about creating a G polygon to identify for yourself what that reference point is before you draw the line segments uh-huh yeah you just figure out what the size of the image is by asking its height and width and then you need to specify scaling factor to make it large enough to do the whole screen yeah so let me actually show that to you right now here's the so advert X we just returned the ball Egon polygon we said it's filled to be true we said its color to be magenta we write it out in the middle of the screen not a whole lot of excitement going on the one thing that's important to note is when we add the Diamonds to our canvas the location that we give for adding it to the canvas is the location of the reference point so every time that we do something with the polygon once we've created it the XY location well that we'd specify for the canvas is the imaginary reference point so here our middle point was get width divided by 2 or sorry get width / - is this way yet high / - is the centre of the screen and because we use the centre as the imaginary reference point for the polygon it actually shows up in the center of the screen so actually using G polygons a lot of times it's just convenient even if you want a circle because you want to specify the reference point of the circle to just be in the centre of the screen as opposed to its corner huh if you really want to do we should talk offline we should talk offline yeah there's a bunch of things we could do is essentially there's a bunch of stuff with polar coordinates that I should mention we're not going to deal with so if you read in the book about like polar coordinates and theta and all that we're actually not going to do it in this class so if you're like all pole or coordinates like yeah polar scares me and tears me to write like polar coordinates you only need to worry about it's like you're a bear or you're in the Antarctic right we're not going to worry about polar coordinates we're just going to do Cartesian coordinates but there are it's it's easier to do rotations if you think polar okay so in terms of adding an edge we're going to do the same thing for create diamond using edges instead of vertices so if we want to create a diamond adding edges we have to still specify the first vertex just like we did before and now the edges what I'm specifying for the values for the edge is an offset in the X and y direction so my offset in the X Direction is width over two so that would move here and my height is negative height over two so that would essentially move over here because it's relative to my last point it's not relative to the imaginary reference point okay and so basically if I sort of follow this all the way around what I do is I add edges again after I add that last edge the polygon is closed for me automatically I get back the same and I'm just now doing it with edges instead of with vertices same sort of DL I make it magenta because magenta is a fun color and I write it out for the screen okay so that's G polygon now things get a little more funky and the thing that gets the funkiest of all right it's kind of like the George Clinton of graphics classes is G compound and so what G compound is going to do anyone know George Clinton all right couple is this I like totally lost G compound basically is as you'd imagine it's a compound shape it allows you to take multiple other shapes that you've seen and put them all together and treat that one thing as one object which is very convenient sometimes if you want to draw something complicated and then move it all around the screen for example a rescale it okay so adding objects the way a G compound works is you add objects to a G compound just like it was a canvas so just like you've done before where you say I have some canvas and I put these little objects on it to draw pictures if I have some G compound I add a bunch of objects to it I now have this compound thing that encompasses all of those objects okay so you can now treat the whole compound as one object though which is whole whole reason for having this and I'll show you the example of this in just a second so similar to a G polygon a G compound also has a reference point that when you add objects to the G compound you add all the objects relative to some imaginary reference point that the G compound has okay and finally how do you display this thing right so when you add things to a G compound they're not displaying on the screen you need to take the G compound and add it to the canvas just like all the other wrecks your ovals or whatever you did before and when you place it you place it relative to which reference point and it will draw all the objects that it encompasses and so let's actually just see what that looks like so let's draw the face oh a little face and so you can see we're going to use some different things here right we're going to have an oval we're going to have a couple other ovals of the eyes hey triangle what should we use for the triangle polygon right some people like three lines no G polygons it's your friend really it's a fun time and here's a little rectangle for the mouth okay so what we're going to do with this is we're just going to go ahead and take a look at a class G face okay so the G face class that I'm creating this a whole separate class I'm going to create this class G face as extending G compound so a G face is going to be a G compound okay and what I'm going to do is I'm going to have a whole bunch of constants here that just specify like the width of the eyes and height of the eyes and all the sort of features of the face and I'm going to have some objects that comprise my little G compound so I'm going to say well the heads in oval and the left eye on the right I are both ovals and the nose is going to be a polygon and the mouth is going to be rectangle these are all my private instance variables and that's just like variables I'm going to use to keep track of the things I create and add some IG compound so the compound has a constructor which is just the same name of the class it's G face and what it's going to take into the width and a height because I want to allow the face to automatically be resizable which means all the stuff that I create that's part of the face needs to be in terms of the width and height that are passed in so it will resize itself depending on whatever width and height the user gives me so first thing I do is I say hey the head is going to be an oval and the oval is basically just a circle that's of size width comma height right it's going to be the size of the whole head so whatever size you give me is the size of the head the left eye is going to have the eye width times width so it's going to scale by whatever width you give me for the face I'll scale ax by eye width and same thing for the height I'll scale by eye height and I'm going to create two eyes left and right I notice at this point I haven't placed where left eye and right eye are I've just created them okay the nose is going to have a function or a method associated with that called create nose that's going to return for me a G polygon and so we'll take a brief digression down here to take a look at create nose so what's Cragen o is going to do it's going to have some width and some height for the nose it's going to create a new polygon and add vertices to construct the nose so the first vertex it's going to add and we're going to think of the center of the nose as being the reference point the imaginary reference point so the first vertex is sort of the height or the bridge of the nose it has the same x-coordinate as the center of the nose if we think of some imaginary triangle here actually let me just draw a little triangle so we can use the board here's the nose here is our imaginary reference point where is our first vertex going to be it's going to be up here that's the same x-coordinate as our imaginary reference point and half the height you can just imagine these two are now equal waving of hands it's going to be half the height upward so that's going to set this first vertex here and then what am I going to set the next vertex the next vertex relative to the center is going to be with divided by two over so with divided by two over and then in terms of height if we can see it over here it's going to be height divided by two downwards so this is the next vertex and the last vertex is over here and that's going to give you your little triangle for the nose okay so when we create the nose losing my chalk we're going to return that polygon that's created here because this method is returning a G polygon and the place that gets assigned is back up here where we actually have a nose okay so we say the nose is whatever I get back from create nose it's going to be the polygon for my nose or the nose is of course scaled by the size of the face right so we have nose with the nose height let's scale the size of the face and the mouth last but not least is just a rectangle again is scaled by the height width of the face given the mouth with in the mouth height so now I've created all my little pieces how do I put them together to create the face well when I call add methods inside of here when I'm creating right I'm creating a new G compound right when I'm creating here is G face which extends G compound since it extends G compound that means all the methods that exist for G compound extend here this is not a graphics program right this is a G compound so when I call add here I'm not adding it to the graphics window I'm adding it to the G compound so add head at 0 comma 0 my imaginary reference point ok for this face is going to be this upper left-hand corner of the bounding box okay so if I say add head is zero comma zero if I think of this is zero comma zero and this is an oval it's going to add the oval here because what I'm specifying is the upper left-hand corner of the oval okay now where am I going to add other stuff I'm going to add the left eye to this kind of funky equation over here by basement all it's saying is I take a quarter of the width of the face and subtract from it the eye with scaled by the size of the face divided by two so basically what it's going to do for the x coordinate is do something on sort of this part of the face it's going to bring it over a quarter from where it would have been a relative to the center of the screen and then I'm going to also do something relative to the height where for the left eye on the right eye they're both going to be at the same height where I basically just look at a quarter of the height down the face is one of those eyes are going to show up and I have to do some accounting for the eye height so if my eyes if my face were really big my eyes still show up at the right place so it's just a little bit of math you can sort of trace through it by hand if you're interested in it the exact coordinates where these things are going is really not that important as long as we get a light right layout that looks like a face the important thing is all these things are relative to our little reference point at zero comma zero which is the reference point for the face right we haven't put anything on the canvas yet the nose the nose are just going to be at the center so nose is going to be halfway over on the width and halfway over on the height so if this is our reference point over here we go halfway over on the width halfway down on the height that's the very center of the circle and because of when we created our G polygon the imaginary reference point of our triangle was the center it places it relative to the imaginary center point of the triangle so we get the triangle right in the middle of the face and last but not least we're going to put in we're going to add the mouth and the mouth is basically going to go near the bottom of the face it's actually going to go in the center of the face this is just basically finding the center point for the X shifted over by the size of the rectangle and then it's going to be three-quarters of the way down the circle which is kind of how we get this okay so we add all these things relative to this reference point and now if we actually want to display this we need to write some program that displays it so we'll have a program called draw face and all draw face does it's pretty simple it says it says I'm going to pop up a little pop-up in the middle your screen I'm going to have a graphics program that's going to have some face width and face height and what I'm going to do is I'm going to create a new face giving it the width and height and where do I want to place this face on the screen I want to Center it on the screen the reference point for the face though is not the center of the face it's this upper left hand corner so I need to figure out relative to that upper left hand corner lose another piece of junk how to center the face so what do I do I get the width of the screen I subtract from it the face width and I divide by two that's kind of the classic thing you did when you were trying to Center say a rectangle you would take the width of the screen subtract off the width of the rectangle divide by 2 what it will essentially do is figure out the coordinate to place this guy so this whole thing is centered in the screen and we do essentially the same thing in the Y direction as well so we look at the height of the screen we subtract off the height of the face and divide by 2 and that gives us how much we should go down ok so again when we finally place this on the canvas we're placing it when we specify the points on the canvas that point is the reference points of the whole G compound ok so any questions about that huh I could have actually done it as just creating a G polygon objects and adding everything inside of another program what I wanted you to actually see it as extending a class just because that's a common way of doing the decomposition you say this thing that I'm going to create really is a G compound so I'm going to create it as a derived class of G compound it's the more common way of doing it uh-huh I'm sorry uh-huh yeah so you can think of there's a Z ordering in a compound that's just like a canvas so you actually have you can have layering of objects and objects will include other objects in the compound and it's the order in which they're added so the funky thing also about doing this remember our friend the bouncing ball let me just refresh your memory with the bouncy well I like the bouncing ball doo-doo-doo-doo so I'm running I'm running here's our friend the bouncing ball come on bouncing ball we're bouncing we're bouncing you're like oh the bouncing ball got bigger since last time yeah I changed one constant it got a little bigger that's okay you wouldn't have remembered if I didn't tell you like how many people were like oh I measured the number of pixels um well here's bouncing ball and what's the whole beauty of having G compound and creating a new class out of G compound because I don't want bouncing ball anymore ball is boring I want a bouncing face how do I create a bouncing face hey I got this class over here G face that's a good time instead of a ball I'm going to have this thing be a G face like don't do I'm Erin all right well now that I do that right I'm still going to call a ball just I don't have to change the ball everyone in my program there is one other thing that happens though when I create the ball I'm no longer creating a G oval I'm creating a G face notice G face still takes a width and a height so my parameters are unchanged the only other problem is a compound a g compound does not satisfy the criteria or the interface for being fillable so this little thing to make the ball fillable and set it or set the fill of the ball to be true you'll see like all a little error condition over here because G face or a G compound in general doesn't have a notion of filling the whole compound so we get rid of that and now we save this puppy off and we're going to run and let's see what happens first thing right with just modifying like 20 seconds worth of code we didn't get in there and we'll run bouncing ball and I have bouncing face yeah scale to be just the right size life is good three lines of code to modify that's the beauty of object-oriented composition is when I have something that's a ball and I have an above the G object or a G oval to G object and I have some they'll spits a G object I can just slam one in for the other bouncing Stanford logo yeah bouncing face of your roommate yeah you can do it alright we're just going to knock bounce anything else for the time being but one thing that's my even more interesting than just being able to bounce stuff around is what we refer to as event-driven programs okay and all an event is is when you do something in the world that's an event like when you went to Stanford that was a big event like you know you got your big packet in the mail and you open it up you're like oh I got into Stanford I'm going to Stanford or maybe like you gnashed her teeth and try to figure out where you were going to go or whatever some of you were just like oh yeah I'm going to Stanford for sure and that was event and you know there was like cake and celebrating in the hole maybe I don't know maybe you were like oh I got to go to Stanford bummer but it was an event and in some sense your life is a program and it's driven by events these little things happen and it changes the course of your life hopefully coming to Stanford change the course of your life in a good way in terms of actual programs you write there will also be events that will change the course of your program but these events are a little bit more minor than say getting into Stanford there are things like when the user interacts with a computer like clicking the mouse or pressing a key those are events that happen on the computer and your program should be able to detect certain events that are going on and respond to them by doing various kinds of things like say when you're writing your breakout program okay the way we be able to determine if an event has taken place there's kind of a clandestine operation it's kind of like we're in the CIA and we got to say oh did an event take place well I don't know off priori if an event took place I need to send out my minions and your minions are called your listeners your listeners or something you put out there that says I'm here I'm listening for events is anything going on and unless you put out your listeners you're deaf to what's going on in the world it's kind of like you weren't listening you weren't watching the mail for that Stanford packet and the Stanford packet came and you just never check the mail and you never knew and no one was going to tell you because you didn't put out your listener for the Stanford packet on the computer there's two different kinds of listeners we think about there is a mouse listener and a key listener which gets events from the mouse and events from the keyboard and so the way we create our listeners is in our program very early on we either say Mel add Mouse listeners or add she listeners we can actually say both to listen for both things and these are methods that are supported by graphics programs for example okay now in order to use these listeners you need to have a library added in your program that deals with events and that's the java.awt event dot star so in your programs that use events like your listeners and will look at events in just a second you'll need to have this little import line in there and this all in the book you don't have to hurriedly copy it down a bunch people have asked for slides and I was hesitant to post slides on the web because I think like if slides are up there people will not come to class so first of all how many people would like me to post the slides on the web how many people will continue to come to class if I post the slides on the web yeah should be all those same hands good times all right I'll post them on the web all right so there are certain methods of a listener they get called when an event happens and this is the funky thing up until this time all of your programs have we have been what we refer to as synchronous there are some series of events that happen and you know the next events is going to happen or the next method is going to get called after the last method got called you're now entering a world called the asynchronous world which means you don't know when things are going to happen right events happen like you might have been waiting for weeks for that stanford little you know acceptance letter to come you didn't know when it was going to come eventually it came but you didn't know and there were some sad people who we won't talk about right now but if you're out there watching on video it's fine it's perfectly okay you are waiting for the stanford acceptance letter and it never came that happens it's not a bad thing you're still listening you were active you took a protest very role in life that's what you should do it's a good thing but you didn't know when or if it was going to happen and that's what an asynchronous events is it happens and you don't know when it's going to happen you just got to be prepared when it happens you're like I'm gung ho when it happens it's going to happen I'm going to be there because I'm listening for it that's what you want to think about okay so let's look at a simple example of a event-driven program called click for face you're like what does that mean but it probably involves the face yes in fact it does so click refresh it could mean anything click for face this is an example of event-driven program what this is going to do is it's going to bring up a blank screen and every play we click on the screen it's going to put a little face there that's why it's click for face alright so how did this work well first of all click for face is a graphics program okay it's going to draw a face wherever the user clicks the mouse now here's the funky thing there's a couple funky things that happen in this program this program has no run method because there is nothing we need to do in terms of a bunch of sequential steps in this program all we're doing is we're waiting for events we're waiting for someone to click the mouse until they click the mouse we got nothing to do except for we got to be listening for that mouse to get clicked so there's a method called init and then it automatically gets called when a program starts and you might say what that sounds a lot like run what's the difference between run in an in the way you want to think about the difference between these is run is when you're actually doing some real work and NIT is generally when you're just saying there's a few things I need to initialize like I need to put my little ear out there to be listening for things but there's not any real work I'm going to be doing in the program it's a subtle distinction it's not a big deal if you mix the two up but there is a difference just so you know and we won't you know ding you for it heavily or anything like that just say you know merge your programs you'll probably have the run method like an breakout you'll have a run method you won't have an it it's not a big deal ok so all in it does it says hey I got to be listening for those Mouse events so it adds Mouse listeners it just says that and that means now I'm listening for the mouse what happens when the mouse gets clicked here's the funky part ok there is a method called Mouse clicked and mouse click takes in a parameter of type Mouse event now if you're paying very careful attention to this program you will realize that nowhere in your program do you actually call the mouse clicked method you're like hi I never called the mouse click method why am i writing it this is what asynchronous events are all about this particular method has a special name that is understood by the listener when it hears a mouse click it will call your mouse click method for you that's why it's asynchronous you don't know when it's going to get called all you know is if there's a click it will get called and you will get this parameter called Mouse events and what a mouse event has is information about that mouse click namely you can ask the mouse events which we're just calling prevent get X and get Y and that gets the XY location of where the mouse was clicked on the screen if the mouse was not clicked in your graphics window you don't hear that because your listener can only listen in your graphics program it's not listening to your whole computer so don't worry if you're like oh I'm reading email is it like listening no it's okay it's just looking it's a little clicks in in your graphics window and so what we're going to do when we get some Mouse event is hey our friend the G face we're going to create a new G face that sounds like I should be a rap group or something as a G face maybe that should be alright on we're gonna get in better and it's going to be a circle with the face diameter which is some constant I specify not a big deal of 30 I'm going to create some new round G face and I'm going to place it at the XY location with a mouse was clicked note that the XY location that I set the face is this relative location of the face the face will not show up exactly in the middle where I click the mouse it will show up slightly to the right and down of where I click the mouse but just to show you that this works let's click for face it's like bowling for dollars we're clicking for face do you run in we're feeling good any questions about asynchronous events by the way let me just run a click for face the question if you have two programs running simultaneously yeah so it while your program is running if you get these asynchronous mouse clicks you're the mouse click method will get called for you yeah it will stop momentarily for you to deal with that method called mouse clicked and then it will continue execution yeah so here we have and there's nothing in the program yet because we haven't clicked yet oh click for phase so you can get it just like you can spend like weeks you're like yeah I was like you're all mine put some face on top of each other it's like a party over here yeah click for face yeah that's it if I click out here I don't get any faces right I have grown to some other application because it only listens for events inside here okay so that's quick for face there we go uh-huh no because you don't know where it would return it to right you're not the one the call that someone else called you so you're like hey you called me here's a good time have a candy bar and it's like I don't want a candy bar and it gets really upset so but I hope you wanted the candy bar um so yeah you don't return anything but that's that's it's a good thing to think about so that's clicked for face now there's a whole bunch of things you can actually listen for it's not just clicks okay but the first the general idea is first you add your mouse listeners that's critical common thing people do is they forget their listeners and they're like hey I'm clicking for face and I'm not getting any face and it's not because the face doesn't love you the face loves you I know I was right in the face like 3 a.m. last night it loves you and then what you need to do after you have your emmaus listener in there and then you add definitions for any listeners you want to have and so here's the common set of listeners for mouses there's mouseclicked which you just saw that's called whenever the user clicks the mouse there is mousepressed what's the difference between a click and a press the clay of the press is that the mouse button has been pressed down it has not yet been released so if you want to do something like a drag where you hit the button and you move the mouse around and then you release it you can check for press and release so a press and a release together is a click so you can actually do kind of multiple things you can do something when the mouse is pressed you can do something when the mouse is released and that'll also count as a click ok so mouse clicks Mouse pressed Mouse released mouse moved every single pixel that the mouse moves it's like Oh Massa moves mouth moves Mouse me yeah I can't even do a fast enough that's how fast it goes it tells you that the mouse moved ok and mouse dragged is when someone actually clicks on something and then moves the mouse while holding down the button in fact we'll say the mouse has been dragged which is like mouse moved except this is only happening when the buttons down and someone's moving the mouse but all of these take the same kind of Mouse events and so you can get the X Y location for where that click happened or where the mouse recently moved to and that's are going to provide you the data about the event so let's look at another one let's actually track the mouse you're like oh that wily mouse has gotten away from me how do I track the mouse mouse tracker might be real useful for break out just in case it wasn't clear what the mouse tracker is going to do is basically I'm going to have a run method here because there's actually some work I want to do other than just having listeners what am I going to do I'm going to create some empty label I'm going to make the font for that label real big so you can see it I'm going to add that label at a particular location on the screen because it's an empty label when I start out nothing will show up and then I listen I set up my mouse listeners and I'm like move mouse mouse and what I'm checking for is mouse moved that's the only listener that I'm setting up here if Mouse moves I get some events I'm going to change the text for that label to be a mouse with the XY location it moved to okay and I need to keep track of my label both here and here so I need to keep track of the label in between method calls so I actually have my label be a private instance variable okay so if i run this puppy you know it's like ten lines of code but check out just how cool it is well after it runs like how cool is it meirin we're going to track the mouse dudu we're running oh yeah see it moves off the screen stops tracking moves back into the screen start tracking one thing you can do if you're just totally bored is can you get two one zero comma zero it was much harder to do last night it was like 3m I'm like I should be preparing lecture but I want to see can I get to zero gamma zero I'm like you know an hour and a half later I was like there it is and then then I wept so besides the mouse there's also things you can do with the keyboard okay so the keyboard is also your friend so returning to our friend the slide besides tracking the mouse we can also do things with the keyboard you're like hey Mara on four breakout do I need to do anything with the keyboard not in the basic version of breakout but if you want to do like the cooler version a breakout where your paddle besides just being a Pavlik I'm like shoot it the bricks and take them down some people done that in the past it makes it him much easier but it's fun you can listen the keyboard event so keyboard events works just like Mouse events you add a listener but the listener you're going to add is key listeners it's perfectly fine for a program to add both Mouse listeners and key listeners why do you have to add these to begin with and the reason why you have to add these is because your program really needs to know do I need to pay attention to these things because it actually requires some work on the part of the computer to pay attention to these things because one thing you might just think oper is this whole listener thing is just dull Marylyn like any program I run yeah if I'm pressing the keyboard is just know about it right no not necessarily right if you're writing a piece of software that needs to run really fast and doesn't care where the mouse is why should you have it worry about where the mouse is or worry about what keys are being pressed so that's why this is a thing that's important to remember that you need to put in there but doesn't come in by defaults because it's actually programs where we care about efficiency and we don't care what the user is doing which sadly enough has many programs we don't have listeners okay so for the key listener there are three things you can check for these are the most common ones there's actually a few more there in the book but these are the ones you really need to worry about for most things there's cheap rest which is called when the user presses a key okay there's key released which is one they let go of the key so key pressed is when they push it down they have not let necessarily let go of the key Qi released is they've let up on the key so you can actually do funky things or when you press something like the screen goes black and then your roommate leaves and doesn't know what you're doing and then you who have flipped the key and it comes back you can actually do that she typed is basically like a click it's press and least together so when you press and release a key then generates a key typed event what you get in this e that you're getting is an event it's not a mouse event it's a key event and key events is an object which has information about for example which key was pressed and the book goes into the details of which key was pressed but I want to show you simple example of this well we don't even care what key was pressed all we care is that a key was pressed so yet another example whoa I can actually just close our point so what we're going to do is we're going to drag objects around what is drag objects do so drag objects is a graphics program and what I'm going to do is create a rectangle on the screen and add it create an oval on the screen and add it and add Mouse listeners and key listeners and you might see this and go Mehran why this is an init method as opposed to a run method shouldn't really be a run method because you're doing some work yeah probably you can get six a one-half dozen the other the book actually has a similar program for this is not the same program but a similar program they call it a knit over there so I just made it and it's kind of match the book so you're not like oh Maryland slides in the book or just completely wrong and they get in this death struggle no it's just it doesn't really matter that much okay but we create the rectangle we create the oval we add them both to the screen we add the listeners both the mouse listener and the key listener and now here is what we're going to do that's funky we're going to allow objects to be dragged on the screen what does that mean that means when you click on a rectangle on the screen and you move your mouse holding down the button that's called a drag we're going to have the rectangle move with you whoo-hoo rock on so mouse drag Mouse drag is going to get some Mouse events now there's a little bit of funkiness in here with this little g object thing what does that mean so I'll get back to that in just a second by first showing you what this G object is so what I'm going to keep track of in my program is a generic G object okay and you might say but Marilyn we don't create generic G objects yeah that's because this variable G object is either going to be the rectangle or the oval it can be either one they're both G objects so the common denominator is that they're G object so this object this variable is going to keep track of what object is currently being dragged on the screen what object I clicked on so I know what object I'm actually dragging whether it's the oval o or that I haven't clicked on any object at all G point is basically just something that holds an X&Y location it's a very simple object that we haven't talked about till right now but basically all the G points is it's a little tiny object and it has an X and a y location and so I can set the x and y okay Chinon the points and I can say give me with getters and setters get the X&Y location it's just a little convenient encapsulation I could have actually had this be a separate variable X and a separate variable Y I just created the G points you can see a G point and I'm going to have a little randomness in my program too so the random generator will once again rear its ugly head and so I have I get an instance of the random generator you'll see we're going to generate some random colors in just a second okay so with that said how does this mouse pressed and Mouse drag thing work Mouse pressed says when someone clicked the button right they have not yet released the button it is not a full click it's just that the mouse was pressed the mouse was pushed down I get this event and that event II basically has an x and y location associated with it as you saw in the previous example I can get the x and y location separately there's a way where I can just say 'i get points and it gets the X&Y location together and a little point object and gives that back to you which is why I created this thing called the G point so you can see it it's just a nicety that gives you the x and y at the same time and why say hey get that point and what I want to do is get the elements at that point so wherever you clicked call get elements at that will return to me the topmost object at the point you clicked if it's the rectangle it will give me back the rectangle if it's the oval and will give me back the Oval if there is no object at the point I clicked I get back something called null L you ll and that gets assigned to G object which means your G object there is no thing there is no object there null is just a way of referring essentially to no object but you can assign any object the value null to say there's not really an object here okay and so get element will either give you the oval the rectangle or null okay get element add something you're going to use in breakout pay close attention so what happens after the user clicks if I get an object at the place they clicked I now see are they moving the mouse if they're dragging the mouse after they click if they move the mouse at all that Jen rates events that are mouse dragged events so gets called with the position of the mouse that the mouse has been dragged to first thing I checked are you dragging an actual object when you click the mouse did you click it on top of an object if you did then Jia busines no if you didn't click it on an object then it is and also hey nothing to see here you didn't click on an object and now you're trying to drag around you got nothing to drag a buddy sorry thanks for playing I'm not going to do anything but if you did click on an object then what I'm going to do is move that object and remember movies and relative coordinates it says move this object relative to where it was before so I say get the X location and the Y location that the mouse has moved to from this event and subtract off essentially the last place that the mouse was which is where the mouse actually clicked on this object so I get some relative amounts of movements okay and now after you've moved the mouse I need to say the mouse is actually the new points now so I update the last point that the mouse was at to be equal to wherever the mouse was actually moved to so last is always the last location that the mouse was either dragged to or got clicked on okay last but not least is I want to change the color of the object that you last clicked on or that you're dragging to a random color if you type any keys I don't care what key you type I'm not actually look at what the key event was but if you typed any key key type will get called and if your object is not null I'm going to set its object color to be or the color of that object to be some random color but I'm going to get my random color generator on my random number generator is going to give me random colors so let me run this so you get a sense of what's actually going on how these pieces fit together doo-doo-doo it's like you could create a whole drawing program now all right so we're going to drag some objects around so when this puppy starts off we get a soul they happen to be slightly on top of each other if I click on the rectangle and move it ya notice how it tracks the mouse when I move it when I now click off the rectangle and try to move around nothing happens or if I click here and try to drag I'm holding the mouse button down nothing happens if I click on the oval and move it around oh it gets moved around now I want to be funky I press a key the last object I dragged gets assigned a random color oh that's kind of fun for about 3 seconds all right if I click on the other object and move it around you can actually see the oval was put in front of the rectangle and the Z ordering is not changing by me moving the objects around right I never say send the front or send to back or anything like that I could do that if I wanted to to bring an object up to the front which is kind of the behavior you might be used to from other applications when you click on something it comes to the front now I'm here because I'm not changing the Z order so it's just you know back over here but the last thing I clicked on I can also get random colors and change its colors yeah that's it's just yeah oh so much fun all right any questions about that we're dragging or clicking or changing colors yeah I could have done set location I just need to do a little bit more math for set location because I need to figure out to set the location of the object relative to where the mouse was clicked inside the object in its coordinate sort of up in this corner so one final thing I want to show you before you go because now you've seen all the code to actually be able to create a simple game like break out but here's another simple game just to show you another example of stuff going on okay I call it the UFO game I gave you all the code for the UFO game you may recognize this game oh yeah it's sort of like space invaders light remember space - anyone remember space invaders like to people yeah this thing is like coming down the screen toward you and you're in the middle and you get to shoot these little shots at it every time you click on the mouse and if it ever reaches the bottom of the screen you die but if you hit it on coming so close if you hit it it's gone okay I knew powers powers work let me just show you a little bit of the code so you can understand this will be important for breakout when the code runs how are you going to create the effect of animation and also other stuff going on at the same time I'm going to give each object in the world a chance to do something I'm going to call move UFO to allow it to move move bullet to allow it to move if there's a bullet in the air check to see if there's a collision between these two things and wait before I do this whole cycle again so I just continued you the cycle over and over right until my game is over and the way that I check my game is over is basically that little square got down to the bottom or I actually shot it and got a collision I'll leave it to you to look at the code because if I look go through the code in excruciating detail I'll probably get breakout questions but you have all the codes so you can understand how hopefully it works and you can leverage it for breakout so I'll see you on Friday

Channel: Stanford

Views: 149,935

Rating: 4.8983665 out of 5

Keywords: computer, science, technology, grades, programing, software, variable, names, language, java, class, setters, methods, public, private, Gimages, Gobjects, Gcompounds, Gpolygons, mouse, resizing, add, run, keyboard, events, breakout

Id: Iua9Klr0lfo

Length: 49min 50sec (2990 seconds)

Published: Wed Jul 02 2008