1 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 2 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 3 00:00:09,910 --> 00:00:14,672 flowers image, here, it's 457 pixels wide by 360 pixels high. So, if you 4 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 5 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 6 00:00:24,697 --> 00:00:29,835 were writing code before, where you would have a line like pixel.setRed(255) to 7 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 8 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 9 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 10 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 11 00:00:49,191 --> 00:00:54,541 bookkeeping of running those lines of code again and again once for each pixel on the 12 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 13 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 14 00:01:04,610 --> 00:01:09,003 about the, the structure of this thing. I'm just going to identify the parts then 15 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 16 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 17 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 18 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 19 00:01:33,423 --> 00:01:38,565 next line and so what this means is. And all the syntaxes require the parenthesis 20 00:01:38,565 --> 00:01:43,046 and the curly brace and everything. Usually in my examples or in the exercises 21 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 22 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 23 00:01:52,120 --> 00:01:56,490 every pixel in this image please to the following and then the following is to 24 00:01:56,490 --> 00:02:03,720 defined as whatever is in the colored braces here so. These lines. 25 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 26 00:02:09,243 --> 00:02:14,627 just a few lines of code that can do, whatever we want. So, the way the 27 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. 28 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 29 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 30 00:02:29,617 --> 00:02:33,365 the for-loop runs these, these first three lines. So it says; pixel.setRed(0), 31 00:02:33,365 --> 00:02:37,165 pixel.setGreen(0), pixel.setBlue(0). So those are all 32 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 33 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 34 00:02:45,348 --> 00:02:49,917 the bottom a funny thing happens and I sort of have this black arrow. It loops 35 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, 36 00:02:54,720 --> 00:02:59,230 so the second pixel, and then it runs these three lines again. So it does them 37 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 38 00:03:04,268 --> 00:03:08,837 pixel number three, and so on. It just runs the lines again and again and again 39 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 40 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 41 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 42 00:03:23,044 --> 00:03:27,271 body are kind of different from the other lines of code. Where this image equals new 43 00:03:27,271 --> 00:03:31,346 simpleImage, well that just happens once and the print image that just happens once. 44 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 45 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 46 00:03:40,084 --> 00:03:44,658 example. So here I have it in runnable code so the, this loads the image. Then 47 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 48 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 49 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 50 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 51 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 52 00:04:07,660 --> 00:04:12,059 does. So what's happened is, we have this original flowers image with all sorts of 53 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 54 00:04:16,938 --> 00:04:21,912 visited every pixel on that image and done these three lines. And what this do is 55 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 56 00:04:26,396 --> 00:04:31,002 changes the pixel to be a pure black pixel. And so then, if you imagine that 57 00:04:31,002 --> 00:04:35,916 just happening over the entire flower's image, obliterating all the data, this is 58 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, 59 00:04:41,358 --> 00:04:48,129 more sane example. So here I'm gonna say, for each pixel set red, green - red 60 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 61 00:04:53,608 --> 00:04:58,030 do that. Very often, for these problems, we'll have the pattern that in English, 62 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 63 00:05:02,279 --> 00:05:07,044 then ultimately, on the exercise, it will be your job to sort of translate that into 64 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 65 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 66 00:05:16,633 --> 00:05:21,399 first two lines say pixel.setRed(255) and pixel.setGreen(255). And then the 67 00:05:21,399 --> 00:05:25,956 third line is pixel.setBlue(0). So if I run that. What we see is this 68 00:05:25,956 --> 00:05:30,171 bright yellow rectangle so this is kinda similar to the previous example. We've 69 00:05:30,171 --> 00:05:34,545 just gone through and changed the green and blue for every pixel in this thing in 70 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 71 00:05:39,863 --> 00:05:44,055 little unrealistic, right? I just, we just obliterated all the data, and just made 72 00:05:44,055 --> 00:05:48,140 this, colored rectangle. So now I'd like to try one, that's a little more 73 00:05:48,140 --> 00:05:51,908 realistic, where we, instead of obliterating all the data in the flowers 74 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 75 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 76 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 77 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 78 00:06:14,085 --> 00:06:19,235 gonna do. So the first question is alright, what's the code to do that? And 79 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 80 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 81 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 82 00:06:33,014 --> 00:06:37,589 gonna be one line. And what this says, you know, the sort of English translation of 83 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 84 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... 85 00:06:46,621 --> 00:06:51,600 the flowers have changed to look like these kind of weird radioactive green flowers. 86 00:06:51,600 --> 00:06:55,790 And that can make sense if you sort of unpack like what made the flowers yellow 87 00:06:55,790 --> 00:07:00,190 before well they were yellow because there was a combination of red and green light. 88 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 89 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 90 00:07:07,700 --> 00:07:11,526 green light that was making the images. The other thing to notice is, look over 91 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 92 00:07:15,305 --> 00:07:19,415 much different at all so probably this was mostly green light to start with. The red 93 00:07:19,415 --> 00:07:23,288 light was maybe, you know, a value like eight or twenty or something. And so when 94 00:07:23,288 --> 00:07:29,698 we changed that to zero it doesn't really make much, much visible difference. Let's 95 00:07:29,698 --> 00:07:34,881 try one more example here. So for this one, I'm gonna start with the flowers 96 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 97 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 98 00:07:45,978 --> 00:07:51,560 pixel.setGreen(0) and pixel.setBlue(0), and I just, I just don't change 99 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, 100 00:07:57,843 --> 00:08:04,590 is now we get these, red flowers. And what?s happened here is, this is actually 101 00:08:04,590 --> 00:08:09,309 called the red channel of the image. And what's happened is, normally, the image is 102 00:08:09,309 --> 00:08:13,691 this combination of red, green, and blue light. What we've done is we've changed 103 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 104 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 105 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, 106 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, 107 00:08:31,274 --> 00:08:35,132 here, the green leaves. Not much red there. And so, really, it's just the 108 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 109 00:08:39,986 --> 00:08:44,337 way of looking at the image. There's actually an analogous, blue channel and 110 00:08:44,337 --> 00:08:48,410 green channel we could make to sort of look at where, those lights are, 111 00:08:48,410 --> 00:08:55,053 alternately. Alright. So, the for-loop is, I said it turns out this is a very 112 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 113 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 114 00:09:03,488 --> 00:09:07,912 images. I should mention for completeness, JavaScript language you're using actually 115 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 116 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 117 00:09:15,935 --> 00:09:19,844 doing some other JavaScript problem I'm afraid you won't have this. But, many 118 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 119 00:09:24,114 --> 00:09:29,844 omission from JavaScript. So the pattern here is that we get to write code, you 120 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 121 00:09:34,331 --> 00:09:39,045 would say that this reflects the theme of the idea that computers are powerful yet 122 00:09:39,045 --> 00:09:43,532 kind of stupid. So you write the code that's kind of interesting, like, well I 123 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 124 00:09:48,190 --> 00:09:53,018 the for loop we have this partnership with the computer where the computer will take 125 00:09:53,018 --> 00:09:57,009 care of the powerful thing, like we're running that, 100,000's or even 126 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 127 00:10:01,621 --> 00:10:05,419 really just doing something very mechanical there. And so I think that, 128 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 129 00:10:09,867 --> 00:10:14,371 computer handles the mechanical part very quickly, but the person has to add the 130 00:10:14,371 --> 00:10:18,820 creativity to like control what's actually going to happen. So in the next section 131 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 132 00:10:23,764 --> 00:10:28,481 to add just one more feature that will allow us to start doing image processing 133 00:10:28,481 --> 00:10:31,380 examples like this that are a lot more interesting.