Boids

Boids

• Three.js Examples - Boids
• source code on GitHub
• ソースコード (zip ファイル) -- 上記のソースコードから必要箇所を取り出し, コメントなどを追加したもの

Boid とは

Boids (ボイド) は 鳥の群れをのようなアニメーションを簡単な規則 (アルゴリズム) によって作り出すプログラムです. 発表時は "bird-oid (鳥もどき)" と呼ばれていましたが, 後に短縮され Boid と称されるようになりました.

Boid アルゴリズムでは, それぞれの "鳥" は単純なルールに従って飛ぶだけなのに, 全体としては驚くほど現実の鳥の群れに似た動きを見せます.

Boids のルールとは (基本的には) 以下の3つです. 個々の鳥はこの規則に従って自分の飛び方を決めるわけです.

分離 (Separation)

他の鳥たちとぶつからないように距離をとる.

整列 (Alignment)

他の鳥たちと概ね同じ方向に飛ぶように速度と方向を合わせる.

結合 (Cohesion)

他の鳥たちが集まっている群れの中心方向へ向かうように方向を変える.

これらのルールは, 他の鳥との関係に応じた 力 によって表現されます. 例えば他の鳥に近づきすぎた場合は 反発力 が働く, など. (実際のプログラム上は力の代わりに加速度 を直接操作しています)

このように力を媒介として相互関係を定義することは, 力学的な物理モデルを設計する作業ととても似ています.

参考サイト:

• Boidsとは
• ボイド (人工生命) - Wikipedia

課題

• ソースコードの Boid アルゴリズム部分を見て内容を理解しよう
• ソースコードのその他の部分の内容を理解しよう
• ソースコードの内容を改変して変化を確認しよう. 例えば,
  • 分離/整列/結合の際の力の強さを変えてみる (Boid.js の alignment, cohesion, separation 各関数)
  • 鳥と鳥の間隔を変えてみる (Boid.js の _neighborhoodRadius)
  • 鳥の数を変えてみる (Main.js の init 関数内のループの上限数)
  • 鳥の色を変えてみる (Main.js の init 関数内の Mesh 生成部分)
  • 鳥の羽ばたき方を変えてみる (Main.js の render 関数内)
  • ランダム関数を使ってみる
  • 他のルールを追加する

参考サイト:

• JavaScript ガイド - JavaScript | MDN の 4 以降 (ちょっと訳がわかりにくいかも)
• three.js / documentation

ソースコードの zip ファイルについて

Three.js 公式サイトのサンプル [Three.js Examples - Boids] と同じものです. ソースコードは GitHub で公開 されていますが, そのうち上記のデモをローカル環境で実行するのに必要なファイルだけまとめ, さらにコメントを付けたり読みやすいように改変したりしたものです.

zip ファイルには以下のファイルが含まれています.

• boids/
  • index.html    -- このファイルをブラウザで開いて下さい. すると以下のファイルは自動で読み込まれます
  • js/
    • boids/
      • Main.js    -- メイン (ここからプログラムの実行が開始される)
      • Boid.js    -- 個々の鳥の振る舞いを制御する
      • Bird.js    -- 鳥モデルを表す
    • libs/    -- Three.js などのライブラリが入っているフォルダ

index.html を開いてみましょう. web 上でのデモと同じように表示されるはずです.

そのあとプログラム (js/boids/*.js) を変更してみましょう. 変更を保存した後 chrome で F5 キーを押してページを再読み込みすると変更内容が反映されます. (プログラムを一度にいろいろ変更しようとすると, うまく動かなくなった時にわけがわからなくなってしまうので, 少し変更したらすぐに F5 で確認するようにしましょう)

時間が余ってしまった場合

• Three.js Examples の他のサンプルやそのソースコードを見てみよう
• Games for programmers | CodinGame (日本語紹介記事)