Lawrence Lessig - Remix

♪ Otamatone ♪

Designing with Psychology in Mind

Designing with Psychology in Mind

View more documents from Joshua Porter.

AS3: ConvolutionFilter

Convolution Filter 矩陣盤繞濾鏡

[ConvolutionFilter 用途]

簡單來說：將每個像素，以他周邊的其他像素加進來一起運算，算出最後的像素值。

詳細來說：要使用該像素周邊的哪些像素值，是以一陣列來決定，陣列中心點為自己，如：

[0, 0, 0,
0, 1, 0,
0, 0, 0]

表示中心像素(也就是該像素自己啦)的加權為 1，周邊為 0。若：

[0, 1, 0,
1, 1, 1,
0, 1, 0]

表示，運算過程除了要使用自己的像素之外，還要使用上(x, y-1)、下(x, y+1)、左(x-1, y)、右(x+1, y) 四個像素來一起運算，這五個像素的加權都為 1(都只乘上1次的使用次數)。

算出來的值，可以給予一個除數 divisor 來避免像素值太超過，譬如上述的

[0, 1, 0,
1, 1, 1,
0, 1, 0]

若是給予的除數是 5 的話，意義上來說就等於是將這個位置的像素值與上下左右的像素值加總平均。

算出來的值，還可以再給予一個偏移量 bias，直接對像素做加減。


Original image


A sharpening effect


A blurring effect



from:邦邦的部落格
Using Matrices for Transformations, Color Adjustments, and Convolution Effects in Flash
http://docs.gimp.org/en/plug-in-convmatrix.html

AS3: ColorMatrixFilter

Matrix矩陣

[a, b, c, d, e, f, g, h, i]

通常以下列形式表現
[ a, b, c,
d, e, f,
g, h, i ]

four good reasons to use the transformation matrix:

• Skewing is not available in ActionScript outside of the transformation matrix
• BitmapData requires a transformation matrix to transform drawn bitmaps
• You can use a transformation matrix to encapsulate information about how to transform a MovieClip/BitmapData instance and then use it over and over again
• You can concatenate matrices to combine their geometric effects

There are four basic ways to transform a MovieClip/BitmapData instance:

• Translation: The values "tx" and "ty" in Figure 3 represent the x and y translation values, respectively, in pixels.
• Scale: The values "a" and "d" represent the x and y scale values, respectively. A value of 1 indicates 100% of scale.
• Skew: The values "b" and "c" represent the y and x skew values, respectively. A value of 0 indicates no skew, while a value of 1 indicates a skew value equal to the width or height of the object at a scale of 1.

• Rotation: The values "a", "b", "c", and "d" can be used in combination to affect the rotation of an object. For an angle "q", rotation is achieved in the matrix by using the following values:

  a = cos(q)
  b = sin(q)
  c = –sin(q)
  d = cos(q)

e.g.

import flash.geom.Matrix;
// Scale to 200% and move to _x = 100 and _y = 50:
var m:Matrix = new Matrix( 2,0,0,2,100,50 );
clip.transform.matrix = m;

-----------------
Matrix.concat 方法
可将某个矩阵与当前矩阵连接，从而将这两个矩阵的几何效果有效地结合在一起

Additionally, the Matrix class implements methods that make it easy to apply transformation changes to the matrix. These include the following:

• Matrix.translate(tx:Number, ty:Number)
• Matrix.scale(sx:Number, sy:Number)
• Matrix.rotate(angle:Number)
• Matrix.createBox(scaleX:Number, scaleY:Number, rotation:Number, tx:Number, ty:Number)

颜色矩阵（ColorMatrixFilter）

ColorMatrixFilter accepts a 4 x 5 matrix (20-element array).

Note that the source and result values for each channel range between 0 and 255.

To change the brightness of an image, you need to change the value of each color channel by an equal amount. The simplest way to do this is to offset the source value in each channel.


Increasing the brightness


To apply matrices in Flash:(doubles the amount of green)

import flash.filters.ColorMatrixFilter;  var mat:Array = [ 1,0,0,0,0,     0,2,0,0,0,     0,0,1,0,0,     0,0,0,1,0 ]; var colorMat:ColorMatrixFilter = new ColorMatrixFilter(mat); clip.filters = [colorMat]; 

Color Matrix Demo