Tip:
Highlight text to annotate it
X
Drawing is hard. Even though we now know how to draw line and shapes, it's really hard
to draw something like the Mona Lisa. One easy way to solve this problem is to just
take a picture of the Mona Lisa and put it directly into our pictures.
And here is a program that does that. The program uses something called images which
is just another way of saying picture. We get an image or picture from somewhere else
and draw it onto our canvas. There is a lot of code here, so it can be a little confusing.
To understand this program, you should think about it as three different parts.
At the very top of your program, you need to write these things.
At the very bottom of your program, you need to have these things.
And then in the middle you have your actual commands for drawing the Mona Lisa.
So let's see what these commands do.
The first command creates a new image and gives it the name A. So this image A is the
picture we eventually want to draw on our canvas.
Then we say which image we want to use. Here, we are telling the computer to use a picture
of the Mona Lisa from the Internet. This messy set of letters is the location or address
of a picture on the Internet. It's just like the web address that's always at the top of
your web browser.
Then we need to wait a bit. The computer needs to go to the Internet and grab the image,
and that takes a little bit of time. So you have to wait a little bit before the computer
is able to draw them.
And then you tell the computer to actually draw this image. Here we use the drawImage()
command. We write c.drawImage, then A, the name of the image that we loaded, and then
the position of where to draw it.
And with that the computer will draw the Mona Lisa. Now, I know this program is rather complicated.
To help you understand it, I'm going to show you how you can modify the program in different
ways to do different things with images.
Let's say that we don't want to draw an image of the Mona Lisa. Let's say we want to use
a different picture instead. All we have to do is change this address of which picture
we want to use. Right now, we're using a file called mona.jpg.
If we want a different picture, we can cross out the mona.jpg,
And put in the address of a different picture file. Here we'll use ele.png, which is the
address of an elephant picture.
So now the computer won't draw the Mona Lisa. It will draw an elephant instead.
Let's say we want to draw this elephant in a different place on the screen.
To do that, you have to modify this line of the program where you draw the image on the
screen. What you want to do is just change the position of the elephant to somewhere
else.
So right now, we draw the elephant at position 100,50. The means that if you start in the
upper-left, the elephant is 100 pixels to the right,
and then 50 pixels down.
If we were, to say, change the 50 to a 90,
the elephant would be drawn further down on the screen.
Finally, what do we do if we want to have two different images?
To do that, we first take this code, which creates an image with the elephant picture.
Then, we'll make a copy of that code. But you have to change some things in the copy.
In the original code we made a new image and we named it A. For our second image, we'll
name it B instead. And we don't want to use the same elephant picture. Instead we'll use
the Mona Lisa picture from before.
Then we'll take the command for actually drawing the elephant.
And we'll make a copy of that code as well. But instead of using image A, which is for
the elephant picture, we'll use image B, which is for the Mona Lisa picture.
So now we have two different pictures on our computer screen.
Sometimes when you run these programs for the first time, the computer won't draw anything
on the screen. This happens because when we told the computer to wait, we didn't wait
long enough for the computer to finish loading in all the pictures. If that happens, you
can click on this run button, and the computer will try loading the pictures and drawing
things a second time.
So go ahead and try drawing some images on your computer screen. Remember that your program
has to have three parts: you need some code at the beginning of your program for loading
the images, you need this funny symbol at the end of your program, then you have your
actual program in the middle with your c.drawImage() for actually drawing things. So far I've only
shown you the elephant and Mona Lisa pictures, but here I've put up some other pictures on
the Internet that you can use in your programs as well. For example, if you want to draw
a dog instead of the Mona Lisa, you just replace the name of the file mona.jpg with dog.png
instead.