2012年4月9日月曜日

Perfumeのモーションデータを地図上に置いてみた

http://www.perfume-global.com/ で配布されてるBVHとSOUNDデータで何かできないかとやってみた。

できたもの

Perfume Maps
http://wakasa.org/project/perfumemaps/

※いきなり音が出るよ。
※Chrome推奨。限定はしないけどChromeで見て欲しい。音量に応じて動画のサイズが変わるのはChromeだけ。IEは動かないのは仕様。
※CPUすごく使うよ。ファン回るよ。
※地図のズームアウトはマウスホイールで残してあるよ。点線を引きでみたりするとき用に。
※読み込むたびに動画や場所が変わるよ。場所Perfumeがコンサートで使ったことある会場にしてるよ。

何がしたいの?って聞かれたら、そこに地図などのAPIがあるからさ。としか言えません。

使ったAPI

あとはjQuery使ったりjsで簡易BVHデータ解析とかもろもろ組み込んでます。
iPhone対応は最初考えたけど疲れてやめたよ。すいません。

開発を CoffeeScript でやってみました。
触ったこともありません。いきなり作つくるものがコレなのか?初めてなのに。
そもそもWebAudioAPIなんていうハイテクなAPIも触れたこともありませんがね。
厳しい戦いだった・・。

とりあえず、CoffeeScriptをそれなりに触ってみましたが、インデントもコードなので、
・人のソースをコピペで組み込む手抜きはダメ。インデントきっちりやってね。
・エディタでコメントアウトして戻したらスペース入ってエラーってひどいよ・・。
とか悲しい事が多すぎました。
便利なんだけどね。

紆余曲折があって最初に考えてたものとはまったく別のコンテンツになったので、基本コードはスパゲティ状態です。
そしてAPIが多すぎてロードタイミングとかきっちり設計してないのでたまに動きません。
そのときはキャッシュに貯めてリロードです(恥

内容に関しては気分が乗ったら解説することにします。ハイ。

0 件のコメント:

コメントを投稿