Lecture 10 | Programming Methodology (Stanford)
-
0:11 - 0:14This presentation is delivered by the Stanford Center for Professional
-
0:14 - 0:21Development.
-
0:22 - 0:25With that said, are there any questions about classes
-
0:25 - 0:27right now, just a priori anything we've done?
-
0:27 - 0:31I wanna spend a little bit of time touching on classes before we dive into our
-
0:31 - 0:33next great topic today, which is graphics.
-
0:33 - 0:36So if we actually have the computer for a second,
-
0:36 - 0:38I just wanna briefly review the class that we wrote last time. So we
-
0:39 - 0:42wrote a class that hopefully is near and dear to many of you because many of you
-
0:42 - 0:45are instances of this class, which is a student. And we
-
0:45 - 0:46went through, and we talked about
-
0:46 - 0:49all the things that you actually wanna have in a class. And hopefully this is just
-
0:49 - 0:50review.
-
0:50 - 0:53You have some constructors in the class. You can have multiple different constructors
-
0:53 - 0:55in the class.
-
0:55 - 0:59But here, we just have one where we take in a name and ID, and that name and ID
-
0:59 - 1:03gets set to some instance variables or ivars that all students have,
-
1:03 - 1:06namely student name and student ID.
-
1:06 - 1:07So I'll scroll down to the bottom,
-
1:07 - 1:10and here we have our private instance variables,
-
1:10 - 1:14student names, student ID, and units earned. These are the variables that
-
1:14 - 1:15every student's
-
1:15 - 1:19object has their own copy of. That's why they're instance variables as opposed to,
-
1:19 - 1:21say, a class variable.
-
1:21 - 1:24This guy over here, because it's got a static, is called a class variable because it's
-
1:24 - 1:28got a final that's actually a constant, as hopefully, you've seen many times by now.
-
1:28 - 1:33And so all units - all students share units to graduate as the same constant
-
1:33 - 1:34value, 180.
-
1:34 - 1:38So it's both a constant and a class variable. Most things that are constants
-
1:38 - 1:40make sense to be class variables because
-
1:40 - 1:45all elements of that class sort of share the same constant value. All students
-
1:45 - 1:47require 180 units to graduate.
-
1:47 - 1:50So we did a bunch of things in here, and we kinda went through the
-
1:50 - 1:51constructor.
-
1:51 - 1:55We went through a few places where we said, "Hey, if you wanna be able to access
-
1:55 - 1:59portions of this class which are private, you can't directly access them from
-
1:59 - 2:02outside." That's why they're private. So no one can touch your private parts.
-
2:02 - 2:05And so what you needed to have was you needed to have these functions if you wanted
-
2:05 - 2:07to allow people to access them,
-
2:07 - 2:11that we refer to as getters. And the reason why we refer to them as
-
2:11 - 2:14getters is because they start with the name "get."
-
2:14 - 2:16And what they do is they're public
-
2:16 - 2:19methods. So someone can actually call these methods from outside of your class.
-
2:19 - 2:20And they just return
-
2:20 - 2:24the value for some appropriate thing that the person would want. GetID
-
2:24 - 2:25would return student ID.
-
2:25 - 2:27Now, you might say that's kinda weird.
-
2:27 - 2:31Why do I have these getters when student ID, I could just make public and let
-
2:31 - 2:37people access it directly? Why would I do this? [Inaudible]
-
2:37 - 2:39So you can't change it. If
-
2:39 - 2:42student ID was public, that's a public variable. People cannot
-
2:42 - 2:45only read what the value is; they can set what the value is.
-
2:45 - 2:49If I make it private, I control access to it, and here, I could let you read what
-
2:49 - 2:52the idea is by giving you a copy of the ID.
-
2:52 - 2:55I don't let you set it. The only way the ID actually gets set
-
2:55 - 2:57is when a student first gets created,
-
2:57 - 2:59and you get a student ID up
-
2:59 - 3:02here, which you have for life. So when you get created, you have the ID for
-
3:02 - 3:04life. This is actually true at Stanford.
-
3:04 - 3:07As a faculty member, now, I have the same ID number, no joke,
-
3:07 - 3:10that I had when I was a student. It's kinda funky, and it's just like, "You are in our
-
3:10 - 3:11universal system,
-
3:11 - 3:13and you will be here for the rest of your life. And it doesn't matter if you go
-
3:13 - 3:14away,
-
3:14 - 3:17and then when you come back, you will still be that same ID number because you can
-
3:17 - 3:19never change it once you're created."
-
3:19 - 3:22Same kinda idea going on over here with this class.
-
3:22 - 3:25Now, sometimes we do allow someone to change something.
-
3:25 - 3:29And we'll have what we call setters as well. So for units,
-
3:29 - 3:32we not only have GetUnits, which returns the number of units earned. We also
-
3:32 - 3:35have what we refer to as a setter, which sets the number of units.
-
3:35 - 3:38And you might say, "Okay, that's kinda odd, Mehran. If you're allowing someone to
-
3:38 - 3:42set the units and get the units, why don't you just make that variable public?"
-
3:42 - 3:45because at this point, you're allowing someone to both set its value
-
3:45 - 3:46and get its value.
-
3:46 - 3:48What else are you gonna do with that variable?
-
3:48 - 3:50And the reason why we still don't make it public
-
3:50 - 3:52is because of information encapsulation.
-
3:52 - 3:55The person who is getting the number of units you have and setting the number of
-
3:55 - 3:57units you have
-
3:57 - 4:00doesn't need to know how we keep track of that information.
-
4:00 - 4:03It could actually turn out that the way we get your units is we go through your
-
4:03 - 4:06whole transcript and total up all your units. And we never actually store it as one
-
4:06 - 4:09value, and that's how we get it back for the person.
-
4:09 - 4:12And when they try to set it, if they try to set more units than you already have,
-
4:12 - 4:15we just create some dummy classes. Or if they try to reduce the number of units,
-
4:15 - 4:18we drop some of your classes, and that happens
-
4:18 - 4:19occasionally.
-
4:19 - 4:22So it doesn't matter how it's implemented underneath the hood.
-
4:22 - 4:25It's information hiding. All the person needs to know is that they can get it and set
-
4:25 - 4:28it. In this case, it's simple because it is just referring to one variable.
-
4:28 - 4:32But - and you'll see that oftentimes is the case, but not always, which is why we still
-
4:32 - 4:33have this encapsulation.
-
4:33 - 4:36And so for some things, we have getters and setters.
-
4:36 - 4:39And then there was a few other things here where we could increment the number
-
4:39 - 4:42of units someone has, or we could check to see if they have enough units to graduate by
-
4:42 - 4:45just checking if their unit count is greater than graduating -
-
4:45 - 4:47the number of units they need to graduate.
-
4:47 - 4:50And last thing, which I said all classes need - and again, I will repeat this because
-
4:50 - 4:56all classes you write that are not programs. And any classes you write that does not extend, say,
-
4:56 - 4:58console program or graphics program,
-
4:58 - 5:02should always have something called ToString. String is just text,
-
5:02 - 5:05and what this does is it just returns, basically, some piece of text
-
5:05 - 5:09that tells the person using this class what this object actually encapsulated. It
-
5:09 - 5:12doesn't need to contain all the information in the object.
-
5:12 - 5:15But here, we're gonna return the student's name and then the student ID
-
5:15 - 5:17number inside parens.
-
5:17 - 5:20So that's a quick review of the class. And part of the reason I want to do a quick
-
5:20 - 5:22review is we're actually gonna extend this class,
-
5:22 - 5:23which means
-
5:23 - 5:27remember when we talked about classes in the days of yore, and we had classes and
-
5:27 - 5:29subclasses and superclasses? Here's a
-
5:29 - 5:30student.
-
5:30 - 5:32All of you are students.
-
5:32 - 5:35Now, there's some specializations of students, as well. As a matter of fact, some of you
-
5:35 - 5:40are, for example, frosh, which is a kind of student. And some of you are sophomores.
-
5:40 - 5:45And some of you are juniors. And some of you are seniors. The size of the boxes don't
-
5:45 - 5:48actually mean anything other than it's smaller. Some of you are grad
-
5:48 - 5:49students.
-
5:49 - 5:53Some of you are the dreaded other
-
5:53 - 5:58student. We won't talk about that. We'll just call you the other student because occasionally,
-
5:58 - 6:01you may not be any of those things, and we still need a way of keeping track of you.
-
6:01 - 6:05But you're - all of these things are classes, which are specializations of Student,
-
6:05 - 6:09which means you have all the properties that a student does, and perhaps some
-
6:09 - 6:13special properties that you may have by being in one of these particular classes.
-
6:13 - 6:17So let's actually write one of these - oh, let's say - let's write the frosh
-
6:17 - 6:20subclass. How many people in here are freshmen, frosh?
-
6:20 - 6:22Woo-hoo. So hopefully, I picked the majority class.
-
6:22 - 6:25So we're just gonna go ahead and pick a
-
6:25 - 6:29- create a new class by extending the student class. So what we're gonna do is
-
6:29 - 6:33we're gonna build a class that extends the functionality of our existing student
-
6:33 - 6:34class.
-
6:34 - 6:37And in this case, what we wanna do is create a Frosh subclass of students. So we
-
6:37 - 6:41wanna create the subclass here called Frosh that is a Student, which means it's
-
6:41 - 6:43gonna extend Student.
-
6:43 - 6:48So Frosh will have all the same properties that regular Students do,
-
6:48 - 6:50except for the fact that they start with 0 units. And I'm sure like many of
-
6:50 - 6:53you are sitting out there going, "Oh, no, no, no, Mehran.
-
6:53 - 6:55There's a wonderful thing called the AP exam."
-
6:55 - 6:58Yeah, let's just pretend the AP exam didn't exist, for the time being because there
-
6:58 - 7:01actually are some people, as sad as that may be,
-
7:01 - 7:04that start with 0 units. And so we're just gonna say that all Frosh
-
7:04 - 7:06start with 0 units. Think of this as the number of units you've earned at
-
7:06 - 7:07Stanford.
-
7:07 - 7:10And I know there's even a few of you out there who've earned a non-0 number of units at
-
7:10 - 7:13Stanford. But let's just say it's 0. Be thankful it's not negative. You're like, "Oh,
-
7:13 - 7:17you're a freshman. You get negative 5 units. Thanks for playing."
-
7:17 - 7:19Now, the one thing we're gonna do is we're gonna specially designate
-
7:19 - 7:23Frosh in the strings that display an object. So that two-string method we talked about
-
7:23 - 7:27- it has the name of a person and their ID number.
-
7:27 - 7:30For the case of Frosh in particular, we're going to actually designate them as Frosh
-
7:30 - 7:34just because your RAs love you, and they wanna know who are the Frosh?
-
7:34 - 7:36So we're gonna have to find a way of saying,
-
7:36 - 7:40"Hey, if you want the string version of this object, we're gonna actually have
-
7:40 - 7:42the string contain the word "Frosh" in
-
7:42 - 7:44it. So here's how we might do that. First thing we're gonna do is we need to define
-
7:44 - 7:46the Frosh class.
-
7:46 - 7:48So it's a public class, Frosh,
-
7:48 - 7:53that extends Student. So every Frosh is a Student. And then inside here, we need to
-
7:53 - 7:55have a constructor for the Frosh class
-
7:55 - 7:59or, well, for - to create an actual Frosh. It's not gonna bring
-
7:59 - 8:02an entire class into being at once. It's gonna bring each individual freshman into
-
8:02 - 8:06being. And it's gonna take in a name and an ID, just like a regular Student
-
8:06 - 8:09does. Now, here's the funky thing.
-
8:09 - 8:12What's the super thing all about?
-
8:12 - 8:14If we're gonna initialize a freshman,
-
8:14 - 8:16what we need to say is, "Hey,
-
8:16 - 8:19as a freshman, we're gonna initialize you. You're gonna - we're gonna set
-
8:19 - 8:22your number of units to be 0 because that's one of the properties the
-
8:22 - 8:25freshman have - is their number of units start at 0. But you're also going to
-
8:25 - 8:29have the same initialization done to you that all regular students do."
-
8:29 - 8:34So how do I refer to the initialization process, or the constructor,
-
8:34 - 8:38that regular Students go through because I'm writing a special constructor for Frosh.
-
8:38 - 8:41And unless I specifically say, "Go and do the same things that you would do for a
-
8:41 - 8:44regular student, they won't happen."
-
8:44 - 8:47So the way I specify that is I say, "Super," which
-
8:47 - 8:48doesn't necessarily mean,
-
8:48 - 8:51"You're super," although it could. It could because freshmen, you're pretty super.
-
8:51 - 8:54I don't know if when you got your acceptance letter, there was that little
-
8:54 - 8:55handwritten note on the bottom. I
-
8:55 - 8:58remember when I got my acceptance letter, it was a different dean than there is now. And on the
-
8:58 - 9:00bottom, it said, "Super, Mehran," and I think that was the last handwritten thing I
-
9:00 - 9:03ever got from Stanford.
-
9:03 - 9:08So "super" means call the constructor of the Super class.
-
9:08 - 9:12So by calling Super a name and ID, what we're doing is saying, "What's the Super
-
9:12 - 9:13class of Frosh?" It's Student.
-
9:13 - 9:16So this will call the Super class
-
9:16 - 9:18of Frosh, which is Student,
-
9:18 - 9:21with name and ID, which means it's gonna go through that initialization
-
9:21 - 9:25process of setting name to be equal or setting student name - that instance
-
9:25 - 9:26variable to be equal name,
-
9:26 - 9:31and student ID to be ID, the stuff that we did back over here.
-
9:31 - 9:34So let's just hop back over here for a second.
-
9:34 - 9:39The things that we do in the constructor of a Student -
-
9:39 - 9:42so all of this stuff we still wanna happen for freshmen, which is when we say
-
9:42 - 9:45Super name and ID, it's actually
-
9:45 - 9:47calling, essentially, this function,
-
9:47 - 9:50to initialize all of the fields of a regular student. And then it's gonna do some
-
9:50 - 9:53more stuff specifically for freshmen. So
-
9:53 - 9:55when we come back over here
-
9:55 - 9:59and do our little Super dance,
-
9:59 - 10:01what we get is, essentially,
-
10:01 - 10:05the constructor of a Student being called to set up a Student, which happens to be a
-
10:05 - 10:07freshman, which is the particular case of student.
-
10:07 - 10:10So we're gonna do some additional work by setting the number of units equal to
-
10:10 - 10:120.
-
10:12 - 10:15So that's how we set up the constructor. Now, the other thing I mentioned was we
-
10:15 - 10:17need to set a ToString method.
-
10:17 - 10:19Now, here's the funky thing. You might say,
-
10:19 - 10:21"But Mehran, student's already
-
10:21 - 10:22had a ToString method.
-
10:22 - 10:26So if I didn't do anything here, wouldn't all Frosh be able to give me a
-
10:26 - 10:28string version of what they are?"
-
10:28 - 10:29Yeah, they would,
-
10:29 - 10:33but we wanna create a specialization of it. So what we do is we do something
-
10:33 - 10:36called overriding. And overriding just means
-
10:36 - 10:40even though your Super class already had a method called ToString,
-
10:40 - 10:44in the subclass I'm going to define a new version of
-
10:44 - 10:45that method.
-
10:45 - 10:47If the method has the same name
-
10:47 - 10:51and the same set of parameters, which in this case happens to be none,
-
10:51 - 10:54it does what's called overriding, which means for all objects that are of
-
10:54 - 10:56type Frosh,
-
10:56 - 10:59when you call ToString, you're gonna call this version of the method.
-
10:59 - 11:03The version that exists in the Student is no longer germane for Frosh. It's still
-
11:03 - 11:06germane, say, for sophomores or juniors who may not implement their own version
-
11:06 - 11:07of ToString,
-
11:07 - 11:08but for Frosh,
-
11:08 - 11:11it's gonna call this version of it. So overriding just means
-
11:11 - 11:15forget about the old version. I'm sort of overriding it with my new, funky version
-
11:15 - 11:18that's specific to this particular subclass.
-
11:18 - 11:20Any question about overriding?
-
11:20 - 11:22Has to have the same name for the method and same parameter list.
-
11:22 - 11:25So what we do here is
-
11:25 - 11:29remember, student ID and student name are private. And now, the funky thing about
-
11:29 - 11:32private is even when I extend the class, when I create a subclass,
-
11:32 - 11:36that subclass does not have access to the private elements. And you're like,
-
11:36 - 11:40"Whoa, Mehran, that's kinda weird. I have a Student, and inside a Student, I
-
11:40 - 11:42can play around with Student name and Student ID.
-
11:42 - 11:46But as soon as I create this thing called Frosh, which is a subclass of Student,
-
11:46 - 11:50it doesn't have access to those private elements anymore,
-
11:50 - 11:54which means if I wanna be able to get the name and the ID of the student, I
-
11:54 - 11:55can't just access the variables directly.
-
11:55 - 11:59I need to access the corresponding getters GetName and GetID.
-
11:59 - 12:01So now if I call ToString,
-
12:01 - 12:04what I'm going to return is a string that says Frosh:
-
12:04 - 12:06and then your name and ID number.
-
12:06 - 12:09So that's how it differentiates it from the standard version of ToString is ToString.
-
12:10 - 12:13The regular one just provided name and ID number. This one actually sort of
-
12:13 - 12:15designates you as a Frosh because we know
-
12:15 - 12:18you're a member of the Frosh class.
-
12:18 - 12:20Any questions about this notion of
-
12:20 - 12:23public versus private and why in a subclass,
-
12:23 - 12:30you still can't access the private portions? Uh-huh? Is there a question over there? Yeah, so if the [inaudible] class [inaudible]
-
12:36 - 12:40Super class? Yeah, so the way you can think of the subclass is the subclass is just another
-
12:40 - 12:41class.
-
12:41 - 12:45So the visibility that it has into its super class is the same visibility that
-
12:45 - 12:46any other class would have.
-
12:46 - 12:50So it can't access the private portions directly, even though it's a
-
12:50 - 12:54subclass. It needs to call public methods to be able to access those elements.
-
12:54 - 12:56It can still access any of the public elements.
-
12:56 - 13:00It just can't access the private elements directly,
-
13:00 - 13:03which is kinda funky. That sort of freaks some people out, and there's this thing called
-
13:03 - 13:06protected, which eventually we'll get into, but we won't talk about it right now. All
-
13:06 - 13:08you need to worry about it private and public.
-
13:08 - 13:11But if you sort of extend the class, you create a subclass. You need to understand
-
13:11 - 13:17that the subclass does not have access to the private elements.
-
13:17 - 13:20Any questions about that?
-
13:20 - 13:24Are you feeling okay with that? If you're feeling okay with that, nod your head.
-
13:24 - 13:28Well, we're mostly head nodding, so that's a good thing.
-
13:28 - 13:32So what I wanna do now is now it's time for us to draw pictures.
-
13:32 - 13:35It's just a lovely thing. This is really a day that's about graphics. And graphics is all
-
13:35 - 13:36about drawing pictures. And a matter of fact,
-
13:36 - 13:40for your last assignment, you drew a bunch of pictures, right? You - in Assignment No.
-
13:40 - 13:441, you drew some stuff that used the graphics library, and life was all good.
-
13:44 - 13:46So we're gonna revisit
-
13:46 - 13:49that drawing that you just did for your last assignment and just supe it up. We're
-
13:49 - 13:53gonna bump it up so you can do all kinds of funky things like
-
13:53 - 13:55animation and games. And eventually, we'll get into
-
13:55 - 13:58where you can read a mouse clicks and the whole deal. And you will just be good to
-
13:58 - 13:59go.
-
13:59 - 14:02But we gotta build up from where we sorta started before. So where we started
-
14:02 - 14:03before was
-
14:03 - 14:06the ACM graphics model, which is when you were writing graphics programs,
-
14:06 - 14:09you were using the ACM graphics model. And we talked about this before.
-
14:09 - 14:12It's a collage. You basically start with this empty screen,
-
14:12 - 14:16and you basically put little felt pieces onto the screen. So you're saying,
-
14:16 - 14:18"Give me a square," and,
-
14:18 - 14:20"Give me an oval, and throw it somewhere else." And
-
14:20 - 14:23you just kinda add these things to a little canvas, which is your empty screen
-
14:23 - 14:26to begin with. Now,
-
14:26 - 14:28a couple things that you sort of may have noticed as you were doing the
-
14:28 - 14:31last assignment, or you'll certainly notice here. Newer objects that we add,
-
14:31 - 14:34so when we add things to our canvas,
-
14:34 - 14:37if it happens to have obscured something else, that's fine. It'll just obscure it.
-
14:37 - 14:40The newer things are sort of laid on top of the old things.
-
14:40 - 14:44And this is something that we refer to as the stacking order, or sometimes we
-
14:44 - 14:47refer to it as the Z-order because if you're sort of like that Cartesian
-
14:47 - 14:48coordinate system person,
-
14:48 - 14:53the Z-axis comes out toward you. Here's the X-axis; here's the Y-axis. The
-
14:53 - 14:54Z-axis comes toward you,
-
14:54 - 14:57which imagine if you stack these things on top of each other, if you think in
-
14:57 - 14:593D, that's kind of the Z-axis.
-
14:59 - 15:01But if you don't think about that, think of these as just pancakes you're laying on
-
15:01 - 15:03top of each other.
-
15:03 - 15:04And you're stacking them.
-
15:04 - 15:07And the new stuff occludes the stuff behind it.
-
15:07 - 15:09And that's what we refer to as the stacking order.
-
15:09 - 15:11So hopefully, this is all review for you.
-
15:11 - 15:13And as a matter of fact, this
-
15:13 - 15:14stuff should all be review.
-
15:14 - 15:17Many moons ago, oh, say two weeks ago, a week ago,
-
15:17 - 15:20we talked about ACM graphics, and we said
-
15:20 - 15:23there's this thing called a GObject, and a bunch of things that inherit from
-
15:23 - 15:29GObject are GLabel, GRect, GOval, and GLine - are all subclasses of GObject.
-
15:29 - 15:32And everyone was like, "Oh, yeah, I remember that. It was a good time. I was
-
15:32 - 15:35creating these objects. I was adding them to my canvas. It was just fun."
-
15:35 - 15:40And then you look at this diagram, and you say, "Hey, Mehran, why do you draw it so funky?"
-
15:40 - 15:43And the reason why I drew it so funky is there's a whole bunch of other stuff
-
15:43 - 15:46that now it's time for you to learn about. So
-
15:46 - 15:50here's kind of we think about the ACM graphics package in the large,
-
15:50 - 15:53and you're like, "Oh, man, there's points and dimensions and compounds and these 3D
-
15:53 - 15:55rectangles and all this stuff going on."
-
15:55 - 15:58You don't need to worry about all that stuff. There's just a whole bunch of
-
15:58 - 16:01stuff that comes along with Java and the ACM libraries.
-
16:01 - 16:02And it's kinda like
-
16:02 - 16:04you're out there, and you wanted to buy the basic car.
-
16:04 - 16:08And you got the car, and they put this jet engine on top of it, and you're like,
-
16:08 - 16:11"That's really bad for the environment. I just really wanna be able to drive
-
16:11 - 16:14my car without the jet engine." And they tell you, "Okay, well, the jet engine is there, but
-
16:14 - 16:16you never have to turn it on." And you're like,
-
16:16 - 16:18"All right. That's cool."
-
16:18 - 16:20And that's what we're gonna do.
-
16:20 - 16:24So all of the stuff you see in yellow is stuff we're gonna talk about. And the rest
-
16:24 - 16:26of the stuff isn't really the jet engine.
-
16:26 - 16:29It's not that cool. Really, the rest of the stuff is like 70s
-
16:29 - 16:32racing stripes and a big hood scoop and stuff like that. It's like,
-
16:32 - 16:35yeah, you could have it on your car if you really wanted to,
-
16:35 - 16:38but probably not in the 21st century.
-
16:38 - 16:42So we're gonna focus on all the stuff that really is kinda important for
-
16:42 - 16:44what we're doing. And there's a few other things. You can read about them in the book, but
-
16:44 - 16:47we're not gonna spend class time on them. You're not gonna worry about them in this class. If you
-
16:47 - 16:48really wanna know, you'll know.
-
16:48 - 16:52But we're gonna do all kinds of cool stuff and images and polygons and just
-
16:52 - 16:55things that will be interesting, hopefully.
-
16:55 - 16:57So with that said,
-
16:57 - 17:00let's first talk about this thing called GCanvas. And GCanvas is this thing
-
17:00 - 17:02that kinda sits up there, and you're like,
-
17:02 - 17:05"Yeah, GCanvas is not one of these objects that I sort of
-
17:05 - 17:08put - that I kinda create and put up on my collage. What's that all about?" So
-
17:08 - 17:11let's talk about that and get that out of the way, and then we can focus on all these other
-
17:11 - 17:14things that we can kinda draw and put up on our board
-
17:14 - 17:18or our little canvas. So what a GCanvas is, is it represents, in some sense,
-
17:18 - 17:22the background canvas of the collage. It's the big piece of felt that we're gonna
-
17:22 - 17:25put all the other little shapes on top of.
-
17:25 - 17:27And you might say, "But Mehran, didn't we already have one of these? When I create
-
17:27 - 17:32a graphics program, don't I already get sort of my empty canvas that I put stuff on?"
-
17:32 - 17:33Yeah, in fact, you do.
-
17:33 - 17:36What a graphics program does for you automatically, just because it loves you that
-
17:36 - 17:42much, is it automatically creates one of these GCanvas objects and
-
17:42 - 17:45makes it large enough to fill the entire program window. So actually, when you're
-
17:45 - 17:49adding your objects to a graphics program, you're actually adding them to
-
17:49 - 17:53a canvas or a GCanvas object. The graphics program has just created one for
-
17:53 - 17:56you seamlessly, so up until now, you never had to worry about it. As a matter of fact,
-
17:56 - 17:59for about the next five weeks, you're not gonna have to worry about it -
-
17:59 - 18:02oh, two weeks you're not gonna have to worry about it.
-
18:02 - 18:05And so you might say, "But if that's the case, when I was calling Add, weren't my
-
18:05 - 18:08Add call methods, like when I was calling those,
-
18:08 - 18:11weren't they going to a graphics program because I never worried about this thing
-
18:11 - 18:12called GCanvas?"
-
18:12 - 18:15Yeah, in fact, they were going to the graphics program. The graphics program had
-
18:15 - 18:18a method called Add. And when it got it, it said,
-
18:18 - 18:19"Hey, you wanna add an object?
-
18:19 - 18:23I'll pass them over to the GCanvas I created." So what it was really doing
-
18:23 - 18:26was forwarding, just like you think of call forwarding - get a call from your
-
18:26 - 18:27friend, you're like,
-
18:27 - 18:30"Oh, yeah, you wanna talk to Bill? This isn't Bill. Let me forward you over to Bill,
-
18:30 - 18:32and you can talk to him."
-
18:32 - 18:36We call the Add method on graphics program. Graphics program said, "Oh, yeah, you
-
18:36 - 18:39wanna add that? Well, the person who really takes care of the adding is the
-
18:39 - 18:42canvas, so I'll just call Canvas
-
18:42 - 18:45passing in the same arguments to Canvas that you've passed to me."
-
18:45 - 18:48That's called forwarding. It's basically just some method that sits there
-
18:48 - 18:51that actually passes all the information that goes to it to someone else to actually
-
18:51 - 18:52do the work.
-
18:52 - 18:55We also refer to that in the working world as management.
-
18:55 - 19:00So you basically forward on to something else that does the real work.
-
19:00 - 19:01And so forwarding,
-
19:01 - 19:03to put it in the speak of
-
19:03 - 19:08object-oriented programming, is when the receiver of a message, so before,
-
19:08 - 19:10graphics program was the receiver of the message,
-
19:10 - 19:13then call some other object with that same message.
-
19:13 - 19:17So that's how we'd say it to sound real funky and get paid more money.
-
19:17 - 19:19Same kind of idea. So
-
19:19 - 19:23it turns out that GCanvas and GProgram - or sorry, graphics program,
-
19:23 - 19:26which is really just forwarding a bunch of your calls over to GCanvas,
-
19:26 - 19:29support a whole bunch of methods, some of which you've seen. And I wanna give you the
-
19:29 - 19:30quick tour.
-
19:30 - 19:34So there's add, and you've certainly seen that. It just takes some
-
19:34 - 19:37object, some GObject like a GRect or a GLabel, and adds it to the screen.
-
19:37 - 19:41And you can add some object at a particular x-y location if that object
-
19:41 - 19:44doesn't already have some existing x-y location. So there's two versions of that
-
19:44 - 19:45method.
-
19:45 - 19:48Up until now, we've told you had to add things. Now you're sort of old enough to
-
19:48 - 19:52actually say - it's like training wheels. Before, you could add training wheels.
-
19:52 - 19:54Now you can remove the training wheels.
-
19:54 - 19:56So for an object, you can actually say, "Remove,"
-
19:56 - 20:00and it will take that object off of the canvas - just rips it right out.
-
20:00 - 20:03And if you wanna get really funky - if you're having a bad day, and you just come in
-
20:03 - 20:06there, and there's this nice picture of bunnies and flowers and stuff, and you just say,
-
20:06 - 20:09"No, man, that's not my world. RemoveAll." And
-
20:09 - 20:13it's just all gone. All of the objects you put on that canvas is -
-
20:13 - 20:16it takes the canvas outside, shakes it out, and all the little, fluffy bunny pieces go away.
-
20:16 - 20:19And it's RemoveAll. It just clears it.
-
20:19 - 20:23There's GetElementAt, and this is a very funky thing. You would use this in
-
20:23 - 20:25Breakout. Pay close attention.
-
20:25 - 20:28What GetElementAt does is it - you give it a particular
-
20:28 - 20:32x-y location, a pixel location on the screen.
-
20:32 - 20:36What it will return to you is the frontmost object at that pixel location if
-
20:36 - 20:38one exists on the canvas.
-
20:38 - 20:42If one does not exist on the canvas, it will return to you something called
-
20:42 - 20:43null.
-
20:43 - 20:46And null just basically means no object.
-
20:46 - 20:50You can assign null to something of type GObject, but that just basically means
-
20:50 - 20:52that GObject
-
20:52 - 20:55is trying to deal with - is just there's nothing there.
-
20:55 - 20:59Otherwise, it will actually give you back a GObject, which could be a specific
-
20:59 - 21:02thing. It could be a GRect, a GOval, a GLine, whatever it is.
-
21:02 - 21:05But all of those GRect, GOval, GLines are all
-
21:05 - 21:07of type GObject.
-
21:07 - 21:11So in fact, even if it gives you a GRect, it's still giving you a GObject
-
21:11 - 21:14back because the GRect is just a specialization of a GObject.
-
21:14 - 21:17So we'll actually give you back an object that's at that x-y location.
-
21:17 - 21:20That might be real useful, for example, if you're playing a game that has a
-
21:20 - 21:22bunch of bricks across the screen,
-
21:22 - 21:24and when your ball is supposed to be hitting one of the bricks, you wanna
-
21:24 - 21:26check to see is there actually a brick there?
-
21:26 - 21:28You could call GetElementAt,
-
21:28 - 21:32and if there is some little brick, which is actually, say, a GRect,
-
21:32 - 21:33it will give you back
-
21:33 - 21:38that GRect object, which then, for example, you might wanna remove.
-
21:38 - 21:45Just a few hints - uh-huh? 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] -
-
21:47 - 21:51This is an x-y coordinate of the whole screen of the canvas. [Inaudible]
-
21:51 - 21:55And if there is some object at that x-y coordinate
-
21:55 - 21:59anywhere - if that point is in - has an object that is
-
21:59 - 22:03- that point is encompassed by that object and will return the object - and just
-
22:03 - 22:06the foremost object. That's why you care about the stacking order because if there's
-
22:06 - 22:09multiple objects there, you get the frontmost one.
-
22:09 - 22:12GetWith and GetHeight you've probably knew about when you were centering stuff.
-
22:12 - 22:15I guess the width in pixels of the entire canvas and the height in pixels of the entire canvas,
-
22:15 - 22:19which is for the entire screen if you're talking about a graphics program.
-
22:19 - 22:22And SetBackgroundColor - that's kinda new, kinda funky. You wanna set a different
-
22:22 - 22:24background color than white, you just pass in a color,
-
22:24 - 22:27and it will set the entire color for that canvas
-
22:27 - 22:30or the entire window in the case of a graphics program to that color, which is kinda
-
22:30 - 22:32fun.
-
22:32 - 22:36Now, there's a couple other things that only graphics programs do. GCanvases do
-
22:36 - 22:40not do these, just graphics programs. And they're very useful for games
-
22:40 - 22:41and animation.
-
22:41 - 22:45One is called PauseInMilliseconds. What it does is because computers these days run real
-
22:45 - 22:46fast.
-
22:46 - 22:49If you ran a game without any pauses in it, people would just not be able to
-
22:49 - 22:50play the game.
-
22:50 - 22:54So you can pause for some number of milliseconds, which is thousandths of a
-
22:54 - 22:57second. So what it does when it gets here is basically just sort of stops
-
22:57 - 22:58execution
-
22:58 - 23:00for some number of thousandths of a second
-
23:00 - 23:03and keeps going. So it allows your programs to kind of slow down a little
-
23:03 - 23:04bit to make them playable.
-
23:04 - 23:07And sometimes, you wanna wait for a click,
-
23:07 - 23:08and there's,
-
23:08 - 23:11strangely enough, a method called WaitForClick. And it suspends the program. Basically,
-
23:11 - 23:13your program just stops executing
-
23:13 - 23:15until someone hits the mouse button.
-
23:15 - 23:18And then once they click on the mouse, it keeps executing again.
-
23:18 - 23:22So those are some useful things for games or even for debugging sometimes, if you're
-
23:22 - 23:23doing a graphics program,
-
23:23 - 23:25and at some point you wanna stop and say,
-
23:25 - 23:28"Hey, let me stop the program here and see how far it's gotten," and I don't want it to go any
-
23:28 - 23:31further until I click. You could just stick a WaitForClick call
-
23:31 - 23:35inside your graphics program. So
-
23:35 - 23:38here's the class hierarchy for just the GObject. This is the stuff we're gonna
-
23:38 - 23:42focus on here. You've already seen GLabel, GRect, GOval, and GLine.
-
23:42 - 23:45We're gonna spend a little bit more time on GLabel to get into the
-
23:45 - 23:46specific nuances of it.
-
23:46 - 23:49And then we'll talk about some of the other stuff as well.
-
23:49 - 23:53So here are some methods that are common to all GObjects. So everything that is a GObject,
-
23:53 - 23:56which includes all of this stuff,
-
23:56 - 23:57is gonna
-
23:57 - 23:58inherit all of these methods.
-
23:58 - 24:01So a lot of these you've seen before. SetLocationForAnObject - you've set
-
24:01 - 24:03its x and y location;
-
24:03 - 24:06Move, which you've set its offset by some
-
24:06 - 24:09dx and dy, which is just how much in x direction and how much in the y
-
24:09 - 24:13direction your object should move. That's real useful for animation, and I'll show you an
-
24:13 - 24:15example of that in just a second.
-
24:15 - 24:16GetXAndY -
-
24:16 - 24:20this just returns the x coordinate of the object and the y coordinate of the
-
24:20 - 24:21object,
-
24:21 - 24:24which, for example, would be the upper left-hand corner for something
-
24:24 - 24:26that's large.
-
24:26 - 24:27GetWidthAndHeight -
-
24:27 - 24:31this is actually pretty useful. Turns out if you have some
-
24:31 - 24:32rectangle, you know what its width and height are.
-
24:32 - 24:36Later on, you might wanna, if you forget - you forget to store them, you could actually ask
-
24:36 - 24:37it what's your width and height?
-
24:37 - 24:40This is actually really useful for text because if you wanna draw some
-
24:40 - 24:42piece of text centered in the screen,
-
24:42 - 24:45you actually don't know how big those characters are until you actually figure
-
24:45 - 24:47out what its font is and all that stuff.
-
24:47 - 24:51So you - a lot of times you wanna create your text. I'll show you an example of this
-
24:51 - 24:51momentarily.
-
24:51 - 24:55And then after you've created the GLabel, say, "Hey, what's your height and width so I can
-
24:55 - 24:58center you appropriately on the screen?"
-
24:58 - 24:59Contains,
-
24:59 - 25:02which is also kind of similar to GetElementAt, but a little bit different - it
-
25:02 - 25:05actually returns true or false. It basically returns true
-
25:05 - 25:07if an object contains the specified point.
-
25:07 - 25:10So this same method you call on a particular object.
-
25:10 - 25:12So you can tell some rectangle,
-
25:12 - 25:16"Hey, do you contain this point, rectangle?" And it'll say "yes" or "no" or "true" or "false" if
-
25:16 - 25:18it actually contains that point.
-
25:18 - 25:22SetColor and GetColor - hey, it's a pair of setters and getters, just like you
-
25:22 - 25:29saw with students. Uh-huh, question? [Inaudible] rectangle, or [inaudible]? Pardon? [Inaudible] contains the area of the shape, or the [inaudible]?
-
25:32 - 25:36It has to do with the - what the particular shape is yourself. So this is one of those
-
25:36 - 25:39things where I would ask you to actually to do it experimentally. So there are a lot of things
-
25:39 - 25:40you can just try out.
-
25:40 - 25:41Just try the experiment.
-
25:41 - 25:44If you want, you can read it in the book, but it's actually more fun to try
-
25:44 - 25:51the experiment because you'll get somewhat funky behavior.
-
25:51 - 25:54GetColor and SetColor, as you would imagine, sets the color of the object or
-
25:54 - 25:56gets the color of the object.
-
25:56 - 25:59Here's one that we haven't talked about so far. It's kinda funky - SetVisible and
-
25:59 - 26:01IsVisible. So SetVisible -
-
26:01 - 26:04you set it to be either false or true. If it's false,
-
26:04 - 26:08the thing becomes invisible. If it's true, it becomes visible. You might say, "Hey, Mehran,
-
26:08 - 26:12how is that different than Remove? I thought Remove takes an object off of
-
26:12 - 26:13the canvas."
-
26:13 - 26:17This is not taking an object off of the canvas. It's just making that object invisible,
-
26:18 - 26:21which means if you wanna have some object on the canvas and flash it, for
-
26:21 - 26:25example, to be there or not be there, all you need to do is set its visibility to
-
26:25 - 26:26alternate between true and false.
-
26:26 - 26:29You don't need to keep removing and adding it back on
-
26:29 - 26:32because removing it and adding it back on potentially changes the Z-order
-
26:32 - 26:35because that object now gets tacked onto the front.
-
26:35 - 26:37If this object was in the middle somewhere,
-
26:37 - 26:40you don't wanna change the Z-order by removing it and tacking it back onto the front.
-
26:40 - 26:44You just wanna make it invisible where it is.
-
26:44 - 26:46And you can ask an object for its visibility.
-
26:46 - 26:49Last, but not least, if you wanna change that Z-order -
-
26:49 - 26:51if you're actually a big fan of drawing programs, a lot of these methods will
-
26:51 - 26:53look familiar to you.
-
26:53 - 26:56SendToFront and SendToBack brings an object either the front or the back of the
-
26:56 - 26:57Z-order.
-
26:57 - 27:01SendForward or MoveForward moves it back one level in the Z-order
-
27:01 - 27:08if you wanna actually just re-order stuff in the Z-order of objects. Uh-huh? If you set an object to be invisible, and then you [inaudible]?
-
27:09 - 27:12I knew you were gonna ask that. Try it. Try it, and
-
27:12 - 27:15you'll find
-
27:15 - 27:18out because a lot of these things are actually interesting, and then you realize that
-
27:18 - 27:21you would probably never do this in real life. But if you wanna try it out, it's
-
27:21 - 27:24more fun to be experimental than just giving you the answers for a lot of these
-
27:24 - 27:25things because then you'll never try it. So
-
27:25 - 27:27I want you to at least try a few of them.
-
27:27 - 27:31Methods defined by interfaces - what does that mean? What is an interface? So
-
27:31 - 27:35there's this funky notion we talk about in computer science - or
-
27:35 - 27:39actually, it has a specific meaning in Java. We talk about it in computer science in
-
27:39 - 27:41general as well. But it's the notion of
-
27:41 - 27:43an interface.
-
27:43 - 27:47And an interface - sometimes people think of, "Oh, is that like a graphical interface? Is
-
27:47 - 27:48that like
-
27:48 - 27:52using my mouse and little things that appear on my screen?" That's one kind of interface. That's the
-
27:52 - 27:54interface that humans work with.
-
27:54 - 27:58There are interfaces that programs work with. And basically, all an interface is - the way you
-
27:58 - 27:59can think about this
-
27:59 - 28:03is it's a set of methods.
-
28:05 - 28:07That's what, in some sense, defines the interface.
-
28:07 - 28:10And why do you care about defining some particular set of methods? Because what
-
28:10 - 28:14you wanna be able to say is there's a set of object or set of classes
-
28:14 - 28:17that all have these methods.
-
28:17 - 28:21So you have some set of classes
-
28:21 - 28:24that have that
-
28:24 - 28:26set
-
28:26 - 28:28of
-
28:28 - 28:32methods. That seems like kind of a funky thing. Why would you wanna do that?
-
28:32 - 28:36You might say, "Well, hey, Mehran, there's kinda a similar concept. Isn't that whole
-
28:36 - 28:39concept of inheritance you talked about sort of like this because if you have
-
28:39 - 28:44over here your GObject, and you have something that's a GLabel,
-
28:44 - 28:49and you have something else that's a GRect,
-
28:49 - 28:52you told me a GObject has some set of methods,
-
28:52 - 28:56so doesn't the fact that GLabel and GRect are both GObject - aren't they some
-
28:56 - 28:57set of classes
-
28:57 - 29:00that have the same set of methods?"
-
29:00 - 29:01Yes, that would be true.
-
29:01 - 29:04So then you might ask yourself, "So what's different about this thing called
-
29:04 - 29:05an interface
-
29:05 - 29:08than just inheriting from some class?"
-
29:08 - 29:09And the difference is
-
29:09 - 29:14that sometimes you want this set of methods to be shared by a set of classes,
-
29:14 - 29:19which don't have this kind of hierarchical relationship. So
-
29:19 - 29:21some - an example of that might be,
-
29:21 - 29:24for example, a class called an Employee.
-
29:24 - 29:28And students, for example, can be employees, but there are gonna be people who
-
29:28 - 29:30are not students who are employees
-
29:30 - 29:32as well.
-
29:32 - 29:35And there might be some entirely different class of people who are
-
29:35 - 29:38employees. So if I had
-
29:39 - 29:43something called an Employee here,
-
29:43 - 29:46and I might say, "Hey, well, at Stanford, I have a bunch of different specializations.
-
29:46 - 29:51I have my Frosh Employee, and I have my
-
29:51 - 29:55other Employee over here that's a Senior Employee." And then
-
29:55 - 29:58Stanford comes along and says, "Yeah, but there's also this thing called
-
29:58 - 30:04a Professor, and not all Professors are Employees." And you're like, "Really?"
-
30:04 - 30:07Yeah, sometimes it happens. It's weird, trust me.
-
30:07 - 30:10But it turns out that sometimes you cannot only have some person who's a
-
30:10 - 30:14Senior Employee who's an Employee but some person who's a Senior Employee who's also
-
30:14 - 30:16potentially a Professor. And you're like, "But
-
30:16 - 30:19Professors have some methods associated with them -
-
30:19 - 30:21not many, but they have some."
-
30:21 - 30:23Employees have some methods associated with them.
-
30:23 - 30:26So there's these different sets of methods that I want, for example, to have
-
30:26 - 30:29one of these guys to be able to share. But there isn't a direct hierarchical
-
30:29 - 30:30relationship.
-
30:30 - 30:32That's what you specify in an interface.
-
30:32 - 30:36You basically just say, "If Interface is the set of stuff," and I'll tell you which
-
30:36 - 30:37classes
-
30:37 - 30:38actually provide that set of stuff.
-
30:38 - 30:41And they don't have to have any kind of hierarchical relationship, but just the
-
30:41 - 30:43way of decoupling the hierarchy
-
30:43 - 30:46from having some set of common things that you'd like to do.
-
30:46 - 30:50So let me show you some examples of that in the graphics world.
-
30:50 - 30:54So there's something called GFillable. That's an interface.
-
30:54 - 30:57So GFillable is a set of methods that a certain set of classes have, and the
-
30:57 - 31:02certain classes that have it are a GArch, a GOval, a GPolygon, and a GRect.
-
31:02 - 31:06So notice you might say, "Hey, Mehran, yeah, those are all GObjects. Why isn't everything
-
31:06 - 31:08that's GObject GFillable?"
-
31:08 - 31:12Because there are some things like a GLabel that's a GObject that's not fillable.
-
31:12 - 31:16So that direct hierarchical relationship doesn't hold. I have some
-
31:16 - 31:17subset of the classes that actually have this.
-
31:17 - 31:20And Fillable are just the things that can be filled. So
-
31:20 - 31:24SetFill I set to be either true or false, just like you've done with GRects or
-
31:24 - 31:26GOvals in the past that fills it -
-
31:26 - 31:30that either sets it to be just an outline or filled. I can ask it if it's filled by
-
31:30 - 31:33saying IsFilled. That returns a Boolean true or false if it's filled.
-
31:33 - 31:37I can set the fill color. I can get the fill color - getters and setters once again
-
31:37 - 31:40rearing their ugly heads. So
-
31:40 - 31:43Fillable is just a certain set - it's an interface, and there's a certain set of
-
31:43 - 31:44classes that
-
31:44 - 31:48- what we refer to as implement that interface. That means they provide all
-
31:48 - 31:49the methods in that interface.
-
31:49 - 31:52And there's some other interfaces. There's Resizable.
-
31:52 - 31:57GImages, GOvals, and GRects are resizable, which is kinda funky. And
-
31:57 - 32:01Resizable just means you can set their size, so you can set the dimensions of the
-
32:01 - 32:04object to be different after you've created the initial version of the object.
-
32:04 - 32:08Or you can set the bounds of the object, which is both its location and its width
-
32:08 - 32:09and height.
-
32:09 - 32:15You can change those after you've created the object. A GLabel I can't do that with.
-
32:15 - 32:18And there's one more set of interfaces,
-
32:18 - 32:22which is called Scalable or GScalable. And a whole bunch of things actually
-
32:22 - 32:25implement GScalable or provide for you the set of methods in the GScalable
-
32:25 - 32:26interface.
-
32:26 - 32:29GArcs, GCompounds - some of these we haven't even seen before, and you're like,
-
32:29 - 32:33"Mehran, what's a GArc?" Don't worry, we'll get there. You've seen GLine. You've seen GOval.
-
32:33 - 32:35You've seen GRect.
-
32:35 - 32:38You'll get all the other Gs in there. It's all about the G today. That's just what's
-
32:38 - 32:42going on. And so you can scale these things, which you give it some scale
-
32:42 - 32:44factor, which is a double -
-
32:44 - 32:47a value of 1.0 means leave it unchanged. That's basically 100 percent.
-
32:48 - 32:52Now, you can potentially scale it. If you give it a value like .5, it means
-
32:52 - 32:55shrink it by 50 percent in the x and y direction if you give it this version.
-
32:55 - 32:58If you give it this version, you can actually set the scaling in the x and
-
32:58 - 33:02y direction to be different, and I'll show you an example of that momentarily. It's kinda funky.
-
33:02 - 33:04It's fun. You can destroy your pictures.
-
33:04 - 33:07It's easy. It's one method.
-
33:07 - 33:09So let me give you a little animation just to put a few of these things
-
33:09 - 33:10together -
-
33:10 - 33:12a little bouncing ball.
-
33:12 - 33:16So if we come over here - and you should have the code for this in one of your handouts -
-
33:16 - 33:19I'm gonna create a little bouncing ball. And I'll go through some of the
-
33:19 - 33:20constants pretty quickly.
-
33:20 - 33:22The ball has a diameter
-
33:22 - 33:24and some number of pixels.
-
33:24 - 33:26There's a gravity, which is at every time step,
-
33:26 - 33:30how much more quickly is the ball going downward? How much is it
-
33:30 - 33:31affected by gravity?
-
33:31 - 33:34So every cycle, its speed is increased by
-
33:34 - 33:373. Some delay in number of milliseconds for the bouncing ball?
-
33:37 - 33:40Otherwise, it'll just go way too quick, and you won't see it, so it'll have a
-
33:40 - 33:4350-second millisecond delay between every update of the bouncing ball.
-
33:43 - 33:47The starting x and y location of the ball is basically just at - y
-
33:47 - 33:49is at 100; x
-
33:49 - 33:49is near the
-
33:49 - 33:53left-hand side of the screen because it's basically the ball's diameter
-
33:53 - 33:54divided by 2.
-
33:54 - 33:58The ball has a constant velocity in the x direction, which is 5. And
-
33:58 - 34:02every time the ball bounces, it loses some speed, so how much of its speed does
-
34:02 - 34:05it keep? It keeps 90 percent of its speed, basically. That's what the ball
-
34:05 - 34:06bounces. It's just -
-
34:06 - 34:10what fraction of its speed does it keep as it goes along?
-
34:10 - 34:14And so our starting velocities for x and y - or the x velocity's never gonna change.
-
34:14 - 34:17It's just gonna be set to be whatever the starting x velocity is. We're never
-
34:17 - 34:18actually gonna change it.
-
34:18 - 34:21The y velocity, which is how much the ball is moving in this direction, starts at
-
34:21 - 34:250, and over time it's gonna increase until it hits the ground under the
-
34:25 - 34:26bottom of our screen,
-
34:26 - 34:29and it'll bounce up. And we'll see how to implement that.
-
34:29 - 34:33And our ball is just a little GOval, so I'm gonna have some private
-
34:33 - 34:37instance variable that's a GOval that's the ball I'm gonna create.
-
34:37 - 34:39And then I'm gonna move it around.
-
34:39 - 34:41So what am I gonna do?
-
34:41 - 34:45First of all, in my program, I'm gonna do this thing called Setup. What does Setup
-
34:45 - 34:46actually do? So when I do the Run,
-
34:46 - 34:51I call Setup. What does Setup do? Setup says, "Create a new ball at the starting x
-
34:51 - 34:52and y location
-
34:52 - 34:55with a given diameter in both the height and the width."
-
34:55 - 34:58So it's basically just creating a circle at that location.
-
34:58 - 35:00It sets the ball to be filled,
-
35:00 - 35:01and it says,
-
35:01 - 35:05"Add the ball to the canvas." So basically, all Setup does is it adds the ball
-
35:05 - 35:07somewhere - an oval, a GOval,
-
35:07 - 35:09that's filled somewhere onto the canvas.
-
35:09 - 35:12That's great. That's all Setup does. It created the ball, added to the canvas.
-
35:12 - 35:14Now, how are we gonna animate it?
-
35:14 - 35:16The way we're gonna animate it
-
35:16 - 35:20is as long as the ball's x coordinate is not yet the width of the screen, which
-
35:20 - 35:23means the ball's gonna sort of bounce across the screen like this -
-
35:23 - 35:25until it's gotten to the end of the screen, I'm just gonna keep running the
-
35:25 - 35:29animation. Once it sort of bounces off the right-hand side of the screen,
-
35:29 - 35:30game over.
-
35:30 - 35:31It's gone past the width of the screen.
-
35:31 - 35:35So what I'm gonna do on every iteration is I'm gonna move the ball.
-
35:35 - 35:40I'm gonna check for a collision to see if the ball has hit the bottom of the screen. And
-
35:40 - 35:42after I check for collision, which is if it hits the bottom of the
-
35:42 - 35:44screen, I need to send it back up,
-
35:44 - 35:45I'm gonna pause
-
35:45 - 35:48before I move the ball again. So that's my cycle. Move the ball, check for
-
35:48 - 35:51collision, wait. Move the ball, check for collision, wait, sorta like standard
-
35:51 - 35:53animation.
-
35:53 - 35:54So what is
-
35:54 - 35:58MoveBall and CheckForCollision do? MoveBall's extremely simple. It just says
-
35:58 - 36:03on every time step, I increase how fast the ball is going down, which is its y
-
36:03 - 36:03velocity,
-
36:03 - 36:04by gravity.
-
36:04 - 36:11So I plus-equal its current y velocity with whatever gravity is. Uh-huh? Question? Why do [inaudible] oval at the top and then [inaudible]? Well,
-
36:14 - 36:17when I declare it, all it said is set aside the space for that object. When I
-
36:17 - 36:22say NewGOval, it actually creates the object. So I need to create the object before I can use it.
-
36:22 - 36:27By just declaring the variable, I haven't actually created the object. So
-
36:27 - 36:28up here,
-
36:28 - 36:32when I declare this GOval up here, this private GOval, that just says, "Give me the
-
36:32 - 36:35box that's gonna store that object that's a GOval."
-
36:35 - 36:39I don't actually fill it up with a GOval until I do the
-
36:39 - 36:42New. So I have to do that and do that to actually create the object.
-
36:42 - 36:46So MoveBall, I just showed you. We accelerate by gravity, and we move the
-
36:46 - 36:49ball in the x direction and the y direction. The x direction's always gonna
-
36:49 - 36:53remain constant, so the ball's just slowly gonna move across the screen,
-
36:53 - 36:57but its y velocity's gonna change because it's gonna bounce.
-
36:57 - 37:00CheckForCollision looks way more funky than it is. Here's all that's going on in
-
37:00 - 37:02CheckForCollision.
-
37:02 - 37:04I check to see if the y coordinate of the ball
-
37:04 - 37:08is greater than the height of the screen minus the ball's diameter.
-
37:08 - 37:11If it is, that means the ball has not hit the bottom of the screen yet
-
37:11 - 37:14because it's y - sorry, if it's greater,
-
37:14 - 37:17it means the ball has hit the bottom of the screen because it would be below the
-
37:17 - 37:19bottom of the screen because y coordinates go down.
-
37:19 - 37:23So if the ball's y is greater than the height of the screen minus its diameter -
-
37:23 - 37:25because we have to give the ball some room to be able to hit the bottom of the
-
37:25 - 37:28screen, which is the diameter, then
-
37:28 - 37:31if it hasn't fallen below the floor, there's nothing to do.
-
37:31 - 37:34If it would've fallen under the floor, then what I do is say, "Hey, you're
-
37:34 - 37:37gonna bounce off the floor," which means when you hit that floor,
-
37:37 - 37:41change your y velocity to be the negative of what it was before, which
-
37:41 - 37:43means if you were going down before - your y was increasing -
-
37:43 - 37:47now you're gonna be going up, or your y is gonna be decreasing.
-
37:47 - 37:51So change your velocity to be the negative of what it was before multiplied
-
37:51 - 37:51by
-
37:51 - 37:55the percentage of your bounce that you're keeping, which is 90 percent.
-
37:55 - 37:55So
-
37:55 - 37:58it's gonna slow down every time it bounces
-
37:58 - 37:59in terms of how far up it's gonna go,
-
37:59 - 38:02but just by whatever this percentage is. But the important thing is you need to
-
38:02 - 38:05reverse its direction because it's bouncing off the ground.
-
38:05 - 38:08Last but not least, and this is just kind of a minor technical point, but I'll show
-
38:08 - 38:10you anyway. It's all in the comments.
-
38:10 - 38:13If the ball would've fallen through the floor, like it was actually moving so
-
38:13 - 38:16fast that it actually was here in one time step, and next time step, it
-
38:16 - 38:18would've been below the floor,
-
38:18 - 38:21we just say, "Take the difference from the floor, and pretend you already
-
38:21 - 38:25bounced off the bottom." So we'll just kinda add that over to the topside, and you'll just
-
38:25 - 38:28essentially take that amount that you would've bounced through the floor and
-
38:28 - 38:31say that bounce already happened and go back out. Slight technical point, but this
-
38:31 - 38:33is the math that does it -
-
38:33 - 38:34not a big deal.
-
38:34 - 38:36What does this actually look like?
-
38:36 - 38:39It's a bouncing ball.
-
38:39 - 38:42Ah,
-
38:42 - 38:43animation.
-
38:43 - 38:45You can play games,
-
38:45 - 38:48and then the simulation ends when it goes off that end of the screen.
-
38:48 - 38:52It's just so cool, you just wanna run it again, but I won't because we have more stuff I wanna cover.
-
38:52 - 38:55But now you, too, can bounce the ball, and you can make it different colors. And
-
38:55 - 38:58every time it hits the bottom, you can set RandomColor,
-
38:58 - 39:01and your ball changes every time it [inaudible]. And you're just like, "Oh, my God, there's so much I can
-
39:01 - 39:03do. It's so cool." Yes, there is.
-
39:03 - 39:05And we won't explore it all right now.
-
39:05 - 39:09But what we will do is explore a couple more things.
-
39:09 - 39:13So our friend, the GLabel class - you're like, "Oh, but Mehran, I already saw the GLabel class.
-
39:13 - 39:16I've been doing GLabel since the cows came home. I did GLabel on this
-
39:16 - 39:17last assignment.
-
39:17 - 39:20I know how to create a new label in a particular location,
-
39:20 - 39:24to change its font, to change its color, and to add it. So what new were you
-
39:24 - 39:27gonna tell me?" And on that slide, I'm not gonna tell you anything new.
-
39:27 - 39:29What I'm going to tell you new is on the next slide,
-
39:29 - 39:33which is what's the actual geometry of this GLabel class if you wanna center
-
39:33 - 39:35stuff on the screen, for example?
-
39:35 - 39:38So there's a bunch of typesetting concepts that are related to GLine - to
-
39:38 - 39:39GLabel.
-
39:39 - 39:41First of them is the baseline.
-
39:41 - 39:44The baseline is basically the line on which the text appears. But notice there
-
39:44 - 39:48are some things that actually go down below the baseline. That's the way typesetting
-
39:48 - 39:48works.
-
39:48 - 39:52You actually have a baseline - some characters, like a j or a p, go below the
-
39:52 - 39:53baseline.
-
39:53 - 39:58So when you're setting up a particular GLabel, the value that you set for where
-
39:58 - 40:01that GLabel should actually be placed is the origin of the baseline. It's the
-
40:01 - 40:03far left-hand corner
-
40:03 - 40:04of the baseline.
-
40:04 - 40:08It's not down where you get these descending characters. It's the baseline that
-
40:08 - 40:09most characters are actually sitting on.
-
40:09 - 40:12So then you say, "Well, how do I get the descent and the ascent and all
-
40:12 - 40:15this other stuff?" Well,
-
40:15 - 40:18before you do that, the height of a font is its distance between two successive
-
40:18 - 40:20baselines.
-
40:20 - 40:23But more importantly, if you're just trying to center one line in the screen,
-
40:23 - 40:26you care about two things called the ascent and the descent.
-
40:26 - 40:30The ascent is the amount above the baseline by which the tallest character
-
40:30 - 40:33can actually reach.
-
40:33 - 40:37The descent is the distance that any character will drop below the baseline.
-
40:37 - 40:41So for ys and gs and js and stuff, you actually have some non-zero descent, which is
-
40:41 - 40:43the amount below the baseline.
-
40:43 - 40:46So if you wanna figure out how big something is, usually when we center
-
40:46 - 40:46stuff,
-
40:46 - 40:51we just care about the ascent. We don't actually care about the descent.
-
40:51 - 40:53So if you wanna center something,
-
40:53 - 40:55here's an example of centering something.
-
40:55 - 40:59We again have our little text, "Hello, world." We set it to be big. We set it to be red.
-
40:59 - 41:02We haven't figured out where on the screen to put it yet
-
41:02 - 41:05because we're gonna compute that after we set the size of the font so we
-
41:05 - 41:06know how big it is.
-
41:06 - 41:10Now we can ask this label, "How big are you? How wide are you? How tall are you?"
-
41:10 - 41:13So to get in - to get it to display right in the center of the screen,
-
41:13 - 41:17its x coordinate is gonna be the width of the whole screen
-
41:17 - 41:19minus the width of the label.
-
41:19 - 41:22So we're gonna take the width of the whole screen, subtract off the width of the
-
41:22 - 41:25label, and divide the whole thing by 2. That will give us this location right
-
41:25 - 41:26here.
-
41:26 - 41:29The other thing we need to do is figure out how to center relative to the height of
-
41:29 - 41:30the characters.
-
41:30 - 41:33What we do is we get the ascent. We don't care about the descent of the
-
41:33 - 41:37characters. Standard typesetting kinda concept, but now you know.
-
41:37 - 41:41You get the ascent of your font, which is how high it goes above the baseline.
-
41:41 - 41:44You subtract that off from the width of your window, and you divide by 2. That
-
41:44 - 41:48will tell you what the point is right there in terms of the y direction to be
-
41:48 - 41:50able to figure out how to center this text.
-
41:50 - 41:54And then you add it at that particular y - x-y location. So now that you know
-
41:54 - 41:57how to actually make your font bigger or whatever,
-
41:57 - 42:02you can figure out the size of your text so you can appropriately space it on the screen.
-
42:02 - 42:05Couple more things before we wrap up for today.
-
42:05 - 42:06Last thing I wanna cover
-
42:06 - 42:10is this thing called the GArc class. What is a GArc? Actually, there are a couple
-
42:10 - 42:11things I wanna cover.
-
42:11 - 42:16The GArc class is basically just drawing an arc somewhere. It's a little
-
42:16 - 42:19bit more complicated than it looks. Friends of mine that are artists tell me that you can
-
42:19 - 42:23draw everything in the world using just straight lines and arcs. Is that true?
-
42:23 - 42:24Yes? No? Maybe?
-
42:24 - 42:26Let's just pretend it is.
-
42:26 - 42:29You already know how to draw a line. You have GLine. So now that you know how to
-
42:29 - 42:30draw it
-
42:30 - 42:34- GArc after a couple more slides, you can draw anything in the world. It just might
-
42:34 - 42:36take you a whole bunch of little
-
42:36 - 42:37objects to draw it.
-
42:37 - 42:40So an arc is formed by taking a section from the perimeter of an oval. What does
-
42:40 - 42:42that mean?
-
42:42 - 42:45Basically, it looks something like this.
-
42:45 - 42:49The steps that are necessary to define that arc is we specify the coordinates
-
42:49 - 42:53and size of some bounding rectangle, just like you did with the GOval. A
-
42:53 - 42:57GOval sits inside some rectangle, and that's what tells you what the
-
42:57 - 42:58dimensions of the oval are.
-
42:58 - 43:00Here, I've drawn it as a circle.
-
43:00 - 43:04So here's a bounding rectangle, and it's got some upper left-hand location.
-
43:04 - 43:06So we have some x-y upper left-hand location.
-
43:06 - 43:08We have a width and a height.
-
43:08 - 43:11That's one of - what's gonna define for us what essentially the oval is gonna look
-
43:11 - 43:14like. But we're not gonna draw the whole oval. We're just gonna draw an arc from
-
43:14 - 43:15the oval.
-
43:15 - 43:17How do we specify the arc to draw?
-
43:17 - 43:21We need to specify something called the start angle and the sweep angle, so [inaudible]
-
43:21 - 43:24the start and sweep angle.
-
43:24 - 43:27Both of these angles are things that are measured in degrees starting at this
-
43:27 - 43:30line, so starting at the X-axis.
-
43:30 - 43:34So if I say for my start is 45 degrees, it goes up 45
-
43:34 - 43:36degrees and says your start would be here.
-
43:36 - 43:38Your sweep is what
-
43:38 - 43:42portion of the oval you actually draw out in degrees. So
-
43:42 - 43:44if I set a sweep of 180,
-
43:44 - 43:49I will draw out a semicircle because I'll draw 180 degrees starting at the
-
43:49 - 43:5245-degree mark.
-
43:52 - 43:55And it always draws in the counterclockwise direction if you give it
-
43:55 - 44:00positive values. If you give it a start value or a sweep angle in
-
44:00 - 44:01negative values,
-
44:01 - 44:05it will start on the other side and go in the clockwise direction.
-
44:05 - 44:08So let me show you some examples of that, because that's kind of a big mouthful.
-
44:08 - 44:11What does that really mean? Here's just a few examples so you know. We're gonna draw
-
44:11 - 44:14some arcs centered in the middle of the screen, so we're gonna figure out
-
44:14 - 44:17dx and dy. Well, let's just assume they're the middle of the window. We already
-
44:17 - 44:21computed them using GetWidth and GetHeight. And d, which is the diameter of the
-
44:21 - 44:24oval we're gonna be using, or the circle in this case,
-
44:24 - 44:26is just preconfigured to be
-
44:26 - 44:29.8 times the height of the screen.
-
44:29 - 44:32So if we do something like we say, "Create a new GArc
-
44:32 - 44:37that has its bounding box being d and d, that basically means we're gonna
-
44:37 - 44:38have some oval
-
44:38 - 44:41that's height and width are both the same, being d, which means it's just
-
44:41 - 44:44gonna be a circle with diameter d.
-
44:44 - 44:48We're gonna start at the 0-degree arc. Remember, 3:00 is where we start -
-
44:48 - 44:480 degrees.
-
44:48 - 44:51And we're gonna sweep out an arc of 90 degrees, and that goes in the counterclockwise
-
44:51 - 44:54direction because it's positive. So we get an arc
-
44:54 - 44:58that's essentially this little quarter of that circle because it's
-
44:58 - 45:0090-degree arc starting at 0 degrees.
-
45:00 - 45:03There are some other things we could do. We could, for example, say,
-
45:03 - 45:05"Hey, you know what I wanna do is start
-
45:05 - 45:09that same circle with the same size. Its height and width are both d.
-
45:09 - 45:11Start at the 45-degree mark, so
-
45:11 - 45:15coming up 45 degrees from sort of this 3:00 mark is right
-
45:15 - 45:19there. Have a sweep of 270 degrees, so we get this big
-
45:19 - 45:21portion of the circle that looks like a giant C.
-
45:21 - 45:24But that's 270 degrees of a circle."
-
45:24 - 45:26We can do some slightly more funky things
-
45:26 - 45:29using negative numbers, for example, where we say,
-
45:29 - 45:30"Draw a new arc.
-
45:30 - 45:33Your starting point is negative 90 degrees."
-
45:33 - 45:37What does that mean? It means 90 degrees going clockwise.
-
45:37 - 45:41So I start at 3:00. I go 90 degrees clockwise. That's right here.
-
45:41 - 45:45And then I sweep out an arc of 45 degrees, which is
-
45:45 - 45:50counterclockwise because it's positive, so it sweeps out 45 degrees.
-
45:50 - 45:52One more for the road -
-
45:52 - 45:56this one says, "Start at 0 degrees, and set your sweep to be negative
-
45:56 - 45:59180 degrees. So if it's negative 180 degrees, it goes in the clockwise
-
45:59 - 46:02direction," 180 degrees starting from 0,
-
46:02 - 46:05and we get this thing that looks like half of a circle or a smiley face.
-
46:05 - 46:08So any questions about GArc? There's all kinds of stuff you can do with GArc. But
-
46:08 - 46:14at least if you understand the basic geometry, hopefully it'll make sense. Uh-huh? Why [inaudible] fill a GArc?
-
46:14 - 46:18You can fill a GArc. So last slide before we go
-
46:18 - 46:21is a filled GArc. Good question.
-
46:21 - 46:22Basically if you
-
46:22 - 46:27write a GArc, whatever that GArc is, and you set its fill to be true, what
-
46:27 - 46:31you get instead of just the arc is you get the pie wedge that would've
-
46:31 - 46:33got associated with that.
-
46:33 - 46:37So just imagine you have some solid line that sweeps the arc.
-
46:37 - 46:39That's what you get with the filled version of it.
-
46:39 - 46:41Any questions? All
-
46:41 - 46:43right, then I will see you on Wednesday.
- Title:
- Lecture 10 | Programming Methodology (Stanford)
- Description:
-
Lecture by Professor Mehran Sahami for the Stanford Computer Science Department (CS106A). Professor Sahami lectures on classes, constructors, instance variables, setters, strings, extending, interface, labels, and GArcs
CS106A is an Introduction to the engineering of computer applications emphasizing modern software engineering principles: object-oriented design, decomposition, encapsulation, abstraction, and testing. Uses the Java programming language. Emphasis is on good programming style and the built-in facilities of the Java language.
Complete Playlist for the Course:
http://www.youtube.com/view_play_list?p=84A56BC7F4A1F852CS106A at Stanford Unversity:
http://www.stanford.edu/class/cs106a/Stanford Center for Professional Development:
http://scpd.stanford.edu/Stanford University:
http://www.stanford.eduStanford University Channel on YouTube:
http://www.youtube.com/stanford - Video Language:
- English
- Duration:
- 46:59
elizabethschumacherthompson edited English subtitles for Lecture 10 | Programming Methodology (Stanford) | ||
N. Ueda edited English subtitles for Lecture 10 | Programming Methodology (Stanford) | ||
N. Ueda edited English subtitles for Lecture 10 | Programming Methodology (Stanford) | ||
N. Ueda edited English subtitles for Lecture 10 | Programming Methodology (Stanford) | ||
Eunjeong_Kim added a translation |