CS155 Computer Graphics
January 23, 2003
Lab 0
This is a warm-up lab to introduce you to the graphics machines and some of the tools you'll use during the semester.1. The images you create in this class should be available on the web so you need to start a web page. Enter the URL for your web page in the course page as described during lab. Make sure the link works!
2. There are a variety of methods of representing a color in digital imaging. The most common, RGB, represents a color by a channel for each of the primary colors red, green, and blue. An alternative method, HSV, represents a color by its hue, saturation, and value (intensity). In this exercise you will explore these approaches by trying to match the colors shown.
![]()
![]()
![]()
![]()
A B C D
![]()
![]()
![]()
![]()
E F G H
- From a terminal window launch gimp. (Type gimp at the command line prompt. Gimp is a freeware image processing system.) A tool panel as shown below should appear.
![]()
- In the lower left corner are two overlapping rectangles (shown in black and white on the sample). Click on them and a color selector window will appear as shown below.
![]()
- There are two sets of three sliders. The top three control the hue (H), saturation (S), and value (V) of the color. The bottom three control the red (R), green (G), and blue (B) intensities of the color. As you move the sliders the color of the rectangle above the slider will change. Using the HSV sliders only, try to recreate colors A, B, C, and D above. (Note: the hue slider selects from the colors in the vertical bar immediately to the left of the sliders.) Write the HSV values below.
3. Gimp is useful for taking screenshots. From the File tab, choose Acquire, and then Screen Shot. Then follow the directions. Take a screen shot of this web page. Right-click on the screen shot and choose File,
- A ______________________________
- B ______________________________
- C ______________________________
- D ______________________________
- Using the RGB sliders only, try to recreate colors E, F, G, and H above. Write the RGB values below.
- E ______________________________
- F ______________________________
- G ______________________________
- H ______________________________
then Save As ... A Save Image window will appear. In the Save Options click on the "By Extension" tab. Gimp offers a wide variety of file formats. This is convenient when you want to change file formats. Save your screen shot as a jpeg file.
4. Here is a great source of information on graphic file formats: http://www.dcs.ed.ac.uk/home/mxr/gfx/. Check out the PNM (see PNG), BMP, and JPEG formats. Save an image in each of these formats. Try opening each in an text editor and see what happens. Record your observations below.
5. In this exercise you will explore the image processing capabilities of gimp. Find three images on the web,
load each into gimp, and try out the various gimp filters. Your task is to create three cool images that look drastically different than the originals. Put the original and final images on your web page. Have fun!