Recent years have seen great improvements in computer graphics hardware, making it possible for developers to add advanced graphical features to applications, such as composition modes and partial transparency, previously only used in specialized graphics applications.

• Background
• Source and Destination
• Source Over and Destination Over
• Source In and Destination In
• Source Out and Destination Out
• Source Atop and Destination Atop
• Clear
• Xor
• Final Words

Composition modes, where an object blends the color properties of underlying objects with its own, are often used in graphical applications to inexpensively simulate translucency effects. However, they can also be used to create effects that are less realistic, but more useful in an on-screen environment. In this article we will look at some alternative ways of working with transparency.

Composition modes were originally proposed by Thomas Porter and Tom Duff in the article Compositing Digital Images in 1984. It describes a model for combining the pixels in a source image with the pixels in a destination image. Porter and Duff proposed 12 basic composition modes -- the most common ones are Source, where the source pixels completely replace the destination pixels, and Source Over, where the source pixels are alpha blended with the destination pixels.

The formulas for combining source and destination pixels look like these:

Where c_dst and c_src represent color components of the destination and source, and a_dst and a_src represent the alpha components. C_dst and C_src are the color components premultiplied by the alpha components. The function f returns a value based on the source and destination color components, where the basic composition modes return either the source or destination color component. The parameters X, Y and Z are either 0 or 1. Permutations of X, Y, Z, and f produce the various composition modes.

In the above diagram we show how source and destination images are combined together for the various composition modes. To draw any of these modes one can use the following code:

QPainter p(&destImage);
p.setCompositionMode(mode);
p.drawImage(0, 0, sourceImage);

QPainter introduced support for the basic composition modes in Qt 4.0 and will most likely introduce support for the extended composition modes in a future version of Qt. Composition modes in Qt apply to all drawing operation done with QPainter, such as drawing a gradient-filled path.

Composition modes are currently supported when using QPainter on a QImage on all platforms. It is also possible to use QPixmap on Windows since Qt 4.0 and on X11 since Qt 4.1.

The simplest composition mode is Source, in which case the source pixels replace the destination pixels. This mode is used in QPainter when drawing opaque primitives and images.

In this image we start out with a gray circle and draw three ellipses on top of it using Source. The effect is that each transparent ellipses will "punch a hole" for itself in the destination image.

It should be noted that Source only writes the pixels, it does not perform any reads, so it is in general faster than the other composition modes.

The formula for Source is given by

Destination, which is the inverse of Source, is provided mostly for completeness. It leaves the destination pixel untouched and has no visual effect.

The formula for Destination is given by

The Source Over and Destination Over composition modes are used for what we normally consider alpha blending. We demonstrate this with an initial image containing the text "Qt" and draw a red rectangle on top of it using either Source Over or Destination Over.

For Source Over the source is drawn on top of the destination so that when an object is drawn it appears to be in front of what was there before. If the object is translucent the objects under it will shine through.

The formula for Source Over is given by

For Destination Over the source is drawn under the destination, so the objects in the source image appear to be painted behind what was already there in the destination image.

The formula for Destination Over is given by

The Source In and Destination In composition modes are used for masking one object with the alpha channel of another. The result from a Source In composition is the source pixels merged with the alpha channel of the destination. We demonstrate this by painting a source image onto a destination image containing the Qt 4 logo.

In the above diagram, the opaque rectangle filled with a linear gradient is drawn onto the Qt 4 logo using the Source In composition mode. The result is that the gradient filled rectangle is drawn in the places where the Qt 4 logo is not transparent.

The formula for Source In is given by

In this case, the image containing a partially transparent radial gradient is drawn onto the Qt 4 logo using the Destination In composition mode. The result is that the alpha channel of the source is blended with the destination, causing the logo to fade out according to the radial gradient.

The formula for Destination In is given by

The effect of these composition modes is that the alpha channel of the source can be used to describe the alpha channel of the destination or vice versa. A typical application of this is to use a gradient to fade out an image like we do with the Destination In example above.

The Source Out and Destination Out composition modes behave similarly to the Source In and Destination In composition modes except that they use the inverse of the alpha channel. Again, we demonstrate this by painting a source image over a destination image containing the Qt 4 logo.

In this case, we see that the gradient from the source image is only drawn in the areas where the destination image is transparent; the result is a copy of the source image with a hole cut out of it.

The formula for Source Out is given by

In the above diagram, we see that in the locations where the source image is opaque, it punches a hole in the destination image.

The formula for Destination Out is given by

The effect of these operations are that either source can be used to punch a hole in the destination or vice versa. This is a masking technique that can be used to easily create an inverse mask of an object.

The Source Atop and Destination Atop composition modes combine the alpha channels of the source and destination images, before blending the source on top of the destination or vice versa.

In the above we draw an image containing an elliptical shape over an image containing a rectangular shape using the Source Atop mode.

The formula for Source Atop is given by

In this case, the Destination Atop mode was used to draw the ellipse.

The formula for Destination Atop is given by

These modes can be used to colorize an existing object in the areas where it has opacity. Although the Atop composition modes may look similar to the In modes, the difference lies in that the color components from both source and destination are used in the result, as opposed to In which uses only one.

The Clear composition mode erases every pixel to fully transparent.

This is mostly useful for clearing the background or parts of images to fully transparent. The three ellipses from the Source example now make an irregular hole in the background image.

The formula for Clear is given by

The Xor composition mode combines the source and destination alpha channels in an XOR like manner. It differs from a bitwise exclusive OR in that it does a mathematical computation to decide the alpha channel. This means that certain bit patterns do not interfere with the result, and that translucent colors are blended together instead of being combined using a bitwise operator.

The above image contains a variation of the objects we used for the Source Atop example combined using the Xor composition mode.

The formula for Xor is given by

Composition modes have been available for a while in several high end image manipulation programs, and now they are also available with QPainter. They can be used to create a variety of pleasing effects, many of which can be found by just playing a little with the various parameters.

Take a look at the Qt 4 Composition Modes demo to see the effects of each composition mode.

Qt's examples and demonstrations also highlight other aspects of the paint system, and illustrate basic concepts in 2D graphics.

Whenever you feel you need to iterate through the pixels of an image to manipulate its alpha channel or color components, first check to see if there is a composition mode that already does what you want.