0:00:00.760,0:00:06.265
In this section, we're gonna combine the[br]earlier ideas of code with the ideas of

0:00:06.265,0:00:11.908
images and pixels and RGB numbers to sort[br]of bring that together. Now, the examples

0:00:11.908,0:00:16.985
in this section, we'll just manipulate one[br]pixel at a time. And, then in the next

0:00:16.985,0:00:21.509
section we'll scale it up to build, to do[br]thousands of pixels at a time. So, to get

0:00:21.509,0:00:27.036
started, I wanna look at this, image[br]called x.png. And this image is tiny, so I

0:00:27.036,0:00:32.702
can point to it here. So, it's a ten[br]by ten image, it's there, shown on the

0:00:32.702,0:00:38.229
page. And it's a black image with a white[br]X drawn on it. And, as I said, it's, it's

0:00:38.229,0:00:43.756
quite small. But we'll, we'll show it a[br]little bit bigger in a second. So the PNG

0:00:43.756,0:00:49.212
is a, an image format, portable networks[br]graphics. Just like, JPEG is a format

0:00:49.212,0:00:54.967
which you might be more familiar with. So[br]those are both image formats. So, in this

0:00:54.967,0:01:00.938
case, what I wanna look at here.[br]Is some code, that loads the x.png

0:01:00.938,0:01:05.675
image and displays it. So, this will just[br]be a first, very simple example of code,

0:01:05.675,0:01:10.172
that works with images. So, here's the[br]code in here, and I'll just talk about

0:01:10.172,0:01:14.489
what each line does. So, this first line,[br]image = new SimpleImage(x.png)

0:01:14.669,0:01:19.344
What this does, is the[br]right hand side essentially. Loads the

0:01:19.344,0:01:23.698
x.png image into memory. And we'll talk in[br]more detail later on, what, what memory

0:01:23.698,0:01:27.890
is. But suffice to say, that's sort of[br]the, it gets into the computer so it can,

0:01:27.890,0:01:32.516
the computer can work on it. So once I've[br]got the image, the, the equal sign here

0:01:32.516,0:01:36.980
just stores it into a variable, which I'm,[br]I'm gonna call image, just like, just like

0:01:36.980,0:01:41.389
we've seen variables before. The second[br]line, image.setZoom(20). What that does is

0:01:41.389,0:01:46.016
it calls a, a set, the setZoom function,[br]which is something that images have. And

0:01:46.016,0:01:51.960
it passes the number 20. And all this[br]does. Is it such an option to show the

0:01:51.960,0:01:57.190
image at 20x size? And so. That's just[br]something we'd use for a small image like

0:01:57.190,0:02:00.657
this just so it shows up big enough, that[br]we can see it. And then finally, print(image),

0:02:00.657,0:02:04.038
is very similar to what we see[br]before that, just prints the image over

0:02:04.038,0:02:07.418
the right hand side just as we saw,[br]strings and numbers before. So we can all

0:02:07.418,0:02:12.326
just try it. So if I run this what you see[br]is here's x.png, shows up over here. And

0:02:12.326,0:02:16.908
act-, you can actually count, one, two,[br]three, four. You can actually count over,

0:02:16.908,0:02:21.980
and see it is in fact, ten pixels by ten[br]pixels. And it's being displayed here at

0:02:22.163,0:02:27.234
20x size. So actually I could change[br]this number here. So if I change this to a

0:02:27.234,0:02:31.634
ten, and then run it again then okay,[br]well, now it's only 20X. And if I put

0:02:31.634,0:02:35.483
like, a, a 40 here, and run it,[br]then okay, it a lot bigger. So I'll put it back to

0:02:35.483,0:02:40.013
twenty. So that's just a first[br]example of a little bit of code, but we're

0:02:40.013,0:02:44.882
sort of going down the path of being able[br]to load and manipulate images. Right, so

0:02:44.882,0:02:50.471
to make this a little more interesting. I[br]wanna extend the code to be able to deal

0:02:50.471,0:02:55.247
with individual pixels so I'm a add a, a[br]couple lines in the middle of the a

0:02:55.247,0:02:59.458
program here, so this line[br]pixel=image.getPixel(0,0). What that

0:02:59.458,0:03:04.361
does it goes to the image and its gonna[br]get a reference to a particular pixel

