www.imajuk.swf

ConvolutionFilterを使ったアニメーションの可能性

前回からの続きです。前回までを見てないと今回の話はわからないと思うので、もしまだであれば以下のリンクからど〜ぞ。

• ConvolutionFilterで遊ぶ その1
• ConvolutionFilterで遊ぶ その2
• ConvolutionFilterで遊ぶ その3

ここに黒背景に1pxの画像があります。

この画像に以下のような行列でConvolutionFilterを適用すると...

以下のようになります。前回までで見てきたように、ターゲットピクセルの50％の強さで、斜め4方向にピクセルを移動コピーしています。

---

さて、このフィルタの適用結果に、さらにフィルタをかけ続けるといったいどうなるのか？とても気になったので、ツールに連続してフィルタを適用する機能を追加しました。


三角形の再生ボタンを押すと、フィルタを連続して適用していきます。
スライダーを右に動かすと、フィルタをかけるインターバルが長くなっていきます。（注：上の画像はスナップショットなので、機能しませんよ〜）

---

再生ボタンを押すと、ドットで出来た円が拡大し、画面端で折り返した後、画像全体が白に収束します。
(下の画像どれかをクリックすると、アニメーションが再生されます。）


1・ドットで出来た円が拡大していく...

2・画面端で折り返す...

3・最後は白に収束する

円が拡大していくとこまではなんとなく予想してましたが、その後が想像を超えてました。

では、シンプルなグレースケール画像ではなく、フルカラーの画像で同じ事をやると何が起こるのでしょうか？
下の画像に、同じConvolutionFilterを連続して適用してみると...

(下の画像をクリックすると、アニメーションが再生されます。）

結果は、一瞬で白に収束してしまいます。。
まぁ、さっきのような黒背景に1ピクセルの白があるだけの画像ではなく、
明るさを持ったピクセルが無数にあるフルカラー画像では当たり前の結果ですよね。
ということは、行列の値がまずかったと。

そこで、プリセットにあるガウスぼかしを連続で適用してみました。

(下の画像をクリックすると、アニメーションが再生されます。）


なんとなく味わいのあるフェードアウトで、最終的には黒に収束します。
ところで、ガウスぼかしの行列は以下のとおりで、全ての数値を足し合わせると「1」になります。
（0.33*4 + 0.11*4 + 0.44 = 1）

いろいろやってわかったのですが、ConvolutionFilterを連続して適用する際、
行列の数値を足し合わせて1以下の場合、画像は黒（0）に収束する傾向があり、1より大きい場合は白（255）に収束していくようです。
（あとでみますが、どちらにも収束せずに発散することもあります。）

たとえば、ターゲットセルに対応する値をほんの少しだけ大きくしてみます。

このように、列の数値を足し合わせた数を1より大きくすると、画像は白に収束していきます。RGBの各チャンネルが255方向へ収束するのでとてもきれいです。

さきほど、黒にも白にも収束しない場合があると言いましたが、
たとえば、以下のような行列の場合です。

この行列で、ConvolutionFilterを適用し続けると、黒にも白にも収束せずに不思議なモアレ模様を描き続けます。

これがそのまま、何かの表現に使えるとは思いませんが、
このライフゲームのような不思議なアニメーションは面白いです。

ターゲットピクセルの値を少し変えてみると、

黒に収束してしまいましたが、よりライフゲーム感が出てきました。シマシマの中を何かが泳いでいます（笑。

---

他にも面白いものがいくつか発見できたので、ならべておきます。

(画像をクリックすると、アニメーションが再生されます。）

ガウスぼかしのフェードアウトに似ていますが、終わりがけに一部カラーハーフトーンのような効果が見られます。

色面の色彩が荒くなっていき、最終的に点描のような状態で収束します。

画像が流れ落ちていく。。

コメントしにくいけど綺麗。。

これもコメントしにくい。ななめ。。

行列作成のこつ

行列の数値を色々変えながら遊んでいましたが、 コントロールしやすいのはピクセルの移動方向ぐらいで、 ほとんどの場合予想がつかない変化となります。。 それでも、いくつかコツと言えるようなものがあったので、あげてみます。

1. 最終結果を暗くする、明るくする
   上でも書きましたが、行列の足し合わせた数が1を超えると白（255方向）へ収束し、1以下だと黒（0方向）へ収束します。ただしどちらにも収束しない場合もあります。
   
2. 方向を変える
   例えば、以下のような行列は上側の数値よりも下側の数値の方が大きいです。このように下に重みをつけた場合、ピクセルは上に移動します。
   
   
   下に移動させたい場合は、上下反転させて、上に重みをつければればOK。
   
   
   同じ理屈で、45度回転させれば、斜め右上に重みがつくので斜め移動、さらに45度回転させれば、右の重みがつくので横移動になります。
   
   
   
   
   
   また、 縦横方向の重みは収束結果にピクセルが残りやすく、斜め方向の重みは収束結果にピクセルが残りにくいみたいです。
   
3. 面白い行列を発見出来たら細かく微調整
   行列の合計が1以下の黒への収束と、1より大きい白への収束の境界付近が、収束するまでに長く時間がかかるので面白い効果が出来やすい気がします。 面白い行列を発見出来たら、ターゲットピクセルの数値を増減させてこの境界を探してみましょう。 0.01増減させただけで、見た目が大きく変わることもあります。

ConvolutionFilterを使ったアニメーションの利用の可能性

さて、ConvolutionFilterを使ったアニメーションの可能性を探ってみたわけですが、 「で、これなんかに使えるの？」という疑問が聞こえてくる気がします。

さすがに、クライアントワークなどにそのまま使えるとは思いません。ただ、表現の種（素材）として考えたときには一定のポテンシャルを感じます。

たとえば、最初の1pxを拡張していくグレースケールのアニメーションなんかは、
アルファチャンネルマスクとして使えば、スライドショーのトランジションとかに利用できるんじゃないかと思います。（綺麗かどうかはやってみてないのでわからんですが）
もしかしたら、白方向、黒方向へ収束するものは、そのままトランジションとして利用できるものもあるかもしれません。

他には、オリジナルの元画像を残しつつ、BlendMode.SREEN等で合成しながらアニメーションさせてみるとか、アニメーション中に別の画像を重ねて見るとか。。

個人的には、置き換えマップ（DisplacementMapFilter）のソースとして、ConvolutionFilterを使ったアニメーションを利用するとどんな事が可能になるか探ってみたいとこだったりします。

また何か発見があったらレポートします。
とりあえずこのシリーズは今回で終了です。