エッジ検出(6) エッジの方向(2)
2010/01/30 21:49 - AS3.0
前回は、「エッジの方向」ってのを「実践画像処理入門」に書かれているコードを元に ActionScript で書いてみたけれど、何かビジュアル的によー分からん、という話でした。
ここで登場するのが Neuro Productions という会社のブログ。
"Image Vectors - ConvolutionFilter Fun" というタイトルのエントリーに刮目せよ! いきなり、そのものズバリの画像があるじゃあありませんか! しかもステキなことにソースコードも掲示されていますよ!
で、そのコードを参考にさせていただき、「エッジの方向」をもっとビジュアル的に分かりやすくしたのが→。
上から(1)原画、(2)ゾーベル改によるエッジ検出、(3)エッジ方向の表示(新)、です。
これまた詳細は実際のコードを見てもらうとして(再掲:試す場合は画像ファイルのエンベッドは適宜書き換えてくださいね。あとグレイスケールと平滑化のエフェクタは wonderfl に投稿したウェブカム・エフェクトのコードから引っ張って、ドキュメントクラスの import 分は削除してくださいっす)、キモの部分は以下のとおり。
- ConvolutionFilter を適用した二つの BitmapData を走査
- それぞれの BitmapData の同一座標の色から青の要素を抽出(グレイスケール化してるから、どの色要素でも同じこと)
- Math.atan2 の引数にそれらの青要素を代入して、角度を計算
ここまでは前回と同じ。今回は新たに色要素の大きさを取得して待避しています。
上記の 2. で取得した色要素の値をそれぞれX方向の移動距離、Y方向への移動距離と見做します。 あとは三平方の定理を使えば起点から移動座標までの距離を仮想的に設定できます。
前回のエッジの方向表示では、有無をいわさず同じ長さで描画していましたが、今回はこの仮想的に設定した距離に基づいて、表示する線の長さを決めています。
もう一つ異なる点は平滑化をかけるタイミングです。
今まではグレイスケールをかけた直後、BitmapData を二つ作る前に平滑化をおこなっていました。 今回は二つの BitmapData を作り、それぞれ ConvolutionFilter を適用した後、個別に平滑化をおこなっています(強めにブラーをかけています)。 なので SWF の真ん中のヤツはボケボケなんですね。
おっともう一つ異なる点がありました。
ConvolutionFilter のマトリクスはゾーベルがベースですが、ゾーベルでは 2 or -2 の値ですが、ここでは 5 と -5 に強めています(エッジ検出(2) プレヴィッツ、ゾーベルで示した最後のサンプル参照)。
この値を変化させると、見栄えも変わります。基本、値を大きくするとメリハリが大きくなるわけですが、過ぎたるは及ばざるがごとし、ってことで、大きくすりゃあ良いってもんでもないようです。 5(-5)~10(-10)くらいが良さげ。
で、このエッジの方向ってどんな使い途があるの? っていうと、このように角度と長さを併せて使うことで、画像を絵画風に処理するときの絵筆のストロークなんかに使うっぽい感じらしい。