祭りのあと
MA9に参加しました．
MashupAward9（MA9）に参加しました． 夏のインターンで出会ったチームメンバと，さらに仲間が増えての延長戦でした．
できあがったのがこちら.『MosaicAlbum』という作品です．
友人とのたくさんの思い出．その一つ一つが，最高の一瞬を作りだす．
というコンセプトのもと，複数人でalbumをshareして一つのモザイク画を作るサービスです．
サマーインターンのtreasure@VG，techStudig@DeNAと続き，僕が関わった３つめのサービスになります．
8月はじめまでserverってなにそれおいしいの状態だったことを考えると，二ヶ月でこんな感じに作れるようになったのは進歩ではないでしょうか．まだ不安定なとこもあるんだけどね
今回MosaicAlbumを作るにあたり，チーム5人の主な役割は
という感じ．もちろんAさんはこれだけ！という感じではなくフレキシブルな感じで開発を進めました． 自分はこの中でmosaici_viewerのserver/client処理を担当しました．
なので今回はmosaic_viewerを実装する際の裏話を書こうと思います．技術tipsとかも 今後ネタがなかったら 時間を見つけて書いていきたいですね．
mosaic_viewerの仕様
今回のコンセプトとしては，皆のもっている写真が共有されて一つのものが出来上がる．という点がポイントになりあmす． この点を表現する為に，mosaicが作られる過程を見せる必要がある．と感じました． またこの際，それぞれのピースもきちんと写真として見える必要があり，そしてそれが誰のアルバムのものであるかもわかる必要があります．
どんな表現がよいのだろうか． 皆で話した結果，仕様はこんな感じになりました．
- モザイク画像が見れる
- １つ１つのピースも写真として見える
- 誰が投稿した写真かわかる
- モザイクが生成される過程が見える．
- 近づくと一つ一つのピースがみえ，遠ざかると一枚のmosaicとして見えるような表現
...formをつくってinputは位置してpost!で喜んでいた自分にはエラい高度に感じます.
ですが，やるしかありません．
canvas * create.js
画像表示していろいろやりってみたい．html5にはcanvasっていうのがあるらしい．
ふむふむ．
ということでまずはcanvas使ってみようと思いました． canvasといえば，techStudigでcreate.js(easel.js/tween.js)をつかってcanvasで遊んでいたのを思い出します．なのでまずはこれつかえばいんじゃねと．やってみたわけです．
数日後，まぁとりあえず表示はできました． しかし，個々のピースを見たり全体をみたり，つまりズームしたり俯瞰したりという表現で迷ってしまいました．mouse interactionもある程度はできるようですが．．うん．．
そこでふと．
3D空間ならカメラ動かすだけでズームイン/アウトできるんじゃね？
というアイディアが．easelで2Dにこだわる必要はないですもんね．
というわけで，webGLの世界に踏み込んでみました．
webGLの世界．そしてthree.js
いざwebGLの世界に入ってみると，これがなかなかに難しい．．
勉強始めたてのshaderの話とかがでてくるようです． shaderのコンパイル・リンクとかどっかで見覚えがあります． ということはshaderの勉強進めていけば，GLと同じように使えそうだ！やった！
..でも正直，MA9の締め切りに合わせるためにはこれを一から勉強している時間はありません（このとき二週間前くらい）． そこでお世話になったのが，three.jsというwebGLのラッパライブラリです． flashっぽくさくっとwebGLつかった3D表現ができるようになります．flash触ったことないですけど．
さらにさらに，three.jsは様々なプラグインがありまして． 空間中のオブジェクトの移動表現ができるTweem.js． マウスによるカメラコントロールを可能とするTrackBallContrall.jsなどなど． 便利な機能がいろいろとあります． 3D空間におけるオブジェクトクリック判定に至っては，専用のクラスまで実装されているようです．（実際には情報が古く手間取ることはありましたがw） これらを使わない手はないですね．
three.jsにより，webGLがなかなか便利に使えるようになります．
さらに今回はcoffeescriptを使ってコーディングすることにしました．よりさらに敷居が低くなります．coffeeちゃんいい子です． ...しかしこれにばっかなれると普通のjsかけなくなりそうで怖いですね．．
こんなんできました
そんなこんなで作られた作品の動作の様子がこちら．
ユーザとして一人しかいないのはご愛嬌です．開発途中の映像なのでw
自分のアイコンから，FBに登録してある写真がバラバラと振りまかれ，最終的に一つの画像になります．
マウス操作によりモザイクが生成される様をぐりぐり見まわせます．
さらにズームイン・アウトすることで個々のピースもそれなりの解像度で見えます．
１つ１つに寄ったり，俯瞰したりという表現ができました．
ちなみに今回，オリジナル画像にはこんなものをつかっていました．
できあがりはこんなかんじ．
まあまぁ？
出来上がり画像のクオリティは元画像の複雑さによってしまうけれど， 自分たちの写真からモザイク画増が出来上がる様子はなかなか面白いと思います．
よろしければMosaicAlbumを体験してみてくださいね．
