This two-part course is designed to help students with very little or no computing background learn the basics of building simple interactive applications. Our language of choice, Python, is an easy-to learn, high-level computer language that is used in many of the computational courses offered on Coursera. To make learning Python easy, we have developed a new browser-based programming environment that makes developing interactive applications in Python simple. These applications will involve windows whose contents are graphical and respond to buttons, the keyboard and the mouse. In part 2 of this course, we will introduce more elements of programming (such as list, dictionaries, and loops) and then use these elements to create games such as Blackjack. Part 1 of this class will culminate in building a version of the classic arcade game "Asteroids". Upon completing this course, you will be able to write small, but interesting Python programs. The next course in the specialization will begin to introduce a more principled approach to writing programs and solving computational problems that will allow you to write larger and more complex programs.
Images
Loading...
来自 Rice University 的课程
An Introduction to Interactive Programming in Python (Part 2)
799 个评分
从本节课中
Week 5 - Mouse input, list methods, dictionaries
Read mouse input, learn about list methods and dictionaries, draw images
与讲师见面
Joe WarrenProfessor
Computer Science
Scott RixnerProfessor
Computer Science
John GreinerLecturer
Department of Computer Science
Stephen WongLecturer
Computer Science
[MUSIC]
Earlier in the week we talked about how to use the mouse to interact with the canvas.
In this lecture I'm going to show you how
to make your applications in CodeSkulptor look good.
I'm going to show you how to load images,
we're going to use images a lot in week six, seven and eight.
When we build asteroids,
we're going to have tons of images that's going to make our game look great.
So, it's going to get a starting point to kind of working toward that.
I'm going to use OneNote and
talk a little bit about kind of some background about how this works.
Then I'm going to walk you through a simple example of building a map
magnifier.
And that should be enough to kind of get you going in terms of using images inside
CodeSkulptor.
All right, let's go to it.
All right,
let's talk about how to load an image in the CodeSkulpture using SimpleGUI.
There's only a single command you need to use to actually load something into
CodeSkulptor.
It's the following command right here, it's simplegui.load_image.
Now the parameter that is not going to be the name of a file on your hard drive.
It's going to be the URL for a file sitting out on the web.
So all your hard assets are going to be loaded in via a URL here.
So down here is an example of kind of a URL, http://somethingsomethingsomething.
You do that in CodeSkulpture using SimpleGUI the result will be this object's
going to be an image.
And then later on we're going to talk about how we can actually draw pieces
of that image.
Just as an example, if we click on this, it goes out and
actually it'll download an image into Chrome here.
And you can see this is a kind of a picture of a map from
the Gutenberg project.
If I click on it, it brings up, it's a really high resolution image here,
I can scroll up and down here.
This is a nice example, we're going to work with this and this lecture.
So let's go back to OneNote now, so what are some tips for doing this.
Well there's not anything that's really too difficult in here,
in general you don't have to do much.
We're going to provide you all the images you need on Google Storage.
Your program template will contain links to all the images that
you're going to need to use.
So you don't have to make any images on your own.
I know some of you are going to be excited,
want to kind of start downloading and using your own images.
Couple of quick tips always to check to make sure that UR
are using actually can be downloaded into web browser.
If you can download into web browser then you're good to actually use it inside
CodeSkulptor.
We'll show you in next week actually, how to go through and
create files inside Dropbox that you can have visible with the public URL.
And that are downloadable, so you can you use them inside CodeSkulptor.
The other thing to remember is that since this is a URL it takes, it
may take a couple of seconds to actually download a big image to your computer.
So while that's happening we've set it up so
that any draws that use with it won't fail, won't stop the program.
They'll simply just not draw that image,
after you've done the first download the image will be cached on your computer.
Then it should run very, very well, okay, let's go on and talk about drawing images.
So, there's one command that you're going to use inside CodeSkulptor with
SimpleGui to draw an image.
And you can go out and look at it in the docs, it's canvas.draw_image.
And draw image is going to take five perimeters,
it takes the image that you just loaded, it has four things
that help specify what portion of image you want to draw, and where on the canvas.
The first two parameters here specify a rectangle on the image.
The second two parameters, specify rectangle on the canvas.
So how do we specify a rectangle on the image?
We specify it using a center and a size, these two lengths.
How do we specify the rectangle on the canvas?
Same way, specify using a center and a size.
So, those last four perimeters will each be pairs of numbers.
A couple of things to keep in mind when you are actually using draw image, if
you attempt to draw an image before it's loaded across the web, the draw will fail.
CodeSkulptor won't stop running,
it'll just simply keep running until the image is loaded.
Second thing is, if you're source rectangle,
the rectangle over here on the left hand side,
does not lie entirely inside the image, if a portion of it is outside.
There's nothing defining it, the draw fails,
again, doesn't stop execution, it just simply won't draw anything on the canvas.
Let's go on and we'll just talk real quickly about the example I'm going to
show you some code for.
So we just saw this picture of the Gutenberg project map, it's very large,
it's 1500 by 1800 pixels we can't draw it all on the screen at one time.
So we're going to make a little magnification tool, and
the critical issue here is we're going to squeeze the map down by a factor of three.
So leave that 500 by 600, so we're going to draw it at a lower resolution.
And then we're going to make an application where if we click
on that image, we're going to draw an original resolution portion of that image
over the reduced resolution portion.
So you can imagine we're going to kind of position a magnifying glass
over the image.
So to do that, we're going to end up with having two calls to draw_image.
Let's see the first call, right here
it's going to draw the entire map at a reduced resolution.
We'll do that one first, so that's drawn in the back.
And then the second call is going to draw a little portion
of the original resolution image around where we click the mouse.
So it'll be essentially a map magnifier, all right, let's go look at the code.
All right, let's look at some code for
building a map magnifier for this Gutenberg map.
So I've loaded it here into CodeSkulptor,
first thing to notice here is that we're going to do SimpleGui.load_image.
And I've actually given you a URL here, you have quotes around it.
It actually expects the URL to be in quotes as a string, it's always probably
a good idea when you're first working with an image to just take this and
say control C.
And then pop up a new tab and paste that URL in and hit Enter.
And make sure it can be downloaded into your web browser,
if it doesn't download into your web browser, it's not going to draw.
Once we verify that, I've gone through and
I've actually got some constants here that help us keep track of kind of
what we're going to do when we're doing the map magnifier.
I've got the map's height and width here, I have a scaling factor.
What I'm going to do, is remember is I'm going to reduce the size of the map by
factor of three.
So, I can actually draw it the entire thing on the canvass.
So, I've gone through and
computed within the height of kind of the reduced size canvass.
I've got a constant here that's the size of the magnification pane.
It's going to be a 120 by 120 pixels and
then we kind of set a default initial position, for we're going to kind of
position that magnification pane to be the center of the canvas.
The mouse handler, it's exactly the same thing we used earlier in the week when
we were drawing positions of circles on the canvas using clicking.
Same thing, this is going to be the magnification position.
Let's see what else, so here's kind of the heart of it.
We're going to go through and do two calls to draw_image.
The first call is going to just take the entire map and squeeze it
down on to the canvas with kind of a reduction of size by a factor of three.
So here we have the image, here we have,
this line specifies a rectangle that includes the entire image.
Okay and that's the size is the width by the height and
the center is exactly the center of the image.
I'm going to take that whole thing and draw it onto something on the canvas.
Canvas width by canvas height, centered exactly the center of the canvas.
So we're going to take the entire image and fill the entire canvas, we do
that one first because now we want to draw on top of it the magnification pane.
So it's the same thing, we have the image except for
we're going to draw a piece of it, that's specified by kind of a source
rectangle as specified by these two parameters, the center and the size.
This gives me the center and the size of the magnification pane.
So I'll just explain this one right here,
how do we specify the place on the original image were we want to actually
center our rectangle the thing that we're going to draw?
So the canvas is reduced by a factor of three, so
if I click on the canvas that gives me this position mag_pose.
Mag_pose of zero, mag_pose of one, to get the corresponding position on the image,
we kind of have to undo this scaling down by a factor of three.
So we're going to need to multiply by this scale,
we're going to need to kind of blow it up by a factor of three.
So that'll give us the center on the original image.
The size is simply going to be a square, 120 by 120
above the original image that's the source and on the destination image.
That as a result will be that we know essentially compression it will be
at full resolution whenever we see it.
If we go down here we can see we've created the frame with canvas width,
canvas height.
We registered our handlers, crank the frame up.
So let's just run it, so we've got our frame here.
This is the Gutenberg map, if you look carefully,
you can see here in the center of the canvas we've kind of blown it up.
It's not as easy to see because there's a good amount of script.
Let's click right over here on this text, now you can see it.
And if I click a lot, move around,
you can see that I'm getting a blown up version of the map here.
So this is essentially the original version,
original resolution version of the map.
Click over here, you can see kind of this little piece of the map here.
One thing to note here is, if I click close enough to the boundary, so
you can see here I'm getting this kind of magnification pane drawn.
If I click close enough to the boundary, the source rectangle,
the source square actually goes outside the original image.
That call to draw_image then fails, doesn't cause the application to stop,
it just says I don't know what to draw so I'm not drawing anything.
So this is kind of a simple example you can walk through and
look at to understand how drawing images works inside CodeSkupltor and
SimpleGui, it's not too complicated.
And like I said, most of the projects we're going to actually go ahead and
give you a template where kind of there's some initial drawing the images there.
But if you get ambitious you're welcome to go and
actually play with this and you can really spiff your games up if you get good at it.
Okay, I'll see you back in a second and we'll talk about memory.
