Processing 文字の輪郭追跡 作品集

はじめに

総コン Advent Calendar 2017の14日目の記事です。


前回( Processingで簡単な輪郭追跡をする - 忘れないうちに(旧) )、

文字の輪郭追跡について、紹介させていただきました。

今回は、文字の輪郭追跡を利用してこれまでに作成したものを紹介します。


本当は、OpenProcessingで公開しようと考えていたのですが、

processing.jsのpixels周りに問題があるのか、エラーが発生したので動画で紹介します。


作品集


一つ目は、「総」を輪郭追跡する様子を可視化してみたものです。

だんだんと探索が完了していく様子はかわいいですね。

youtu.be


二つ目は、「亀」を輪郭追跡する様子を可視化してみたものです。

一つめと同じようですが、今度は内側の輪郭を追跡できている様子を確認することができます。

輪郭が内側であるかを判定するのになかなか苦労したので感慨深いです。

youtu.be


三つ目は、よくわからないです。

完成した文字図形を3D空間上に表示し、音の大きさによって形を崩すことで、

VJ素材のようにしてみたものです。よくわからないです。

でもちょっとおもしろいですよね。

表示文字はテキストボックスから変更することができます。

youtu.be


四つ目は、「総」の文字図形をProcessingのFisicaで表示したものです。

今度は、文字のまとまりごとにバラバラになります。

これもvertexで文字を表現できるようになったからできたものです。

こういう表現は、他の方が外部ライブラリを公開しているそうですが、

自分で作ってしまいました。

youtu.be


まとめ

ちょっと考えただけでもこれだけの作品が作ることができました。


また他にも、同じ輪郭数ならvertexの数を揃えることで、

ある文字が他の文字にだんだんと変化していくというものも作れそうです。


プログラムはここ( GitHub - Turtar/CreateCharacterModel )で公開しています。

多分読むのも大変ですが、よろしければ使ってみてください。


少しでも、文字の輪郭追跡はおもしろいと感じていただければ私は満足です。