














Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
An overview of classes, inheritance, and interfaces in object-oriented programming, using the student and frosh classes as examples. The instructor explains the concept of private instance variables, constructors, and subclasses, and discusses the differences between classes and interfaces. Students will learn about the properties and methods of gobject, glabel, grect, and other related classes, as well as the concept of forwarding and interfaces.
Typology: Study notes
1 / 22
This page cannot be seen from the preview
Don't miss anything!















Programming Methodology-Lecture
Instructor (Mehran Sahami): Okay, I would just, even at this point, just email text. Might be easier. I think we need to get started.
Let’s go ahead and get started. Couple quick announcements before we start. So one of them is that there are three handouts in the back, including your next assignment. And your next assignment’s a little game called Breakout. How many people have ever heard of a game called Breakout?
Yeah, when I was a wee tyke, just [inaudible] to the game, actually. It was my favorite game ever. And it was just fun. And you’re actually gonna be implementing it. How cool is that?
So that’s one of your handouts. There’s a couple other handouts. There’s a section handout and a handout of some code examples.
One thing, just so you know, in the handout on Breakout, it actually will refer to a Web demo. So if you wanna sort of see how the game plays – because it’s hard to capture an actual game in just screenshots. There’s a few screenshots in your handout.
But if you wanna actually get an idea for how the game plays, there’s a demo of the actual working game on the Web page. So if you go to the CS106a Web page, both on the Announcements page, as well as on the Assignments page for Assignments 3, there’s a link you can click on for demo, and that will actually take you to an executable demo of the game so you can play it.
Assignment No. 2, as you all know, is due today. So quick, painful – hopefully it wasn’t too painful for you. But we’ll just see how long it took.
Anyone in the zero- to two-hour category? A couple folks, actually. Two to four? Good to see. Four to six? Ooh. Six to eight? Eight to ten? Ten to 12? Twelve to fourteen?
Student: [Inaudible] a lot.
Instructor (Mehran Sahami): Few folks on 12 to 14. Fourteen to 16? And 16-plus? Oh, wait, do I have any 14 to 16? No, there’s a couple section leaders in the back row – 14 to
Student: [Inaudible]
Instructor (Mehran Sahami): All righty. Thanks for letting me know. Once again, the world is normal, and the world is where you would expect it to be, which is hopefully, most folks are below kind of this 10-hour mark because it’s what we’re shooting for. Good times if you are. If you’re not, if there was some kind of – I’d ask you to please be
quiet if you’re just coming in right now. In terms of if you’re in one of these higher sections, if there was some bug that just caused a problem for you, and you figured it out, and it wasn’t a big issue, that’s fine.
Sometimes, that will cause you a couple of extra hours. If it was really a conceptual issue, that there was something where you just didn’t know what was going on – maybe you just wrote a bunch of code, and eventually, it worked, or you needed to get a lot of help for it to work, please come talk to me. Talk to the TA, Ben, or talk to your section leader to make sure those issues are clarified because we’re just gonna keep building on the stuff that you’ve done. You’ll actually see a lot more graphics today.
So with that said, I actually want to kind of ask you a sort of a “where we’re at” kind of question. So last time, we talked about perhaps the most critical concept in the class, which is classes, oddly enough for the name. So I wanted to ask, actually, a quick question. So far, with where we’re at and what we’ve done in the class, how many people are just generally feeling okay? If you’re feeling okay, raise your hand.
Okay. How many people think we’re going too slow? Couple folks.
How many people are just – are feeling like we’re going too fast, or you’re feeling overwhelmed? Okay.
So first of all, if you are feeling overwhelmed, if you’re out of the category of just fast and into the category of overwhelmed, that’s kinda why I asked those together. If you’re feeling overwhelmed, please come talk to me, or talk to your section leader, or talk to Ben.
We’re happy to spend as much time as you need to make sure you don’t feel overwhelmed, and you feel like you understand everything that’s going on in the class. Have no qualms about coming to talk to us. That’s why we’re here. It’s more fun when we actually get a chance to talk to you if you’re having any problems.
And in that sense, I think we’re kinda going at a reasonable pace, perhaps a little bit quickly. But that’s kinda how we have to be at to actually cover all the material in the class.
So with that said, are there any questions about classes right now, just [inaudible] anything we’ve done?
I wanna spend a little bit of time touching on classes before we dive into our next great topic today, which is graphics. So if we actually have the computer for a second, I just wanna briefly review the classes that we wrote last time.
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. And we went through, and we talked about all the things that you actually wanna have in a class. And hopefully this is just review.
come back, you will still be that same ID number because you can never change it once you’re created.” Same kinda idea going on over here with this class.
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 GetUnits, 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 kinda odd, Marilyn. If you’re allowing someone to set the units and get the units, why don’t you just make that variable public?” because at this point, you’re allowing someone to both set its value and get its value. What else are you gonna do with that variable?
And the reason why we still don’t make it public is because of information encapsulation. The person who is 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 is 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, and that happens occasionally.
So it doesn’t matter how it’s implemented underneath the hood. 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 oftentimes is the case, but not always, which is why we still have this encapsulation. And so for some things, we have getters and setters.
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. And any classes you write that does not extend, say, console program or graphics program, should always have something called ToString.
String is just text, and what this does is it just returns, basically, some piece of text that tells the person using this class what this object actually encapsulated. It doesn’t need to contain all the information in the object. But here, we’re gonna return the student’s name and then the student ID number inside parens.
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 gonna extend this class, which means remember when we talked about classes in the days of yore, and we had classes and subclasses and superclasses?
Here’s a student. All of you are students. Now, there’s some specializations of students, 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 of you are seniors.
The size of the boxes don’t actually mean anything other than it’s smaller. Some of you are 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.
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? Woo-hoo. So hopefully, I picked the majority class.
So we’re just gonna go ahead and pick a – create a new class by extending the student class. So what we’re gonna do is we’re gonna build a class that extends the functionality of our existing student class. And in this case, what we wanna do is create a Frosh subclass of students. So we wanna create the subclass here called Frosh that is a Student, which means it’s gonna extend Student.
So Frosh will have all the same properties that regular Students do, except for the fact that they start with 0 units. And I’m sure like many of you are sitting out there going, “Oh, no, no, no, Marilyn. There’s a wonderful thing called the AP exam.”
Yeah, let’s just pretend the AP exam didn’t exist, for the time being because there actually are some people, as sad as that may be, that start with 0 units. And so we’re just gonna say that all Frosh start with 0 units.
Think of this as the number of units you’ve earned at Stanford. And I know there’s even a few of you out there who’ve earned a non-0 number of units at Stanford. But let’s just say it’s 0. Be thankful it’s not negative. You’re like, “Oh, you’re a freshman. You get negative 5 units. Thanks for playing.”
Now, the one thing we’re gonna do is we’re gonna specially designate Frosh in the strings that display an object. So that two-string method we talked about – it has the name of a person and their ID number. For the case of Frosh in particular, we’re going to actually designate them as Frosh just because your RAs love you, and they wanna know who are the Frosh?
So that’s how we set up the constructor. Now, the other thing I mentioned was we need to set a ToString method.
Now, here’s the funky thing. You might say, “But Marilyn, student’s already had a ToString method. 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 wanna create a specialization of it.
So what we do is we do something called overriding. And overriding just means even though your Super class already had a method called ToString, 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 ToString, you’re gonna 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 ToString, but for Frosh, it’s gonna 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.
Any question 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. And now, the funky thing about private is even when I extend the class, when I create a subclass, that subclass does not have access to the private elements.
And you’re like, “Whoa, Marilyn, that’s kinda weird. I have a Student, and inside a Student, I can 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, which means if I wanna be able to get the name and the ID of the student, I can’t just access the variables directly. I need to access the corresponding getters GetName and GetID.
So now if I call ToString, what I’m going to return is a string that says Frosh: and then your name and ID number. So that’s how it differentiates it from the standard version of ToString is ToString. 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.
Any questions about this notion of public versus private and why in a subclass, you still can’t access the private portions?
Uh-huh? Is there a question over there?
Student: Yeah, so if the [inaudible] class [inaudible] Super class?
Instructor (Mehran Sahami): Yeah, so the way you can think of the subclass is the subclass is just another class. So the visibility that it has into its super class is the same visibility that any other class would have. So it can’t access the private portions directly, even though it’s a subclass. 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, which is kinda funky.
That sort of freaks some people out, and there’s this thing called protected, which eventually we’ll get into, but we won’t talk about it right now. All you need to worry about it private and public.
But if you sort of extend the class, you create a subclass. You need to understand that the subclass does not have access to the private elements.
Any questions about that? Are you feeling okay with that? If you’re feeling okay with that, nod your head. Well, we’re mostly heading on in, so that’s a good thing.
So what I wanna do now is now it’s time for us to draw pictures. It’s just a lovely thing. This is really a day that’s about graphics. And graphics is all about drawing pictures. And a matter of fact, for your last assignment, you drew a bunch of pictures, right? You – in Assignment No. 1, you drew some stuff that used the graphics library, and life was all good.
So we’re gonna revisit that drawing that you just did for your last assignment and just soup it up. We’re gonna bump it up so you can do all kinds of funky things like animation and games. And eventually, we’ll get into where you can read a mouse clicks and the whole deal. And you will just be good to go. But we gotta build up from where we sorta started before.
So where we started before was the ACM graphics model, 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. You basically start with this empty screen, and you basically put little felt pieces onto the screen. So you’re saying, “Give me a square,” and, “Give me an oval, and throw it somewhere else.” And you just kinda add these things to a little canvas, which is your empty screen to begin with.
Now, a couple things that you sort of may have noticed as you were doing the last assignment, or you’ll certainly notice here. Newer objects that we add, so when we add things to our canvas, if it happens to have obscured something else, that’s fine. 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 we refer to it as the Z-order because if you’re sort of like that Cartesian coordinate system person, the Z- axis comes out toward you. Here’s the X-axis; here’s the Y-axis. The Z-axis comes
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 kinda draw and put up on our board or our little canvas.
So what a GCanvas is, is it represents, in some sense, the background canvas of the collage. It’s the big piece of felt that we’re gonna put all the other little shapes on top of. And you might say, “But Marilyn, 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 GCanvas 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 GCanvas object. The graphics program has just created one for you seamlessly, so up until now, you never had to worry about it. As a matter of fact, for about the next five weeks, you’re not gonna have to worry about it – oh, two weeks you’re not gonna have to worry about it.
And so you might say, “But if that’s the case, when I was calling Add, won’t my Add call methods? When I was calling those, weren’t they going to a graphics program because I never worried about this thing called GCanvas?”
Yeah, in fact, they were going to the graphics program. The graphics program had a method called Add. And when it got it, it said, “Hey, you wanna add an object? I’ll pass them over to the GCanvas I created.”
So what it was really doing was forwarding, just like you think of call forwarding – get a call from your friend, you’re like, “Oh, yeah, you wanna talk to Bill? This isn’t Bill. Let me forward you over to Bill, and you can talk to him.”
We call the Add method on graphics program. Graphics program said, “Oh, yeah, you wanna 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’ve passed to me.” That’s called forwarding. It’s basically just some method that sits there that actually passes all the information that goes [inaudible] 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.
And so forwarding, to put it in the speak of object-oriented programming, is when the receiver of a message, so before, graphics program was the receiver of the message, then call some other object with that same message. So that’s how we’d say it to sound real funky and get paid more money. Same kind of idea.
So it turns out that GCanvas and GProgram – or sorry, graphics program, which is really just forwarding a bunch of your calls over to GCanvas, support a whole bunch of methods, some of which you’ve seen. And I wanna give you the quick tour.
So there’s add, and you’ve certainly seen that. It just takes some object, some GObject like a GRect or a GLabel, and adds it to the screen. And you can add some object at a particular x-y location if that object doesn’t already have some existing x-y location. So there’s two versions of that method.
Up until now, we’ve told you had to add things. Now you’re sort of old enough to actually say – it’s like training wheels. 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 wanna get really funky – if you’re having a bad day, and you just come in there, and there’s this nice picture of bunnies and flowers and stuff, and you just say, “No, man, that’s not my world. RemoveAll.” And it’s just all gone. All of the objects you put on that canvas is – it takes the canvas outside, shakes it out, and all the little, fluffy bunny pieces go away. And it’s RemoveAll. It just clears it.
There’s GetElementAt, and this is a very funky thing. You would use this in Breakout. Pay close attention. What GetElementAt does is it – you give it a particular x-y location, a pixel location on the screen. What it will return to you is the frontmost object at that pixel location if one exists on the canvas. If one does not exist on the canvas, it will return to you something called null. And null just basically means no object.
You can assign null to something of type GObject, but that just basically means that GObject is trying to deal with – is just there’s nothing there.
Otherwise, it will actually give you back a GObject, which could be a specific thing. It could be a GRect, a GOval, a GLine, whatever it is. But all of those GRect, GOval, GLines are all of type GObject. So in fact, even if it gives you a GRect, it’s still giving you a GObject back because the GRect is just a specialization of a GObject. So we’ll actually give you back an object that’s at that x-y 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 wanna check to see is there actually a brick there? You could call GetElementAt, and if there is some little brick, which is actually, say, a GRect, it will give you back that GRect object, which then, for example, you might wanna remove.
Just a few hints – uh-huh?
Student: On the x-y coordinate, is it – it’s not the x-y coordinate that’s the top left-hand corner, right? It’s just [inaudible] –
Instructor (Mehran Sahami): This is an x-y coordinate of the whole screen of the canvas.
Student: [Inaudible]
GetXAndY – this just returns the x coordinate of the object and the y coordinate of the object, which, for example, would be the upper left-hand corner for something that’s large.
GetWidthAndHeight – this is actually pretty useful. Turns out if you have some rectangle, you know what its width and height are. Later on, you might wanna, if you forget – you forget the [inaudible], you could actually ask it what’s your width and height?
This is actually really useful for text because if you wanna draw some piece of text centered in the screen, you actually don’t know how big those characters are until you actually figure out what its font is and all that stuff. So you – a lot of times you wanna create your text. I’ll show you an example of this momentarily. And then after you’ve created the GLabel, say, “Hey, what’s your height and width so I can center you appropriately on the screen?”
Contains, which is also kind of similar to GetElementAt, but a little bit different – it actually returns true or false. It basically returns true if an object contains the specified point. So this same method you call on a particular object. So you can tell some rectangle, “Hey, do you contain this point, rectangle?” And it’ll say “yes” or “no” or “true” or “false” if it actually contains that point.
SetColor and GetColor – hey, it’s a pair of setters and getters, just like you saw with students. Uh-huh, question?
Student: [Inaudible] rectangle, or [inaudible]?
Instructor (Mehran Sahami): Pardon?
Student: [Inaudible] contains the area of the shape, or the [inaudible]?
Instructor (Mehran Sahami): It has to do with the – what the particular shape is yourself. So this is one of those things where I would ask you to actually to do it experimentally. So there are a lot of things you can just try out. Just try the experiment. If you want, you can read it in the book, but it’s actually more fun to try the experiment because you’ll get somewhat funky behavior.
GetColor and SetColor, as you would imagine, sets the color of the object or gets the color of the object.
Here’s one that we haven’t talked about so far. It’s kinda funky – SetVisible and IsVisible. So SetVisible – you set it to be either 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 Remove 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 wanna have some object on the canvas 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 removing it and adding it back on potentially changes the Z-order because that object now gets tacked onto the front. If this object was in the middle somewhere, you don’t wanna change the Z-order by removing it and tightening it back onto the front. You just wanna make it invisible where it is. And you can ask an object for its visibility.
Last, but not least, if you wanna change that Z-order – if you’re actually a big fan of drawing programs, a lot of these methods will look familiar to you. SendToFront and SendToBack brings an object either the front or the back of the Z-order. SendForward or MoveForward moves it back one level in the Z-order if you wanna actually just re-order stuff in the Z-order of objects.
Uh-huh?
Student: If you set an object to be invisible, and then you [inaudible]?
Instructor (Mehran Sahami): I knew you were gonna ask that. Try it. Try it, and you’ll find out because a lot of these things are actually interesting, and then you realize that you would probably never do this in real life. But if you wanna 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 of them.
Methods defined by interfaces – what does that mean? What is an interface? So there’s this funky notion we talk about in computer science – or actually, it has a specific meaning in Java. We talk about it in computer science in general as well. But it’s the notion of an interface. And an interface – sometimes people think of, “Oh, is that like a graphical interface? Is that like using my mouse and little things that appear on my screen?”
That’s one kind of interface. That’s the interface that humans work with. There are interfaces that programs work with. And basically, all an interface is – the way you can think about this is it’s a set of methods. That’s what, in some sense, defines the interface. And why do you care about defining some particular set of methods? Because what you wanna be able to say is there’s a set of object or set of classes that all have these methods.
So you have some set of classes that have that set of methods. That seems like kind of a funky thing. Why would you wanna do that? You might say, “Well, hey, Marilyn, there’s kinda a similar concept. Isn’t that whole concept of inheritance you talked about sort of like this because if you have over here your GObject, and you have something that’s a GLabel, and you have something else that’s a GRect, you told me a GObject has some set of methods, so doesn’t the fact that GLabel and GRect are both GObject – aren’t they some set of classes that have the same set of methods?”
So Fillable is just a certain set – it’s an interface, and there’s a certain set of classes that – what we refer to as implement that interface. That means they provide all the methods in that interface.
And there’s some other interfaces. There’s Resizable. GImages, GOvals, and GRects are resizable, which is kinda 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. A GLabel I can’t do that with.
And there’s one more set of interfaces, which is called Scalable or GScalable. And a whole bunch of things actually implement GScalable or provide for you the set of methods in the GScalable interface. GArcs, GCompounds – some of these we haven’t even seen before, and you’re like, “Marilyn, what’s a GArc?” Don’t worry, we’ll get there. You’ve seen GLine. You’ve seen GOval. You’ve seen GRect. You’ll get all the other Gs 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 1 point [inaudible] means leave it unchanged. That’s basically 100 percent.
Now, you can potentially scale it. If you give it a value like .5, it means shrink it by 50 percent 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 you an example of that momentarily. It’s kinda funky. It’s fun. You can destroy your pictures. It’s easy. It’s one method.
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 gonna 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 much more quickly is the ball going downward? How much is it affected by gravity? So every cycle, its speed is increased by 3.
[Inaudible] some delay in number of milliseconds for the bouncing ball? Otherwise, it’ll just go way too quick, and you won’t see it, so it’ll have a 50-second millisecond delay between every update of the bouncing ball.
The starting x and y location of the ball is basically just at – y is at 100; x is near the left- hand side of the screen because it’s basically the ball’s diameter divided by 2. The ball has a constant velocity in the x direction, which is 5. And every time the ball bounces, it loses some speed, so how much of its speed does it keep? It keeps 90 percent of its speed, basically. That’s what the ball bounces. It’s 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’s never gonna change. It’s just gonna be set to be whatever the starting x velocity is. We’re never actually gonna change it. The y velocity, which is how much the ball is moving in this direction, starts at 0, and over time it’s gonna increase until it hits the ground under the bottom of our screen, and it’ll bounce up. And we’ll see how to implement that.
And our ball is just a little GOval, so I’m gonna have some private instance variable that’s a GOval that’s the ball I’m gonna create. And then I’m gonna move it around.
So what am I gonna do? First of all, in my program, I’m gonna do this thing called Setup. What does Setup actually do? So when I do the Run, I call Setup. What does Setup do? Setup says, “Create a new ball at the starting x and y location with a given diameter in both the height and the width.” 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 Setup does is it adds the ball somewhere – an oval, a GOval, that’s filled somewhere onto the canvas. That’s great. That’s all Setup does. It created the ball, added to the canvas. Now, how are we gonna animate it?
The way we’re gonna animate it is as long as the ball’s x coordinate is not yet the width of the screen, which means the ball’s gonna sort of bounce across the screen like this – until it’s gone to the end of the screen, I’m just gonna keep running the animation. Once it sort of bounces off the right-hand side of the screen, game over. It’s gone past the width of the screen.
So what I’m gonna do on every iteration is I’m gonna move the ball. I’m gonna check for a collision to see if the ball has hit the bottom of the screen. And after I check for collision, which is if it hits the bottom of the screen, I need to send it back up, I’m gonna 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, sorta like standard animation.
So what is MoveBall and CheckForCollision do? MoveBall’s extremely simple. It just says on every time step, I increase how fast the ball is going down, which is its y velocity, by gravity. So I plus-equal its current y velocity with whatever gravity is.
Uh-huh? Question?
Student: Why do [inaudible] oval at the top and then [inaudible]?
Instructor (Mehran Sahami): Well, when I declare it, all it said is set aside the space for that object. When I say NewGOval, it actually creates 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.
But now you, too, can bounce the ball, and you can make it different colors. And every time it hits the bottom, you can set RandomColor, and your ball changes every time it [inaudible]. And you’re just 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 will do is explore a couple more things. So our friend, the GLabel class – you’re like, “Oh, but Marilyn, I already saw the GLabel class. I’ve been doing GLabel since the cows came home. I did GLabel on this last assignment. I know how to create a new label in a particular location, to change its font, to change its color, and to add it. So what new were you gonna tell me?” And on that slide, I’m not gonna 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 GLabel class if you wanna center stuff on the screen, for example?
So there’s a bunch of typesetting concepts that are related to GLine – to GLabel. First of them is the baseline. The baseline is basically the line on which the text appears. But notice there are some things that actually go down below the baseline. That’s the way typesetting works. You actually have a baseline – some characters, like a j or a p, go below the baseline.
So when you’re setting up a particular GLabel, the value that you set for where that GLabel should actually be placed is the origin of the baseline. It’s the far left-hand corner of the baseline. It’s not down where you get these descending characters. It’s the baseline that most characters are actually sitting on.
So then you say, “Well, how do I get the descent and the ascent and all this other stuff?” Well, before you do that, the height of a font is its distance between two successive baselines.
But more importantly, if you’re just trying to center one line in the screen, you care about two things called the ascent and the descent. The ascent is the amount above the baseline by which the tallest character can actually reach. The descent is the distance that any character will drop below the baseline. So for ys and gs and js and stuff, you actually have some non-zero descent, which is the amount below the baseline.
So if you wanna figure out how big something is, usually when we center stuff, we just care about the ascent. We don’t actually care about the descent. So if you wanna 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 red. We haven’t figured out where on the screen to put it yet because we’re gonna 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 – to get it to display right in the center of the screen, its x coordinate is gonna be the width of the whole screen minus the width of the label. So we’re gonna 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 ascent. We don’t care about the descent of the characters. Standard typesetting kinda concept, but now you know. You get the ascent of your font, which is how high it goes above the baseline. You subtract that off from the width of your window, and you divide by 2. 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 – x-y location.
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.
Couple more things before we wrap up for today. Last thing I wanna cover is this thing called the GArc class. What is a GArc? Actually, there are a couple things I wanna cover. The GArc class is basically just drawing an arc somewhere. It’s a little bit more complicated than it looks. Friends of mine that 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. You have GLine. So now that you know how to draw it – GArc after a couple more slides, you can draw anything in the world. It just might take you a whole bunch of little objects to draw it.
So an arc is formed by taking a section from the perimeter of an oval. What does that mean? 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 the GOval. A GOval 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 a bounding rectangle, and it’s got some upper left-hand location. So we have some x-y upper left-hand location. We have a width and a height. That’s one of – what’s gonna define for us what essentially the oval is gonna look like.
But we’re not gonna draw the whole oval. We’re just gonna 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 [inaudible] 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.
So if I say for 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. And it always draws in the counterclockwise direction if you give it 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.