Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Convolution Matrix

Convolution Matrix

Flash 8 introduces some very powerful tools for manipulating bitmaps at the pixel level. Included in this list of tools is flash.filters.ConvolutionFilter. ConvolutionFilter combines pixel data in a bitmap with data from neighboring pixels to produce a given result. Having control at the pixel level allows you to produce a wide array of effects on a bitmap. These include things like blurring, beveling, embossing, sharpening, and more. All are possible using ConvolutionFilter.

Unlike Matrix and ColorMatrixFilter, ConvolutionFilter’s matrix does not have a set number of rows and columns. The number of rows and columns depend on the type and strength of the effect you are trying to achieve.

In a nutshell, ConvolutionFilter looks at each and every pixel in a source bitmap. As it does this, it uses the center value in the matrix as the value of the current pixel being manipulated. For example, in a 5 x 5 matrix, the center value is at (2, 2). It then multiplies the values from the matrix to the surrounding pixels and adds the resulting values for all pixels to get the value for the resulting center pixel. Here is the formula used on a 3 x 3 matrix convolution:

dst (x, y) = ((src (x-1, y-1) * a0 + src(x, y-1) * a1....
src(x, y+1) * a7 + src (x+1,y+1) * a8) / divisor) + bias

As you can see, for the pixel located at (x, y), ConvolutionFilter with a 3 x 3 matrix takes the pixel (x–1, y–1) and multiplies it by the value in the matrix located at (0,0), and then adds the pixel (x, y–1) multiplied by the value in the matrix at (0,1), and so on until all of the matrix values have been multiplied by the corresponding pixel value. (This is done for each color channel.) Finally, it takes that total, divides by the value of divisor, and adds the value of bias. Obviously the larger your matrix, the longer this process takes.

To apply a convolution matrix, you can pass a matrix along with the number of rows and columns into the ConvolutionMatrix constructor, as follows:

import flash.filters.ConvolutionFilter;

// Set up our 3x3 matrix:
var mat:Array = [ 1,0,1,
0,1,0,
1,0,1 ];
// Tell the ConvolutionFilter that this is a 3 row, 3 column matrix
// Pass the matrix in as well:
var convMat:ConvolutionFilter = new ConvolutionFilter(3,3,mat);
clip.filters = [convMat];

The following examples illustrate some convolution matrices. A useful exercise is to look at the matrix values and guess the effect they might produce on the image. Figure 10 shows the original photo.

Original image

Figure 10. Original image

In Figure 11, the pixel being affected gets its original value multiplied by 5, while the pixels immediately above, below, to the left, and to the right are multiplied by –1, with the resulting values added together and multiplied by the affected pixel to produce a new value for that pixel. The resultant effect is that there is an increase in contrast between neighboring pixels. If neighboring pixels have values that are quite similar, those pixels remain fairly similar. However, the greater the original color value difference between pixels, the greater the resulting difference will be.

A sharpening effect

Figure 11. A sharpening effect

Figure 12 shows the value of the affected pixel having its value added to that of each of its surrounding eight pixels. You can probably guess that this “mashing” of values results in a blur effect.

A blurring effect

Figure 12. A blurring effect

By looking at the matrix in Figure 13, you can see that the result is trickier to guess than in the previous examples. The affected pixel tends to become closer in value to the pixels near the bottom right and further away in value than the pixels at the top left. The result is an embossed effect with the light source appearing to emanate from the top left.

An embossing effect

Figure 13. An embossing effect

As you can see, having a basic understanding of matrices allows you to produce some powerful effects using the new ConvolutionFilter. In the convolution demo file that accompanies this article, you can play directly with values in a matrix and see the resulting convolution effect on the image. Play with the following demo to see the changes for yourself:




Where to Go from Here

Flash 8 was truly one of the biggest releases in Macromedia’s product history. It provides developers with a very granular level of control in several different areas. Matrices provide a powerful means of doing this type of manipulation. This article serves as a primer for people interested in gaining a better understanding of matrices. I recommend playing with these matrix values to see the ensuing results. That’s often where the real learning happens.

Comments