Using the methods described in the earlier sections, we can construct overlapped collages of images, changing their size, orientation, and color. Until now, such collages were made of images, which look like colored rectangles. But we often want to have collages made of non-rectangular images, as shown in the following screenshot:

In the preceding screenshot, the collage is made of a number of sunflower images, having not a rectangular but quite a difficult curvilinear shape. Modeling such shapes directly is a difficult and memory-consuming task. A more elegant solution, used in raster graphics, is using the alpha channel. In this technique, we still use rectangular images but consider the pixels as having not only color components but also an additional alpha component that controls the pixel's opacity. The minimum alpha value (0) means that the pixel is absolutely transparent; that is, invisible to the user. And the maximum alpha value (255) means that the pixel is opaque. You can prepare an image with transparent pixels using your preferred image editor, such as Adobe Photoshop or Gimp. In the editor, remove the background pixels with the Magic Wand tool or the Eraser tool and save the file in the PNG format. While saving, select the 24- or 32-bit PNG format, but not an 8-bit PNG format because it has a limited palette and isn't good for our purposes.

The result of deleting the background is shown in the following screenshot:

There are not only the absolute transparent and opaque pixels (alpha 0 and 255) but also everything in between (alpha values from 1 to 254). How to deal with such pixels? The process of overlapping colors with transparency is called blending. By default, blending a new color (r, g, b, a) over the old color (R, G, B, A) of the screen pixel is performed using the following formulas:

You can see that if a equals 255, (R', G', B', A') is equal to (r, g, b, a); that is, the screen's pixel color is replaced by a new color. If a equals 0, (R', G', B', A') is equal to (R, G, B, A); that is, a new pixel does not affect the screen and hence is invisible.

Blending with such formulas is called alpha-blending. It suits well for normal collaging. But there exist other modes that are switched by using the ofEnableBlendMode() function.

For example, the adding mode, which just sums up the colors, can be enabled using the following line:

ofEnableBlendMode( OF_BLENDMODE_ADD );

For returning to the alpha-blending mode, call the following function:

ofEnableBlendMode( OF_BLENDMODE_ALPHA );

See examples of the other built-in blending modes in the openFrameworks example located at examples/graphics/blendingExample.

By default, blending is enabled in openFrameworks, hence alpha channel is used for drawing. If you need to disable blending and treat all the pixels as opaque, call the ofDisableAlphaBlending() function. To enable blending again, call the ofEnableAlphaBlending() function.

When alpha-blending is enabled, you can draw the whole image as a semi-transparent image by calling ofSetColor( r, g, b, a ) with a less than 255. For example, the following code draws a half-transparent image:

ofSetColor( 255, 255, 255, 128 );
image.draw( 0, 0 );

The following code demonstrates working with transparency using both alpha channel and color modulation with the alpha component. It is based on the emptyExample project of openFrameworks. Before running it, copy the sunflower-transp.png file into the bin/data folder of your project.

#include "testApp.h"

ofImage image;       //Declare image object

void testApp::setup(){
  image.loadImage("sunflower-transp.png");
}

void testApp::update(){
}

void testApp::draw(){
  //Set up white background
  ofBackground(255, 255, 255);

  //Draw two images without color modulation
  //(but using alpha channel by default)
  ofSetColor( 255, 255, 255, 255 );
  image.draw( 100, 0 );
  image.draw( 250, 0 );

  //Draw half-transparent image
  ofSetColor( 255, 255, 255, 128 );
  image.draw( 400, 0 );
}

On running the project, you will see two opaque sunflower images and one half-transparent sunflower image. All images have the background pixels removed.

Using images with alpha channel is a powerful technique for creating interactive installations in cartoon style. For example, see the images from our interactive installation, Kuklon (Igor Sodazot, Denis Perevalov, 2011) in the following screenshot. The installation represents an imaginary world. A funny doll that repeats the spectator's motions lives there.

The largest image shown in the following screenshot is the resultant scene, and the other images are parts from which the scene is built: