Image Code

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.