Lab 5: Modifying Pixels in a Range

Introduction

In this lab, we will transform parts of a picture at a time rather than the entire picture. For example, we could transform just the left half of a picture, removing the red component from these pixels (and not the pixels in the right half). This will give us even greater freedom over the kinds of picture transformations that we can perform.

To modify a particular region of a picture, we will use a different kind of loop than the one we used in lab 4. We will use a for loop that iterates over x and y values as opposed to all pixels in the picture. For example, to set all pixels in a picture to black, the commands from lab 4 looked as follows:

for px in getPixels(modPict):
  setColor(px, black)

We could modify these commands to use for loops that iterate over x and y values as follows:

for x in range(1, getWidth(pict)):
  for y in range(1, getHeight(pict)):
    px = getPixel(pict, x, y)
    setColor(px, black)

These commands looks slightly more complicated, but they do the same thing as the previous commands, and as discussed below, they're much more flexible. The outer for loop ("for x in ...") repeats while x is 1, 2, 3, ..., w where w is the width of the picture. Note: the range function determines the starting value of x (i.e., 1) and the ending value of x (i.e., the width of the picture). This loop repeats everything that appears under it. As you can see there is another for loop ("for y in ....") within the first for loop. This loop repeats while y is 1, 2, 3, ..., h where h is the height of the picture. Because the second loop is within the first loop, this second (inner) loop will be executed every time the first (outer) loop repeats. So when x is 1, the inner loop will repeat while y is 1, 2, 3, ..., h, and then while x is 2, the inner loop will repeat again while y is 1, 2, 3, ..., h, until x is w at which point the outer loop stops.

Within both loops are commands for getting the next pixel and setting its color to black. Note that unlike the loop from lab 4 we do not immediately have the pixel. Instead, we must get it using the getPixel function. To call getPixel, we must give it the picture containing the pixel (e.g., pict), the x coordinate of the pixel we want (e.g., x), and the y coordinate of the pixel we want (e.g., y). Once we have the pixel, we can then modify its color as we did in our transformations in lab 4. In this case, we simply set the color to black.

As stated above, this second version is much more flexible than the first. By changing the values within the range, we can determine what pixels are transformed. For instance, let's assume we only want to set the left half of the picture to black and not the entire picture. We can achieve this by making the upper range value for x be getWidth(pict)/2 rather than getWidth(pict). The new commands would look as follows:

for x in range(1, getWidth(pict)/2):
  for y in range(1, getHeight(pict)):
    px = getPixel(pict, x, y)
    setColor(px, black)

By manipulating the range values in both the outer and inner for loops we can specify any (contiguous) subset of the pixels within the picture.

Of course, as we have done in the previous two labs, we will want to put these commands into a function. For example, we could put these into a function called setLeftHalfBlack:

def setLeftHalfBlack(pict):
  modPict = duplicatePicture(pict)
  for x in range(1, getWidth(modPict)/2):
    for y in range(1, getHeight(modPict)):
      px = getPixel(modPict, x, y)
      setColor(px, black)
  return modPict

This function takes as input a picture, duplicates it, sets the left half of the duplicated picture to black, and then returns the modified picture. You will be writing similar functions in this lab.

Good Programming Style

• Put a comment at the beginning of the program file stating your name, the lab number, and any other relevant information.

• Put a comment at the beginning of each function that explains what the function does and any assumptions it makes.

• Use meaningful variable and function names which suggest the role of the variable and/or function in the program, while avoiding extremely long names. Single-letter names are rarely appropriate.

• Use comments within functions for commands that are potentially complicated or hard to follow.

Exercises

Here are the exercises for this week's lab. There are 3 required exercises and 1 extra credit (i.e., optional) exercise. They are due in lab next Friday (at the start of lab). You should write the functions for the exercises below in a single Python file called exercises.py within the lab05 folder within your cs120 folder on your desktop. Each function should take as a parameter a picture, duplicate that picture, modify the duplicated picture in some specified way, and return the modified picture.

Make sure you comment all of your code as described above. This will be an important part of your grade. Important: make sure you provide a comment describing how the function should be called so that I can execute the function as you do. Also, make sure you put all pictures that you use in this lab in your lab05 folder so that I have access to them (you will also need to copy some of them to your wwww folder so that they can be put on your web page).

1. Write a function called segmentColors, which breaks the picture into 2x2 equal-sized segments. The pixels from each segment will have a different transformation applied to them:

   • Upper left segment: no transformation
   • Upper right segment: red component removed
   • Lower left segment: green component removed
   • Lower right segment: blue component removed

   The picture below of the class has been transformed in this way:

   

2. Write either the mirror horizontal or mirror vertical function from class and apply it to some picture. For example, here is a picture of the class mirrored:

   

3. As in lab 3, you will put all the pictures that you created in the earlier exercises on your cs120 web page (cs120.html). You will add them to the table in cs120.html within your www folder (not your lab02 folder!). Here is my version of cs120.html. Your page should look similar.

4. For extra credit (i.e., optional), write a mirror diagonal function that mirrors a (square) picture across the diagonal. Apply this function to a picture and put it on your cs120.html web page. Here is an example of a diagonally mirrored picture of the class: