# Image-3 Loops

Previously, we had things like this `pixel.setRed(200);`
With one line of code, change the red value of one pixel. In this section, we'll look at the "for loop" construct, which can run a bit of code thousands of times -- a huge increase in power.

## Loops - Box Analogy

• Suppose you had 5,000 cardboard boxes in a warehouse and a robot
• You want the robot to move all the boxes from one corner to another
• It's a dumb computer, so you explain how to move one box in great detail
• You want to say: repeat those same steps for all the boxes
• That's loops - do some steps "for all these items"
• Loops = power!

## flowers.jpg

• flowers.jpg: 457 pixels wide by 360 pixels high - 164,520 pixels
• pixel.setRed(0); one pixel at a time ... not practical
• Want: we specify some code, computer runs it again and again, once for each pixel

Accessing one pixel at a time, e.g. pixel at (0, 0), then the pixel at (1, 0), etc. is not a good way to work on an image with thousands or millions of pixels. We'd like to say something like "for each pixel do this", and let the computer fiddle with the details of going through all the (x, y) values to look at each pixel once.

The very powerful "for loop" structure we'll learn here provides exactly this "for each pixel do this" feature. The loop takes a few lines of our code, and runs those lines again and again, once for each pixel in the image.

## For-Loop Example 1

Run this. What does it do?

image-loop-1

For each pixel, the body code sets the red, green, and blue values all to 255, 255, 0. None of the original flower data is left. All the RGB numbers are changed in the loop.

## How Does That Loop Work?

• Body of the for-loop is the lines indented within curly braces { .. }
• Body lines are run again and again, once for each pixel
• pixel variable refers to a different pixel for each run of the body

## For-Loop Syntax - 2 Parts

• For-loop syntax a little weird, but it's the same every time
• When we want "for every pixel do this", we'll use a for-loop
• For-loop has 2 parts
• 1. `for (pixel: image) {` - start the for-loop
• 2. "body" lines of code within curly braces { .. }
• Nice to indent the body lines, showing that they are special and go together

## Education Research Aside

• If you just watch the teacher go through it, you absorb a little
• Surprisingly, if you engage to answer a question about the material you absorb a lot more
• Even if the question is easy .. just switching out of the passive mode seems to do it
• So I try to put these You Try It activities in here

## Example 2 - Body Code Running Thousands of Times? You Try It

flowers-small.jpg:

• Here's an example using "flowers-small", 50 pixels wide by 39 pixels high
• 50 * 39 is 1,950 pixels total
• Body code sets each pixel to be green
• print("before"); -- before the loop
• print("after"); -- after the print(image)
• Experiment 1:
-What do you think this will print?
-Run it and see
• Experiment 2:
-Add this line at the top of the body: `print("inside");`
-What do you think this will print?
-Run it and see

image-loop-2

The lines of code in the body run again and again, once for each pixel. Therefore, a line of code inside the body, inside the curly braces { }, will run thousands or millions of times. In contrast, the lines of code outside the body just run once. Inside the body, "pixel" refers to a different pixel for each run of the body.

## For-Loop Example 3

Look again at flowers.jpg.Yellow is made or red + green, so we know that the yellow parts of the image have high red and green values. So what happens if, for each pixel, we set red to 0? What are the RGB values for a typical pixel on the yellow flowers look like before this loop runs? What about after?

• Previous examples overwrote all the flower data ... not realistic
• Modify the data in flowers.jpg
• Q: What are the green leaves made of? What are the yellow flowers made of?
• Experiment - You Try It
-For each pixel, set red to 0
-What is the body code to do this?
-Which of RGB are high for the yellow flowers?
-So what does setting red to 0 look like? Run it.
-Could try it in RGB Explorer, make yellow, then set red to 0
• Theme: we discuss algorithm ideas, then you code it up for the computer

image-loop-3

The body code `pixel.setRed(0);` is run by the loop again and again, once for each pixel in the image. Since the yellow flowers are made with red + green light, setting the red to 0 for each pixel results is greenish flowers. The green leaves aren't changed much, since their red values were near 0 anyway.

## For-Loop Example 4 - Red Channel

• Experiment or Lecture-example
• For each pixel, set green and blue to 0
• What is the body code to do this?
• The result is known as the "red channel"
• Seeing an image of just the red light areas

image-loop-4

Setting green and blue to 0 everywhere, all that is left is the area of red light that went into the original image, aka the "red channel" of the image. There are analogous green and blue channels we could look at, and the image is all three combined. The red light is most prominent for the area of yellow flowers, which makes sense as we know that yellow = red + green.

## Red, Green, and Blue Channels

• The code example above computes the "red channel" image
• The red channel is just the red light of the image, with blue and green at zero
• There are analogous blue and green channel images
• The whole image is just the sum of the three channels: adding together all the light
• The three channels are shown below

## For-Loop Conclusions

• A powerful feature, we specify a few lines of code, computer takes care of running them thousands of times
• Computer = powerful + stupid theme
• Code inside the loop is special: run it for every pixel
• That's why code inside the loop should be indented (optional)
• Note: Javascript does not have this feature, I added it for CS101