[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.

Images

An Introduction to Interactive Programming in Python (Part 2)

与讲师见面