ProgrammingMethodology-Lecture11.pdf

Programming Methodology-Lecture11

Instructor (Mehran Sahami): Hi, all. Welcome to CS106A. Let's go ahead and get

started. If you're on your way in, just feel free to come on in. You can always get the

handouts at the end.

A couple quick announcements before we dive into things. There's two handouts today.

There's a whole bunch of coding examples. There's coding examples up the wazoo.

They're sort of like – I gave you a bunch of code that might just be useful for you to look

out for Breakout, just because it's good times.

So also related to Breakout – no, I think we just change the way we say this. It's just

Breakout, and so any time you see people on campus – every quarter I come up with

some random thing that I wanted to try to get people on campus to say. And I've never

gotten one to take off seriously. Well, let's see if we can actually get Breakout to work.

So just practice that.

On the count of three: One, two, three. Students:

Breakout.

Instructor (Mehran Sahami): Yeah, good times. All right. See, sometimes you gotta

find these little [inaudible] of humor yourself.

Anyway, the note on Breakout is that first of all, there's actually a version of it that's

available on the Web site, so you can actually play around with. The other one is we've

talked a lot about classes so far. And with the initial project that we give you for

Breakout, there's one class in there, you don't actually need to write a whole bunch of

separate classes for Breakout. It's perfectly reasonable to write all your code in that one

class.

If you want to add additional classes and have additional files in the project, and do it like

we did in class, that's perfectly fine, and if it makes sense for you. But you shouldn't

necessarily feel obligated that, "Oh, we talked about classes, so we have to do that for

Breakout." For Breakout, you're actually fine. Classes can potentially provide some

[inaudible], but they're not a requirement for the assignment.

So just couple other quick questions. In class recently – so now that we've had a few

classes, you can sort of get the feel for – we do some stuff on slides. Occasionally, we do

some stuff on the board. And so I wanna get a preference. If you have a – if you get a

notion – if you have a preference for slide versus board.

How many people prefer slides?

How many people prefer the board?

Interesting. All right. How many people like some combination of the two? You can vote

again if you want.

All right. So we'll try to do that. All righty. So today's gonna be a little slide-heavy day

because we didn't have the vote so far. But we'll try to do some more board stuff as well.

So here are the class hierarchy you saw before. And we covered a lot of the class

hierarchy last time. But there were still a few bits that we have left to cover, which is

GImage, GPolygon, and GCompound. So you'll see those. And then you'll be ready to do

all kinds of cool stuff today.

As a matter of fact, today we're gonna break out things you can do with a mouse and

graphic – and more graphics kind of stuff with the mouse. And it's just a whole bunch fun

[inaudible] doing Breakout.

So GImage: All the GImage is, and this is a funky way that you can put pictures inside

your program, like pictures that you take with a camera or whatever or your phone. You

can just stick them in your program. And the way you do this is there's a class called

GImage. And so you can create an object of type GImage by saying, "new GImage." You

give it the name of the file. That's the full file name that with a dot and whatever ending it

has, and then the xy location for where you wanna display that image. The xy is the upper

left-hand corner of the image.

So the file – image file is the name of the file containing the image, and x and y, as I just

mentioned, are those coordinates. Now, where you have to stick this file – that's

something to remember. So when it looks for the this file, what it will do is it will look in

your current project folder, and if it does not find that file name in your current project

folder, then it will look in a subdirectory named "Images."

So you can have the subfolder if you have a whole bunch of pictures called "Images"

inside the folder for your project. Put all your images there. It will also look there as well.

If it's not in either one of these places, bad things happen. And if you wanna know what

bad things happen, you can actually try it. But I wouldn't encourage you to try to do bad

things. So just stick in the folder with your project, and you'll be fine. And you'll get the

image.

So let me show you an example of what that actually looks like. Just so you know, both

.gif or "jif" formats. Some people say "jif," even though the "g" stands for "graphics"

over here, which is kind of a hard "g," and then .jpg, which is another graphics standard,

and you'll see the files either in .jpg or .jpeg, which just another format. Both of them are

supported, and so most cameras or phones or whatever actually end up taking pictures in

one of these formats.

So here's a simple example. So if we had some program run, we can say I wanna have

some image that's a GImage. So I create one, and let's say I have to have the Stanford

seal, which hopefully we have rights to, I would hope. It's probably some guy in Kansas

actually has rights to the Stanford seal and charges every time we use it. It would not be

the first time something's like that has happened. But that's not important right now.

What is important is that Stanfordseal.gif [inaudible] – it looks for that file inside the

folder for our project. And then it's gonna – we're gonna add that particular image and

that location 00. So here, I did it the way that I just specify the file name without giving

the x and y coordinates. You can give it the x and y coordinates if you wanna begin with.

But if you don't, it's kind of funky to say, "Hey, load that image." And now I can get the

size of that image so I can center it in the screen or whatever, if you wanna do that.

You can also – what's also sorta fun is you can remember GImage [inaudible]

implements this particular interface called resizable. So we can actually say, "Hey,

image, I want you to scale one and a half times in the x-direction and .5 times in the y-

direction." It's kind of like Stanford comes to school and checks into the dorm and gets on

the meal plan and puts on the freshman 15 and is just like, "Oh, oh, oh, I'm Fat Stanford

now."

But you can take pictures of your friends and just distort them in funky ways. It's just a

good time. And so you can do all kinds of – a bunch of different options on things like

images. That's just one of them.

There's also this class called Polygon. And Polygon's kinda a fun, kinda a interesting,

