Graphics Effects by Manipulating X Colormaps

byKenton Lee

Published in The X Journal, May, 1992.
Copyright © 1992 Kenton Lee. All rights reserved.

Key words: X Window System, X11, Motif widgets, graphics, colormap, programming.

Abstract

Contents

• Introduction
• Visual Types
• Colormaps
• Colormap Manipulation
• Overlay Planes
• Double Buffer Animation
• Colormap-Only Techniques
• The X Toolkit
• Conclusion
• The Author

Introduction

Raster manipulation is easily understood but it, unfortunately, doesn't always give satisfactory results. This tutorial presents some alternatives based on colormap manipulation. Colormap manipulation techniques can be used to supplement, and sometimes replace, raster manipulation techniques. Depending on the application, colormap manipulation may significantly improve performance and/or prevent the undesirable graphical artifacts. To fully understand this material, you should already understand the raster manipulation techniques.

The two most useful colormap manipulation techniques are dynamic overlay planes and multi-buffered animation. These will be discussed in detail, with example Xlib code. Other techniques are possible, again using standard Xlib functions, and we mention some of them. None of these techniques are new to the computer graphics community, but they may not be well known to X programmers. Most of the techniques were first developed for the interactive CAD systems of the 1970s.[Blinn, Shoup]

Before we get into the code, however, let's review two key X Window System concepts: visual types and colormaps.

Visual Types

If you need more information, [Lemke] is an excellent tutorial on using visual types.

Colormaps

The PseudoColor model of the graphics display contains writable raster memory and a writable colormap. Raster memory, including the frame buffer, contains a certain number of bits (usually 8) for each pixel displayed on the screen. In X, the values of these bits are called pixel values.

The colormap is a small table with entries specifying the RGB values of the currently available colors. In X, the colormap entries are called color cells. The pixel values are interpreted as indices to the color cells. Thus, to refresh the screen, the display hardware uses the RGB values in the color cells indexed by the pixel values. The size of the colormap is less than or equal to 2^N color cells, where N is the number of bits in a pixel value. A device with 8 bits per pixel value, for example, will have a colormap with up to 256 color cells, indexed though pixel values ranging from 0 through 255.

X provides three ways to access colormaps: shared color cells, standard colormaps, and private color cells. The shared color cell approach is the easiest to use: cells are allocated once with read-only RGB values. The standard colormap approach is a special case of the shared color cells approach, allocating a large number of pre-defined sharable color cells for clients with similar needs. Both the shared color cells and standard colormap approaches conserve color cell resources and should be used whenever possible.[Scheifler, Jones]

There are some powerful graphics techniques, however, that require writable, private color cells. The techniques and examples discussed in this tutorial fall in the third category.

To draw color graphics using the private color cells approach, you first allocate the needed color cells and store the desired RGB values in the color cells. The XAllocColorCells() Xlib function allocates the color cells. Any of XStoreColor(), XStoreColors(), and XStoreNamedColor() can store RGB values in the color cells. Then you can create graphics contexts which use the created colors as foreground or background pixel values, possibly modified by GC functions or plane masks. Finally, you use the graphics contexts to draw into the windows, using rendering functions such as XDrawLine() and XPutImage(). When your display refreshes the screen, it uses the RGB value in the color cell associated with each visible pixel value.

Colormap Manipulation

The main differences are memory usage, speed, and graphical artifacts. Many X clients use off-screen pixmaps for generating some graphics. These pixmaps use alot of memory and may not be needed with colormap manipulation techniques. Also, since you usually only have to change a few (or a few dozen) color cells rather than hundreds or thousands of pixel values, you usually get much better performance by changing the color cells.[Blinn] Finally, colormap manipulation can avoid some of the flickering effects usually seen in graphics, especially animations, based raster manipulation.

The disadvantage of the colormap manipulation techniques is that they use at least twice as many color cells compared to raster manipulation techniques. As color cells tend to be valuable resources, this is undesirable. In the examples below, we give more details on the alternatives and their advantages and disadvantages. When designing your application, you have to decide which techniques are most appropriate.

The most important techniques we will be discussing combine colormap manipulation techniques with raster manipulation techniques. The major idea behind these techniques is that the bits in each pixel value can be considered either as a unit or as smaller groups. If considered as a group of values, you can create several independent pictures within your your raster memory, and manipulate the color cells to display combinations of the pictures.

For example, we might draw two independent pictures, one using 7 bits of the pixel value and the other using the remaining 1 bit. Thus, the 8 bit pixel value is divided into:

Note that if other applications have already allocated color cells from the default colormap, your application may not be able to allocate enough for these techniques. In these cases, you will get an error from the allocation function and you may want to create a separate colormap. The ICCCM discusses techniques for installing your own colormap.[Rosenthal]

Overlay Planes

The typical overlay plane example is an air traffic control system, with a static map display and moving air craft icons drawn over the map. Another example, from the CAD world, is an interactive base drawing with active areas that are highlighted only when the mouse is within them. You can probably think of many other examples for your application area.

