Node Knock Outに参加してきました。

※年末にかこうかこうと思ってかけてなかったやつを精算しようと必死になってかいてます。

時はさかのぼること11月の中頃にNode Knock OutというNodeのハッカソンがあったので参加してきました。 (http://nodeknockout.com/)

数年前からやってるやつで去年はnodeでオーケストラとかいうよくあるみんなで演奏して曲をつくろうぜ的なやつをやったのですが作品はできたもののdeployにはまってタイムアップするとかいう残念な結果だったので今回はそのリベンジもかねての参加でした。

で、今回は何を作ったかというと「おっぱい」を作ってきました。

作品名は「double mountain」です。
http://nodeknockout.com/teams/kusattamikan

残念ながらもうjitsuから提供していただいてた大会用のクラウドサーバーは落とされてるみたいですけど動画とかは残ってます。

4人チームでやってて
@nazomikan (フロントのおっぱい担当)
@to_muu_mas (触りまくったときのビーム担当)
@kuwabarahiroshi (他プレイヤーのカメラ位置表示担当)
@yokoyahhman (触ったときの音声担当)

でつくってました。

フロントの描画に関してはwebGLを使ってごりごりと。

やりはじめて数分で生でやってたら死ねると把握したのでthree.jsを使いながらやってました。

四角い面の集合をでポリゴンを生成するので四角形の頂点A-B-C-DをA-B-D-Cにして構成していくループなど色々と細かい工夫は必要ですけど概ね簡単に作ることができました。

ビームに関してはthree.jsが用意しているポリゴンのひな形のサイズなどを調整してアニメーション処理をかける感じで。

声の部分はopenjtalkで合成してaudio apiから再生したりなどして実現してます。

このへんで難しいのは衝突判定で、ブラウザからみてる限りとれるマウスの座標はx,yだけでzはとるのが非常に難しいんですね。

カメラの向きのベクトルから計算してz座標をエミュレートする感じのやりかたがthree.js側で用意されてたのでそれを使いました。

three.jsは神です。

カメラ座標の共有とかはwebsocketを使ってサーバサイドに現在のアングルを送ってそこからブロードキャストするようにして表示してます。

こうやってみるとNodeの成分がかなりうすいようにみえますけど、わりと内容も内容ということでみんなおもしろがって絡んでくれて非常にこっちもうれしかったです。

会場提供はドワンゴ様がしてくださっていたので非常に回線とかも含めてスムーズにことが運びました。

本当にドワンゴのみなさんありがとうございました。

まぁそんな感じで最終的な順位は上位にかすりませんでしたけど有意義な２日間でした！