Flash8からネイティブに実装されているConvolutionFilterですが、自分はあまり理解していなかったので色々遊んでみました。
ConvolutionFilterで出来る事
ConvolutionFilterを使うとガウスぼかしやエンボス等、いわゆるビットマップエフェクトが可能になるようです。
DisplacementMapFilterと併用すると、Photoshopのフィルターの多くをFlashでシミュレートできるんじゃないかと妄想しています。
ConvolutionFilterとは
ConvolutionFilterは、一言でいうとピクセルの色を変更するフィルターです。
ピクセルの色を変換するという意味ではColorTransformに似ていますが、
ColorTransformは係数のみでピクセルの色を計算、変更するのに対し、
ConvolutionFilterは計算時に、変更対象になるピクセルの周辺のピクセルも考慮します。
この係数は行列を使って定義します。
| ColorTransform | Convolution | |
| 周辺のピクセル | 考慮しない | 考慮する |
ConvolutionFilterで行われる計算
話を簡単にするため、7x7pxのグレースケールの画像を例に考えてみます。以下の図は、7x7pxのグレースケールの画像を拡大したものです。
各ピクセルは0（黒）〜255（白）の強さを持っています。
図中に示したピクセルeに、以下のような3x3の行列を使ってConvolutionFilterを適用した場合、次のような計算が行われます。
| a -.5 | b 0 | c 0 |
| d 0 | e .5 | f .5 |
| g 0 | h 0 | i 0 |
- ピクセルeを含む周囲9ピクセル（a~i）と行列の数値が1:1で対応し、各ピクセルの強さと対応する行列の数値をかけ算します。
例えば、ピクセルaは白（255）で、行列のaの数値（-0.5）とかけ算します。
a x -0.5 = 255 x -0.5 = -128同様に、bからiまでのピクセルを計算します。
b x 0 = 255 x 0 = 0
c x 0 = 255 x 0 = 0
d x 0 = 255 x 0 = 0
e x 0.5 = 255 x 0.5 = 128
f x 0.5 = 255 x 0.5 = 128
g x 0 = 255 x 0 = 0
h x 0 = 255 x 0 = 0
i x 0 = 255 x 0 = 0
- 9ピクセル全てについてかけ算が終わったら計算結果を足し合わせます。
-128 + 0 + 0 + 0 + 128 + 128 + 0 + 0 + 0 = 128この足し合わせた数値128が、新しいピクセルの強さです。
つまり、255（白）だったピクセルeが128（グレー）に変更されます。
（この計算結果をさらに割ったりオフセットしたりすることもありますが、このエントリーでは詳しくは扱いません。）
- この操作を、画像の全てのピクセルに対してそれぞれ行います。
図は、ConvolutionFilterの最終的な適用結果です。before
after
理屈は簡単ですよね？
例では3x3の行列を使いましたが、4x4でも3x1でも行列であればどんな行列でも使えるようです。
行列の大きさが変わるとフィルタ適用時に考慮する周辺ピクセルの数が変わるというわけですね。
さて、理屈は非常にシンプルなConvolutionFIlterですが、行列から適用結果を想像する事がすごーく難しいです。
そこで、理解を深めるためにツールを作ってみました。
ツールの使い方を簡単に説明した後、このツールを使ってさらにConvolutionFilterを探求していきます。