HTML5ロゴに空気をいれて爆発させるアプリを作った

HTML5ロゴに空気をいれて爆発させて運動不足解消を狙ったアプリを作ってみた。
音声を出すようにしてもらえると、マサオ隊長から激励を聞く事ができ、やる気がどんどん出てくることでしょう。
※ HTML5ロゴを使ったクレイジーな何か。 に応募したものです。

HTML5PUMP
http://wakasa.org/project/html5pump/
※iPhoneでご覧ください。一部のAndroid端末では正しく動作しません。
※音声が出るコンテンツですので音を出してお楽しみください。

技術的に何をしてるかというと

• three.jsを用いてロゴを3D変形させて膨らんでるような変形をさせる
• 重力加速度を取得してある一定速度を超えたらイベントを発生
• 一定の計算とランダムで応援音声を再生させる

という感じです。

苦労した点としては

• ロゴが膨らんで破裂するというものを動的に絵を作成させる方法の検討
• iPhoneでは音声データの読み込み制限があるため、バットノウハウで乗り越えた

という所でしょうか？

ちなみに、膨張してる絵を作るところは球体にテクスチャで貼付けています。

Canvasで生成したテクスチャを最初は小さく、カメラで拡大して表示し、どんどんカメラをひきながらテクスチャサイズを変えて変形させるという無理矢理な感じでアニメーションさせています。

本来ならオブジェクト自体を変形させれば良いのですが、計算上面倒な事が多々あったため、この方法を採用しました。