0:03:04.361,0:03:09.515
whatever, whenever x, y coordinates we[br]specify here so 0,0 or this refers to the,

0:03:09.515,0:03:14.857
the upper left pixel, so it gets reference[br]to the upper left pixel and stores that in

0:03:14.857,0:03:20.224
a variable pixel and then this line: pixel.setRed(255).[br]That calls a function a

0:03:20.224,0:03:25.722
pixel has called setRed and what the, what[br]setRed does is it takes in any number here

0:03:25.722,0:03:31.090
between the parentheses and whatever that[br]number is, it takes it in and it sets the

0:03:31.090,0:03:36.329
red value of the pixel to be that number.[br]So, I'm gonna run this. We need to see

0:03:36.329,0:03:41.504
what it does. And what you see is, what[br]the code has done is obtained a reference

0:03:41.504,0:03:46.421
to this, the upper left pixel and it was[br]black before and it, remember, recall

0:03:46.421,0:03:51.597
each, each pixel has the three numbers in[br]it, red, green and blue. And so what this

0:03:51.597,0:03:56.385
code does, it went to the red number and[br]it changed to 255, just overriding

0:03:56.385,0:04:01.625
whatever was there before. So when we see[br]it, well okay it shows up as a red pixel,

0:04:01.625,0:04:07.995
so. There's a setRed to change the red[br]values. There's an analogous function

0:04:07.995,0:04:12.808
setGreen and setBlue. So, we have these[br]three, setRed, setGreen and setBlue.

0:04:12.808,0:04:17.620
And, so, with those, we can just change[br]the red, green and blue values to be

0:04:17.620,0:04:22.083
whatever, wherever we want. So. Oh, and[br]I'll mention it as an aside so there I, I

0:04:22.083,0:04:25.498
just, you know, introduced three[br]functions. There's this separate page,

0:04:25.498,0:04:29.328
Image Functions Reference, that just lists[br]all the functions in a table, so for some

0:04:29.328,0:04:33.111
later exercise, you might wanna, you can[br]go see that if you want to remember what a

0:04:33.111,0:04:36.526
function does. But usually for the[br]lectures I will just, if I'm gonna use a

0:04:36.526,0:04:40.240
function I'll just, as I'm going I'll talk[br]about it. So, what I want to do to

0:04:40.240,0:04:44.273
demonstrate how, how these functions work,[br]is just go through a bunch of examples.

0:04:44.273,0:04:48.234
Just use them to actually do something.[br]Alright, so here are, so the, the format

0:04:48.234,0:04:52.118
of this is I've got, a little code area[br]here with some starter code in it. And

0:04:52.118,0:04:55.856
then in this table down here, I've just[br]listed a bunch of little, challenge

0:04:55.856,0:04:59.643
problems, like, oh, set something to be[br]green or yellow or whatever, and we'll go

0:04:59.643,0:05:03.575
through them. For each one of these, on[br]the right hand side there's this little

0:05:03.575,0:05:07.702
show button, so you can click that to see[br]the solution code. So later on you can go

0:05:07.702,0:05:11.731
to this page yourself and the experiments[br]I've tried you can just try yourself and

0:05:11.731,0:05:15.421
try variations of them or whatever.[br]Alright, so let's try this first one. Well

0:05:15.421,0:05:19.282
actually, here, I'll, I'll run the code[br]first to see what it does. Okay, so right

0:05:19.282,0:05:23.582
now it's just getting pixel (0,0) and[br]setting it to red. So that, sort of seen

0:05:23.582,0:05:28.589
that before. Alright, so what's the first[br]problem saying? Set pixel (0,0) to be

0:05:28.589,0:05:33.543
green. So the form here, is in English, it[br]will say, well here's some effect we'd

0:05:33.543,0:05:38.560
like you to get and in sense the steps[br]we're going through here to think about

0:05:38.560,0:05:43.641
well, what would be in the domain of code,[br]in terms of function calls and numbers.

0:05:43.641,0:05:48.850
What are the series of operations we want[br]to do to get that effect? So you're sort

0:05:48.850,0:05:53.981
of translating essentially from English[br]into computer. So in this case it's said

0:05:53.981,0:05:58.792
to be set green. So what I want to do to[br]do that, is instead of calling the setRed

