RETURN to the CHEM 498C Home Page

Computer Graphics and Image Processing

Equipment and software required: Graphic Converter (shareware); Macintosh with 16-bit ("Thousands" of Colors) video and a video digitizer (e.g. VideoSpigot add-in card or built-in); video camera (camcorder; FlexCam, or QuickCam); access to any networked computer running Netscape (for last part).

1. Image processing

Graphic Converter is a shareware program for raster (bit map) graphics that has some basic image processing capabilities. The most important are:

a. Format conversion. There are many graphic file formats in common use. Select the Open command in the File menu and note the Filter pop-up menu: it lists the many file formats that this program can read. Open any graphics file, select Save As... in the File menu, then pop up the Format menu and note the formats that the program can save in. The most important of these formats are PICT (Macintosh graphic standard), PCX and BMP (common IBM-PC formats), TIFF (commonly used by scanners), GIF and JPG (platform-neutral compressed formats used on the Internet and World Wide Web). Converting graphics from the IBM-PC to the Mac and visa versa, or from IBM-PC or Mac programs to or from the World Wide Web, can be accomplished with an intermediary program such as Graphic Converter.

b. Scaling and cropping. To scale (shrink or expand) an image, pull down the Picture menu, select the Size sub-menu, the select Scale. Note that you can choose to scale by a specified fraction (e.g., 0.5 = half size) or to specified final size (width and height in pixels). To crop an image, stretch out a selection rectangle over the desired region and select Trim Selection from the Edit menu. Both scaling and cropping can be used to reduce the size (and therefore the file size) of images. (The file size of a raster image is proportional to the square of its linear dimension).

Select Show Toolbox from the Picture menu and use the magnifying glass icon to zoom in on an image. This shows that a digital image is nothing more than a mosaic of solid-colored squares (pixels).

c. Colors and pixel depth. The pixel depth n of an image is the number of bits assigned to each pixel. Each pixel value is associated with a different color or shade of gray, according to a color table or palette that is associated with each image. The maximum number of colors or shades of gray an image can have is 2n; thus an 8-bit image can have 256 shades. (The file size of a raster image is also proportional to the pixel depth; that is, an 8-bit image takes twice the file space as a 16-bit image, all else being equal). An image need not actually use all of its possible pixel values. To check the pixel depth and see how many colors are actually used, select Pixmap information... from the Picture menu. Try this on several images.

You can reduce the number of colors (for the purpose of reducing the file size or to adapt the image to a computer screen of lesser pixel depth) by selecting Colors from the Picture menu and selecting Change to... the desired depth. For example, GIF format can handle only 8-bit deep images, so you must reduce the number of colors to 256. The Options... selection in the Colors menu allows you to turn off and on dithering and to control customizing of the color table. Dithering is best for continuous-tone images; no dithering is best for flat-colored drawings.

Note that the pixel depth of an image is separate from the screen depth on the monitor on which it is viewed, but the screen depth of course sets a maximum to the number of color that can actually be seen.

Before you scale down (shrink) an image, it's best to Change to... 32768 colors (16 bits) first so that averaging rather than selection scaling will be employed (see Gates and Becker, "Laboratory Interfacing with the IBM-PC", Chapter 12, for more details about this). For example, look at the file "ramu3.gif" in the "Pix to Fix" folder. Terrible, huh? How many colors does it have? What planet is this guy from? Now set the number of colors to 32768 colors (16 bits) and scale the image to half-size. It looks better (smoother) because the pixel values were averaged when the scaling was computed. Compare this to scaling the original image.

d. Brightness/Contrast. Open any grayscale or color image and select Brightness/ Contrast from the Picture menu. Experiment with the settings. With grayscale images you have two sliders, one for contrast and one for brightness. For color images have separate sliders for each primary color, a hue control, and a color saturation control.

Open a grayscale image and select Show Histogram... from the Effect menu. This shows the distribution of pixel values from pure black on the left (pixel value = 0) to pure white on the right (pixel value = maximum, e.g. 255 for an 8-bit image). What happens to the histogram when you adust the brightness slider in Brightness/Contrast? What happens to the histogram when you adust the contrast slider in Brightness/Contrast?

The best way to adjust the contrast and brightness of most continuous-tone images for maximum impact is so that the darkest pixel is pure black (pixel value = 0) and the lightest pixel is pure white (pixel value = maximum).

