# Convolution Filter Matrix 값 모음

//
적청반전
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
0,0,1,0,0,
0,1,0,0,0,
1,0,0,0,0,
0,0,0,1,0);
mc.filters = [filterObj];

//
흑백
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
0,  0,  0,1,0);

mc.filters = [filterObj];

//
세피아
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/2,1/2,1/2,0,0,
1/3,1/3,1/3,0,0,
1/4,1/4,1/4,0,0,
0,  0,  0,1,0);
mc.filters = [filterObj];

//
샤프
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
0,-1, 0,
-1, 5,-1,
0,-1, 0
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];

//
윤곽 추출
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
1, 1, 1,
1,-7, 1,
1, 1, 1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];

//
엠보스
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
1, 1, 0,
1, 0,-1,
0,-1,-1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 128;
filterObj.divisor = 1;
mc.filters = [filterObj];

////////////////////////////////////////////////////////////////////////////////////////////////////

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:

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:

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. 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. 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. 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. 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.

Here are some links you may find useful in your exploration:

# Convolution Filter 자료

출처:http://www.roborealm.com/help/Convolution.php

Convolution Filter

Convolution filters are a great way to process images for certain features. Features are defined by an n by m matrix that is applied to the image in the following way: (grayscale only for purposes of example)

## Interface ## Instructions

1. Edit the 5×5 textbox grid to add in your convolution values OR
2. select a pre-created filter using the dropdown menu to help you get started
3. Specify the divisor and/or bias

## Example

 Source Sharpen More  An example small grayscale image (10×10):

 34 22 77 48 237 205 29 212 107 41 50 150 77 158 233 251 112 165 47 229 93 0 77 219 43 56 42 113 140 94 32 19 44 30 36 94 151 101 28 84 10 90 48 73 63 148 159 183 99 22 192 70 27 88 20 230 53 34 38 106 239 202 196 205 50 123 192 88 41 37 230 174 14 22 127 100 189 186 214 187 227 86 195 6 53 168 46 166 36 249 215 165 237 110 125 191 191 94 123 8

An example convolution filter for line detection:

 -1 -1 -1 -1 8 -1 -1 -1 -1

The row=2, column=2 pixel and its neighborhood from the image above: The row=2, column=2 pixel and its neighborhood from the image above:

 34 22 77 50 150 77 93 0 77

To apply the convolution filter multiply the filter values with the image data block. Work with each pixel and its 3×3 neighborhood:

 -1*34 -1*22 -1*77 -1*50 8*150 -1*77 -1*93 -1*0 -1*77

Then sum all the values:
(-34)+(-22)+(-77)+
(-50)+(1200)+(-77)+
(-93)+(0)+(-77) = 770

Divide by the divisor and add the bias.
(770/divisor)+bias=770 (in this example divisor=1, bias=0)

If the new pixel value is > 255 set it to 255
If the new pixel value is < 0 set it to 0

The new pixel value is 255. Store that in a new image:

 34 22 77 50 255 77 93 0 77

Continue with all other 3×3 blocks in the image using original values. For example the next image block could be

 22 77 48 150 77 158 0 77 219

Note the 3×3 “window” is shifted to the right by one and that the new pixel value is NOT used but stored as a second new image.

Most of the image is processed in this manner. Image borders create problems and are ignored.

Many other filters can easily be defined for other purposes

Blur:

 1 1 1 1 2 1 1 1 1 2 4 2 1 1 1 1 2 1

Sharpen:

 -1 -1 -1 0 -1 0 -1 9 -1 -1 5 -1 -1 -1 -1 0 -1 0

Edge Enhancement:

 0 0 0 0 -1 0 -1 0 0 -1 1 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 0

Find Edges:

 0 1 0 -1 -1 -1 1 -2 1 1 -4 1 -1 8 -1 -2 4 -2 0 1 0 -1 -1 -1 1 -2 1

Emboss:

 -2 -1 0 -1 1 1 0 1 2
The convolution matrix is displayed in the convolution interface. Changing any number will alter the matrix and change the image as a result of applying that matrix.

Select a matrix from the pull down menu which will populate the matrix with those values.