Voronoi Face

久々にガツっとwonderflしたのでブログで解説。
alumican_netさんのSketch of Voronoi、AquiouxさんのVoronoi Letterに続けとばかりにボロノイをテーマにしたwonderflです。
一人で勝手に「まるでボロノイ三兄弟よ、ククク・・・」とか思ってます（笑

ボロノイ使った画像エフェクトとしてはPhotoshopのステンドグラスフィルタがあります。
あれはある程度の間隔を保ったランダムなボロノイ母点を用意して、あとはボロノイ図生成のアルゴリズムさえあれば、比較的簡単に実現する事ができます。
しかし、それをそのまま再現してもあまり面白くないので別の方法を考えました。

今回は画像のエッジに注目して、エッジ周辺は細かいボロノイ領域で描画し、それ以外の画像の変化が緩やかな箇所は大きなボロノイ領域で描画する事が出来ないだろうか？と模索しました。
ちょうど点描画を描くようなイメージです。
まずは画像のエッジ抽出ですがこれは2値化グレースケールエッジ検出にあったアルゴリズムをそのまま頂きました。
グレースケール化→ノイズ除去→2値化→エッジ抽出という順番で画像にエフェクトをかけていきますが、2値化の時点で閾値を変えたものをそれぞれエッジ抽出して最後にそれらの画像を副数枚重ね合わて1枚の画像にしました。

この時点でなんか面白かったので、副産物的に出来たwonderflがコレ。

次にエッジ周辺は細かく、それ以外ではおおざっぱにボロノイ図を描く方法ですが、これは以下のように考えました。

• エッジ抽出した画像を走査してエッジ部分の座標群とそれ以外の座標群にわける。
• あるエッジ以外の座標からエッジの座標までの距離を求め、最小距離のものを保存。
• ボロノイ母点をエッジ以外の座標群から求めるが、座標毎に保存したエッジまでの距離を元に出現確率を変化させる。

要は、エッジまでの距離が近い座標ほど高確率で出現させる、ということです。
最初に思いついたとき「俺天才じゃね？！」とか思いましたが、まあ普通に画像処理の教科書にあると思います。
で、ボロノイ母点のみを描画したものがコレです（母点数1800）

このボロノイ母点を元にボロノイ図を描画するのですが、自身が使っていたアルゴリズムではボロノイ領域内を任意の色で塗りつぶすのが上手くいかなかったため、kndさんのもっちりボロノイ図のアルゴリズムを使わせてもらいました（fork元です）
このおかげで実家の風呂場の模様というタグを頂くことができました。もっちり！

本当はGenerative GestaltungにあるSegmentation and Symtpom [S.017]のようなモノクロでのアプローチを考えていたのですが、画像の大きさ、as3の処理能力の限界などで表現に限界があり諦めました。

インタラクティブのイの字もなくほんとにFlasherか！という感じで申し訳ないですが、ボロノイ図の描画は母点数が1000を超えるとFlashでリアルタイムに動かすのがキツイのでopenFramework等にベタ移植してwebカメラと連携とかしてみたりとかしたいです。