Open some of the images is the "Pix to Fix" folder. These images were taken from the WWW "as-is"; most have flaws such as poor contrast, brightness, color saturation, or hue. Try to improve their on-screen display by using Brightness/Contrast and Show Histogram...

e. Edge enhancement/sharpening. Use the Sharpen Edges... command in the Effect menu on a few images. Compare the results to the original images. How does it work? To answer this, open the file "GrayOnGray.GIF", which is picture of a dark gray square on a light gray background. Look at its histogram to prove that the image contains only two pixel values. Then use the Sharpen Edges... command in the Effect menu and compare the results with the original image. Does it look sharper? Why? Select Show Toolbox from the Picture menu and use the magnifying glass icon to zoom in on the edge between the light and dark areas of both images and compare carefully. Look at its histogram of the sharpened image. Can you explain what has happened here? Discuss how this effect relates to SPECTRUM's resolution enhancement function?

f. Edge detection/extraction. Use the Laplace (3x3) command in the Plug in Filter item of the Effect menu on the image "GrayOnGray.GIF". Discuss how this effect relates to SPECTRUM's differentiation function?

2. Video image capture

The Macintosh LCII you are using has a SuperMac VideoSpigot video digitizer card installed inside, which is basically just a very fast analog-to-digital converter. Connect the video camera to the RCA phono jack on this card (at the back of the computer) with the cable supplied. Launch ScreenPlay and turn on the camera. Select Color from the Spigot menu and adjust for a good image. Select Preferences from the Spigot menu and set to Capture from still source and Current window size. To capture a still image, you simply drag from the live screen display off to the side, in effect "peeling" off a still image. When you get one you want to keep, select Save from the File menu. ScreenPlay captures 16-bit deep images and saves in PICT format. Capture a head-and-shoulders picture of each of your lab partners. A much better quality picture can be obtained with better lighting. Open the resulting file in Graphic Converter and determine the actual number of colors used. What you you guess is the data resolution (number of bits) of the ADC used on the video capture card?


3. Compression schemes

The expected raw data size in bytes of a raster (bit map) image is given by:
(width in pixels) x (height in pixels) x (n bits/pixel) / (8 bits/byte). It takes at least this much RAM memory to hold the whole image in RAM, but the file size of the data file on the disk may be smaller, possibly quite a bit smaller, if compression techniques are used. There are two basic type of compression: lossless and lossy. Lossless methods do not degrade the image quality and permit the original graphic to be re-constructed exactly from the data file on the disk. Lossy methods sacrifice some image quality, usually to a barely noticeable degree, but permit substantial compression.

a. Lossless compression: The GIF, a platform-neutral bit-map format, includes a simple compression algorithm that greatly reduces the file size of simple flat-colored graphics. The amount of reduction depends on the com plexity as well as the pixel dimensions of the figure. The compression is most effective for simple line drawings and least effective for multi-color digitized photographs or video images. Open the "GIF examples" folder and open the text file "Figure captions". This file describes the GIF files in this folder, listing the size (number of dots), number of colors, and file size of each image. Compare the raw data sizes (as calculated above) to the GIF file sizes; The ratio of those two numbers is an indication of the efficiency of compression. Note that the simplest graphics (e.g. figures 1, 2, 7, and 10) have the smallest file size to raw data ratio, whereas the most complex images (e.g. figure 5, 18, 22, and 25) have the largest file size to raw data ratio.

How does GIF compression work? Use the New command in the File menu twice to create two blank new windows. Using the line tool in the Toolbox, draw a horizontal straight black line in one of the windows and a vertical straight black line in the other. Save each in GIF format. Since the dimension are exactly the same, the raw data size of these toe images are the same. Compare the disk file sizes (go to the Finder, click once on the file, then select Get Info from the File menu). Why is one file smaller than the other? Hint: GIF compression

b. Lossy compression.
Open one of the portraits you captured with the video camera from within Graphic Converter. Select Save as.., JPG file format, and click on Options. Set the "quality" to medium and click Save and give the file a distinct name. Repeat with quality setting of low and high. Close the windows, then re-open the original images and the compressed versions. Compare the file sizes and quality of the uncompressed and compressed images. Can you see the quality degradation (compression artifacts)? JPEG is based on a discrete cosine transform of 8 x 8 pixel blocks of the original image, discarding the higher harmonics from each block. A disadvantage of JPEG compression is that compressed graphics can be viewed only on a computer or program that has JPEG decompression capabilities.