cool class. And what it lets you do is it lets you represent graphical objects bound by line

segments. So we need to get a little bit more formal. But here's a little diamond. Here's a

hexagon. They're just polygons. And all a polygon basically is is just something that has

multiple sides on it. That's where "poly" comes from. It just means many.

So the basic idea that's interesting about polygons is a polygon has a reference point. So

when I create a polygon, I'm actually gonna tell the computer sort of all the points on the

polygon. All of those points that I specify, like let's say the four corners of a diamond, are

all in some relation to some particular reference point that I pick.

And so in this case, I might, for example, pick the center of the diamond. And in fact, in

most cases, all of the vertices that I lay out, since they're gonna be relative to some

reference point, that reference point often is convenient to pick the center. It just turns

out, and it doesn't have to be. You could actually have your reference point be upper-left

corner of the bounding box or whatever you want.

You just gotta make sure that when you sort of tell it what the vertices are that you lay

them out in the right order. But oftentimes, the center of the polygon, if it's a regular

polygon, which means it's sort of symmetric all around, then the center is often easiest.

So I'll show you some examples of this, how you actually construct one of these

GPolygon objects.

So the first thing you do is you say, "Create an empty polygon." So you create empty

polygon object. And then what you're gonna do is you're gonna specify the vertices of

that polygon one at a time using a method called addVertex. And addVertex can take an x

and y coordinate. These x and y coordinates are relative to your reference point. So if you

think of your reference point as being the center of the object, and you say, "Oh, my xy is

1,1," that's one pixel over and one pixel down from wherever you think of your reference

point as being.

You never actually specify the reference point to the GPolygon. The reference point's just

in your mind. All of the vertices are just relative to whatever reference point you happen

to pick. And I'll show you an example of this to make it concrete in just a second.

After you set an initial vertex – so you need to set the first one with something called

addVertex. After you set the initial vertex, you can set all the remaining vertices in one of

two ways because we just give you options. We like you.

One way is just to keep adding vertices. And what – when you call a addVertex again,

what it does is it adds a new vertex, again, relative to the reference point. And it

essentially creates an imaginary line between the last vertex you just added and the first

vertex you added. That's how you're getting edges of your polygon. You're sort of

specifying the corner points.

Another way, instead of specifying corner points, is after you specify the first one, you

can explicitly addEdge. And addEdge adds a new vertex relative to the preceding one.

And here, it's going to do it with offsets of dx and dy.

So relative to where we were before, we actually specify sort of an offset in the x-

direction, offset in the y-direction. It's kinda like you were almost creating a line, and it's

gonna add an edge. This one here is using absolute coordinates relative to the reference

point. That's kind of a – the key difference between these two things. And I'll show you

an example of both of them.

One final thing you should know is the polygon is, in some sense, closed for you. So if

you were drawing a diamond, and – let's back up so I can show you the diamond. If

you're drawing a diamond, you might specify that as the first vertex, then this is the

second, then this is the third, and then this is the fourth.

How did that know what the fourth and first are what should be attached to each other? It

just closes it for you. So after you've added the last vertex to the polygon, basically what

it does is it just automatically sort of links up the first and last segments, or first and last

vertices, to sort of close the polygon for you. That's how you actually specify. So you

never actually need to go back to the first vertex again. It just does it.

So that's kinda a whole bunch of stuff in theory. What does it look like in practice.

So we're gonna create a diamond. We're actually gonna create it using some method that

we'll see called createDiamond. And so when we call createDiamond, we're expected to

give us back a GPolygon.

Here's where all the interesting stuff's going on. So here's the create-diamond method.

CreateDiamond's gonna return a GPolygon. So it needs to create one because it's gonna

return it back to us. And what it's getting is the width and height of what that diamond

should look like. So the first thing it does is it says, "Create a new polygon." It creates a

new, empty polygon, just like you sort of saw before.

Then what does it need to do? It needs to add the first vertex. So it adds the first vertex.

And it's gonna do this relative to some imaginary reference point that I pick. The

reference point that I'm gonna pick is going to be the center of the diamond, which means

my first vertex in the x-direction is going to be minus width over two. So let me just

show you where that vertex would be.

So if I think of the imaginary center, and I've just executed that line to add a vertex, I'll

say relative to my imaginary center, my first vertex is at half the width of the diamond

over in the negative x-direction, and on that same line, so 0 in the y-direction.

Then where do I go from there? Well, I'm gonna add the next vertex. The next vertex I'm

gonna add, relative to my center, is going to be at the same x coordinate as the center, but

it's going to be minus height divided by two upward. So what I get, essentially, is this is

an x vertex, and it just kinda creates the segment in between them.

Where's my next vertex? It's gonna be over here. It's width divided by two for my

imaginary center point and on the same line as the imaginary center point. So the y offset

is 0.

And then last, but not least, the last vertex I'm gonna add is on the same x coordinate as

the imaginary center. But the height is half the height of the diamond, downward. So I get

that.

And now if I say, "Return diamond," it matches up the first and last vertex. So what I get

back is a closed polygon. I actually get that diamond. And that's what's returned back to

me in my "Run" function over here. So diamond is now this little polygon.

Question?

Student: Do you add [inaudible] you add the bottom to the top [inaudible]?

Instructor (Mehran Sahami): It depends on if you do something like addEdges versus

addVertex. So again, I would try it. And especially if you try things like where your lines

would've crossed, you'll see sort of funky things between addEdge and addVertex.

Uh-huh?

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: