CS 101

For Loops

Announcements

  • Computer Science History Museum form is still open
  • Office hour swap: Tyler will be out of town this weekend, so he'll cover my office hours on this Thursday, and I'll hold office hours on Monday, 1:30-3:00PM, in Gates 259. He will also be responsive to email if you have further questions.

Recap

Images are stored as a grid of pixels made of red, green, and blue components. Computers can modify images by changing pixels.

Plan for Today

  • Today, we will learn about the for loop, a building block for telling a computer to perform an operation on all pixels in the image.

Watching Code Execute:
The Debugger

  • Using the debugger in Firefox
    • Right-click on the page, select "Inspect Element", then choose the debugger tab
    • Select cs101/, then cs101.js, scroll down to line 129, and left-click the number 129. You should see a blue flag appear
    • Click the "Run" button on the slide
    • Select the "Step In" (middle) button, on the right side; you should see your code now!
    • Type in the names of variables you're interested in in the "Watch Expressions Box"
    • Click the "Step Over" (second from left) button repeatedly, watching the variables change
  • Main idea: code runs sequentially, not all at once

The Debugger: Example









 

For Loops

  • Recall: computers are great at performing millions of operations per second. What if we gave the computer one operation and told it to perform it a million times?
  • A loop is like "go back to step 1"
  • Body of the loop: The part that's repeated

 

For Loops: Changing Colors

  • The operation(s) in the body are repeated on each pixel in the image
    • Consequence: the body runs the same number of times as pixels in the image
  • What will this code do? How could we make it show the X?

     

For Loops: Relative Colors

  • What else can we do besides solid colors?
  • Idea: red, green, and blue values could be variable
    • pixel.getRed(), etc.
  • get original color, then change it
    • pixel.setRed(pixel.getRed() * something)
  • How could we make the image more orange?

 

A Puzzle

The following image has been modified by dividing the red, green, and blue values of each pixel by 5, 10, or 20. We don't know which color has been divided by what - it's up to you to restore the image to its original state.

 

Another Mystery

All the information is contained in the red value; the blue and green values are random noise. Additionally, the red value has been divided by 10. What is the image of?

 

Grayscale

  • Recall: How do we make gray?
  • The brightness of a pixel measures the average amount of light in that pixel
  • Idea: set red, green, and blue to average brightness

New Building Blocks

  • pixel.setRGB(RED, GREEN, BLUE);
  • for (neighbor : img.getNeighbors(pixel)) { ...
  • img.countNeighbors(pixel)

For Loop Inception

  • Code building blocks "stack"
  • Conceptually: for every pixel, do something with all its neighbors.

Blur filter

Create a blur effect by setting a pixel's RGB values to be the average of its neighbors.

Recap

  • For loops allow us to quickly and powerfully edit images.
  • We'll also see other uses of for loops in a couple lectures!
  • Next time: adding to for loops with if statements