Another lossy way to reduce file size for multi-color is simply to reduce the pixel depth (number of colors). The best way to do this is by a process called "dithering", which seeks to approximate many colors by combinations of fewer colors. Open one of the 256-color PICT files, click on the graphic to select it, reduce the number of colors to 16, then save it under a different name. Compare the file sizes of the 256-color and the 16-color versions. Another advantage of dithering is that it makes the graphics look better when viewed on a machine that has fewer bits/pixel (e.g. fewer colors); that is, a 256-color photograph dithered down to 16 colors looks better on a a 16-color display that the original 256-color photograph viewed on a 16-color display.


4. Digital video

Macs with enough RAM can use an operating system extension called QuickTime that provides transparent support of compression/decompression of full-color still graphics and digital motion video with synchronized sound. Viewing (playback) can be done on any color Macintosh with the QuickTime extension; no special hardware is required for playback.

Set the screen depth to "thousands of colors" with the Monitors control (just above the Trash can). Look at some of the example movie clips in MacintoshHD:Digital video:Movie clips. The clips in Molecules, Medical, and Plant growth folders were generated from computer animations. The two clips in Molecules were generated in MacMolecule, a public domain molecular visualization pro gram, and converted into QuickTime movie format in Adobe Premier, a commercial digital video editor. The clips in Historical folder were captured from video tape using the VideoSpigot card; they include a sound track (turn on the attached speakers to hear the sound track).

The VideoSpigot card installed in this Mac LC can also capture live or taped video; however, this low-end Mac is not fast enough to capture full-screen, full-speed (30 frames/sec) video. It can, however, capture small videos at low frame rates. To see how it works, launch ScreenPlay, hold down the option key and click on the record button (with the black dot) on the ScreenPlay win dow. Capture a few seconds of video, then look at the size of the file on the hard disk that it generated. Compression techniques are used to reduce the file sizes. For example, "NADH Movie" has a frame size of 416 x 313 pixels, 16 bits (2 bytes) per pixel, and has a total of 61 frames and no sound track. Therefore its raw data size is 416 x 313 pixels x 2 bytes/pixel x 61 frames= 16 Mbytes! However, the actual compressed file size is only 607 K, a 26-fold savings. With such compression technology, an entire 90 minute movie and fit on one CD-ROM disk.

During playback the digital data are read from the hard disk, decompressed, and displayed on the screen, all in "real time" and all in software; this is a very disk- and CPU-intensive operation. Faster computers (e.g. PowerMac, Pentium) allow much higher frame rates and/or window sizes. Some multimedia computers include special hardware to speed up video processing.

5. Molecular Graphics and the World Wide Web

Web browsers such as Netscape can display still graphics in GIF or JPG format internally. Sound and digital video clips are ordinarily handled by separate "helper" applications that are automatically launched when the browser encounters a file of a type corresponding to a sound (file names ending in .au or .aiff or .wav), or digital video clips (file names ending in.mov or .mpg). Simple animations can be displayed on Web pages by using one of several "plug-in" software modules developed for that process, such as ShockWave or Sizzle. Netscape can be easily configured to use any specified helper application, even specialized types not ordinarily associated with Web browsers. For some examples specific to chemistry, see Henry Rzepa's Hyperactive Molecules site (http://www.ch.ic.ac.uk/chemical_mime.html). Go down to the Chemistry Computer Lab, run Netscape 2.0 and go to the Berkeley Smell Database (http://www.cchem.berkeley.edu:8080/Smells/index.html). This is a good example of a site that is based on the use of molecular coordinate files in "Protein Data Bank" (.pdb) format. When you click on one of the pictures, Netscape will download the .pdb file and ask you to pick an application to view it (this happens because Netscape has not been configured properly to do this automatically, even thought this is a chemistry lab(!)). Click on Pick App. and then navigate to the Server and click on RasMac. A separate black window will pop up that displays a fully rotatable molecular model that can be set to wireframe, ball-and-stick, space-filling, etc.
This page is maintained by Tom O'Haver , Department of Chemistry and Biochemistry, The University of Maryland at College Park. Comments, suggestions and questions should be directed to Prof. O'Haver at to2@umail.umd.edu.