ConvolutionFilterで遊ぶ その1

Flash8からネイティブに実装されているConvolutionFilterですが、自分はあまり理解していなかったので色々遊んでみました。

ConvolutionFilterで出来る事

ConvolutionFilterを使うとガウスぼかしやエンボス等、いわゆるビットマップエフェクトが可能になるようです。
DisplacementMapFilterと併用すると、Photoshopのフィルターの多くをFlashでシミュレートできるんじゃないかと妄想しています。

ConvolutionFilterとは

ConvolutionFilterは、一言でいうとピクセルの色を変更するフィルターです。
ピクセルの色を変換するという意味ではColorTransformに似ていますが、
ColorTransformは係数のみでピクセルの色を計算、変更するのに対し、
ConvolutionFilterは計算時に、変更対象になるピクセルの周辺のピクセルも考慮します。
この係数は行列を使って定義します。

  ColorTransform Convolution
周辺のピクセル 考慮しない 考慮する

ConvolutionFilterで行われる計算

話を簡単にするため、7x7pxのグレースケールの画像を例に考えてみます。
以下の図は、7x7pxのグレースケールの画像を拡大したものです。
各ピクセルは0(黒)〜255(白)の強さを持っています。
File.png
図中に示したピクセルeに、以下のような3×3の行列を使ってConvolutionFilterを適用した場合、次のような計算が行われます。

a -.5 b 0 c 0
d 0 e .5 f .5
g 0 h 0 i 0

File-1.png

  1. ピクセル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
  2. 9ピクセル全てについてかけ算が終わったら計算結果を足し合わせます。
    -128 + 0 + 0 + 0 + 128 + 128 + 0 + 0 + 0 = 128
    この足し合わせた数値128が、新しいピクセルの強さです。
    つまり、255(白)だったピクセルeが128(グレー)に変更されます。
    (この計算結果をさらに割ったりオフセットしたりすることもありますが、このエントリーでは詳しくは扱いません。)
  3. この操作を、画像の全てのピクセルに対してそれぞれ行います。
    図は、ConvolutionFilterの最終的な適用結果です。
    before
    before.png
    after
    after.png

理屈は簡単ですよね?
例では3×3の行列を使いましたが、4×4でも3×1でも行列であればどんな行列でも使えるようです。
行列の大きさが変わるとフィルタ適用時に考慮する周辺ピクセルの数が変わるというわけですね。
さて、理屈は非常にシンプルなConvolutionFIlterですが、行列から適用結果を想像する事がすごーく難しいです。
そこで、理解を深めるためにツールを作ってみました。
ツールの使い方を簡単に説明した後、このツールを使ってさらにConvolutionFilterを探求していきます。
つづく…

カテゴリー: ActionScript2, flash パーマリンク

ConvolutionFilterで遊ぶ その1 への1件のフィードバック

  1. ピンバック: パーリンノイズで遊ぶ2 | log

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です