2009.4.28

javascriptで擬似ポリゴン

村式ブログ

こんにちは。中川です。
先日行われたカヤックさんクックパッドさん主催の「技術者交流会 ~おいしいソースのつくり方~ 」のライトニングトークで発表させていただきました。
たくさんの技術者の方と交流でき、発表も聞けて料理もおいしく、非常に充実した時間を過ごせました。
関係者の皆様、このような機会を設けていただきありがとうございました。

さて、当日はHTML5のcanvasと、ドロネー三角形分割という技術を使って写真をポリゴンっぽくするデモを発表しました。
特徴点を手で打っておけば後は自動で面を生成します。

result.jpg

プレゼン資料:

http://seeds.ville.jp/electriccafe/slides/

デモ:

※Firefox3.0.9、chrome2.0β でのみ動作を確認しています。
IEやSafari、chrome1.0では動きません。

1)ドロネー分割
http://seeds.ville.jp/electriccafe/demo/1/

2)擬似ポリゴン
http://seeds.ville.jp/electriccafe/demo/2/

補足説明

資料が簡素なので簡単に補足します。

デモの目標:
実写の写真をポリゴンっぽくする。

方針:
(1)特徴点は人間が打つが、あとはプログラムで頑張る。
(2)三角ポリゴンへの分割はドロネー分割を使う。
(3)全ての三角ポリゴンを重心の位置の色で塗りつぶす。

いろいろと改善の余地はありますが、書いたコードは300行程度の本当に小さなプログラムです。
ライセンスはNYSLで公開しますので好きなように使ってみてください。

この記事を書いた人

中川尚(メガネ)