So the topic of this section, is what's called a for-loop.

And this is going to be

a
big increase in what we can do with the code. So, if you look at the original
flowers image, here, it's 457 pixels wide by 360 pixels high. So, if you
multiply just to get the total number of pixels that's 164,000 and a few odd
pixels. And this is a pretty small image. So, that's a lot of pixels. So the way we
were writing code before, where you would have a line like [Link](255) to
change one pixel to red, that's just, that's not a practical way to do an
operation on a whole image. I mean, this is a small image and has over 100,000
pixels. So what we want is a construct where we can write a few lines of code
that capture some change we want to make and then let the computer take care of the
bookkeeping of running those lines of code again and again once for each pixel on
the
image. So the for-loop, the topic of the section, is gonna do exactly this and this
is gonna be a big increase in what we can do with, with the code. So let me talk
about the, the structure of this thing. I'm just going to identify the parts then
I'll do an example. So here in the blue box here I have a picture of a for-loop
and I'll just talk about what the parts are. So, it starts off - and I'll use my
pen - this, this begins the for loop so it has the word for and then in parenthesis
it says pixel colon image and then there's a left curly brace to start to set off
the
next line and so what this means is. And all the syntaxes require the parenthesis
and the curly brace and everything. Usually in my examples or in the exercises
we'll, it's just, it's the same every time, so usually we'll provide it and then
just ask you to write the code on the following line. So what this means is, for
every pixel in this image please to the following and then the following is to
defined as whatever is in the colored braces here so. These lines.
Inside of the thing. That's the, called the body of the for-loop. And this is
just a few lines of code that can do, whatever we want. So, the way the
for-loop works, is, and let's say we're, you know, working on the flowers image
here.
Is it. Here we have three lines. So it's gonna take, let's say, pixel number one of
the whole image, the upper left pixel. And so it, it isolates pixel number one. And
then
the for-loop runs these, these first three lines. So it says; [Link](0),
[Link](0), [Link](0). So those are all
happening to pixel number one. And then it, really, what that does is it changes it
to
black, right? It sets red, green, and blue all to zero. So when the for-loop gets
to
the bottom a funny thing happens and I sort of have this black arrow. It loops
back up to the top of the three lines and now it's gonna isolate pixel number two,
so the second pixel, and then it runs these three lines again. So it does them
to pixel two and then it loops back to the top and it runs the three lines again
from
pixel number three, and so on. It just runs the lines again and again and again
once for each pixel in the image. So. The, oh the other thing I should point out
here
is you'll notice that the, the three lines in the body are indented and that not
required but it's a, it's a common convention to show that the lines in the
body are kind of different from the other lines of code. Where this image equals
new
simpleImage, well that just happens once and the print image that just happens
once.
But the lines inside the loop are sort of special in that they had this quality
that
they're going to be run again and again. So let's try. We just run that, that exact
example. So here I have it in runnable code so the, this loads the image. Then
I've got the, the for-loop setting off the body. Here's the three lines of the
body. And then it, it's kind of small here but then there's a, a right curly brace
sort of balancing the left curly brace up here that closes off the body. So let's
just run it. See what we get. So you can see, what we get is just this pure black
rectangle, and it's, it's not very useful but it, it does show what the for-loop
does. So what's happened is, we have this original flowers image with all sorts of
red, and green and yellow and whatever in it. And what this code has done, is it
has
visited every pixel on that image and done these three lines. And what this do is
they take, they set the red, green and blue all to zero, so in fact it just
changes the pixel to be a pure black pixel. And so then, if you imagine that
just happening over the entire flower's image, obliterating all the data, this is
what we're left with, just this pure black rectangle. Alright. So let me a try a,
more sane example. So here I'm gonna say, for each pixel set red, green - red
and green to 255 and blue to zero. So I wanna think about, well what's the code to
do that. Very often, for these problems, we'll have the pattern that in English,
I'll say well, have, you know, do this effect, set red to 255 or whatever. And
then ultimately, on the exercise, it will be your job to sort of translate that
into
code. So here is this is an example of that pattern. So the code to put in the
body to change red and green to 255 and blue to zero is just to say first, the
first two lines say [Link](255) and [Link](255). And then the
third line is [Link](0). So if I run that. What we see is this
bright yellow rectangle so this is kinda similar to the previous example. We've
just gone through and changed the green and blue for every pixel in this thing in
this case to sort of get this vivid yellow color. So my, so those two examples are
a
little unrealistic, right? I just, we just obliterated all the data, and just made
this, colored rectangle. So now I'd like to try one, that's a little more
realistic, where we, instead of obliterating all the data in the flowers
image, we work with it. So here's the, the original flowers image. And as we know
yellow equals red plus green so we would expect that here where I've got the yellow
flowers that the red and green are, are high there. So what I'd like to do for
this example is set the red to zero for the whole image. Think about what that's
gonna do. So the first question is alright, what's the code to do that? And
in this case what you see is, I just have the line [Link](0) as the
body. Now in my previous examples the body was like three lines of code. It could,
it
could be anything. So it could be three lines or six lines. In this case it's just
gonna be one line. And what this says, you know, the sort of English translation of
this for-loop is, for each pixel in the image, set the red to zero. So let's see
what that looks like. So if I run that, what you see is there's sort of a...
the flowers have changed to look like these kind of weird radioactive green
flowers.
And that can make sense if you sort of unpack like what made the flowers yellow
before well they were yellow because there was a combination of red and green
light.
What this code does is, it just zeroes out all the red light. It's like we just
turned that lamp down to zero everywhere. And so what we're left with is just the
green light that was making the images. The other thing to notice is, look over
here at the, the green leaves kind of on the lower right. They, they don't look
much different at all so probably this was mostly green light to start with. The
red
light was maybe, you know, a value like eight or twenty or something. And so when
we changed that to zero it doesn't really make much, much visible difference. Let's
try one more example here. So for this one, I'm gonna start with the flowers
image and I'm gonna say set green and blue to zero and leave red unchanged. So what
is the code for that? Well, I'm gonna have a two-line body here. I'm just gonna say
[Link](0) and [Link](0), and I just, I just don't change
the red, so it'll be left at whatever it is. So we can run that. And what you see,
is now we get these, red flowers. And what?s happened here is, this is actually
called the red channel of the image. And what's happened is, normally, the image is
this combination of red, green, and blue light. What we've done is we've changed
both the green and the blue to zero. So we've turned those down to just be
nothing. And what we're left with is sort of a map of, where was the red light in
his image? Where was red bright, and where was red dark? And what we see is, well,
over here on the left, where it was dark, there is not a lot of red light. And
also,
here, the green leaves. Not much red there. And so, really, it's just the
yellow flowers, was this, prominent area of red light. So that's a, that's just a
way of looking at the image. There's actually an analogous, blue channel and
green channel we could make to sort of look at where, those lights are,
alternately. Alright. So, the for-loop is, I said it turns out this is a very
powerful feature that allows us to write a few lines of code and let the computer
run
them over just, you know, some sort of big data set. In this case, we're doing
images. I should mention for completeness, JavaScript language you're using
actually
doesn't have a for-loop that's as compact as this. It's just an omission in the
language. So I added it just for this class to make it work here. So if you're
doing some other JavaScript problem I'm afraid you won't have this. But, many
languages do have a for-loop that looks just like this. It's just sort of a weird
omission from JavaScript. So the pattern here is that we get to write code, you
know, just in, in the sense of short bit of code capturing what we want, and I
would say that this reflects the theme of the idea that computers are powerful yet
kind of stupid. So you write the code that's kind of interesting, like, well I
wanna change the green this way or that way or whatever. And then by putting it in
the for loop we have this partnership with the computer where the computer will
take
care of the powerful thing, like we're running that, 100,000's or even
1,000,000's of times. The computer handles that end, but it is also, the computer
is
really just doing something very mechanical there. And so I think that,
that does show the general theme of, of a, how computers are. That their sort of,
the
computer handles the mechanical part very quickly, but the person has to add the
creativity to like control what's actually going to happen. So in the next section
- after there's some excersises of looking kind of like this - and then in the next
session I need
to add just one more feature that will allow us to start doing image processing
examples like this that are a lot more interesting.