For Loops

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 pixel.setRed(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; pixel.setRed(0),

pixel.setGreen(0), pixel.setBlue(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 pixel.setRed(255)
and pixel.setGreen(255). And then the

third line is pixel.setBlue(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 pixel.setRed(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

pixel.setGreen(0) and pixel.setBlue(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.