ConvolutionFilterで遊ぶ その4

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

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

ここに黒背景に1pxの画像があります。
img1.jpg
この画像に以下のような行列でConvolutionFilterを適用すると…
k1.jpg
以下のようになります。前回までで見てきたように、ターゲットピクセルの50%の強さで、斜め4方向にピクセルを移動コピーしています。
img2.jpg


さて、このフィルタの適用結果に、さらにフィルタをかけ続けるといったいどうなるのか?とても気になったので、ツールに連続してフィルタを適用する機能を追加しました。
tool.jpg
三角形の再生ボタンを押すと、フィルタを連続して適用していきます。
スライダーを右に動かすと、フィルタをかけるインターバルが長くなっていきます。(注:上の画像はスナップショットなので、機能しませんよ〜)


再生ボタンを押すと、ドットで出来た円が拡大し、画面端で折り返した後、画像全体が白に収束します。
(下の画像どれかをクリックすると、アニメーションが再生されます。)
anim1.jpg
1・ドットで出来た円が拡大していく…
anim2.jpg
2・画面端で折り返す…
anim3.jpg
3・最後は白に収束する
円が拡大していくとこまではなんとなく予想してましたが、その後が想像を超えてました
では、シンプルなグレースケール画像ではなく、フルカラーの画像で同じ事をやると何が起こるのでしょうか?
下の画像に、同じConvolutionFilterを連続して適用してみると…
(下の画像をクリックすると、アニメーションが再生されます。)
anim0.jpg
anim4.jpg

結果は、一瞬で白に収束してしまいます。。
まぁ、さっきのような黒背景に1ピクセルの白があるだけの画像ではなく、
明るさを持ったピクセルが無数にあるフルカラー画像では当たり前の結果ですよね。
ということは、行列の値がまずかったと。
そこで、プリセットにあるガウスぼかしを連続で適用してみました。
(下の画像をクリックすると、アニメーションが再生されます。)
anim5.jpg
なんとなく味わいのあるフェードアウトで、最終的には黒に収束します。
ところで、ガウスぼかしの行列は以下のとおりで、全ての数値を足し合わせると「1」になります。
(0.33*4 + 0.11*4 + 0.44 = 1)
k2.jpg
いろいろやってわかったのですが、ConvolutionFilterを連続して適用する際、
行列の数値を足し合わせて1以下の場合、画像は黒(0)に収束する傾向があり、1より大きい場合は白(255)に収束していくようです。
(あとでみますが、どちらにも収束せずに発散することもあります。)
たとえば、ターゲットセルに対応する値をほんの少しだけ大きくしてみます。
k3.jpg
このように、列の数値を足し合わせた数を1より大きくすると、画像は白に収束していきます。RGBの各チャンネルが255方向へ収束するのでとてもきれいです。
anim6.jpg
anim7.jpg

さきほど、黒にも白にも収束しない場合があると言いましたが、
たとえば、以下のような行列の場合です。
k5.jpg
この行列で、ConvolutionFilterを適用し続けると、黒にも白にも収束せずに不思議なモアレ模様を描き続けます。
anim8.jpg
これがそのまま、何かの表現に使えるとは思いませんが、
このライフゲームのような不思議なアニメーションは面白いです。
ターゲットピクセルの値を少し変えてみると、
k6.jpg
黒に収束してしまいましたが、よりライフゲーム感が出てきました。シマシマの中を何かが泳いでいます(笑。
anim9.jpg


他にも面白いものがいくつか発見できたので、ならべておきます。
(画像をクリックすると、アニメーションが再生されます。)
ガウスぼかしのフェードアウトに似ていますが、終わりがけに一部カラーハーフトーンのような効果が見られます。
anim10.jpg
色面の色彩が荒くなっていき、最終的に点描のような状態で収束します。
anim11.jpg
画像が流れ落ちていく。。
anim12.jpg
コメントしにくいけど綺麗。。
anim14.jpg
これもコメントしにくい。ななめ。。
anim15.jpg

行列作成のこつ

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

  1. 最終結果を暗くする、明るくする
    上でも書きましたが、行列の足し合わせた数が1を超えると白(255方向)へ収束し、1以下だと黒(0方向)へ収束します。ただしどちらにも収束しない場合もあります。
  2. 方向を変える例えば、以下のような行列は上側の数値よりも下側の数値の方が大きいです。このように下に重みをつけた場合、ピクセルは上に移動します。
    k8.jpg

    anim22.jpg

    下に移動させたい場合は、上下反転させて、上に重みをつければればOK。
    k9.jpg
    anim23.jpg

    同じ理屈で、45度回転させれば、斜め右上に重みがつくので斜め移動、さらに45度回転させれば、右の重みがつくので横移動になります。
    k10.jpg
    anim21.jpg

    k11.jpg
    anim20.jpg

    また、 縦横方向の重みは収束結果にピクセルが残りやすく、斜め方向の重みは収束結果にピクセルが残りにくいみたいです。

  3. 面白い行列を発見出来たら細かく微調整行列の合計が1以下の黒への収束と、1より大きい白への収束の境界付近が、収束するまでに長く時間がかかるので面白い効果が出来やすい気がします。
    面白い行列を発見出来たら、ターゲットピクセルの数値を増減させてこの境界を探してみましょう。
    0.01増減させただけで、見た目が大きく変わることもあります。

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

さて、ConvolutionFilterを使ったアニメーションの可能性を探ってみたわけですが、
「で、これなんかに使えるの?」という疑問が聞こえてくる気がします。
さすがに、クライアントワークなどにそのまま使えるとは思いません。ただ、表現の種(素材)として考えたときには一定のポテンシャルを感じます。
たとえば、最初の1pxを拡張していくグレースケールのアニメーションなんかは、
アルファチャンネルマスクとして使えば、スライドショーのトランジションとかに利用できるんじゃないかと思います。(綺麗かどうかはやってみてないのでわからんですが)
もしかしたら、白方向、黒方向へ収束するものは、そのままトランジションとして利用できるものもあるかもしれません。
他には、オリジナルの元画像を残しつつ、BlendMode.SREEN等で合成しながらアニメーションさせてみるとか、アニメーション中に別の画像を重ねて見るとか。。
個人的には、置き換えマップ(DisplacementMapFilter)のソースとして、ConvolutionFilterを使ったアニメーションを利用するとどんな事が可能になるか探ってみたいとこだったりします。
また何か発見があったらレポートします。
とりあえずこのシリーズは今回で終了です。

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

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

  1. knym のコメント:

    ConvolutionFilterを使う機会があって調べたら、こんな有益なページがあったなんて!
    アニメーションのサンプルがとってもわかりやすいので、何かの機会にここにのってるアニメーションを使わせてもらいますね〜。

  2. yamaharu のコメント:

    どうぞどうぞ。そのまま使うのは難しいかもしれませんが、なにかのヒントになれば幸いです。

コメントを残す

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