Warmup Part 2

Part B: Warmupgram

In Lab 4, you will write a program that uses a while loop to ask the user which filter they would like to apply to a picture (like on, e.g., Instagram). In the Warmup, you will implement two filters, with the goals of getting used to important functions in the picture module and testing your program on a simulated desktop. These filters will be in a separate file for the Warmup, then you can import them into the main lab’s file later.

Flow of Execution

Before you write any new code, take a look at the overall program structure given in the starter code for warmupgram_run.py and warmupgram_func.py. Notice the code at the end of the file which loads the crayons.jpg test image, applies the two filters you will implement as part of the Warmup, and then shows the filtered test image. Talk through the flow of execution out loud (“What would Python do?”) with your Warmup partner before continuing.

Using the Live View

This lab’s Codespace has been set up to have a live view of the images as you use the filters. In contrast to previous labs where the graphics output was a static image that appeared as a new file in the repository, this lab’s output will be displayed as a software application on a simulated desktop. To access this live view, follow these steps.

1. Open your Codespace as you normally would.

2. In the Terminal pane, click the Ports tab, and then click on port 6080. Move your cursor over to the two rectangles with the magnifying glass and click on that icon. Another tab should open next to your code.

3. Once this opens, click the Connect button.

4. If prompted, enter csci into the password box. Don’t worry if you are not prompted.

5. Run your program the way you normally would and the image will pop up in the window on the right.

6. Click on the heading of the photo where it says tk and drag it into the middle of the window to see the whole photo. (If you are running this for the first time with warmupgram_run.py, the window will show a blank white canvas because we have not yet implemented any filtering functions.) When you want to stop the program from running, click the small x in the corner of the window to stop the file. You can leave this simulated desktop tab open even when not running a file. If you start running a file, it will appear in the panel – You do not need to go through the Ports tab again.

Grayscale

The first filter you’ll implement is grayscale. Below, you’ll see an image of crayons, as well as the grayscale version.

The first thing you’ll need to do is get an image loaded and displayed so you can see the effects of your filter. To start, we’ll just load and display an exact copy of the original (color) image above.

Check out warmupgram_func.py for some starter code. To get the grayscale() function working, you must first complete the copy() function. It takes as input an image object like the one loaded by the starter code, and creates a new image object, called imagecopy. Each of your filter functions should have different variables to store the original image and the filtered image.

Some functions you’ll want to know about:

• picture.get_green(image,x,y) returns the green value of the pixel in image at location (x,y). It will be returned as a number between 0 and 255.
• picture.get_blue(image,x,y) and picture.get_red(image,x,y) do similar things for the colors blue and red.
• picture.set_green(image,x,y,val) changes the green value of the pixel in image at location (x,y) to val. val must be an integer between 0 and 255.
• picture.set_blue(image,x,y,val) and picture.set_red(image,x,y,val) do similar things for the colors blue and red.
• picture.get_pixel(image,x,y) and picture.set_pixel(image, x, y, rval, gval, bval) handle all three values at once.

To write your copy() function, you’ll need to use picture.get_ and picture.set_ functions to copy all the pixel data from image to imagecopy before returning imagecopy.

Once this function is complete, run python3 warmupgram_run.py in the terminal, then check the live view in the simulated desktop as explained above. The application window on the simulated desktop should now display a replica of the original image. Now all you have to do is add some code in the middle of the grayscale function that overwrites the pixel values with their corresponding grayscale values.

Before we apply our image filter, we’ll use the copy() function to make a duplicate of the original image. Next, let’s convert this entire copy to grayscale. We can do this by looping through each of the pixels. For each pixel we will set its new color values to be the average of its RGB values. The pseudocode for this step is as follows:

for every pixel (x,y) in the image:

1. get the red, green, and blue values
2. compute the average of red, green, and blue (remembering that these values are integers)
3. set the color of the pixel in imagecopy to this average

Vertical Flip

For this task you will complete the vertflip() function in warmupgram_func.py, which turns an image upside-down. With your partner, figure out the variable/expression needed for this filter: For every coordinate (x, y) in the original image, what should the corresponding pixel in the image copy be set to? It may be helpful to draw a diagram.

In this function, you will reflect the image around its x-axis, so a pixel that was at (0,0) will be at (0, height-1). The result will be the ‘‘upside down’’ version of the original image.