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.