Overlay plane applications usually divide the 8 bit pixel values into 7 bits for the base drawing and 1 bit for the overlay plane. The key to this technique is giving all pixels in the overlay plane (i.e., pixels with the overlay plane bit set to one) the same color. Thus, drawing or erasing in the overlay plane is simply a matter of setting or clearing this single bit.

Assuming the visual type and colormap are set correctly, the XAllocColorCells() function is used to specify up to 128 writable base color cells for the base drawing and specify one plane mask:

Assuming it was successful, we store colors in the allocated cells. We could use XStoreColor(), but XStoreNamedColor() makes the example a little clearer. Again, the key is setting all pixels in the overlay plane are given the same color.

The graphics contexts for drawing the base graphics are created normally:

The graphics contexts for drawing and erasing the second overlay plane are created the same way as for the first, using the second plane in the plane_mask:

Double Buffer Animation

Some X servers support a protocol extension that provides multi-buffering functionality. Your server may not have this extension or you may choose not to use it for portability reasons. Below, we describe the two buffer (double buffering) case, though this example is easily extended to any number of buffers, up to the number of bits per pixel.

We could use the overlay plane approach, described above, to create the hidden image, but this requires one overlay plane per color, which is very expensive. The technique described here allows 2^P colors, where P is the number of color planes used, e.g., three planes allows the animation of up to eight colors.

In this example, we assume that there are two drawings, each with three colors. Three colors requires 2 planes, with one plane combination unused. Assume that the allocated base pixel values are (binary) 01, 10, and 11 and the allocated planes are the last two. To display the first picture and hide the second, we must assign these colors to the pixel values:

You could use XStoreNamedColor(), as in the overlay plane example, to store the colors, but since the colors will be changed repeatedly during the animation process, a more efficient method is to create two vectors of color values (one for the first picture and one for the second) and install one of the vector all at once with XStoreColors(). Since XStoreColors() requires RGB values instead of color names, we first convert a list of color names to a list of RGB values. The RGB values are stored in XColor structures:

Next, we create the two XColor vectors, representing the two sets of twelve color cells, as shown above. One helpful hint is to put all the data for each picture, including the vectors and the graphics contexts, into abstract data types. Switching pictures is then simply a matter of switching a pointer to the data.

Finally, to switch pictures, we switch color cell definitions:

Again, our reader exercise is to use these graphics contexts to create interesting applications.

Colormap-only Techniques

Color cycle animation is one of the simplest colormap manipulation techniques. It is most frequently used in video games and simulations where a flashy effect is needed. One application of color cycling is a "sparkling" or "fluid" effect where pixels in a window are drawn with random pixel values, then the colors associated with the color cells are rapidly cycled. The colors are typically cycled simply by shifting them by one pixel value per iteration and storing with XStoreColors(). Some simple motion object effects can also be generated by assigning the same pixel values to larger areas, such lines or rectangles.

Similar to color cycling is alternate color animation. With this technique, only two unique colors are used, foreground and background. The background color is set to be the same as the window background color. Several instances of a single object are drawn in several different locations, with the different location representing different positions along the path of the object's animation. Each instance is drawn with a different pixel value. To achieve the animation, use XStoreColors() or XStoreNamedColor() to assign the foreground color to exactly one of the pixel values. As the foreground color is remapped to different instances' pixel values, the object will appear to move.

Both color cycling and alternate color animation can be extended to handle many objects, overlapping objects, etc. with some restrictions. The major restriction is that you cannot change the path of the animation once the object instances have been drawn. For more details, see [Shoup]. If you need a dynamic path, you must use the overlay plane or multi-buffer techniques described above.

The X Toolkit

Conclusion

The examples presented in this tutorial assume an 8 bit per pixel PseudoColor visual type. You should be able to easily extend them to use any visual type with a writable colormap.

References

[Blinn]

James Blinn, "Raster Graphics", in Tutorial: Computer Graphics, edited by Kellogg Booth, IEEE Computer Society Press, 1979.

[Foley]

Foley, van Dam, Feiner, and Hughes, Computer Graphics: Principles and Practice, second edition, Addison-Wesley, 1990.

[Jones]

Oliver Jones, Introduction to the X Window System, Prentice-Hall, 1989.

[Lemke]

David Lemke and Davis Rosenthal, "Visualizing X11 Clients," Proceedings of the Summer, 1988 USENIX Conference.

[Rosenthal]

David Rosenthal, "Inter-Client Communication Conventions Manual," in [Scheifler].

[Scheifler]

Robert Scheifler and James Gettys, X Window System, second edition, Digital Press, 1990.

[Shoup]

Richard Shoup, "Color Table Animation", SIGGRAPH'79 Conference Proceedings.

THE AUTHOR

Ken has published over two dozen technical papers on the X Window System. Most are available over the World Wide Web at http://www.rahul.net/kenton/bib.html.

Ken may be reached by Internet electronic mail to kenton @ rahul.net or the World Wide Web at http://www.rahul.net/kenton/.

For more information on the X Window System, please visit my home page..