2014-03-02

BaPAに合格しました

BaPAとは?



BasculeとPARTYという広告界隈では有名な2社が合同で立ち上げた、BaPAというクリエイターのための学校ができました。
Both Art and Programming Academyというコンセプトで、デザインもプログラミングもどっちもやっちゃう人を育てる学校です。

紹介記事はこんな感じ。

デザインとプログラミングスキルを併せもった次世代クリエイターのための学校「BAPA」開校!(WIRED)
バスキュール×PARTYが開く学校『BAPA』の狙い。デザインとプログラミングの境界線は無くなるか。│CAREER HACK
ART&CODEの学校・BAPA(バパ)に入ると何を学べるのか、何者になれるのか : ライフハッカー[日本版]
日本を代表するクリエイティブカンパニーが、次世代クリエイティブスクール「BAPA(バパ)」を開校!【@otozureproject】
なぜ、クリエイティブ界はエンジニアを熱烈歓迎するのか?アートとプログラミングの学校『Bapa』仕掛人に聞く - エンジニアtype

これの入試課題「卵を描いて、その卵を動かしてください。」に挑戦し、見事合格することができたので、提出した入試課題についてブログを書いてみました。


「僕に卵をぶつけてください・・・!」

卵を描いてどうするかというブレストの段階で、彼女に振られて人間として終わっていた僕は、こんな自分にみんなから卵をぶつけて罵って欲しいなと思いました(ぇ

そしてできたのがこれです↓



上の僕が立っているシュールなページをPCで開き、下の卵を描けるキャンバスを用意したページをiPhoneなどのスマホで開きます。

iPhone側で円を指でなぞって描くことで、線が交差するときれいな卵が描けるようになっています。
卵を描いたら、その卵をiPhoneを振ることで投げ飛ばす事ができます!

飛んだ卵はどうなるかというと、開いていたPC画面の方に飛んでくるんです。
そしてその卵が僕に当たると・・・。

おもむろに服を脱ぎ始め・・・

土下座してひれ伏している僕に生卵を当てることができます。
爽快!!!!

気持ち悪いですね。

どうやって作っているか


ざっくり

PC・iPhone側両方共に描画をすべてhtml5のcanvasを使って行っています。
サーバサイドではNode.jsを使っていて、websocketによって投げた卵の情報が iPhone -> PC のように渡るように作っています。


卵を描く


卵を描く処理はもっと最適化できるとは思うのですが、数学を使って根性でフルスクラッチしています。

まず、よくあるcanvasお絵かきを実装したあと、円を描いた最後に「線が交差する」判定をさせています。
2つの線分が交差している時、その2線分の4端を使ってほげほげ〜なときに交差してるよ!みたいな処理が書いてあります。

交差したあとは、手で描いた円を卵型に整形する処理です。
ぶっちゃけると今回は描いた大きさをとって、その大きさに合わせて卵を再描画してるだけなんです。
ただ、卵形曲線とかいう公式をみつけて、それをプログラムに落としこむのが結構かかった。。という苦労話までにとどめておきます。。

リファクタされてない(w) ソースはGithubにも公開してるので興味があれば見てみてくださいw

卵を投げる


卵を描き終わると、投卵待機状態になります。
iPhoneのsafariから、端末の傾き等の加速度を取得することができるのでそれを利用します。

誤操作で卵が飛んでいってしまうと面白くありません。
ちゃんとiPhoneを投げたような動作が行われた時に飛ぶように、投げた動作の座標をキャプチャして、これくらいの数値の時に飛んだら気持ち良い、という値を出しています。

その時の卵を飛ばしたデータはsocket.ioを通じてheroku上のNode.jsサーバに飛ばします。
飛んできたデータはそのままPC側のページに渡されて、卵を僕に当てるまでの処理が走っています。微妙に投げた時の力加減が放物線に影響されていたりします。

PC側の卵が飛んでく処理は卵画像をパラパラさせながら、放物線を描いて奥に飛んでく風に描画してます。
卵が僕に当たった時は尊敬するfkeiパイセンが作った CyberAgent/boombox.js を使わせて頂いて、更にsoundのプロから頂いた卵の「ペシャッ」音のmp3ファイルを再生しています。

あとは基本的なcanvasの処理ですかねっ!


学んだこと


人に見せる

人に何回も見せてブラッシュアップするのが大事だなぁと実感しました。
なんとなく動いた時に、必ず誰かに見せる。
今回はtwitterやfacebookに公開して見てもらったり、ソッチ界隈の方々との飲み会などでiPhoneとAndroid2台持ってすぐデモができるようにして意見をもらったりしていました。

実際に見てもらった時に、
「操作方法がわからん」→「チュートリアルつけるわ!」
「卵描けないんだけど(処理が反応悪い)」→「クリティカルなバグだから改善する!」
「仕組みは面白いけどもうちょっと足りない」→「脱ごう!」
「土下座まで長くて見てて辛い」→「コマ数をカット!」
みたいなのをバシバシやって、とりあえず作ったものを短期間でものすごいスピードでブラッシュアップできました。

技術オナニー禁止

あとは技術力でオナニーしても全然おもしろくない。
これ使って作った → (゚Д゚)ハァ? ってなりやすい。

その先に何が出来るかの方を見たほうが良い。
崇高なコンセプトを作って壮大な作品が出来てポカーンとされるより、見て「なにこれww」ってなる面白いもののほうがわかりやすいし良い。(※崇高なコンセプトが必要な時もあると思う)


意気込み

BaPAの仕上げはチームで卒業制作した作品を、ヒカリエで展示するそうです。
そこで明確な順位がついたりするので、やるからにはトップを!狙って行きたいと思います^v^

僕は普段の仕事ではガッツリとサーバサイドの実装ばかりなのですが、BaPAを通じてしっかりとしたART & CODEな人間に生まれ変わりたいと思います。

クリエイター79の今後にご期待ください^^ω!!!

0 件のコメント: