MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK 社長ブログ

javascriptで擬似ポリゴン

Pocket

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

さて、当日は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で公開しますので好きなように使ってみてください。

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK 社長ブログ