小さいおさかなさんたちが、群れを成してゆらゆら泳いでいるのを見ると、なんだか生命の神秘を感じますよね。そんな様子を、パソコンの画面の中で再現出来たりしたら、癒されそうな気がしませんか。
小魚たちや鳥などの群れの動きを「それっぽく」コンピュータ上に再現するための方法として
Boids (ボイド)
というシミュレーション方法が提案されています。
Boidsはクレイグ・レイノルズというアニメーターが考案したそうです。ちなみに、レイノルズっていっても、あの「レイノルズ数」のオズボーン・レイノルズじゃありません。別人です。
映画のCGなんかでもこのBoidsが使われているそうですよ。
Boids とは
Wikipedia によると
コンピュータ上の鳥オブジェクトに以下の三つの動作規則を与え、多数を同時に動かして群れの振る舞いをシミュレーションする。
分離（Separation）
鳥オブジェクトが他の鳥オブジェクトとぶつからないように距離をとる。
整列（Alignment）
鳥オブジェクトが他の鳥オブジェクトと概ね同じ方向に飛ぶように速度と方向を合わせる。
結合（Cohesion）
鳥オブジェクトが他の鳥オブジェクトが集まっている群れの中心方向へ向かうように方向を変える。
結果としてこのプログラムは驚くほど自然な動きを見せ、単純な規則を用いて群体としての複雑な振る舞いを再現できることを示した。
とのことで、要するに適度に距離を保ちながら群れを成して動かすための自然なルールが見つかったということですね。
Boids SIM (Boids を使ったブラウザゲーム)
今回は、この仕組みを使って、おさかなさん動かして遊ぶ癒し系新感覚ブラウザゲームを作ってみました。
スクリーンショットはこんな感じ。
URLの先ですぐに遊べます。実際触ってみるとわかりますが、結構それっぽい動きをするのですよね。
スコアのツイートもできますので、ハイスコアを競ってみてください（笑）
ゲーム解説
キャラクター
1. 小さい魚（ボイド）
小魚さんです。Boidsシミュレーションの「ボイド」です。こいつらが群れを成して動きます。
プレーヤーの目的は、このボイドたちが敵キャラに食われないようにすることです。
2. 大きい魚（敵キャラ）
食物連鎖の上位に君臨する「カツオ」さんをイメージしています。
ランダムウォークしてきます。ボイドが当たると食われます。
時間がたつと数が増えます。
3. シロナガスクジラ（未実装）
登場させたいと思っていますが、まだ実装していません。。。
操作
ブラウザの領域を青い点でクリックすると、ボイドたちがよってきます。彼らがカツオに食われないように、うまく誘導して安全な場所に避難させましょう。
コード解説？
ソースコードはすべてGitHubのリポジトリ
に上がっていますので、ぜひいじってみてください。
git clone https://github.com/junpeitsuji/boids_sim.git
で落としてきて、boids_sims フォルダの中の index.html をダブルクリックすれば、さっそく遊べます。
Boids のロジック部分のコードは boids.js に書いていますので、そちらを参照ください。
さも、自分で一から書いたように言っていますが、実を言うと主にロジックの部分のコードは、ほぼぜんぶ次のサイトからオマージュらせて頂きました。大変参考になりましたので、紹介させていただきます。
内容も細かく説明したいところですが、あまり余裕がないので、また今度気が向いたときにしたいと思います。ご要望があれば、コメントいただければと思います。
雑感
Boids って私の研究分野のあたりでは、よく見かけるんですよね。研究会でデモとかもよく見るんですけど。よく考えてみたら、一般の人が簡単に遊べるようなレベルで、たとえばゲームみたいなものをあまり見かけないのですよね。
そんなわけで、ブラウザゲームにしてあげたら面白いんじゃないかと思って、作ろうと思い立ったわけです（決して研究に飽きたわけでは・・・）。
しかも、そんなに複雑な理論なわけでもない。
実際のところ、ほとんどのコードは片手間で３時間程度でかけてしまいました。
一番面倒だったのは、canvasの画像を回転させるところと、ソーシャルボタンの設置だったりあします。。。
画像の回転のところは、次のサイトを参考にして作りましたが、結局はトライアンドエラーですね。
forked: canvasで表示した画像を回転する(rotate) - jsdo.it - Share JavaScript, HTML5 and CSS
