Saqoosha

あけおめことよろ〜〜。去年はいろいろとおとなしめだった気がするので今年はもーちょいいろいろがんばりますよっと。ことしいっぱつめは TECHNE の ID をちょいとお手伝いしたのでそれを解説してみよう。わたしがお手伝いしたのはクラウドソースの回のやつ（音が 8bit バージョンにアレンジされててかわいい。圧縮があれだから画質があれだなー、YouTube にー、、、）。わかりやすいクラウドソースといえばやっぱり映し鏡でもやった Twitter アイコンでモザイクーのやつでござるね。映し鏡んときは Flash で Pixel Bender つかってリアルタイムに処理してたですが、今回のはどうせならもーちょい凝ったことしようとおもって OpenCV でやつてみました。アイコンモザイクの肝は特定の領域にマッチするアイコンをどうやって選ぶかっていうところですけれども、OpenCV には FLANN っていう、でかいデータセットからだいたい近いやつを選んでくれる API（ざっくり）というのがあるので、それをつかってみましーた。FLANN で画像検索てーとだいたい特徴点を抽出してそれをインデックス化してー、みたいなのが普通？ぽいですが、そこまでは必要ねーんじゃないかとおもって、とりあえず、元画像 → リサイズして 16 x 16px x RGB 3 要素 → 768 要素でインデックスつくって検索してみたら割と良い感じだつたのでそのまま採用。あとは普通に分割してもおもしろくねいなーということで昔 @fladdict がやってたアレをヒントに、ベースの画像とアイコンのマッチ具合に応じてさらに分割してーみたいなことをやってみたり。分割パターンは Flash でタイムラインアニメーションつくってそれを JSON に書き出してとかとか。

OpenCV 側のソース（珍しくコメント付き）おいときますね。

んじゃ！

こういうの久しぶりすなー。@fladdict がやってた JS アメーバを WebGL (three.js) で↑書いてみた。最初 Raphaël で実装したらライン描画重すぎて死んだ。D3.js だったら、この手のいわゆる N-body simulation に対する最適化 (Quadtree ベースの  Barnes–Hut approximation) も入ってるので、もちょいましかもーと思ったけど、GPU でごりっとやってしまいたくなって three.js で。（World Wide Maze で three.js にかなり慣れたのもある。あ、World Wide Maze のテクノロジーを紹介した記事準備中、しばしまたれよ。）

手法としてはちょい前の、OpenCL とか Cuda とかがなかったころの、GPGPU 的なやつ。texture に位置と速度を保存して、fragment shader でそれを読み取って次の位置と速度を計算して、別の texture に出力。パーティクル描画は vertex shader でその texture から位置を読み取る。てな感じ。パーティクル間の力の計算は何も考えずに総当り。Radeon HD 5750 で 4096 ノードで 60fps よゆうでした。ライン描画してないのもあるけど。（WebGL に geometry shader がなくって、いい実装がおもいつかない、、）

追記：リクエストにお答えして、MacBook Pro とか、DeviceOrientation に対応してるマシン & ブラウザで、筺体を傾けるとそっちに流れる、という仕組みをつけた。;-P