Lab 5, due Thursday, Nov 7th

For loops

We used the following kind of for loop in our pseudocode to repeat a task multiple times: 

for (i = 1 to n) {
    // do something with A[i]
}
This meant that the loop would run // something n times, and i would become the values 1, 2, 3, 4, ...... n

For this lab, we will learn how to write a for loop that Processing understands, and create cool images in processing with loops.

Here is how we would do the exact same loop we did above, but in Processing: 

for (int i = 1; i <= n; i++) {
    // do something with A[i]
}

There are three parts to a for loop.
for (initialization; test; update) {

  1. The first part, the initialization or int i = 1, initializes a counter to the specified value. This is exactly like the i=1 part of our pseudocode loop, initializes i to 1. int i just means that our counter is an integer. You can start your loop at any value that you want.
  2. The second part, the test or i <= n, checks to see if the loop should be run again. The loop will execute the code inside the loop (the code between the { }) as long as this test is true. This test will typically involve your counter and is just like the tests you used in your conditionals. In our example, our test is i <= n which means that as long as our counter is less than or equal to n, we want to run the loop. So i will acquire the values 1, 2, 3...... n, and then stop when i is n + 1.
  3. The third part, the update or i++, changes the value of your counter each time through the loop. For the most part you will just use i++ which is a really fancy way of telling the computer to increment your counter by one each time. You can also write i = i + 3 if you want to increment by 3 so your counter is 1, 4, 7, 10 etc or i = i + 5 for 1, 6, 11, 17 etc.
For the most part, if you just want to run a loop n times, you can just leave your loop exactly as we wrote above, substituting n for an actual number or variable.

Code Inside the Loop

For loops become very powerful when we use our counter inside our loop. Let's say I have this code 

for (int i = 1; i <= 5; i++) {
    ellipse(50, 150, 20, 20);
}
which draws an ellipse at (50, 150) with a width and height of 20 five times. However, this isn't very useful because this will draw five circles directly on top of one another. What if we want to draw five circles next to each other, with 50 pixels of space between them?

First, we want to draw a circle at (50, 150), the second at (100, 150), the third at (150, 150), the fourth at (200, 150) and the last at (250, 150). To do this, we need to continually change the x value by 50 each time in the loop. 

for (int i = 1; i <= 5; i++) {
    ellipse(50 * i, 150, 20, 20);
}
Now that we've included our counter, i, in the loop, the values for our ellipse will change each time through the loop. (If you chose to run this code yourself, I suggest changing your window size to 300, 300)

You can use your counter anywhere that a number is used, just like the volume variable from Lab 2. For example, if you want to make a gradient, you can draw lines across the screen and use your counter to change the color of a line. Take this code for example. 

size(255, 255);
for (int i = 1; i <= 255; i++) {
	stroke(i); // Change color of the line to grey value i
    line(i, 0, i, height); // Draw a vertical line
}

For Loop Challenges!

The first challenge asks you to produce specific output, but for the most part, these challenges will be more open ended than the previous Lab 3. Also remember that we are grading for effort and likeness, not for you to match exactly pixel for pixel. For each challenge, save your work as loop_challenge#.pde where # is the number of the challenge.
Tip: For some of these, it may be helpful to start your loop at 0 instead of 1. Also remember that there is no animation required (unless you want to use it for the creative challenges) so you do not need to have setup and draw, like you did for the previous labs.

  1. Create a series of squares, increasing (or decreasing, depending on how you look at it) in size. Here, our canvas is 300x300
  2. Create a tornado using repeating ellipses. Feel free to make your canvas any size and use your favorite colors. Here are two examples
  3. Make a cool drawing that uses at least one for loop and some randomness! (Revisit Lab 3 to brush up on random). Here is an example. You can click on it to refresh the drawing. Free feel to draw whatever you'd like.
  4. Create a gradient between your two arbitrary colors. You can greate a gradient by drawing a series of lines or thin rectangles that slowly change from one color to another. Use an online color picker to help you derive RGB values for some colors. Hint: Start with the first color. How much does the color have to change by for each pixel to reach the second color in width pixels?

Image filters

As we've read about in Blown to Bits, an image is just a grid of pixels (Picture Elements) with an RGB value. For loops are useful for accessing each pixel of an image and doing something with it. This is how image filters in photo editing programs like Photoshop are created. Take a look at the grayscale example.

Notice that there are two nested for loops. This is because the image is two-dimensional. We need to have a loop for each row, as well as a loop for each column of the image. When we first enter the outer loop, y is initialized to 0. While y = 0, the inside loop then runs completely (x starts at 0 and goes to width) before y changes to 1, in which we cycle through x value 0 to width again. It's not vital that you fully understand nested for loops, as you can mostly just change the code inside the loops. Here, to make an image greyscale, we take the average RGB value of each pixel in the image and replace the picture with the average for R, G and B. Download this example, put a picture in the same folder, and update the name of the photo in the .pde file and try this for yourself!

Filter Challenges

For these challenges, create 3 different types of filters of your choice. Try to make each filter different. The differences should be non-trivial. Don't just turn in a red, green and blue filter. This is a chance to experiement with images and loops. Here are some ideas to try:

Turning in your work

Turn in all of your challenges to the catalyst drop box. For the filter challenges, please put a comment at the top of each program explaining exactly what your filter is supposed to do.