CSC 105	Grinnell College	Spring, 2005

An Algorithmic and Social Overview of Computer Science

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.

After you log into your account on the MathLAN system, open xpaint's Color Selector as follows:
- Open a terminal window by clicking on the image of a computer monitor at the bottom of your screen.
- Type the following command to start a graphics editor:
```
    xpaint &
```
- Select the "New Canvas" option from the File menu to open an editing window.
- Click on polygon shape on the upper right of the new editing window that appears.
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.)
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?
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.

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.
Move your mouse to the terminal window.
type the command
```
   ~walker/105/setup-public-html
```
While you will be working with copies of images on your account, this page shows the original images.
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.
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 
```
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.

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.
- Throughout the initilization process for gimp, you can safely accept the default values by just pressing Next or finish or similar options as they are presented.
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.
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.
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".
Exit GIMP: Find the small window entitled, "The GIMP" - likely near the upper left of your screen. Using the File menu, select "Quit".
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.

Begin editing paradise.jpg by moving the cursor to the terminal window and typing
```
   gimp paradise.jpg &
```
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.
Save the picture as a gif file, following an analogous process as used above for saving in jpeg format.
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".
Repeat the previous steps, to create a gif image "water-lilies.gif".
Grant permission to both of these new gif files, so they can be viewed on the Web.
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.
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:

Answers to questions 2, 3, 9, 22.
A statement of the URL that may be used to access your copy of the page view-my-first-images.html (step 21).

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.walker.cs.grinnell.edu/fluency-book/labs/image-processing.shtml

created January 30, 2004 last revised February 16, 2005

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