WEBVTT 00:00:00.760 --> 00:00:06.265 In this section, we're gonna combine the earlier ideas of code with the ideas of 00:00:06.265 --> 00:00:11.908 images and pixels and RGB numbers to sort of bring that together. Now, the examples 00:00:11.908 --> 00:00:16.985 in this section, we'll just manipulate one pixel at a time. And, then in the next 00:00:16.985 --> 00:00:21.509 section we'll scale it up to build, to do thousands of pixels at a time. So, to get 00:00:21.509 --> 00:00:27.036 started, I wanna look at this, image called x.png. And this image is tiny, so I 00:00:27.036 --> 00:00:32.702 can point to it here. So, it's a ten by ten image, it's there, shown on the 00:00:32.702 --> 00:00:38.229 page. And it's a black image with a white X drawn on it. And, as I said, it's, it's 00:00:38.229 --> 00:00:43.756 quite small. But we'll, we'll show it a little bit bigger in a second. So the PNG 00:00:43.756 --> 00:00:49.212 is a, an image format, portable networks graphics. Just like, JPEG is a format 00:00:49.212 --> 00:00:54.967 which you might be more familiar with. So those are both image formats. So, in this 00:00:54.967 --> 00:01:00.938 case, what I wanna look at here. Is some code, that loads the x.png 00:01:00.938 --> 00:01:05.675 image and displays it. So, this will just be a first, very simple example of code, 00:01:05.675 --> 00:01:10.172 that works with images. So, here's the code in here, and I'll just talk about 00:01:10.172 --> 00:01:14.489 what each line does. So, this first line, image = new SimpleImage(x.png) 00:01:14.669 --> 00:01:19.344 What this does, is the right hand side essentially. Loads the 00:01:19.344 --> 00:01:23.698 x.png image into memory. And we'll talk in more detail later on, what, what memory 00:01:23.698 --> 00:01:27.890 is. But suffice to say, that's sort of the, it gets into the computer so it can, 00:01:27.890 --> 00:01:32.516 the computer can work on it. So once I've got the image, the, the equal sign here 00:01:32.516 --> 00:01:36.980 just stores it into a variable, which I'm, I'm gonna call image, just like, just like 00:01:36.980 --> 00:01:41.389 we've seen variables before. The second line, image.setZoom(20). What that does is 00:01:41.389 --> 00:01:46.016 it calls a, a set, the setZoom function, which is something that images have. And 00:01:46.016 --> 00:01:51.960 it passes the number 20. And all this does. Is it such an option to show the 00:01:51.960 --> 00:01:57.190 image at 20x size? And so. That's just something we'd use for a small image like 00:01:57.190 --> 00:02:00.657 this just so it shows up big enough, that we can see it. And then finally, print(image), 00:02:00.657 --> 00:02:04.038 is very similar to what we see before that, just prints the image over 00:02:04.038 --> 00:02:07.418 the right hand side just as we saw, strings and numbers before. So we can all 00:02:07.418 --> 00:02:12.326 just try it. So if I run this what you see is here's x.png, shows up over here. And 00:02:12.326 --> 00:02:16.908 act-, you can actually count, one, two, three, four. You can actually count over, 00:02:16.908 --> 00:02:21.980 and see it is in fact, ten pixels by ten pixels. And it's being displayed here at 00:02:22.163 --> 00:02:27.234 20x size. So actually I could change this number here. So if I change this to a 00:02:27.234 --> 00:02:31.634 ten, and then run it again then okay, well, now it's only 20X. And if I put 00:02:31.634 --> 00:02:35.483 like, a, a 40 here, and run it, then okay, it a lot bigger. So I'll put it back to 00:02:35.483 --> 00:02:40.013 twenty. So that's just a first example of a little bit of code, but we're 00:02:40.013 --> 00:02:44.882 sort of going down the path of being able to load and manipulate images. Right, so 00:02:44.882 --> 00:02:50.471 to make this a little more interesting. I wanna extend the code to be able to deal 00:02:50.471 --> 00:02:55.247 with individual pixels so I'm a add a, a couple lines in the middle of the a 00:02:55.247 --> 00:02:59.458 program here, so this line pixel=image.getPixel(0,0). What that 00:02:59.458 --> 00:03:04.361 does it goes to the image and its gonna get a reference to a particular pixel 00:03:04.361 --> 00:03:09.515 whatever, whenever x, y coordinates we specify here so 0,0 or this refers to the, 00:03:09.515 --> 00:03:14.857 the upper left pixel, so it gets reference to the upper left pixel and stores that in 00:03:14.857 --> 00:03:20.224 a variable pixel and then this line: pixel.setRed(255). That calls a function a 00:03:20.224 --> 00:03:25.722 pixel has called setRed and what the, what setRed does is it takes in any number here 00:03:25.722 --> 00:03:31.090 between the parentheses and whatever that number is, it takes it in and it sets the 00:03:31.090 --> 00:03:36.329 red value of the pixel to be that number. So, I'm gonna run this. We need to see 00:03:36.329 --> 00:03:41.504 what it does. And what you see is, what the code has done is obtained a reference 00:03:41.504 --> 00:03:46.421 to this, the upper left pixel and it was black before and it, remember, recall 00:03:46.421 --> 00:03:51.597 each, each pixel has the three numbers in it, red, green and blue. And so what this 00:03:51.597 --> 00:03:56.385 code does, it went to the red number and it changed to 255, just overriding 00:03:56.385 --> 00:04:01.625 whatever was there before. So when we see it, well okay it shows up as a red pixel, 00:04:01.625 --> 00:04:07.995 so. There's a setRed to change the red values. There's an analogous function 00:04:07.995 --> 00:04:12.808 setGreen and setBlue. So, we have these three, setRed, setGreen and setBlue. 00:04:12.808 --> 00:04:17.620 And, so, with those, we can just change the red, green and blue values to be 00:04:17.620 --> 00:04:22.083 whatever, wherever we want. So. Oh, and I'll mention it as an aside so there I, I 00:04:22.083 --> 00:04:25.498 just, you know, introduced three functions. There's this separate page, 00:04:25.498 --> 00:04:29.328 Image Functions Reference, that just lists all the functions in a table, so for some 00:04:29.328 --> 00:04:33.111 later exercise, you might wanna, you can go see that if you want to remember what a 00:04:33.111 --> 00:04:36.526 function does. But usually for the lectures I will just, if I'm gonna use a 00:04:36.526 --> 00:04:40.240 function I'll just, as I'm going I'll talk about it. So, what I want to do to 00:04:40.240 --> 00:04:44.273 demonstrate how, how these functions work, is just go through a bunch of examples. 00:04:44.273 --> 00:04:48.234 Just use them to actually do something. Alright, so here are, so the, the format 00:04:48.234 --> 00:04:52.118 of this is I've got, a little code area here with some starter code in it. And 00:04:52.118 --> 00:04:55.856 then in this table down here, I've just listed a bunch of little, challenge 00:04:55.856 --> 00:04:59.643 problems, like, oh, set something to be green or yellow or whatever, and we'll go 00:04:59.643 --> 00:05:03.575 through them. For each one of these, on the right hand side there's this little 00:05:03.575 --> 00:05:07.702 show button, so you can click that to see the solution code. So later on you can go 00:05:07.702 --> 00:05:11.731 to this page yourself and the experiments I've tried you can just try yourself and 00:05:11.731 --> 00:05:15.421 try variations of them or whatever. Alright, so let's try this first one. Well 00:05:15.421 --> 00:05:19.282 actually, here, I'll, I'll run the code first to see what it does. Okay, so right 00:05:19.282 --> 00:05:23.582 now it's just getting pixel (0,0) and setting it to red. So that, sort of seen 00:05:23.582 --> 00:05:28.589 that before. Alright, so what's the first problem saying? Set pixel (0,0) to be 00:05:28.589 --> 00:05:33.543 green. So the form here, is in English, it will say, well here's some effect we'd 00:05:33.543 --> 00:05:38.560 like you to get and in sense the steps we're going through here to think about 00:05:38.560 --> 00:05:43.641 well, what would be in the domain of code, in terms of function calls and numbers. 00:05:43.641 --> 00:05:48.850 What are the series of operations we want to do to get that effect? So you're sort 00:05:48.850 --> 00:05:53.981 of translating essentially from English into computer. So in this case it's said 00:05:53.981 --> 00:05:58.792 to be set green. So what I want to do to do that, is instead of calling the setRed 00:05:58.792 --> 00:06:03.903 function, I'll just change it to call setGreen. So lets try that. And there we go. 00:06:03.903 --> 00:06:09.466 We gotta a green pixel instead. Lets try the next one. The next one 00:06:09.466 --> 00:06:15.315 says set pixel (0,0) to be yellow. So right, well so, in order for the pixel to appear 00:06:15.315 --> 00:06:20.664 yellow, what I want is for both the red and green values to be 255. You know, 00:06:20.664 --> 00:06:25.942 yellow equals red plus green. So to do that, to change both the red and the 00:06:25.942 --> 00:06:30.197 green. I'm gonna copy this line, and I'll paste it in here. And I'll just change 00:06:30.197 --> 00:06:34.280 this one to red. So, I'm, I'm relying on the fact that, once I've got the reference 00:06:34.280 --> 00:06:38.312 to pixel, I can do multiple things to it. So, on, on this first line, I call setRed, 00:06:38.312 --> 00:06:42.242 I change the red value. And then I can call setGreen on the next line to 00:06:42.242 --> 00:06:46.427 change the green. And it'll, the code will just go through and do each one of those 00:06:46.427 --> 00:06:50.510 things internally. So let's try that. And sure enough, now I get yellow. So I've, 00:06:50.510 --> 00:06:54.439 this sorta goes back to the idea that there is this pixel. It really just had 00:06:54.439 --> 00:06:58.624 these three numbers in here. And here I'm writing code line by line to kinda reach 00:06:58.624 --> 00:07:04.407 in there and change those numbers. Let's try the next one. Set pixel 1,0 to be 00:07:04.407 --> 00:07:10.242 yellow. Where is that pixel? So, so that goes back to this line, the image.getPixel 00:07:10.242 --> 00:07:14.751 line, which I haven't changed up until now. So the way, this works is, 00:07:14.751 --> 00:07:19.630 whatever numbers I specify, 0,0, whatever, that's just a way of identifying 00:07:19.630 --> 00:07:24.571 the different pixel inside here. So, if I say 1,0, that's gonna get the pixel 00:07:24.571 --> 00:07:29.265 at x=1, y=0, so the convention is, it's x, then y. So, if 00:07:29.265 --> 00:07:34.206 I run that, we can just see what it does. So, what you see is it's one over to the 00:07:34.206 --> 00:07:39.024 right. So really, we could just specify anything over here. I could say, you know, 00:07:39.024 --> 00:07:43.254 2,4. We'll see where that is, if I run it. Oh, okay, apparently that's over here. 00:07:43.407 --> 00:07:47.285 So this goes back to what I was saying a couple of sections ago. That's it's, 00:07:47.285 --> 00:07:51.673 that's x=0, that's x=1, that's x=2. We're not gonna play with 00:07:51.673 --> 00:07:55.704 a lot of detail of messing with different x-y values, we just have to appreciate 00:07:55.704 --> 00:08:00.462 that even if I have a million pixels here there is this x-y scheme where we could 00:08:00.462 --> 00:08:05.140 dial it in with a particular x-y number to dial into exactly a particular pixel. 00:08:05.140 --> 00:08:13.929 So text one says, set pixel 0,0 to be white. So I'll change this back, to be 00:08:13.929 --> 00:08:23.194 pixel 0,0, so what do I do to red, green, blue to make it white? The answer is I 00:08:23.194 --> 00:08:30.069 want to set all three values to 255. So notice, instead of say, re-typing pixel., 00:08:30.069 --> 00:08:35.036 whatever it is by hand, a lot of times I find it easier to copy an existing one and 00:08:35.036 --> 00:08:39.194 then just edit it a little bit. So, I'm gonna put in a third call here 00:08:39.367 --> 00:08:43.598 pixel.setBlue(255). So, the, the result of all three of these. Let's try it. Yeah, 00:08:43.598 --> 00:08:47.245 sure enough, it sets it to be white. So I've set all three values to be 00:08:47.245 --> 00:08:51.258 [inaudible]. So there's a couple more problems here. I'm actually not gonna 00:08:51.258 --> 00:08:55.167 work, but, if you want to, you could go to this page, and try any number of 00:08:55.167 --> 00:08:59.284 experiments or try those as well. And then, once you're comfortable with that 00:08:59.284 --> 00:09:02.880 kind of material, then, we'll be ready for some, a, some exercises.