0:05:58.792,0:06:03.903
function, I'll just change it to call setGreen. So lets try that. And there we go.

0:06:03.903,0:06:09.466
We gotta a green pixel instead. Lets try the next one. The next one

0:06:09.466,0:06:15.315
says set pixel (0,0) to be yellow. So right,[br]well so, in order for the pixel to appear

0:06:15.315,0:06:20.664
yellow, what I want is for both the red[br]and green values to be 255. You know,

0:06:20.664,0:06:25.942
yellow equals red plus green. So to do[br]that, to change both the red and the

0:06:25.942,0:06:30.197
green. I'm gonna copy this line, and I'll[br]paste it in here. And I'll just change

0:06:30.197,0:06:34.280
this one to red. So, I'm, I'm relying on[br]the fact that, once I've got the reference

0:06:34.280,0:06:38.312
to pixel, I can do multiple things to it.[br]So, on, on this first line, I call setRed,

0:06:38.312,0:06:42.242
I change the red value. And then I[br]can call setGreen on the next line to

0:06:42.242,0:06:46.427
change the green. And it'll, the code will[br]just go through and do each one of those

0:06:46.427,0:06:50.510
things internally. So let's try that. And[br]sure enough, now I get yellow. So I've,

0:06:50.510,0:06:54.439
this sorta goes back to the idea that[br]there is this pixel. It really just had

0:06:54.439,0:06:58.624
these three numbers in here. And here I'm[br]writing code line by line to kinda reach

0:06:58.624,0:07:04.407
in there and change those numbers. Let's[br]try the next one. Set pixel 1,0 to be

0:07:04.407,0:07:10.242
yellow. Where is that pixel? So, so that[br]goes back to this line, the image.getPixel

0:07:10.242,0:07:14.751
line, which I haven't changed up[br]until now. So the way, this works is,

0:07:14.751,0:07:19.630
whatever numbers I specify, 0,0,[br]whatever, that's just a way of identifying

0:07:19.630,0:07:24.571
the different pixel inside here. So, if I[br]say 1,0, that's gonna get the pixel

0:07:24.571,0:07:29.265
at x=1, y=0, so the convention is, it's x, then y. So, if

0:07:29.265,0:07:34.206
I run that, we can just see what it does.[br]So, what you see is it's one over to the

0:07:34.206,0:07:39.024
right. So really, we could just specify[br]anything over here. I could say, you know,

0:07:39.024,0:07:43.254
2,4. We'll see where that is, if I run[br]it. Oh, okay, apparently that's over here.

0:07:43.407,0:07:47.285
So this goes back to what I was saying a[br]couple of sections ago. That's it's,

0:07:47.285,0:07:51.673
that's x=0, that's x=1,[br]that's x=2. We're not gonna play with

0:07:51.673,0:07:55.704
a lot of detail of messing with different[br]x-y values, we just have to appreciate

0:07:55.704,0:08:00.462
that even if I have a million pixels here[br]there is this x-y scheme where we could

0:08:00.462,0:08:05.140
dial it in with a particular x-y number[br]to dial into exactly a particular pixel.

0:08:05.140,0:08:13.929
So text one says, set pixel 0,0 to be[br]white. So I'll change this back, to be

0:08:13.929,0:08:23.194
pixel 0,0, so what do I do to red, green, blue to make it white? The answer is I

0:08:23.194,0:08:30.069
want to set all three values to 255. So[br]notice, instead of say, re-typing pixel.,

0:08:30.069,0:08:35.036
whatever it is by hand, a lot of times I[br]find it easier to copy an existing one and

0:08:35.036,0:08:39.194
then just edit it a little bit. So, I'm[br]gonna put in a third call here

0:08:39.367,0:08:43.598
pixel.setBlue(255). So, the, the result of[br]all three of these. Let's try it. Yeah,

0:08:43.598,0:08:47.245
sure enough, it sets it to be white. So[br]I've set all three values to be

0:08:47.245,0:08:51.258
[inaudible]. So there's a couple more[br]problems here. I'm actually not gonna

0:08:51.258,0:08:55.167
work, but, if you want to, you could go to[br]this page, and try any number of

0:08:55.167,0:08:59.284
experiments or try those as well. And[br]then, once you're comfortable with that

0:08:59.284,0:09:02.880
kind of material, then, we'll be ready for[br]some, a, some exercises.