Image programming in actionscript3 games)

Total Directory: http://blog.csdn.net/iloveas2014/article/details/38304477

4.5.7 advanced techniques and principles of convolution Matrix

Many graphics tutorials or books are used to listing several common filter effects after matrix formulas are given, and they look interesting, I am more inclined to "authorize it to fish", so I am not planning to follow their routines. Instead, I plan to introduce algorithm skills so that I can learn and use it after reading this section.

 

The old examples on the internet tend to use square arrays. Therefore, I plan to create a matrix with different rows and columns for the effect, for example, the following code creates a 15*1 Fuzzy Matrix:

 

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], 15, 0, false);

 

The result of the convolution filter is 4.73, Which is blurred only in the X direction. We can see the obvious ringing phenomenon.

 

Figure 4.73 matrix of 15*1

 

Although it is not friendly to blur, it does not mean it is useless, and sometimes we want to make the ringing more obvious.

 

As we already know, when the blur area is too large and the contour is crossed, we can use this to enhance the effect of this oscillation:

 

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], 8, 0, false);

 

Cross-reading of peripheral pixels will enable the interaction of pixels to generate a skip fusion. The ringing phenomenon is further enhanced, just like the vibration of spring slices or rubber bands (Figure 4.74 ).

 

 

Figure 4.74 cross-converged Matrix

Although there is no beauty in such a picture, you can place it on special websites of interesting encyclopedias, forums or meager posts to popularize the knowledge of zhenling, because this static graph can make the naked eye produce the illusion of vibration, there are some wonders.

 

In the back-to-right mode, it seems a little unnatural that the vibration only causes the Blur in the X direction. We hope that the Blur in the Y direction will also be a certain degree, for example, up or down 1 pixel, at this time, we can extend the existing matrix to 15*3:

 

var con:ConvolutionFilter = new ConvolutionFilter(45, 1, [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], 24, 0, false);

 

But unfortunately, we didn't achieve the effect of blur in the Y direction as we expected, And we replaced it with a lighter color (Figure 4.75 ).

 

 

Figure 4.75 extend from Y to 3

 

The reason is very easy to find, because the middle pixel and the upper left and lower right pixels are also integrated, so the results are displayed to be more blurred than the original, but do not set the upper and lower pixels, and cannot be blurred in the Y direction. What should I do?

 

In the case of conflicts between the two, what I like best to do is to try to separate the two actions to avoid direct contact between them. Here I continue to use this method, the specific implementation is naturally to define a vertical convolution filter.

 

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], 9, 0, false); var con2:ConvolutionFilter = new ConvolutionFilter(1, 3, [1, 1, 1], 3, 0, false);main_txt.filters = [bev, con, con2];

 

The result is very clean, as shown in Figure 4.76.

 

Figure 4.76 separating the vertical and horizontal directions

 

If you think the vertical blur margin is too small, you can increase the height of the second convolution filter, such as 9:

 

var con2:ConvolutionFilter = new ConvolutionFilter(1, 5, [1, 1, 1, 1, 1], 5, 0, false);

 

The result 4.77 is displayed.

 

Figure 4.77 extend in Y direction

 

The matrix multiplication combines the data of a single pixel channel. convolution fully schedules the data interaction between pixels and enhances the color controllability of the program, it provides designers with a broader space for development, and the artistic nature of matrix mathematics has been fully reflected.

 

 

Image programming in actionscript3 games)