Lecture 10 | Programming Methodology (Stanford)

this presentation is delivered by the Stanford center for professional development that said are there any questions about classes right now just opera or anything we've done I want to spend a little bit of time touching on classes before we dive into our next great opportunity which is graphics so if we actually have the computer for a second I just want to briefly review the class that we wrote last time right so we wrote a class that hopefully is near and dear to many of you because many of you are instances of this class which is a student right and we went through and we talked about all the things that you actually want to have in a class and hopefully this is just review you have some constructors in the class you can have multiple different constructors in the class but here we just have one where we takes in a name and ID and that name and ID gets set to some instance variables or aivars that all students have namely student name and student ID so I'll scroll down to the bottom and here we have our private instance variables student name student ID and units earned these are the variables that every students object has their own copy of that's why their instance variables as opposed to say a class variable this guy over here because it's got a static is a class variable because it's got a final it's actually a constant as hopefully you've seen many times by now and so all units all students share units to graduate as the same constant value 180 okay so it's both a constant and a class variable most things that are constants make sense to be class variables because all elements of that class sort of share the same constant value all students require 180 units to graduate okay so we did a bunch of things in here we kind of went through one through the constructor we went through a few places where we said hey if you want to be able to access portions of this class which are private you can't directly access them from outside right that's why they're private so no one can touch your private parts and so what you needed to have was you need to have these functions if you wanted to allow people to access them that we refer to as getters and the reason why we refer to them as getters is because they start with the name get and what they do is they're public methods so someone can actually call these methods from outside of your class and they just return the value for some appropriate thing that the person would want like get ID would return student ID now you might say that's kind of weird why do I have these when student idea I could just make public and let people access it directly why would I do this so you can't change it right if student ID was public that's a public variable people can not only read what the value is they can set what the value is if I make it private I control access to it and here I could let you read what the ID is by giving you a copy of the ID I don't let you set it the only way the idea actually gets set is when a student first gets created and you get a student ID up here which you have for life so when you get created you have the ID for life that's actually true at Stanford as a faculty member now I have the same ID number no joke that I had when I was a student it's kind of funky they're just like you are in our universal system and you will be here for the rest of your life and it doesn't matter if you go away and then when you come back you will still be that same ID number because you can never change it once you're created same kind of idea going on over here with this class okay now sometimes we do allow someone to change something and we'll have what we call setters as well so for units we not only have get units which returns the number of units earned we also have what we refer to as a setter which sets the number of units and you might say okay that's kind of odd Marilyn if you're allowing someone to set the units and get the units why don't you just make that variable public right because at this point you're allowing someone to both set its value and get its value what else are you going to do with that variable and the reason why we still don't make a public is because of information encapsulation the person who's getting the number of units you have and setting the number of units you have doesn't need to know how we keep track of that information it could actually turn out that the way we get your units as we go through your whole transcript and total up all your units and we never actually store it as one value and that's how we get it back for the person and when they try to set it if they try to set more units than you already have we just create some dummy classes or if they try to reduce the number of units we drop some of your classes it happens occasionally so it doesn't matter how its implemented underneath the hood right it's information hiding all the person needs to know is that they can get it and set it in this case it's simple because it is just referring to one variable but and you'll see that often times is the case but not always which is why we still have this encapsulation and so for some things we have getters and setters okay and then there was a few other things here where we could increment the number of units someone has or we could check to see if they have enough units to graduate by just checking if their unit count is greater than graduating the number of units they need to graduate and last thing which I said all classes need and again I will repeat this because all classes you write that are not programs giant classes you write that does not extend say console program or graphics program should always have something called two string string is just text and what this does is it returns basically some piece of text that tells the person using this class what this object actually encapsulated does it needs to contain all the information in the object but here we're going to return the student's name and then the student ID number inside parens ok so that's a quick review of the class and part of the reason I want to do a quick review is we're actually going to extend this class which means remember when we talked about classes in the days of yore and we have classes and subclasses and super classes here's a student all of you are students now there are some specializations of student as well as a matter of fact some of you are for example frosh which is a kind of student and some of you are sophomores and some of you are juniors and some are you were seniors the size of the box doesn't actually mean anything other than you know it's smaller some of your grad students some of you are the dreaded other student we won't talk about that we'll just call you the other student because occasionally you may not be any of those things and we still need a way of keeping track of you but you're all of these things are classes which are specializations of student which means you have all the properties that a student does and perhaps some special properties that you may have by being in one of these particular classes okay so let's actually write one of these oh let's say let's write the frosh subclass how many people in here are freshmen frosh woohoo so hopefully I picked the majority class so we're just going to go ahead and pick a or create a new class by extending the student class so what we're going to do is we're going to build a class that extends the functionality of our existing student class okay and in this case what we want to do is create a frosh sub class of students so we want to create this sub class here called frosh that is a student which means it's going to extend student okay so frosh will have all the same properties that regular students do except for the fact that they start with zero units and I'm sure like many of you are sitting out there going oh no no no Marilyn there's wonderful thing called the AP exam uh yeah let's just pretend the AP exam didn't exist for the timing because there actually are some people as sad as it may be that start with zero units and so we're just going to say that all frosh start with zero units think of this as a number of units you've earned at Stanford and I know there was even a few of you out there who've earned a nonzero number of units at Stanford but let's just say it's zero be thankful it's not negative you're like all your freshmen you got negative 5 units thanks for playing now the one thing we're going to do is we're going to especially designate frosh in the strings to display an object so that to string method we talked about that it's has the name of the person and their ID number for the case of frosh in particular we're going to actually designate them as frost just because you're our age love you and they want to know who are the frosh right so we're going to have to find a way of saying hey if you want the string version of this object we're going to actually have the string contain the word frost okay so here's how we might do that first thing we're going to do is we need to define the frosh class so it's a public class frosh that extends student so every frosh is a student and then inside here we need to have a constructor for the frosh class okay or well for to create an actual frosh it's not going to bring the entire class into being at once it's going to bring each individual freshmen into a being and it's going to take in a name and an ID just like a regular student does now here's the funky thing okay what's the super thing all about okay if we're going to initialize a freshman what we need to say is hey as a freshman we're going to initialize you you're going to we're going to set your number of units to be zero because that's one of the properties the freshmen have is their number of unit start at zero but you're also going to have the same initialization done to you that all regular students do so how do I refer to the initialization process or the constructor that regular students go through right because I'm writing a special constructor for frosh and unless I specifically say go and do the same things that you would do for a regular student they won't happen so the way I specify that is I say super which doesn't necessarily mean like you're super although it could you know because because freshmen you're pretty super I don't know if when you got your acceptance letter there was like that little handwritten note on the bottom I remember when I got my acceptance letter was a different Deen than there is now and on the bottom it said super Mehran and I think that was the last handwritten thing I ever got from Stanford so super means call the constructor of the superclass okay so by calling supera name and ID what we're doing is saying what's the superclass of frosh it's student so this will call the super class of frosh which a student with name and ID which means it's going to go through that initialization process of setting name to be equal or setting student named that instance variable to be equal name and student ID to be ID okay the stuff that we did back over here so let's just hop back over here for a second the things that we do in the constructor of a student right so all of this stuff we still want to happen for freshmen which is when we say super name and ID it's actually calling essentially this function to initialize all of the fields of a regular student and then it's going to do some more stuff specifically for freshmen so when we come back over here and do our little super dance what we get is essentially the constructor of a student being called to set up a student this happens to be a freshman which the particular case of student so we're going to do some additional work by setting the number of units equal to zero okay so that's how we set up the constructor now the other thing I mentioned was we need to set a two string method now here's the funky thing you might take but Maryland students already had a two string method right so if I didn't do anything here wouldn't all frosh be able to give me a string version of what they are yeah they would but we want to create a specialization of it so what we do is we do something called overriding and overriding just means even though your superclass already had a method call to string in the subclass I'm going to define a new version of that method if the method has the same name and the same set of parameters which in this case happens to be none it does what's called overriding which means for all objects that are of type frosh when you call to string you're going to call this version of the method the version that exists in the student is no longer germane for frosh it's still germane say for sophomores or juniors who may not implement their own version of to string but for frosh it's going to call this version of it so overriding just means forget about the old version I'm sort of overriding it with my new funky version that's specific to this particular subclass ok any questions about overriding has to have the same name for the method and same parameter list so what we do here is remember student ID and student name are private now the funky thing about private is even when I extend the class when I create a sub class that sub class does not have access to the private elements and you're like whoa Marilyn that's kind of weird like I have a student and inside a student I can like play around with student name and student ID but as soon as I create this thing called frosh which is a subclass of student it doesn't have access to those private elements anymore okay which means if I want to be able to get the name and the idea of the student I can't just access the variables directly I need to access the corresponding getters get name and get ID so now if I call to string what I'm going to return is a string that says frosh : and then your name and ID number so that's how differentiates it from the standard version of to string is to string the regular one just provided name and ID number this one actually sort of designates you as a frosh because we know you're a member of the frosh class okay any questions about this notion of public versus private and why in a sub class you still can't access the private portions uh-huh is our question over there yeah so the way you can think of a sub class the sub class is just another class so the visibility that it has into its superclass is the same visibility than any other class would have okay so they can't access the private portions directly even though it's a sub class it needs to call public methods to be able to access those elements it can still access any of the public elements it just can't access the private elements directly okay which is kind of funky that sort of freaks on people out and there's this thing called protected that eventually we'll get into but we won't talk about it right now all you need to worry about is private in public but if you sort of extend the class if you create a sub class you need to understand that the sub class does not have access to the private elements okay all righty any questions about that are you feeling okay with that I'm feeling okay with that nod your head all righty we're we're mostly head nodding so that's a good thing all right so what I want to do now is now it's time for us to draw pictures it's just a lovely thing this is a really a day that's about graphics and graphics all about drawing pictures in a matter of fact for your last assignment you drew a bunch of pictures write you an assignment number one you drew some stuff that use the graphics library and life was all good so we're going to revisit that that drawing that you just did for your last assignment and just soup it up we're going to bump it up so you can do all kinds of funky things like animation and games and eventually we'll get into like where you can read mouse clicks in the whole deal and you will just be good to go but we got to build up from where we sort of started before so where we started before was the ACM graphics model right which is when you were writing graphics programs you were using the ACM graphics model and we talked about this before it's a collage right you basically start with this empty screen and you basically put little you know felt pieces onto the screen so you say what give me a square and give me an oval and throw it somewhere else and you just kind of add these things to a little canvas which is your empty screen to begin with okay now a couple things that sort of you may have noticed as you were doing the last assignment or you'll certainly notice here are newer objects that we add so when we add things to our canvas if it happens to obscure something else that's fun it'll just obscure it the newer things are sort of laid on top of the old things and this is something that we refer to as the stacking order or sometimes referred to as the Z order because if you're sort of like a Cartesian coordinate system person the z-axis comes out toward you right here's the x-axis here's the y-axis the axis comes toward you which imagine if you stack these things on top of each other if you think in 3d that's kind of the z-axis but if you don't think about that think of these as just pancakes you're laying on top of each other and you're stacking them and the new stuff occludes the stuff behind it okay and that's what we refer to as the stacking order so hopefully this is all review for you and as a matter of fact this stuff should all be reviewed right many moons ago oh say two weeks ago a week ago we talked about ACM graphics and we said there's this thing called a G object and a bunch of things that inherit from G object our G label G rect G oval and G line are all subclasses of G object and everyone was like oh yeah I remember that it was a good time like I was creating these objects I was adding them to my campus it was just fun and then you look at this diagram and you say hey meirin why did you draw it so funky and the reason why I drew it so funky is there's a whole bunch of other stuff that now it's time for you to learn about okay so here is kind of if we think about the ACM graphics package in the large and your oh man there's like points and dimensions and compounds in these 3d rectangles and all the stuff going on you don't need to worry about all that stuff okay there's just a whole bunch of stuff that comes along with Java and the ACM libraries and it's kind of like you know you're you're out there and you want it to buy like the basic car and you got the car and they put this jet engine on top fit you are like that's really bad for the environment I just really want to be able to drive my car without the jet engine they tell you okay well the jet engine is there but you never have to turn it on you're like alright that's cool and that's what we're going to do alright so all the stuff you see in yellow is stuff we're going to talk about and the rest of this stuff isn't really the jet engine right it's not that cool really the rest of this stuff is like you know like 70s racing stripes and like a big hood scoop and stuff like that it's like yeah you could have it on your car if you really wanted to but probably not in the 21st century so we're going to focus on all the stuff that really is kind of important for what we're doing then there's a few other things you can read them out them in the book but we're not going to spend class time on them you're not going to worry about them in this class if you really want to know you'll know but we're going to do all kinds of cool stuff for like images and polygons and just things that will be interesting hopefully okay so with that said let's first talk about this thing called G canvas and G canvas is this thing that kind of sits up down you're like yeah G canvas is not one of these objects that I sort of put you know that I kind of create and put up on my collage what's that all about so let's talk about that and get that out of the way and then we can focus on all these other things that we can kind of draw and put up on our board or a little canvas so what a G canvas is is it represents in some sense the background canvas of the collage it's the big piece of felt that we're going to put all the other little shapes on top of okay and you might say by Maryland didn't we already have one of these when I create a graphics program don't I already get sort of my empty canvas that I put stuff on yeah in fact you do what a graphics program does for you automatically just because it loves you that much is it automatically creates one of these G canvas objects and makes it large enough to fill the entire program window so actually when you're adding your objects to a graphics program you're actually adding them to a canvas or a G canvas object the graphics program has just created one for you seamlessly so up until now you never have to worry about it as a matter of fact for about the next five weeks you're not going to have to worry about it Oh two weeks you're not gonna have to worry about it okay and so you might say but if that's the case when I was calling ad and weren't my ad call methods like when I was calling us weren't they going to a graphics program because I never worried about this thing called G canvas yeah in fact they were going to the graphics program the graphics program had a method called ad when it got it it said hey you want to add an object I'll pass them over to the G canvas I created so what it was really doing was forwarding just like you think of call forwarding you get a call from your friend you're like oh yeah you want to talk to Bill this isn't Bill let me forward you over to Bill and you can talk to him they called the ad method on graphics program graphics program said oh yeah you want to add that well the person who really takes care of the adding is the canvas so I'll just call canvas passing in the same arguments to canvas that you pass to me that's called forwarding it's basically just some method that sits there that actually passes all the information that goes to it to someone else to actually do the work we also refer to that in the working world as management so you basically forward on to something else that does the real work okay and so forwarding to put it in the speak of object or in the receiver of a message right so before graphics program with the receiver of the message then call some other object with that same message okay so that's how we'd say it the sound real funky and get paid more money all right same kind of idea so it turns out that G canvas and G program which is or sorry graphics program which is really just forwarding a bunch of your calls over to g canvas support a whole bunch of methods some of which you've seen i want to give you the quick tour so there's ad you've certainly seen that it just takes some object some g objects like a g let rect or a g label and adds it to the screen and you can add some object at a particular XY location if that object doesn't already have some existing XY location so there's two versions of that method up until now we've told you how to add things now you're sort of old enough to actually taste like training wheels right before you could add training wheels now you can remove the training wheels so for an object you can actually say remove and it will take that object off of the canvas just rips it right out and if you want to get really funky if you're having a bad day and you just come in there and there's like this nice picture of bunnies and flowers and stuff and you just say no man that's not my world remove all it's just all gone all of the objects you put on that campuses each other like it takes the canvas outside shakes it out and all the little fluffy bunny pieces go away and it's remove all just clears it okay there's get elements at and this is a very funky thing you will use this in breakout play close attention what get elements ad does is it you give it a particular XY location a pixel location on the screen what it will return to you is the front most object at that pixel location if one exists on the canvas if one does not exist on the campus it will return to you something called null and null just basically means no object okay you can assign null to something of type G object but that just basically means that G object object is trying to deal with is just like there's nothing there okay otherwise it will actually give you back a G object which could be a specific thing it could be a G rect a geo vilage Ilan whatever it is but all of those G Rex geo will G lines are all of type G object so in fact even if it gives you a G rect it's still giving you a G object back because a G rect is just a specialization of a G object so will actually give you back an object that's at that XY location that might be real useful for example if you're playing a game that has a bunch of bricks across the screen and when your ball is supposed to be hitting one of the bricks you want to check to see is there actually a brick there you could call get elements at and if there are some little brick which is actually saying G rect it will give you back that G rect object which then for example you might want to remove okay just a few hints uh-huh this is an XY coordinate of the whole screen of the canvas and if there is some object at that XY coordinate anywhere if that point is income is has an object that is that point is encompassed by that object it will return the object and just before most object that's why you care about the stacking order because if there's multiple objects there you get the frontmost one get with and get height you probably knew about when you were centering stuff right gets the width and pixels of the entire campus in the height in pixels the entire canvas which is for the entire screen if you're talking about a graphics program and set background color this kind of new kind of funky you want to set a different background color than white you just pass in a color and it will set the entire color for that canvas or the entire window in the case of a graphics program to that color which is kind of fun okay now there's a couple other things that only graphics programs do G canvases do not do these just graphics program do them and they're very useful for games and animation one is called pause in milliseconds what it does because computers these days run real fast if you ran a game without any pauses in it people would just not be able to play the game so you can pause for some number of milliseconds which is thousandths of a second so what it does when it gets here is it basically just sort of stops execution for some number of thousandth of a second and then keeps going so it allows you programs to kind of slow down a little bit to make them playable and sometimes you want to wait for a click and there's a strangely enough a method called wait for click and it suspends the program basically your program just stops executing until someone hits the mouse button and then once they click on the mouse it keeps executing again ok so those are some useful things for games or even for debugging sometimes if you're doing a graphics program and at some point you want to stop and say hey let me stop the program here and see how far it's gotten and I don't want it to go any further until I click you could just stick a wait for click but call inside your graphics program okay so here's the class hierarchy for just the G object this is the stuff we're going to focus on here right you've already seen G label gxg oval and G line we're going to spend a little bit more time on G label to get into the specific nuances of it and then we'll talk about some of the other stuff as well okay so here are some methods that are common to all G objects so everything that is a G object which includes all of this stuff is going to inherit all of these methods okay a lot of these you've seen before set location for an object you said it's X&Y location move which you said it's offset by some DX and dy which is just how much in the x-direction and how much in the y-direction your object should move that's real useful for animation and I'll show you an example of that in just a second okay get X&Y this just returns the x-coordinate of the object and the y-coordinate of the object okay which for example would be the upper left-hand corner for something that's large get width and height this is actually pretty useful it turns out you know if you have you have some rectangle you know what its width and height are later on you might want to if you forget you forget the storm you could actually ask it what your width and height this is actually really useful also for text because if you want to draw some piece of text centered in the screen you actually don't know how big those characters our until you actually figure out what its font is and all that stuff so you a lot of times you want to create your text I'll show you an example this momentarily and then after you've created the G label say hey what's your height and width so I can Center you appropriately in the screen contains which is also kind of similar to get elements out but a little bit different it actually returns true or false it basically returns true if an object contains the specified point so this is a method you call on a particular object so you can tell like some rectangle hey do you contain this point rectangle and it'll say yes or no or true and false if it actually contains that point okay set color and get color hey it's a pair of setters and getters just like you saw with students uh-huh question pardon it has to do with what the particulars yourself so this is one of those things where I would ask you to actually do it experimentally right so there's a lot of things you can just try out just try the experiment um if you want you can read it in the book but it's actually more fun to try the experiment because you'll see get some somewhat funky behavior all right sorry get color and set color as you would imagine sets the color of the object or guessed the color of the object here's one that's we haven't talked about so far it's kind of funky set visible and is visible so set visible you've set it either to be false or true if it's false the thing becomes invisible if it's true it becomes visible you might say hey Marilyn how is that different than remove I thought removed takes an object off of the canvas this is not taking an object off of the canvas it's just making that object invisible which means if you want to have some object on the campus and flash it for example to be there or not be there all you need to do is set its visibility to alternate between true and false you don't need to keep removing and adding it back on because we're moving and in adding it back on potentially changes the Z order right because that object now gets tacked on to the front if this object was in the middle somewhere you don't want to change it Z order by removing it and tagging it back onto the front you just want to make it invisible where it is okay and you can ask an object for its visibility last but not least if you want to change that Z order if you're actually a big fan of drawing programs a lot of these methods will look familiar to you sense a front sent to back brings an object either the front or the back of the Z order send forward or move forward moves it back one level in the Z order if you want to actually just reorder stuff in the Z order of objects uh-huh I knew you were going to ask that try it try it and you'll find out all righty because a lot of these things are actually interesting and then you realize that you probably would never do this in real life but if you want to try it out it's more fun to be experimental than just giving you the answers for a lot of these things because then you'll never try it so I want you to at least try a few methods defined by interfaces what does that mean what is an interface so there's this funky notion we talked about in computer science or actually it has a specific meaning in Java we talked about in computer science in general as well but it's the notion of an interface and an interface sometimes people think of always that like a graphical interface is that like you know the using my mouse and little things that appear on my screen that's one kind interface that's an interface that humans work with there are interfaces the programs work with and basically all the interfaces the way you can think about this is it's a set of methods okay that's what in some sense defines the interface and why do you care about defining some particular set of methods because what you want to be able to say is there is a set of objects or set of classes that all have these methods so you have some set of classes that have that set of methods right that seems like kind of a funky thing why would you want to do that you might say well hey Marilyn there's kind of a similar concept right isn't that whole concept of inheritance you talked about sort of like this right because if you have over here your G object and you have something that's a G label and you have something else that's a G rect you told me a G object has some set of methods so doesn't the fact that G label and G Rex are both G objects aren't they some set of classes that have the same set of methods yes that would be true and so then you might ask yourself so what's different about this thing called an interface than just inheriting from some class and the difference is that sometimes you want the set methods to be shared by a set of classes which don't have this kind of hierarchical relationship okay so some an example of that might be for example a class called an employee and students for example can be employees but they're going to be people who are not students who are employees okay as well and there might be some entirely different class of people who are employees so if I had to do something called an employee here and I might say hey well it's Stanford I have a bunch of different specializations like I have my frosh employee and I have my you know other employee over here that's a senior employee and then Stanford comes along and says yeah but there's also this thing called a professor and not all professors or employees and you're like really yeah sometimes it happens just weird trust me okay but it turns out that sometimes you could not only have you know some person is a senior employee who's an employee but some person who is a senior employee is also potentially a professor and you're like but professors have some methods associated with them not many but they have some employees have some methods associated with them so there's these different sets of methods that I want for example to have one of these guys to be able to share but there wasn't a direct hierarchical relationship that's what you specify in an interface you basically just say is interface is the set of stuff and I'll tell you which classes actually provide that set of stuff and they don't have to have any kind of hierarchical relationship it's just a way of decoupling the hierarchy from having some set of common things that you'd like to do okay so let me show you some examples of that in the graphics world okay so there's something called G fillable that's an interface so G fillable is a set of methods that a certain set of classes have in the certain classes that have it or a G RK g oval a G polygon and a g rect okay so notice you might say hey meirin yeah those are all g objects why isn't everything that's G objects G fillable because there are some things like a G label that's a G object that's not fillable okay so that direct-hire relationship doesn't hold I have some subset of the classes that actually have this and fillable are just the things that can be filled so set filled I said to be either true or false just like you've done with G Rex or G ovals and pass the filled zit that either sets it to be just an outline or filled I can ask it if it's filled by saying is filled that returns a boolean true or false if it's filled I can set the fill color I can get the fill color getters and setters once again rearing their ugly heads so fillable is just a certain set it's an interface and there's a certain set of classes that that what we refer to as implement that interface which means they provide all the methods in that interface and there's some other interfaces like there's resizable G images G ovals and G wrecks are resizable which is kind of funky and resizable just means you can set their size so you can set the dimensions of the object to be different after you've created the initial version of the object or you can set the bounds of the object which is both its location and its width and height you can change those after you've created the object right a G label I can't do that with okay and there's one more set of interfaces which is called scalable or G scalable and a whole bunch of things actually implement G scalable or provide for you the set of methods in the G scalable interface G arcs G compound some of these we haven't even seen before you're like right what's a G arc don't worry we'll get there you've seen G line you've seen G oval you've seen G rect you'll get all the other G's in there it's all about the G today that's just what's going on and so you can scale these things which you give it some scale factor which is a double-a value of one point L means leave it unchanged that's basically 100% now you can potentially scale it if you give it a value like 0.5 it means shrink it by 50% in the X and y direction if you give it this version if you give it this version you can actually set the scaling in the X and y direction to be different and I'll show an example of that momentarily it's kind of funky it's fun you can destroy your pictures it's easy it's one method all right so let me give you a little animation just to put a few of these things together a little bouncing ball so if we come over here and you should have the code for this in one of your handouts I'm going to create a little bouncing ball and I'll go through some of the constants pretty quickly the ball has a diameter and some number of pixels there's a gravity which is at every time step how how much more quickly is the ball going downward how much it is affected by gravity so every cycle it same speed is increased by three does some delay a number of milliseconds for the bouncing ball otherwise it'll just go way too quick and you want see it so we'll have a 50-second millaa millaa second delay between every update of the bouncing ball the starting X&Y location of the ball is basically just at you know why is it 100 the X is near the left hand side of the screen because it's basically that ball is diameter divided by 2 the ball has a constant velocity in the x-direction which is 5 and every time the ball balances it loses some speed so how much of its speed does it keep it keeps 90% of its speed basically that's what the ball bounce is just what fraction of its speed does it keep as it goes along and so our starting velocities for x and y or the X velocity is never going to change it's just going to be set to be whatever the starting X velocity is we're never action to change it the Y velocity which is how much the ball is moving in this direction starts at zero and over time it's going to increase until it hits the ground or the bottom of our screen and then it'll bounce up and we'll see how to implement that and our ball is just a little G oval so I'm going to have some private instance variable that's a G oval that's the ball I'm going to create and then I'm going to move it around okay so what am I going to do first of all in my program I'm going to do this thing called set up what a set up actually do so when I do the run I call set up what is set up to set up says create a new ball at the starting X&Y location with the given diameter in both the height and the width okay so it's basically just creating a circle at that location it sets the ball to be filled and it says add the ball to the canvas so basically all set up does this it adds a ball somewhere an oval a G oval that's filled somewhere onto the campus that's great that's all setup does it created the ball add it to the canvas now how are we going to animate it the way we're going to animate it is as long as the ball's x-coordinate is not yet the width of the screen which means the ball is going to sort of bounce across the screen like this until it's gotten to the end of the screen I'm just going to keep running the animation once it sort of bounces off the right-hand side of the screen game over right it's gone past the width of the screen so what I'm going to do on every iteration is I'm going to move the ball I'm going to check for a collision to see if the ball has hit the bottom of the screen and after I check for collision right which is if it hits the bottom of the screen I need to send it back up I'm going to pause before I move the ball again so that's my cycle move the ball check for collision wait move the ball check for collision wait sort of like standard animation okay so what is move ball and check for collision do move ball is extremely simple it just says on every time step I increase how fast the ball is going down which is why velocity by gravity so I plus equal its current and why velocity with whatever gravity is a hard question well when I declare it right all upset is set aside the space for that object when I say new G oval it actually created the object so I need to create the object before I can use it by just declaring the variable I haven't actually created the object okay so up here when I declare this G oval up here this private G oval that just says give me the box that's going to store that object that's G oval I don't actually fill it up with a G oval until I do the new okay so I have to do that new to actually create the object so move ball I just showed you right we accelerate by gravity and we move the ball in the X direction in the Y direction right the X Direction is always going to remain constant so the ball is is slowly going to move across the screen but its Y velocity is going to change because it's going to bounce check for collision looks way more funky than it is here's all that's going on and check for collision I check to see if the y coordinate of the ball is greater than the height of the screen - the ball is diameter if it is that means the ball has not hit the bottom of the screen yet right because it's Y core sorry if it if it's greater it means the ball has hit the bottom of the screen because it would be below the bottom of the screen because Y coordinates go down so if the ball is Y is greater than the height of the screen - its diameter right because we have to give the ball some room to be able to hit the bottom of the screen which is the diameter then if it hasn't fallen below the floor there's nothing to do if it would have fallen before being under the floor then what I do is say hey you're going to bounce off the floor which means when you hit that floor change your Y velocity to be the negative of what it was before which means if you were going down before your Y was increasing now you're going to be going up or your Y is going to be decreasing okay so change your velocity to be the negative of what it was before x the percentage of your bounce that you're keeping which is 90 percent right so it's going to slow down every time it bounces in terms of how far up it's going to go but just by whatever this percentage is but the important thing is you need to reverse its direction because it's bouncing off the ground last but not least this is just kind of a minor technical point but I'll show you anyway it's all in the comments if the ball would have fallen through the floor like it was actually moving so fast that it actually was like here and one time step in the next time step would have been below the floor we just say take the difference from the floor and pretend you already bounced off the bottom so we'll just kind of add that over to the top side and you'll just essentially take that amount that you would have bounced through the floor and say the bounce already happened and go back up slide technical point but this is the math that does it not a big deal what does this actually look like it's a bouncing ball Oh animation right you can play games and then the simulation ends when it goes off that end of the screen okay it's just so cool you just want to run it again but I won't because we have more stuff we want to cover but now you two can balance the ball and you can like make a different colors and every time it hits the bottom you can set random color and your ball like changes every times it is and it's like oh my god there's so much I can do it's so cool yes there is and we won't explore it all right now but what we'll do is explore a couple more things okay so our friend the G Label class you're like oh but Marilyn I already saw the G Label class right I've been doing G labels since the cows came home I did G label on this last assignment I know how to create a new label at a particular location to change its fonts change its color and to add it so what what new are you going to tell me and on that slide I'm not going to tell you anything new what I'm going to tell you new is on the next slide which is what's the actual geometry of this G label class if you want to Center stuff in the screen for example so there's a bunch of typesetting concepts that are related to G lot to a G label first of them is the base line the base line is basically the line on which the text appears but notice there are some things that actually go down below the base line that's the way typesetting works you actually have a base line some characters like a J or P go below the base line so when you're setting up a particular G label the value that you set for where that G label should actually be placed is the origin of the base line it's the far left hand corner of the base line it's not down where you get these descending characters it's the base line that most characters are actually sitting on so then you say well how do I get like the dissents in the a sense and all this other stuff well before you do that the height of a font is its distance between two successive base lines okay but more importantly if you're just trying to center one line in the screen you care about two things called the asset and the descent the asset is the amount above the baseline by which the tallest character can actually reach okay the descent is the distance that any character will drop below the baseline right so for Y's and GS and J's and stuff you actually have some nonzero descent which is the amount below the baseline so if you want to figure out how big something is usually when we Center stuff we just come care about the assets we don't actually care about the descent so if you want to center something here's an example of centering something we again have our little text hello world we set it to be big we set it to be read notice we haven't figured out where on the screen to put it yet because we're going to compute that after we set the size of the font so we know how big it is now we can ask this label how big are you how wide are you how tall are you so to get in the to get it to display right in the center of the screen its x-coordinate is going to be the width of the whole screen minus the width of the label right so we're going to take the width of the whole screen subtract off the width of the label and divide the whole thing by 2 that will give us this location right here the other thing we need to do is figure out how to Center relative to the height of the characters what we do is we get the assets we don't care about the descent of the character standard typesetting kind of concept but now you know you get the a sense of your fonts which is how high it goes above the baseline you subtract that off from the width of your window and you divide by two that will tell you what the point is right there in terms of the y direction to be able to figure out how to Center this text and then you add it at that particular Y XY location okay so now that you know how to actually make your font bigger or whatever you can figure out the size of your text so you can appropriately space it on the screen okay a couple more things before we wrap up for today last thing I want to cover is this thing called the G arc class what is a G arc actually there's a couple things I want to cover the GR class is basically just drawing an arc somewhere it's a little bit more complicated than it looks friends of mine who are artists tell me that you can draw everything in the world using just straight lines and arcs is that true yes no maybe let's just pretend it is you already know how to draw a line right you have G lines and now that you know draw how do you wait drew gr caft er a couple more slides you can draw anything in the world it just might take you a whole bunch of the objects to draw okay so an arc is formed by taking a section from the perimeter of an oval what does that mean okay basically it looks something like this the steps that are necessary to define that arc is we specify the coordinates and size of some bounding rectangle just like you did with a gee oval right a gee oval sits inside some rectangle and that's what tells you what the dimensions of the oval are here I've drawn it as a circle so here's the bounding rectangle and it's got some upper left-hand location so we have some XY upper left-hand location we have a width and a height okay that's going to do what's going to define for us what essentially the oval is going to look like but we're not going to draw the whole oval we're just going to draw an arc from the oval how do we specify the arc to draw we need to specify something called the start angle and the sweep angle so where does the start and sweep angle both of these angles are things that are measured in degrees starting at this line so starting at the x axis okay so if I say for in my start is 45 degrees it goes up 45 degrees and says your start would be here your sweep is what portion of the oval you actually draw out in degrees so if I set a sweep of 180 I will draw out a semicircle because I'll draw 180 degrees starting at the 45 degree mark okay and it always draws in the counterclockwise direction if you give a positive values if you give it a start value or a sweep angle in negative values it will start on the other side and go in the clockwise direction so let me show you some examples of that because that's kind of a big mouthful what does that really mean here's just a few examples so you know we're going to draw some arcs centered in the middle of the screen so we're going to figure out CX and CY let's just assume they're the middle of the window we already computed them using get width and get height and D which is the diameter of the oval we're going to be using or the circle in this case is just pre-configured to be 0.8 times the height of the screen okay so if we do something like we say create a new G arc that has its bounding box being D and D that basically means we're going to have some oval that's height and width are both the same being D which means it's just going to be a circle with diameter D we're going to start at the zero degree arc remember three o'clock is where we start zero degrees and we're going to sweep out an arc of 90 degrees and that goes in the counterclockwise direction because it's positive so we get an arc that's essentially this little quarter quarter of that circle because it's ninety degree arc starting at zero degrees okay there are some other things we could do we could for example say hey you know what I want to do is start that same circles the same size right it's height and width or both D start at the 45 degree mark so coming up 45 degrees from sort of this three o'clock mark is right there have a sweep of 270 degrees so we get this big portion of the circle one looks like a giant C but that's 270 degrees of the circle we can do some slightly more funky things using negative numbers for example where we say draw a new arc your starting point is negative 90 degrees what does that mean it means 90 degrees going going clockwise so I started three o'clock I go 90 degrees clockwise that's right here and then I sweep out an arc of 45 degrees which is counterclockwise because it's positive so it sweeps up 45 degrees okay one more for the road this one says start at zero degrees and set your sweep to be negative 180 degrees so if it's negative hundred eighty degrees it goes in the clockwise direction 180 degrees starting from zero and we get this thing that looks like half of a circle or a smiley face okay so any questions about jerk there's all kinds of stuff you can do with G arc but at least if you understand the basic geometry hopefully it'll make sense uh-huh you can fill a G arc so last slide before you go okay is a filled G arc good question basically if you write a G arc whatever that G arc is and you said it's filled to be true what you get instead of just the arc is you get the pie wedge that you would have gotten associated with that arc okay so just imagine you had some solid line that sweeps out the arc that's what you get with the filled version of a gr any questions all right then I will see you on Wednesday

Channel: Stanford

Views: 177,157

Rating: 4.9352942 out of 5

Keywords: computer, science, technology, grades, programing, software, variable, names, language, java, class, constructors, instance, variables, setters, methods, public, private, units, extending, string, acm., graphics, GCanvas, GArc, graphicsprograms, interface

Id: YpZCKVG4s5k

Length: 46min 59sec (2819 seconds)

Published: Wed Jul 02 2008