CS 151: Lab #3

Lab Exercise 3: Variables, Files, and Images

This week we're going to start working with existing images instead of creating our own graphics. We'll also start using a program called JES that is an integrated development environment [IDE] that combines an editor, a python command line, and lots of other handy capabilities. Note that, everything we can do in JES we can do using a Terminal, but it can be easier using JES.

Tasks

On the Desktop, make a folder called lab3.
Get your picture taken. Put a copy of your picture into the lab3 folder.
The pictures will be here.
Make a smaller copy of your picture. The easiest way to do this is to open up Terminal, cd into your lab3 folder, then execute the following command, substituting the name of your image for myImage.jpg.
convert myImage.jpg -scale 25% small.jpg

The convert program is a very powerful application for manipulating images. If you want to find out more about it, check out the ImageMagick web site.
Open up JES (the green reptile with glasses). The JES window has two useful parts. The top section is a text editor where you can create, open and save python files. The bottom section is a python command prompt. In addition to being able to try out python instructions in the command line, you can tell JES to run your python file using the Load Program button.
JES also has a set of menus that can provide assistance as you write python instructions. In particular JES gives you easy access to a set of python packages for interacting with the user and working with multimedia such as sound, images, and movies. The JES Functions menu lists all of the functions that are in the media package.

On the python command prompt, use the JES function pickAFile() and assign the result to the variable filename. It's important to save the result because we'll need it later when we want to open the file.

filename = pickAFile()

Capitalization is important. In the file dialog that pops up, pick the small.jpg file you created above and select Open.

The pickAFile() function does nothing but let the user select a filename using the dialog. It returns a string that is the complete path and filename for the file. You can see what is returned by printing the filename.
print filename
To read the picture into memory we need to use the function makePicture(), which takes a filename as an argument. Fortunately, we stored the name of the file the user selected in the variable filename. The makePicture() function returns a Picture object, which we need to store in a variable. On the python command line, call the makePicture() function and assign its output to the variable pict.
pict = makePicture( filename )

Try printing the pict object: print pict
The Picture object stored in the pict variable holds all of the image data as well as generic information about the image. For example, JES has functions we can use to discover how big the image is. Since we stored the Picture object in a variable, we can use that variable in many places. Try these media functions on the command line.
getWidth( pict ) getHeight( pict )
To display a picture stored in memory, use the function show().
show( pict )
Now let's write a function that asks the user to pick a file, loads the picture and shows it in a window. The function should also return the Picture object so it can be stored in a variable. The algorithm is as follows. Write these comments into the text editor area.
# define the function loadPicture # ask the user to select a file # load the picture data in the file # show the picture # return the Picture object

Now write the python code that goes along with each comment. We've executed each of the steps previously within the lab. When your function is done, save the file and then click on the Load Program button.
When you click the Load Program button your file is executed by Python. Since we only have a function defined in the file, nothing should happen. To run your function, type the following into the command line area.
p2 = loadPicture()

If your function was written properly, your picture should appear. If you print out the variable p2, you should see the name of the source file and the height and width of the picture.
An image is made up of pixels. The height and width of an image tells you how many pixels high and wide the image is. There are width * height pixels in an image. Now let's make a function that modifies the colors in an image. Below your loadPicture function, write the following comments.
# define the function greyVersion which takes the image pic as input # make a copy of the input picture # get the pixels of the copy # for every pixel in the image # set the color in all color bands to the value of the green channel # return the copy

We know how to define a function, but the rest of this function we need to learn. To copy a picture, we want to use the duplicatePicture() function.
copy = duplicatePicture( pict )

To get a list of the pixels of an image we use the getPixels() function.

pix = getPixels(copy)

To loop over the elements of a list, we use a for loop. We can use the following syntax to loop over all of the pixels in the list pix. Each time through the loop, the variable p holds the current pixel.

for p in pix:

Commands that are indented relative to the for loop are executed as many times as there are pixels in the image, once for each pixel. We want to get the green color and then set the color of the pixel to be the same as the green value in all three color channels. We use the getGreen() function to retrive the intensity of the green channel a pixel. We can use the setRed() and setBlue() functions to set the values of those color channels. Each of these functions takes a single pixel as one of the sarguments. Put the following inside the for loop

green = getGreen( p ) setRed( p, green ) setBlue( p, green )

Now save and load your program. Using the command line, pass the pict variable into the greyVersion function and store the return value in the variable grey. Use the show function to display the result.

grey = greyVersion( pict ) show(grey)
Finally, make a function main at the end of your file. The main function should do three things. First, it should call the function loadPicture and store the result in a variable (e.g. 10). Second, it should call the function greyVersion and store the result in a variable (e.g. grey). Finally, it should show the new grey image.
Copy the greyVersion function, paste it into your file above the main() function and then give the function a new name. Now change what it does to the image. For example, try swapping the red and blue colors of a pixel.

Make sure you save your lab3 folder to your personal network directory when you are done.

When you are done with the lab exercises, go ahead and get started on the assignment.