WEBVTT 00:00:00.780 --> 00:00:05.280 So the topic of this section, is what's called a for-loop. And this is going to be a 00:00:05.280 --> 00:00:09.722 big increase in what we can do with the code. So, if you look at the original 00:00:09.910 --> 00:00:14.672 flowers image, here, it's 457 pixels wide by 360 pixels high. So, if you 00:00:14.672 --> 00:00:19.684 multiply just to get the total number of pixels that's 164,000 and a few odd 00:00:19.684 --> 00:00:24.697 pixels. And this is a pretty small image. So, that's a lot of pixels. So the way we 00:00:24.697 --> 00:00:29.835 were writing code before, where you would have a line like pixel.setRed(255) to 00:00:29.835 --> 00:00:34.346 change one pixel to red, that's just, that's not a practical way to do an 00:00:34.346 --> 00:00:39.171 operation on a whole image. I mean, this is a small image and has over 100,000 00:00:39.171 --> 00:00:43.965 pixels. So what we want is a construct where we can write a few lines of code 00:00:43.965 --> 00:00:49.191 that capture some change we want to make and then let the computer take care of the 00:00:49.191 --> 00:00:54.541 bookkeeping of running those lines of code again and again once for each pixel on the 00:00:54.541 --> 00:00:59.581 image. So the for-loop, the topic of the section, is gonna do exactly this and this 00:00:59.581 --> 00:01:04.610 is gonna be a big increase in what we can do with, with the code. So let me talk 00:01:04.610 --> 00:01:09.003 about the, the structure of this thing. I'm just going to identify the parts then 00:01:09.003 --> 00:01:13.693 I'll do an example. So here in the blue box here I have a picture of a for-loop 00:01:13.693 --> 00:01:20.751 and I'll just talk about what the parts are. So, it starts off - and I'll use my 00:01:20.751 --> 00:01:27.484 pen - this, this begins the for loop so it has the word for and then in parenthesis 00:01:27.484 --> 00:01:33.423 it says pixel colon image and then there's a left curly brace to start to set off the 00:01:33.423 --> 00:01:38.565 next line and so what this means is. And all the syntaxes require the parenthesis 00:01:38.565 --> 00:01:43.046 and the curly brace and everything. Usually in my examples or in the exercises 00:01:43.046 --> 00:01:47.583 we'll, it's just, it's the same every time, so usually we'll provide it and then 00:01:47.583 --> 00:01:52.120 just ask you to write the code on the following line. So what this means is, for 00:01:52.120 --> 00:01:56.490 every pixel in this image please to the following and then the following is to 00:01:56.490 --> 00:02:03.720 defined as whatever is in the colored braces here so. These lines. 00:02:03.720 --> 00:02:09.243 Inside of the thing. That's the, called the body of the for-loop. And this is 00:02:09.243 --> 00:02:14.627 just a few lines of code that can do, whatever we want. So, the way the 00:02:14.627 --> 00:02:20.010 for-loop works, is, and let's say we're, you know, working on the flowers image here. 00:02:20.220 --> 00:02:25.240 Is it. Here we have three lines. So it's gonna take, let's say, pixel number one of 00:02:25.240 --> 00:02:29.617 the whole image, the upper left pixel. And so it, it isolates pixel number one. And then 00:02:29.617 --> 00:02:33.365 the for-loop runs these, these first three lines. So it says; pixel.setRed(0), 00:02:33.365 --> 00:02:37.165 pixel.setGreen(0), pixel.setBlue(0). So those are all 00:02:37.165 --> 00:02:41.066 happening to pixel number one. And then it, really, what that does is it changes it to 00:02:41.066 --> 00:02:45.348 black, right? It sets red, green, and blue all to zero. So when the for-loop gets to 00:02:45.348 --> 00:02:49.917 the bottom a funny thing happens and I sort of have this black arrow. It loops 00:02:49.917 --> 00:02:54.720 back up to the top of the three lines and now it's gonna isolate pixel number two, 00:02:54.720 --> 00:02:59.230 so the second pixel, and then it runs these three lines again. So it does them 00:02:59.230 --> 00:03:04.268 to pixel two and then it loops back to the top and it runs the three lines again from 00:03:04.268 --> 00:03:08.837 pixel number three, and so on. It just runs the lines again and again and again 00:03:08.837 --> 00:03:15.044 once for each pixel in the image. So. The, oh the other thing I should point out here 00:03:15.044 --> 00:03:19.220 is you'll notice that the, the three lines in the body are indented and that not 00:03:19.220 --> 00:03:23.044 required but it's a, it's a common convention to show that the lines in the 00:03:23.044 --> 00:03:27.271 body are kind of different from the other lines of code. Where this image equals new 00:03:27.271 --> 00:03:31.346 simpleImage, well that just happens once and the print image that just happens once. 00:03:31.346 --> 00:03:35.623 But the lines inside the loop are sort of special in that they had this quality that 00:03:35.623 --> 00:03:40.084 they're going to be run again and again. So let's try. We just run that, that exact 00:03:40.084 --> 00:03:44.658 example. So here I have it in runnable code so the, this loads the image. Then 00:03:44.658 --> 00:03:49.290 I've got the, the for-loop setting off the body. Here's the three lines of the 00:03:49.290 --> 00:03:54.095 body. And then it, it's kind of small here but then there's a, a right curly brace 00:03:54.095 --> 00:03:58.958 sort of balancing the left curly brace up here that closes off the body. So let's 00:03:58.958 --> 00:04:03.315 just run it. See what we get. So you can see, what we get is just this pure black 00:04:03.315 --> 00:04:07.660 rectangle, and it's, it's not very useful but it, it does show what the for-loop 00:04:07.660 --> 00:04:12.059 does. So what's happened is, we have this original flowers image with all sorts of 00:04:12.059 --> 00:04:16.938 red, and green and yellow and whatever in it. And what this code has done, is it has 00:04:16.938 --> 00:04:21.912 visited every pixel on that image and done these three lines. And what this do is 00:04:21.912 --> 00:04:26.396 they take, they set the red, green and blue all to zero, so in fact it just 00:04:26.396 --> 00:04:31.002 changes the pixel to be a pure black pixel. And so then, if you imagine that 00:04:31.002 --> 00:04:35.916 just happening over the entire flower's image, obliterating all the data, this is 00:04:35.916 --> 00:04:41.358 what we're left with, just this pure black rectangle. Alright. So let me a try a, 00:04:41.358 --> 00:04:48.129 more sane example. So here I'm gonna say, for each pixel set red, green - red 00:04:48.129 --> 00:04:53.608 and green to 255 and blue to zero. So I wanna think about, well what's the code to 00:04:53.608 --> 00:04:58.030 do that. Very often, for these problems, we'll have the pattern that in English, 00:04:58.030 --> 00:05:02.279 I'll say well, have, you know, do this effect, set red to 255 or whatever. And 00:05:02.279 --> 00:05:07.044 then ultimately, on the exercise, it will be your job to sort of translate that into 00:05:07.044 --> 00:05:11.638 code. So here is this is an example of that pattern. So the code to put in the 00:05:11.638 --> 00:05:16.633 body to change red and green to 255 and blue to zero is just to say first, the 00:05:16.633 --> 00:05:21.399 first two lines say pixel.setRed(255) and pixel.setGreen(255). And then the 00:05:21.399 --> 00:05:25.956 third line is pixel.setBlue(0). So if I run that. What we see is this 00:05:25.956 --> 00:05:30.171 bright yellow rectangle so this is kinda similar to the previous example. We've 00:05:30.171 --> 00:05:34.545 just gone through and changed the green and blue for every pixel in this thing in 00:05:34.545 --> 00:05:39.863 this case to sort of get this vivid yellow color. So my, so those two examples are a 00:05:39.863 --> 00:05:44.055 little unrealistic, right? I just, we just obliterated all the data, and just made 00:05:44.055 --> 00:05:48.140 this, colored rectangle. So now I'd like to try one, that's a little more 00:05:48.140 --> 00:05:51.908 realistic, where we, instead of obliterating all the data in the flowers 00:05:51.908 --> 00:05:56.650 image, we work with it. So here's the, the original flowers image. And as we know 00:05:56.857 --> 00:06:02.852 yellow equals red plus green so we would expect that here where I've got the yellow 00:06:02.852 --> 00:06:08.572 flowers that the red and green are, are high there. So what I'd like to do for 00:06:08.572 --> 00:06:14.085 this example is set the red to zero for the whole image. Think about what that's 00:06:14.085 --> 00:06:19.235 gonna do. So the first question is alright, what's the code to do that? And 00:06:19.235 --> 00:06:23.753 in this case what you see is, I just have the line pixel.setRed(0) as the 00:06:23.753 --> 00:06:28.440 body. Now in my previous examples the body was like three lines of code. It could, it 00:06:28.440 --> 00:06:33.014 could be anything. So it could be three lines or six lines. In this case it's just 00:06:33.014 --> 00:06:37.589 gonna be one line. And what this says, you know, the sort of English translation of 00:06:37.589 --> 00:06:41.994 this for-loop is, for each pixel in the image, set the red to zero. So let's see 00:06:41.994 --> 00:06:46.621 what that looks like. So if I run that, what you see is there's sort of a... 00:06:46.621 --> 00:06:51.600 the flowers have changed to look like these kind of weird radioactive green flowers. 00:06:51.600 --> 00:06:55.790 And that can make sense if you sort of unpack like what made the flowers yellow 00:06:55.790 --> 00:07:00.190 before well they were yellow because there was a combination of red and green light. 00:07:00.190 --> 00:07:03.874 What this code does is, it just zeroes out all the red light. It's like we just 00:07:03.874 --> 00:07:07.700 turned that lamp down to zero everywhere. And so what we're left with is just the 00:07:07.700 --> 00:07:11.526 green light that was making the images. The other thing to notice is, look over 00:07:11.526 --> 00:07:15.305 here at the, the green leaves kind of on the lower right. They, they don't look 00:07:15.305 --> 00:07:19.415 much different at all so probably this was mostly green light to start with. The red 00:07:19.415 --> 00:07:23.288 light was maybe, you know, a value like eight or twenty or something. And so when 00:07:23.288 --> 00:07:29.698 we changed that to zero it doesn't really make much, much visible difference. Let's 00:07:29.698 --> 00:07:34.881 try one more example here. So for this one, I'm gonna start with the flowers 00:07:34.881 --> 00:07:40.596 image and I'm gonna say set green and blue to zero and leave red unchanged. So what 00:07:40.596 --> 00:07:45.978 is the code for that? Well, I'm gonna have a two-line body here. I'm just gonna say 00:07:45.978 --> 00:07:51.560 pixel.setGreen(0) and pixel.setBlue(0), and I just, I just don't change 00:07:51.560 --> 00:07:57.843 the red, so it'll be left at whatever it is. So we can run that. And what you see, 00:07:57.843 --> 00:08:04.590 is now we get these, red flowers. And what?s happened here is, this is actually 00:08:04.590 --> 00:08:09.309 called the red channel of the image. And what's happened is, normally, the image is 00:08:09.309 --> 00:08:13.691 this combination of red, green, and blue light. What we've done is we've changed 00:08:13.691 --> 00:08:17.848 both the green and the blue to zero. So we've turned those down to just be 00:08:17.848 --> 00:08:22.342 nothing. And what we're left with is sort of a map of, where was the red light in 00:08:22.342 --> 00:08:26.723 his image? Where was red bright, and where was red dark? And what we see is, well, 00:08:26.723 --> 00:08:31.274 over here on the left, where it was dark, there is not a lot of red light. And also, 00:08:31.274 --> 00:08:35.132 here, the green leaves. Not much red there. And so, really, it's just the 00:08:35.132 --> 00:08:39.986 yellow flowers, was this, prominent area of red light. So that's a, that's just a 00:08:39.986 --> 00:08:44.337 way of looking at the image. There's actually an analogous, blue channel and 00:08:44.337 --> 00:08:48.410 green channel we could make to sort of look at where, those lights are, 00:08:48.410 --> 00:08:55.053 alternately. Alright. So, the for-loop is, I said it turns out this is a very 00:08:55.053 --> 00:08:59.476 powerful feature that allows us to write a few lines of code and let the computer run 00:08:59.476 --> 00:09:03.488 them over just, you know, some sort of big data set. In this case, we're doing 00:09:03.488 --> 00:09:07.912 images. I should mention for completeness, JavaScript language you're using actually 00:09:07.912 --> 00:09:11.975 doesn't have a for-loop that's as compact as this. It's just an omission in the 00:09:11.975 --> 00:09:15.935 language. So I added it just for this class to make it work here. So if you're 00:09:15.935 --> 00:09:19.844 doing some other JavaScript problem I'm afraid you won't have this. But, many 00:09:19.844 --> 00:09:24.114 languages do have a for-loop that looks just like this. It's just sort of a weird 00:09:24.114 --> 00:09:29.844 omission from JavaScript. So the pattern here is that we get to write code, you 00:09:29.844 --> 00:09:34.331 know, just in, in the sense of short bit of code capturing what we want, and I 00:09:34.331 --> 00:09:39.045 would say that this reflects the theme of the idea that computers are powerful yet 00:09:39.045 --> 00:09:43.532 kind of stupid. So you write the code that's kind of interesting, like, well I 00:09:43.532 --> 00:09:48.190 wanna change the green this way or that way or whatever. And then by putting it in 00:09:48.190 --> 00:09:53.018 the for loop we have this partnership with the computer where the computer will take 00:09:53.018 --> 00:09:57.009 care of the powerful thing, like we're running that, 100,000's or even 00:09:57.009 --> 00:10:01.621 1,000,000's of times. The computer handles that end, but it is also, the computer is 00:10:01.621 --> 00:10:05.419 really just doing something very mechanical there. And so I think that, 00:10:05.419 --> 00:10:09.867 that does show the general theme of, of a, how computers are. That their sort of, the 00:10:09.867 --> 00:10:14.371 computer handles the mechanical part very quickly, but the person has to add the 00:10:14.371 --> 00:10:18.820 creativity to like control what's actually going to happen. So in the next section 00:10:18.990 --> 00:10:23.764 - after there's some excersises of looking kind of like this - and then in the next session I need 00:10:23.764 --> 00:10:28.481 to add just one more feature that will allow us to start doing image processing 00:10:28.481 --> 00:10:31.380 examples like this that are a lot more interesting.