In this section, we're gonna combine the earlier ideas of code with the ideas of
images and pixels and RGB numbers to sort of bring that together. Now, the examples
in this section, we'll just manipulate one pixel at a time. And, then in the next
section we'll scale it up to build, to do thousands of pixels at a time. So, to get
started, I wanna look at this, image called x.png. And this image is tiny, so I
can point to it here. So, it's a ten by ten image, it's there, shown on the
page. And it's a black image with a white X drawn on it. And, as I said, it's, it's
quite small. But we'll, we'll show it a little bit bigger in a second. So the PNG
is a, an image format, portable networks graphics. Just like, JPEG is a format
which you might be more familiar with. So those are both image formats. So, in this
case, what I wanna look at here. Is some code, that loads the x.png
image and displays it. So, this will just be a first, very simple example of code,
that works with images. So, here's the code in here, and I'll just talk about
what each line does. So, this first line, image = new SimpleImage(x.png)
What this does, is the right hand side essentially. Loads the
x.png image into memory. And we'll talk in more detail later on, what, what memory
is. But suffice to say, that's sort of the, it gets into the computer so it can,
the computer can work on it. So once I've got the image, the, the equal sign here
just stores it into a variable, which I'm, I'm gonna call image, just like, just like
we've seen variables before. The second line, image.setZoom(20). What that does is
it calls a, a set, the setZoom function, which is something that images have. And
it passes the number 20. And all this does. Is it such an option to show the
image at 20x size? And so. That's just something we'd use for a small image like
this just so it shows up big enough, that we can see it. And then finally, print(image),
is very similar to what we see before that, just prints the image over
the right hand side just as we saw, strings and numbers before. So we can all
just try it. So if I run this what you see is here's x.png, shows up over here. And
act-, you can actually count, one, two, three, four. You can actually count over,
and see it is in fact, ten pixels by ten pixels. And it's being displayed here at
20x size. So actually I could change this number here. So if I change this to a
ten, and then run it again then okay, well, now it's only 20X. And if I put
like, a, a 40 here, and run it, then okay, it a lot bigger. So I'll put it back to
twenty. So that's just a first example of a little bit of code, but we're
sort of going down the path of being able to load and manipulate images. Right, so
to make this a little more interesting. I wanna extend the code to be able to deal
with individual pixels so I'm a add a, a couple lines in the middle of the a
program here, so this line pixel=image.getPixel(0,0). What that
does it goes to the image and its gonna get a reference to a particular pixel
whatever, whenever x, y coordinates we specify here so 0,0 or this refers to the,
the upper left pixel, so it gets reference to the upper left pixel and stores that in
a variable pixel and then this line: pixel.setRed(255). That calls a function a
pixel has called setRed and what the, what setRed does is it takes in any number here
between the parentheses and whatever that number is, it takes it in and it sets the
red value of the pixel to be that number. So, I'm gonna run this. We need to see
what it does. And what you see is, what the code has done is obtained a reference
to this, the upper left pixel and it was black before and it, remember, recall
each, each pixel has the three numbers in it, red, green and blue. And so what this
code does, it went to the red number and it changed to 255, just overriding
whatever was there before. So when we see it, well okay it shows up as a red pixel,
so. There's a setRed to change the red values. There's an analogous function
setGreen and setBlue. So, we have these three, setRed, setGreen and setBlue.
And, so, with those, we can just change the red, green and blue values to be
whatever, wherever we want. So. Oh, and I'll mention it as an aside so there I, I
just, you know, introduced three functions. There's this separate page,
Image Functions Reference, that just lists all the functions in a table, so for some
later exercise, you might wanna, you can go see that if you want to remember what a
function does. But usually for the lectures I will just, if I'm gonna use a
function I'll just, as I'm going I'll talk about it. So, what I want to do to
demonstrate how, how these functions work, is just go through a bunch of examples.
Just use them to actually do something. Alright, so here are, so the, the format
of this is I've got, a little code area here with some starter code in it. And
then in this table down here, I've just listed a bunch of little, challenge
problems, like, oh, set something to be green or yellow or whatever, and we'll go
through them. For each one of these, on the right hand side there's this little
show button, so you can click that to see the solution code. So later on you can go
to this page yourself and the experiments I've tried you can just try yourself and
try variations of them or whatever. Alright, so let's try this first one. Well
actually, here, I'll, I'll run the code first to see what it does. Okay, so right
now it's just getting pixel (0,0) and setting it to red. So that, sort of seen
that before. Alright, so what's the first problem saying? Set pixel (0,0) to be
green. So the form here, is in English, it will say, well here's some effect we'd
like you to get and in sense the steps we're going through here to think about
well, what would be in the domain of code, in terms of function calls and numbers.
What are the series of operations we want to do to get that effect? So you're sort
of translating essentially from English into computer. So in this case it's said
to be set green. So what I want to do to do that, is instead of calling the setRed
function, I'll just change it to call setGreen. So lets try that. And there we go.
We gotta a green pixel instead. Lets try the next one. The next one
says set pixel (0,0) to be yellow. So right, well so, in order for the pixel to appear
yellow, what I want is for both the red and green values to be 255. You know,
yellow equals red plus green. So to do that, to change both the red and the
green. I'm gonna copy this line, and I'll paste it in here. And I'll just change
this one to red. So, I'm, I'm relying on the fact that, once I've got the reference
to pixel, I can do multiple things to it. So, on, on this first line, I call setRed,
I change the red value. And then I can call setGreen on the next line to
change the green. And it'll, the code will just go through and do each one of those
things internally. So let's try that. And sure enough, now I get yellow. So I've,
this sorta goes back to the idea that there is this pixel. It really just had
these three numbers in here. And here I'm writing code line by line to kinda reach
in there and change those numbers. Let's try the next one. Set pixel 1,0 to be
yellow. Where is that pixel? So, so that goes back to this line, the image.getPixel
line, which I haven't changed up until now. So the way, this works is,
whatever numbers I specify, 0,0, whatever, that's just a way of identifying
the different pixel inside here. So, if I say 1,0, that's gonna get the pixel
at x=1, y=0, so the convention is, it's x, then y. So, if
I run that, we can just see what it does. So, what you see is it's one over to the
right. So really, we could just specify anything over here. I could say, you know,
2,4. We'll see where that is, if I run it. Oh, okay, apparently that's over here.
So this goes back to what I was saying a couple of sections ago. That's it's,
that's x=0, that's x=1, that's x=2. We're not gonna play with
a lot of detail of messing with different x-y values, we just have to appreciate
that even if I have a million pixels here there is this x-y scheme where we could
dial it in with a particular x-y number to dial into exactly a particular pixel.
So text one says, set pixel 0,0 to be white. So I'll change this back, to be
pixel 0,0, so what do I do to red, green, blue to make it white? The answer is I
want to set all three values to 255. So notice, instead of say, re-typing pixel.,
whatever it is by hand, a lot of times I find it easier to copy an existing one and
then just edit it a little bit. So, I'm gonna put in a third call here
pixel.setBlue(255). So, the, the result of all three of these. Let's try it. Yeah,
sure enough, it sets it to be white. So I've set all three values to be
[inaudible]. So there's a couple more problems here. I'm actually not gonna
work, but, if you want to, you could go to this page, and try any number of
experiments or try those as well. And then, once you're comfortable with that
kind of material, then, we'll be ready for some, a, some exercises.