The Tao of Computing:
A Down-to-Earth Approach to Computer Fluency
 
by Henry M. Walker Jones and Bartlett Publishers
 

Laboratory Exercise on Image Processing

Color as Red-Green-Blue

From the reading and class discussion, you know that colors can be represented by dividing them into their red, green, and blue components. On computers, the intensity of each of these three colors is specified on a scale from 0 through 255.
  1. After you log into your account on the MathLAN system, open xpaint's Color Selector as follows:

    A Color Selector screen should appear, showing a type of color wheel together with boxes for Red, Green, and Blue values. (You can ignore the Color Selector's "Value" box for this lab.)

  2. The Color Selector allows you to relate colors to their red-green-blue components.
    1. Click on a yellow color. What red-green-blue values are associated with yellow?
    2. What red-green-blue values correspond to dark blue?
    3. What red-green-blue values correspond to light blue?
    4. What red-green-blue values correspond to purple blue?
    5. Colors are relatively dark near the edges of the circle, and they blend into a white color near the middle. How do the values for yellow change as the colors progress from the outside of the circle toward the center?

  3. What color corresponds to red-green-blue the values 0-0-0, 120-120-120, and 200-200-200?

Copying and Viewing Image Files

In order to work with images for CSC 105 on your account, it will be convenient to set up a directory called public_html in your account, and a subdirectory 105 of this directory. Subsequent work related to the Web will be placed in this 105 subdirectory.

To begin, we will want to work with three image files related to the college logo, an ocean scene, and water lilies.

All of this setup work can be done by running a script on your computer account.

  1. Open a terminal window on your screen.
    To do this, move your mouse to the icon at the bottom of the screen that represents a computer screen. Click on this icon to open a terminal window -- that is, a region on the screen where you can type commands.

  2. Move your mouse to the terminal window.
    type the command
    
       ~walker/105/setup-public-html
    
  3. While you will be working with copies of images on your account, this page shows the original images.

  4. Assuming the command ~walker/105/setup-public-html worked correctly, you should be able to view the corresponding page on your own account using the URL:
    
       http://www.cs.grinnell.edu/~your-username/105/view-my-first-images.html
    
    where you should replace your-username by the account name you used when you logged into MathLAN.

  5. In your terminal window, if you have not already done so, move to your public_html subdirectory with the command:
    
       cd public_html
    
    Here, cd stands for "change directory".

    Then move to the 105 subdirectory with the command

    
       cd 105
    
    In the future, should you wish to return to your home directory, you can accomplish this with the command
    
       cd 
    
  6. While in your subdirectory public_html/105, check what files are present and how large they are by using the "long" version of the "list" command:
    
       ls -l
    
    How large are the original pictures college-logo.gif, paradise.jpg, and water-lilies.jpg?

Creating jpeg Files from gif Files

As discussed in the reading, jpeg files utilize a full range of red-green-blue values; data compression is achieved by various averaging techniques. In contrast, gif files depend upon color tables. As a practical matter, this means that when editing images, we may have to switch mode between full red-green-blue colors and selected colors in a color table.

The program name GIMP stands for GNU Image Manipulation Program. This program is freely available for many platforms. If you would like to use this program on your own computer, see the instructor for more information.

Image processing with GIMP keeps track of what mode is being used for colors. Thus, in converting a file from jpeg to gif format or back, you will need to change image modes. In GIMP, the full red-green-blue mode is called RGB Mode, while the use of a color table is called Indexed Mode.

  1. To start editing the laurel-leaf logo, as stored in gif format, type the command
    
       gimp college-logo.gif &
    
    The ampersand & at the end of this line runs this statement as a separate process. In practice, this means that you can give new commands in the terminal window when gimp is running in its own windows.

    The first time you use gimp, the program needs to set up some directories and files for its processing. To accomplish this, the program will lead you through a series of steps.

    The gimp command will open several windows, including a picture with the image itself. At the top of the frame containing the picture, note that the caption includes the word Indexed to show that a color table is being used.

  2. Change the mode of the image to full red-green-blue:

    Move the mouse to the logo image, right click to get a menu of alternatives. Click on "Image", "Mode" and "RGB". Note that the caption of the frame now indicates RGB rather than Indexed.

  3. Save the picture as a jpeg file:
    1. Move the mouse to the picture, right click to get the menu of alternatives. Click on "File" and "Save As".
    2. Left click on "Save Options By Extension" and select "JPEG".
    3. Check that the file name has changed to college-logo.jpg, and click "OK"
    4. JPEG allows various quality settings. In general, the better the quality, the larger the file (but more about this later).

      Use the default quality (0.85), and click "OK".

  4. Exit GIMP: Find the small window entitled, "The GIMP" - likely near the upper left of your screen. Using the File menu, select "Quit".

  5. To view this new image in your browser, you first must grant permission to allow others to view this file. This can be accomplished by moving the mouse to the terminal window and typing the command:
    
       chmod 755 college-logo.jpg
    
    chmod changes the mode or permissions for a file. In this case, 7 gives you full permission (to read, write/modify, and execute the file), while 5 gives other students and the rest of the world limited permission (to read and execute the file, but not to modify it).

Creating gif Files from jpeg Files

Converting an image from jpeg to gif format with GIMP follows a similar process.
  1. Begin editing paradise.jpg by moving the cursor to the terminal window and typing
    
       gimp paradise.jpg &
    
  2. Change the mode of the image to indexed mode to establish a color table:

    Move the mouse to the logo image, right click to get a menu of alternatives. Click on "Image", "Mode" and "Indexed". Note that the caption of the frame now indicates Indexed rather than RGB.

  3. Save the picture as a gif file, following an analogous process as used above for saving in jpeg format.

  4. Close the window for the paradise image by using the "Close" option in the "File" menu. Then open the image "water-lilies.jpg" by using the "Open" option the "File" menu for "The GIMP".

  5. Repeat the previous steps, to create a gif image "water-lilies.gif".

  6. Grant permission to both of these new gif files, so they can be viewed on the Web.

  7. In your browser, click "reload" on the page view-my-first-images.html. You should see all three pictures in both gif and jpeg formats.

  8. Back in your terminal window, check the size of each version of these files with the command ls -l

Work to be Turned In for this Lab

Much of this laboratory exercise involves learning the image-processing environment in anticipation of later work. Thus, rather few of the steps for this lab yield a product to be turned in.

Submitted material for this lab should include the following:



This laboratory exercise coordinates with Chapter 2 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Jones and Bartlett, 2005.




This document is available on the World Wide Web as
http://www.cs.grinnell.edu/~walker/fluency-book/labs/image-processing.shtml

created January 30, 2004
last revised February 16, 2005

Valid HTML 4.01!
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.