PerfumeのモーションデータをHTML5のCanvasで3Dっぽく動かした「Perfume x Canvas」
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0028.png)
公式に配布されているデータを使ってPerfumeっぽい棒人間を踊らせまくっているのが「Perfume x Canvas」です。HTML5では「Canvas」というタグを使うことで、HTMLとJavaScriptだけでオブジェクト描画ができるようになっていますが、これを使って3Dっぽく動かしています。
「Perfumeのモーションデータ」というのがどういうものか、公式サイトに行くとムービーが流れるようになっています。
http://www.perfume-global.com/
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0004.png)
サイト左上にマウスカーソルを持って行くとメニューが表示され、その中の「ダウンロード」をクリックすると……
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0011.png)
モーションデータのダウンロードページが表示されます。「You agree to our terms」の横のチェックボックスにチェックを入れると「BVH」「SOUND」のリンクをクリックして、データをダウンロード可能。
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0010.png)
このデータを用いて、Canvasで踊らせまくったのが@ina_aniさん。
Perfume x Canvas
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0013.png)
ダンスするロボット。顔のアイコンはtwitterから取得しているもの。
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0017.png)
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0021.png)
テキストボックスにtwitterIDを入れて「change face」を押すとアイコンが変わります。GIGAZINEの場合はこんな感じ。
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0032.png)
これと同じくPerfumeのモーションデータを使い、もっとたくさんのPerfumeを踊らせることができるのではないか?と実践したのがこちら。
やっぱりPerfume、100人踊っても大丈夫 - 音の鳴るブログ
100人Perfume、すごいことになっています。体が白いヤツは少し踊りがあやしいような……。
perfume3.js
![](http://gigazine.jp/img/2012/04/04/perfume-canvas/snap0027_m.png)
・関連記事
JavaScriptで図形を描くHTML要素「Canvas」の実例 - GIGAZINE
HTML5で作られた無料MMORPG「BrowserQuest」をMozillaがサービス開始 - GIGAZINE
735バイトで書かれたHTML5のモダンアート風描画ジェネレーター - GIGAZINE
福岡で開催されたHTML5カンファレンスに参加してwebの新しい世界を体験してきました - GIGAZINE
FLASHをHTML5に変換できるGoogle swiffy公開、iPhoneやiPadにも対応 - GIGAZINE
記事全文へ