Processingで簡単な輪郭追跡をする
はじめに
この記事は NCC Advent Calendar 2017 の4日目
かつ、総コン Advent Calendar 2017の7日目の記事です。
（使いまわしでごめんなさい）
こんな感じに、Processingでテキストの形を自由に崩したい！と思ったことはありませんか？
テキストの形を自由にいじれれば、何か面白いことができそうだと思いませんか？
テキストの形をいじるには、テキストをvertexで図形にする必要があります。
テキストをvertexで作るには輪郭を辿って行かなくちゃいけません。
ということで今回は、画像処理のアルゴリズムである輪郭追跡について取り上げたいと思います。
ちなみに「簡単な」輪郭追跡というのは、白背景のテキストの輪郭追跡をするということで、
普通の写真などよりもずっと処理が単純ということです。
輪郭追跡のアルゴリズムはこちらを参考にしています。
実行環境
Processing3.3
ソースコード
ソースコードはGithubGistで公開しています。（「Download ZIP」のボタンでDLできます）
ShapeCharacterModel.pde · GitHub
本題
コードを一行ずつ解説をすると大変なことになるので、処理の流れをつかんでもらおうと思います。
最終的なソースコードはこの記事の最後に公開しておきます。
1. 元となるテキストを描画
まずは、普通にテキストを描画します。
ここは単純な描画なのでサクサク行きましょう。
（フォントによっては最終的な形がバグってしまうことがありますがあまり気にせずに...）
2. テキストの縁を黒く塗る
次は、テキストの縁取りをします。
これはまだ輪郭追跡ではなく、白色のピクセルから白色じゃないピクセルに移動したら、
そのピクセルを黒く塗るという処理をしています。
3. 黒い輪郭を追跡
輪郭の探索の動き
黒い輪郭のピクセルを発見したら輪郭追跡を開始します。
一つの輪郭の追跡が完了したら、今度は、前回の開始点からまた探索を開始します。
そして、また黒い輪郭のピクセルを発見したら、次の輪郭追跡を開始します。
輪郭追跡の処理が完了した状態です。
縁を黒く塗ったときのものとほぼ同じに見えますが、
よく見ると少しだけ輪郭が滑らかになっています。
輪郭追跡アルゴリズムの動き
前述した通り、輪郭処理アルゴリズムは、
こちらの記事を参考にしています。
こちらはとてもわかりやすいので、基本的な部分の解説はこちらにお願いしてしまいます。
ここでは、私がこの記事で疑問に思ったところを解説したいと思います。
私が疑問に思ったところというのは、
ここにちょっとした規則があります。
例えば、０の次に５、１の次に６、・・・などは絶対に来ません。（なぜかは、ちょっと考えると分かります。）
一般的に表現すると、
一つ前の輪郭の向きから時計回りに３つ分の向きには輪郭が存在しない。
という事になります。
というところです。
下の図を使って解説します。
図の処理の順番は以下の通りです。
薄い赤紫色の矢印... 前項の輪郭の探索
赤色破線の矢印... 輪郭追跡のための探索①
赤色実線の矢印... 発見した輪郭への移動①
青色破線の矢印... 輪郭追跡のための探索②
青色実線の矢印... 発見した輪郭への移動②
さて、この図で「一つ前の輪郭の向きから時計回りに３つ分の向き」とは
どこのことを言うのでしょうか。
青色の探索からみて一つ前の「輪郭の向き」とは赤色実線の向きです。
すなわち、赤色実践の向きから「時計回りに3つ分の向き」とは、
下の図の斜線のピクセルになります。
このピクセルは、赤色のときにすでに探索して輪郭じゃないとわかってますよね。
だから、この方向のピクセルは探索しなくて構わないんです。
コードを書いている時にはまだまだたくさん詰まったところはありましたが、
取り上げるとキリがないのでここまでにしておきます。
ソースコードにもコメントをたくさん書いたので参考にしていただければ良いと思います。
