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:
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
Click on a yellow color.
What red-green-blue values are associated with yellow?
What red-green-blue values correspond to dark blue?
What red-green-blue values correspond to light blue?
What red-green-blue values correspond to purple blue?
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,
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
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
While you will be working with copies of images on your account,
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:
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:
Here, cd stands for "change directory".
Then move to the 105 subdirectory with the command
In the future, should you wish to return to your home directory,
you can accomplish this with the command
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"
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
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
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:
Move the mouse to the picture, right click to get the menu of
alternatives. Click on "File" and "Save As".
Left click on "Save Options By Extension" and select "JPEG".
Check that the file name has changed to
college-logo.jpg, and click "OK"
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
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
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
This document is available on the World Wide Web as