Boids 3.1 – コード説明

2016-08-18 / tau / コメントする

概要

Boids 3.1で、いよいよEnemyを導入する。大まかな流れは以下の通り。

Creatureクラスを継承したEnemyCreatureクラスを定義する
EnemyCreature特有の行動はEnemy同士の分離(separation)のみ
BoidCreatureはEnemyCreatureを避ける行動をとる
BoidCreatureの群とEnemyCreatureの群を、それぞれのClusterオブジェクトに登録。

EnemyCreatureクラスの追加

Creatureクラスを継承したEnemyCreatureクラスを追加する。そのメソッド構成は以下の通り。specificBehaviorについては、Enemyに特別な行動ルールはなく、分離(separation)のみ実装している。separation()メソッドはBoidCreatureとまったく同じロジック。

  class EnemyCreature extends Creature
    constructor: (cluster, field) ->

    draw: (ctx) ->

    specificBehavior: (intervalInSec) ->
      @separation()
      ....

    separation: ->
      ....

class EnemyCreature extends Creature

constructor: (cluster, field) ->

draw: (ctx) ->

specificBehavior: (intervalInSec) ->

@separation()

....

separation: ->

....

Controlerクラスの変更

パラメータ関係

Controlerクラスのパラメータ設定用setterを追加(後述)

Enemy発生用メソッドの追加

BoidCreatureクラスと同じ内容で、createEnemyCreature()メソッドを追加

`generate()`メソッドを変更

generate()メソッドで、Boidに加えてEnemyも指定個体数だけ発生させるよう追加。

  class Controler
    ....

    createBoidCreature: ->
      ....

    createEnemyCreature: ->
      cr = new EnemyCreature(@enemyCluster, @field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = Math.random() * (EnemyCreature.vMax - EnemyCreature.vMin) + EnemyCreature.vMin
      ang = Math.random() * Math.PI * 2
      cr.setPosition(x, y)
      cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))
      return cr

    generate: (boidPopulation, enemyPopulation) ->
      @enemyCluster.clearCreatures()
      if enemyPopulation > 0
        for i in [1..enemyPopulation]
          cr = @createEnemyCreature()
          @enemyCluster.addCreature(cr)

      @boidCluster.clearCreatures()
      for i in [1..boidPopulation]
        cr = @createBoidCreature()
        @boidCluster.addCreature(cr)
      # 個体発生後に画面をクリアして描画
      @context.fillStyle = "#000080"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      @boidCluster.draw(@context)
      @enemyCluster.draw(@context)

      ....

class Controler

....

createBoidCreature: ->

....

createEnemyCreature: ->

cr = new EnemyCreature(@enemyCluster, @field)

x = Math.floor(Math.random() * @field.xMax)

y = Math.floor(Math.random() * @field.yMax)

v = Math.random() * (EnemyCreature.vMax - EnemyCreature.vMin) + EnemyCreature.vMin

ang = Math.random() * Math.PI * 2

cr.setPosition(x, y)

cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))

return cr

generate: (boidPopulation, enemyPopulation) ->

@enemyCluster.clearCreatures()

if enemyPopulation > 0

for i in [1..enemyPopulation]

cr = @createEnemyCreature()

@enemyCluster.addCreature(cr)

@boidCluster.clearCreatures()

for i in [1..boidPopulation]

cr = @createBoidCreature()

@boidCluster.addCreature(cr)

# 個体発生後に画面をクリアして描画

@context.fillStyle = "#000080"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

@boidCluster.draw(@context)

@enemyCluster.draw(@context)

....

BoidがEnemyから逃げる動作

BoidCreatureクラスに新たにavoidEnemy()メソッドを追加し、specificBehavior()でこれを呼び出すよう変更。avoidEnemy()メソッドの内容は以下の通り。

基本のロジックはsepration()メソッドと同じ
ただし分離の相手方がEnemyの群になる
敵から回避する角度は、仲間との分離の角度より大きくする(パラメータで与える)

  class BoidCreature extends Creature
    ....

    specificBehavior: (intervalInSec) ->
      @separation()
      @cohesion()
      @alignment()
      @avoidEnemy()
      return

    ....

    avoidEnemy: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(BoidCreature.antiEnemyAngle)
      sn = Math.sin(BoidCreature.antiEnemyAngle)
      # 自身に最も近いEnemyの個体
      @nearestCreature = null

      # Enemyのすべての個体についてサーチ
      for enemy in @enemyCluster.creatures
        # その個体が自分の前方にいるなら
        if enemy.isInFrontOf(this)
          d = Vector.distance(this.pos, enemy.pos)
          # その個体が視野の中にいるなら
          if d <= BoidCreature.antiEnemyFieldDepth
            # 既に個体がセットされていて、今回の個体の方が近ければ入れ替え
            # 最初に認識した個体ならそのままセット
            if @nearestEnemy?
              if d <= Vector.distance(@nearestEnemy.pos, this.pos)
                @nearestEnemy = enemy
            else
              @nearestEnemy = enemy
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestEnemy?
        # Enemyが自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestEnemy.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

class BoidCreature extends Creature

....

specificBehavior: (intervalInSec) ->

@separation()

@cohesion()

@alignment()

@avoidEnemy()

return

....

avoidEnemy: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(BoidCreature.antiEnemyAngle)

sn = Math.sin(BoidCreature.antiEnemyAngle)

# 自身に最も近いEnemyの個体

@nearestCreature = null

# Enemyのすべての個体についてサーチ

for enemy in @enemyCluster.creatures

# その個体が自分の前方にいるなら

if enemy.isInFrontOf(this)

d = Vector.distance(this.pos, enemy.pos)

# その個体が視野の中にいるなら

if d <= BoidCreature.antiEnemyFieldDepth

# 既に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestEnemy?

if d <= Vector.distance(@nearestEnemy.pos, this.pos)

@nearestEnemy = enemy

else

@nearestEnemy = enemy

# 近くの個体が視野内に存在するなら回避計算

if @nearestEnemy?

# Enemyが自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestEnemy.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

実行部分

ページ読み込み時の実行部分は以下の通りで、2つのボタンのクリックに対する処理を定義。

GENERATEボタンが押された時は、BoidCreatureの群とEnemyCreatureの群を発生させる
START/STOPボタンが押されたときは、ControlerクラスのstartAndStop()メソッドを呼び出す

  # Generateボタンが押されたとき、指定された数でBoidとEnemyの群をつくる
  # Boids3.1では、VMax = VMinとして、全個体が同じ速さを持つようにしている
  $("#bd31_generate").click ->
    v = $("#bd31_boid_velocity").val()
    v = Math.max(v, BD31_BOID_VMIN)
    v = Math.min(v, BD31_BOID_VMAX)
    $("#bd31_boid_velocity").val(v)
    controler.setBoidVMax(v)
    controler.setBoidVMin(v)
    boidPop = $("#bd31_boid_population").val()
    boidPop = Math.max(boidPop, BD31_BOID_POPULATION_MIN)
    boidPop = Math.min(boidPop, BD31_BOID_POPULATION_MAX)
    $("#bd31_boid_population").val(boidPop)

    v = $("#bd31_enemy_velocity").val()
    v = Math.max(v, BD31_ENEMY_VMIN)
    v = Math.min(v, BD31_ENEMY_VMAX)
    $("#bd31_enemy_velocity").val(v)
    controler.setEnemyVMax(v)
    controler.setEnemyVMin(v)
    enemyPop = $("#bd31_enemy_population").val()
    enemyPop = Math.max(enemyPop, BD31_ENEMY_POPULATION_MIN)
    enemyPop = Math.min(enemyPop, BD31_ENEMY_POPULATION_MAX)
    $("#bd31_enemy_population").val(enemyPop)

    controler.generate(boidPop, enemyPop)

  # Start/Stopボタンが押されたとき、アニメーションの動作を切り替える
  $("#bd31_start_and_stop").click ->
    controler.startAndStop()

# Generateボタンが押されたとき、指定された数でBoidとEnemyの群をつくる

# Boids3.1では、VMax = VMinとして、全個体が同じ速さを持つようにしている

$("#bd31_generate").click ->

v = $("#bd31_boid_velocity").val()

v = Math.max(v, BD31_BOID_VMIN)

v = Math.min(v, BD31_BOID_VMAX)

$("#bd31_boid_velocity").val(v)

controler.setBoidVMax(v)

controler.setBoidVMin(v)

boidPop = $("#bd31_boid_population").val()

boidPop = Math.max(boidPop, BD31_BOID_POPULATION_MIN)

boidPop = Math.min(boidPop, BD31_BOID_POPULATION_MAX)

$("#bd31_boid_population").val(boidPop)

v = $("#bd31_enemy_velocity").val()

v = Math.max(v, BD31_ENEMY_VMIN)

v = Math.min(v, BD31_ENEMY_VMAX)

$("#bd31_enemy_velocity").val(v)

controler.setEnemyVMax(v)

controler.setEnemyVMin(v)

enemyPop = $("#bd31_enemy_population").val()

enemyPop = Math.max(enemyPop, BD31_ENEMY_POPULATION_MIN)

enemyPop = Math.min(enemyPop, BD31_ENEMY_POPULATION_MAX)

$("#bd31_enemy_population").val(enemyPop)

controler.generate(boidPop, enemyPop)

# Start/Stopボタンが押されたとき、アニメーションの動作を切り替える

$("#bd31_start_and_stop").click ->

controler.startAndStop()

コード全体

HTML

<!DOCTYPE html>

<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Boids 3.1/CoffeeScript</title>
  <script type="text/javascript" src="../lib/jquery.js"></script>
  <script type="text/javascript" src="../lib/taustation_geom2d.js"></script>
</head>


<body>
  <h2>Boids 3.1</h2>

  <script>
  //<![CDATA[
  BD31_WALL_DETECTION_LENGTH = 100;
  BD31_WALL_REPULSION_PARAM = 16;
  BD31_BOID_VMAX = 200;
  BD31_BOID_VMIN = 50;
  BD31_BOID_SIZE = 10;
  BD31_BOID_COLOR = "#FFFFFF";
  BD31_BOID_POPULATION_MIN = 1;
  BD31_BOID_POPULATION_MAX = 300;
  BD31_BOID_SEPARATION_FIELD_DEPTH = 50;
  BD31_BOID_SEPARATION_ANGLE = 12 * Math.PI / 180;
  BD31_COHESION_ANGLE = 5 * Math.PI / 180;
  BD31_ALIGNMENT_FIELD_DEPTH = 250;
  BD31_ALIGNMENT_ANGLE = 5 * Math.PI / 180;
  BD31_ANTI_ENEMY_FIELD_DEPTH = 50;
  BD31_ANTI_ENEMY_ANGLE = 30 * Math.PI / 180;
  BD31_ENEMY_VMAX = 200;
  BD31_ENEMY_VMIN = 50;
  BD31_ENEMY_SIZE = 15;
  BD31_ENEMY_COLOR = "#FF0000";
  BD31_ENEMY_POPULATION_MIN = 0;
  BD31_ENEMY_POPULATION_MAX = 5;
  BD31_ENEMY_SEPARATION_FIELD_DEPTH = 50;
  BD31_ENEMY_SEPARATION_ANGLE = 10 * Math.PI / 180;
  BD31_INTERVAL_SEC = 0.05;
  //]]>
  </script>

  <!-- Boids3.1の入力表示部 -->
  <p>
    <label><code>個体数　　：</code></label><input type="number" id="bd31_boid_population" value="100" min="1" max="300" /><br />
    <label><code>個体の速さ：</code></label><input type="number" id="bd31_boid_velocity" value="100" min="50" max="200" /><br />
    <label><code>敵の数　　：</code></label><input type="number" id="bd31_enemy_population" value="0" min="0" max="5" /><br />
    <label><code>敵の速さ　：</code></label><input type="number" id="bd31_enemy_velocity" value="75" min="50" max="200" /><br />
    <input type="button" id="bd31_generate" value="Generate" />
    <input type="button" id="bd31_start_and_stop" value="Start/Stop" />
  </p>
  <canvas id="bd31_canvas" width="600" height="400" style="background-color: #000080">
  </canvas>

  <script type="text/javascript" src="../coffee/boids/boids_3_1.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Boids 3.1/CoffeeScript</title>

</head>

<body>

<h2>Boids 3.1</h2>

//<![CDATA[

BD31_WALL_DETECTION_LENGTH = 100;

BD31_WALL_REPULSION_PARAM = 16;

BD31_BOID_VMAX = 200;

BD31_BOID_VMIN = 50;

BD31_BOID_SIZE = 10;

BD31_BOID_COLOR = "#FFFFFF";

BD31_BOID_POPULATION_MIN = 1;

BD31_BOID_POPULATION_MAX = 300;

BD31_BOID_SEPARATION_FIELD_DEPTH = 50;

BD31_BOID_SEPARATION_ANGLE = 12 * Math.PI / 180;

BD31_COHESION_ANGLE = 5 * Math.PI / 180;

BD31_ALIGNMENT_FIELD_DEPTH = 250;

BD31_ALIGNMENT_ANGLE = 5 * Math.PI / 180;

BD31_ANTI_ENEMY_FIELD_DEPTH = 50;

BD31_ANTI_ENEMY_ANGLE = 30 * Math.PI / 180;

BD31_ENEMY_VMAX = 200;

BD31_ENEMY_VMIN = 50;

BD31_ENEMY_SIZE = 15;

BD31_ENEMY_COLOR = "#FF0000";

BD31_ENEMY_POPULATION_MIN = 0;

BD31_ENEMY_POPULATION_MAX = 5;

BD31_ENEMY_SEPARATION_FIELD_DEPTH = 50;

BD31_ENEMY_SEPARATION_ANGLE = 10 * Math.PI / 180;

BD31_INTERVAL_SEC = 0.05;

//]]>

</script>

<p>

<label><code>個体の速さ：</code></label><input type="number" id="bd31_boid_velocity" value="100" min="50" max="200" /><br />

</p>

</canvas>

</body>

</html>

CoffeeScript

クラス構成

Boids31 = {}

# パッケージBoids30の本体
do ->
  # 独自クラスのエイリアス
  # パッケージtaustation_geom2d.jsが必要。
  Vector = taustation_geom2d.Vector
  MovingAgent = taustation_geom2d.MovingAgent

  # Boidsが活動する空間のクラス
  # このバージョンでは長方形
  class Field

  # Field内の壁を避けながら移動する一般化Creeatureクラス
  # Boids3.0で、それまでのCreatureクラスをCreatureとBoidCreatureに分けて継承させた
  # Boidsの行動ルールは、このクラスを継承したBoidsCreatureクラスで実装する
  class Creature extends MovingAgent

  # Boidの個体を実現するクラス
  # Boids3.0で、Creatureクラスを継承するように変更
  # 敵を回避するためのプロパティやメソッドを追加
  class BoidCreature extends Creature

  # Boids3.1で導入
  # Boidsに対する「敵」を表すクラス
  class EnemyCreature extends Creature

  # BoidsとEnemyの群を管理するクラスで、以下を保持する
  # - 群を構成する複数の個体
  # - 個体を描画するcanvasのcontextオブジェクト
  class Cluster

  # Boidsアプリケーションの動作を統括するクラス
  # 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当
  class Controler

  # 外部からアクセス可能な名前の設定
  Boids31.Controler = Controler


# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#bd31_canvas")[0]
  context = canvas.getContext("2d") if canvas.getContext
  controler = new Boids31.Controler(canvas, context)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setWallDetectionLength(BD31_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD31_WALL_REPULSION_PARAM)
  controler.setBoidSize(BD31_BOID_SIZE)
  controler.setBoidColor(BD31_BOID_COLOR)
  controler.setBoidSeparationFieldDepth(BD31_BOID_SEPARATION_FIELD_DEPTH)
  controler.setBoidSeparationAngle(BD31_BOID_SEPARATION_ANGLE)
  controler.setCohesionAngle(BD31_COHESION_ANGLE)
  controler.setAlignmentFieldDepth(BD31_ALIGNMENT_FIELD_DEPTH)
  controler.setAlignmentAngle(BD31_ALIGNMENT_ANGLE)
  controler.setAntiEnemyFieldDepth(BD31_ANTI_ENEMY_FIELD_DEPTH)
  controler.setAntiEnemyAngle(BD31_ANTI_ENEMY_ANGLE)
  controler.setEnemySize(BD31_ENEMY_SIZE)
  controler.setEnemyColor(BD31_ENEMY_COLOR)
  controler.setEnemySeparationFieldDepth(BD31_ENEMY_SEPARATION_FIELD_DEPTH)
  controler.setEnemySeparationAngle(BD31_ENEMY_SEPARATION_ANGLE)
  controler.setIntervalSec(BD31_INTERVAL_SEC)

  # Generateボタンが押されたとき、指定された数でBoidとEnemyの群をつくる
  # Boids3.1では、VMax = VMinとして、全個体が同じ速さを持つようにしている
  $("#bd31_generate").click ->
    v = $("#bd31_boid_velocity").val()
    v = Math.max(v, BD31_BOID_VMIN)
    v = Math.min(v, BD31_BOID_VMAX)
    $("#bd31_boid_velocity").val(v)
    controler.setBoidVMax(v)
    controler.setBoidVMin(v)
    boidPop = $("#bd31_boid_population").val()
    boidPop = Math.max(boidPop, BD31_BOID_POPULATION_MIN)
    boidPop = Math.min(boidPop, BD31_BOID_POPULATION_MAX)
    $("#bd31_boid_population").val(boidPop)

    v = $("#bd31_enemy_velocity").val()
    v = Math.max(v, BD31_ENEMY_VMIN)
    v = Math.min(v, BD31_ENEMY_VMAX)
    $("#bd31_enemy_velocity").val(v)
    controler.setEnemyVMax(v)
    controler.setEnemyVMin(v)
    enemyPop = $("#bd31_enemy_population").val()
    enemyPop = Math.max(enemyPop, BD31_ENEMY_POPULATION_MIN)
    enemyPop = Math.min(enemyPop, BD31_ENEMY_POPULATION_MAX)
    $("#bd31_enemy_population").val(enemyPop)

    controler.generate(boidPop, enemyPop)

  # Start/Stopボタンが押されたとき、アニメーションの動作を切り替える
  $("#bd31_start_and_stop").click ->
    controler.startAndStop()

Boids31 = {}

# パッケージBoids30の本体

do ->

# 独自クラスのエイリアス

# パッケージtaustation_geom2d.jsが必要。

Vector = taustation_geom2d.Vector

MovingAgent = taustation_geom2d.MovingAgent

# Boidsが活動する空間のクラス

# このバージョンでは長方形

class Field

# Field内の壁を避けながら移動する一般化Creeatureクラス

# Boids3.0で、それまでのCreatureクラスをCreatureとBoidCreatureに分けて継承させた

# Boidsの行動ルールは、このクラスを継承したBoidsCreatureクラスで実装する

class Creature extends MovingAgent

# Boidの個体を実現するクラス

# Boids3.0で、Creatureクラスを継承するように変更

# 敵を回避するためのプロパティやメソッドを追加

class BoidCreature extends Creature

# Boids3.1で導入

# Boidsに対する「敵」を表すクラス

class EnemyCreature extends Creature

# BoidsとEnemyの群を管理するクラスで、以下を保持する

# - 群を構成する複数の個体

# - 個体を描画するcanvasのcontextオブジェクト

class Cluster

# Boidsアプリケーションの動作を統括するクラス

# 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当

class Controler

# 外部からアクセス可能な名前の設定

Boids31.Controler = Controler

# スクリプトが読み込まれた時の実行部分

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#bd31_canvas")[0]

context = canvas.getContext("2d") if canvas.getContext

controler = new Boids31.Controler(canvas, context)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setWallDetectionLength(BD31_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD31_WALL_REPULSION_PARAM)

controler.setBoidSize(BD31_BOID_SIZE)

controler.setBoidColor(BD31_BOID_COLOR)

controler.setBoidSeparationFieldDepth(BD31_BOID_SEPARATION_FIELD_DEPTH)

controler.setBoidSeparationAngle(BD31_BOID_SEPARATION_ANGLE)

controler.setCohesionAngle(BD31_COHESION_ANGLE)

controler.setAlignmentFieldDepth(BD31_ALIGNMENT_FIELD_DEPTH)

controler.setAlignmentAngle(BD31_ALIGNMENT_ANGLE)

controler.setAntiEnemyFieldDepth(BD31_ANTI_ENEMY_FIELD_DEPTH)

controler.setAntiEnemyAngle(BD31_ANTI_ENEMY_ANGLE)

controler.setEnemySize(BD31_ENEMY_SIZE)

controler.setEnemyColor(BD31_ENEMY_COLOR)

controler.setEnemySeparationFieldDepth(BD31_ENEMY_SEPARATION_FIELD_DEPTH)

controler.setEnemySeparationAngle(BD31_ENEMY_SEPARATION_ANGLE)

controler.setIntervalSec(BD31_INTERVAL_SEC)

# Generateボタンが押されたとき、指定された数でBoidとEnemyの群をつくる

# Boids3.1では、VMax = VMinとして、全個体が同じ速さを持つようにしている

$("#bd31_generate").click ->

v = $("#bd31_boid_velocity").val()

v = Math.max(v, BD31_BOID_VMIN)

v = Math.min(v, BD31_BOID_VMAX)

$("#bd31_boid_velocity").val(v)

controler.setBoidVMax(v)

controler.setBoidVMin(v)

boidPop = $("#bd31_boid_population").val()

boidPop = Math.max(boidPop, BD31_BOID_POPULATION_MIN)

boidPop = Math.min(boidPop, BD31_BOID_POPULATION_MAX)

$("#bd31_boid_population").val(boidPop)

v = $("#bd31_enemy_velocity").val()

v = Math.max(v, BD31_ENEMY_VMIN)

v = Math.min(v, BD31_ENEMY_VMAX)

$("#bd31_enemy_velocity").val(v)

controler.setEnemyVMax(v)

controler.setEnemyVMin(v)

enemyPop = $("#bd31_enemy_population").val()

enemyPop = Math.max(enemyPop, BD31_ENEMY_POPULATION_MIN)

enemyPop = Math.min(enemyPop, BD31_ENEMY_POPULATION_MAX)

$("#bd31_enemy_population").val(enemyPop)

controler.generate(boidPop, enemyPop)

# Start/Stopボタンが押されたとき、アニメーションの動作を切り替える

$("#bd31_start_and_stop").click ->

controler.startAndStop()

Fieldクラス

  # Boidsが活動する空間のクラス
  # このバージョンでは長方形
  class Field
    constructor: (width, height) ->
      @xMin = 0
      @yMin = 0
      @xMax = width
      @yMax = height

# Boidsが活動する空間のクラス

# このバージョンでは長方形

class Field

constructor: (width, height) ->

@xMin = 0

@yMin = 0

@xMax = width

@yMax = height

Creatureクラス

  # Field内の壁を避けながら移動する一般化Creeatureクラス
  # Boids3.0で、それまでのCreatureクラスをCreatureとBoidCreatureに分けて継承させた
  # Boidsの行動ルールは、このクラスを継承したBoidsCreatureクラスで実装する
  class Creature extends MovingAgent
    # 壁の衝突回避を認識する距離
    @wallDetectionLength: 100
    # 反発力パラメータ
    @wallRepulsionParam: 4

    constructor: (field) ->
      super()
      # 加速度ベクトル
      @a = new Vector(0, 0)
      @field = field

    # 個体を動かすメソッド
    # 群を表すClusterクラスのmove()メソッドから呼ばれる
    move: (intervalInSec) ->
      # 壁を避ける
      @wallAvoidance(intervalInSec)

      # このクラスを継承した具象クラスでの行動は、このメソッドをオーバーライド
      @specificBehavior(intervalInSec)

      # 最終的な位置を決定
      @determinePosition(intervalInSec)

    # 壁を避ける行動
    # 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算
    wallAvoidance: (intervalInSec) ->
      if @pos.x <= Creature.wallDetectionLength
        @a.x =
          Creature.wallRepulsionParam *
          (Creature.wallDetectionLength / @pos.x) ** 2
      else if @pos.x >= @field.xMax - Creature.wallDetectionLength
        @a.x =
          -Creature.wallRepulsionParam *
          (Creature.wallDetectionLength / (@field.xMax - @pos.x)) ** 2
      else
        @a.x = 0

      if @pos.y <= Creature.wallDetectionLength
        @a.y =
          Creature.wallRepulsionParam *
          (Creature.wallDetectionLength / @pos.y) ** 2
      else if @pos.y >= @field.yMax - Creature.wallDetectionLength
        @a.y =
          -Creature.wallRepulsionParam *
          (Creature.wallDetectionLength / (@field.yMax - @pos.y)) ** 2
      else
        @a.y = 0

      # 加速度を考慮した速度の変化を計算
      # 速度の絶対値が増え続けないようにキャップで抑える
      # 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、
      # 値/絶対値で符号を得ている
      @v.plusEq(@a.times intervalInSec)
      @v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), BoidCreature.vMax)
      @v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), BoidCreature.vMax)

    # このクラスを継承するサブクラスで、このメソッドをオーバーライドする
    specificBehavior: (intervalInSec) ->
      console.log("specificBehavior() of Creature class is abstract.")

    # Creatureクラスの現在位置と速度から、次の時間ステップでの位置を決定する
    determinePosition: (intervalInSec) ->
    # インターバルの間の移動量を計算
      @pos.plusEq(@v.times intervalInSec)

      # 壁にぶつかった場合は全反射
      if @pos.x <= @field.xMin
        @pos.x = @field.xMin * 2 - @pos.x
        @v.x = -@v.x
      else if @pos.x >= @field.xMax
        @pos.x = @field.xMax * 2 - @pos.x
        @v.x = -@v.x
      if @pos.y <= @field.yMin
        @pos.y = @field.yMin * 2 - @pos.y
        @v.y = -@v.y
      else if @pos.y >= @field.yMax
        @pos.y = @field.yMax * 2 - @pos.y
        @v.y = -@v.y

# Field内の壁を避けながら移動する一般化Creeatureクラス

# Boids3.0で、それまでのCreatureクラスをCreatureとBoidCreatureに分けて継承させた

# Boidsの行動ルールは、このクラスを継承したBoidsCreatureクラスで実装する

class Creature extends MovingAgent

# 壁の衝突回避を認識する距離

@wallDetectionLength: 100

# 反発力パラメータ

@wallRepulsionParam: 4

constructor: (field) ->

super()

# 加速度ベクトル

@a = new Vector(0, 0)

@field = field

# 個体を動かすメソッド

# 群を表すClusterクラスのmove()メソッドから呼ばれる

move: (intervalInSec) ->

# 壁を避ける

@wallAvoidance(intervalInSec)

# このクラスを継承した具象クラスでの行動は、このメソッドをオーバーライド

@specificBehavior(intervalInSec)

# 最終的な位置を決定

@determinePosition(intervalInSec)

# 壁を避ける行動

# 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算

wallAvoidance: (intervalInSec) ->

if @pos.x <= Creature.wallDetectionLength

@a.x =

Creature.wallRepulsionParam *

(Creature.wallDetectionLength / @pos.x) ** 2

else if @pos.x >= @field.xMax - Creature.wallDetectionLength

@a.x =

-Creature.wallRepulsionParam *

(Creature.wallDetectionLength / (@field.xMax - @pos.x)) ** 2

else

@a.x = 0

if @pos.y <= Creature.wallDetectionLength

@a.y =

Creature.wallRepulsionParam *

(Creature.wallDetectionLength / @pos.y) ** 2

else if @pos.y >= @field.yMax - Creature.wallDetectionLength

@a.y =

-Creature.wallRepulsionParam *

(Creature.wallDetectionLength / (@field.yMax - @pos.y)) ** 2

else

@a.y = 0

# 加速度を考慮した速度の変化を計算

# 速度の絶対値が増え続けないようにキャップで抑える

# 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、

# 値/絶対値で符号を得ている

@v.plusEq(@a.times intervalInSec)

@v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), BoidCreature.vMax)

@v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), BoidCreature.vMax)

# このクラスを継承するサブクラスで、このメソッドをオーバーライドする

specificBehavior: (intervalInSec) ->

console.log("specificBehavior() of Creature class is abstract.")

# Creatureクラスの現在位置と速度から、次の時間ステップでの位置を決定する

determinePosition: (intervalInSec) ->

# インターバルの間の移動量を計算

@pos.plusEq(@v.times intervalInSec)

# 壁にぶつかった場合は全反射

if @pos.x <= @field.xMin

@pos.x = @field.xMin * 2 - @pos.x

@v.x = -@v.x

else if @pos.x >= @field.xMax

@pos.x = @field.xMax * 2 - @pos.x

@v.x = -@v.x

if @pos.y <= @field.yMin

@pos.y = @field.yMin * 2 - @pos.y

@v.y = -@v.y

else if @pos.y >= @field.yMax

@pos.y = @field.yMax * 2 - @pos.y

@v.y = -@v.y

BoidCreatureクラス

  # Boidの個体を実現するクラス
  # Boids3.0で、Creatureクラスを継承するように変更
  # 敵を回避するためのプロパティやメソッドを追加
  class BoidCreature extends Creature
    # private ｓtaticなクラス・プロパティ
    @vMax: 0
    @vMin: 0
    # 描画の基本となるサイズと色
    @drawSize: 8
    @color: "#000000"
    # 視野の深さと分離行動の回避角
    @separationFieldDepth: 100
    @separationAngle: 0
    # 結合行動の変化角
    @cohesionAngle: 0
    # 整列高度の視野の長さと変化角
    @alignmentFieldDepth: 100
    @alignmentAngle: 0
    # 敵を回避する視野の深さと変化角
    @antiEnemyFieldDepth: 100
    @antiEnemyAngle: 0

    # 自分が属する群と敵の群への参照を保持する
    constructor: (boidCluster, enemyCluster, field) ->
      super(field)
      @boidCluster = boidCluster
      @enemyCluster = enemyCluster
      @nearestCreature = null

    # 個体を描画するメソッド
    # canvasのコンテキストを引数で受け取る
    draw: (ctx) ->
      v = @v.abs()
      sx = BoidCreature.drawSize * @v.x / v
      sy = BoidCreature.drawSize * @v.y / v
      p = 0.25

      ctx.fillStyle = BoidCreature.color
      ctx.beginPath()
      ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)
      ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)
      ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)
      ctx.closePath()
      ctx.fill()
      return

    # 個体を動かすメソッド
    # 親クラスのメソッドをオーバーライド
    # 親クラスClusterのmove()メソッドから呼ばれる
    # intervalInSecは秒単位のアニメーション・フレームのインターバル
    specificBehavior: (intervalInSec) ->

      # 分離行動(separation)
      @separation()

      # 結合行動(cohesion)
      @cohesion()

      # 整列行動(alignment)
      @alignment()

      # 敵回避
      @avoidEnemy()

      return

    # 分離行動(separation)
    # 前方視角180度内で一定距離内の視野の中で、最も近い個体を避けるよう方向を変える
    # 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。
    separation: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(BoidCreature.separationAngle)
      sn = Math.sin(BoidCreature.separationAngle)
      # 自身に最も近いBoidとEnemyの個体
      @nearestCreature = null
      @nearestEnemy = null

      # 自分以外の群のすべての個体についてサーチ
      for other in @boidCluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= BoidCreature.separationFieldDepth
              # 既に個体がセットされていて、今回の個体の方が近ければ入れ替え
              # 最初に認識した個体ならそのままセット
              if @nearestCreature?
                if d <= Vector.distance(@nearestCreature.pos, this.pos)
                  @nearestCreature = other
              else
                @nearestCreature = other
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestCreature?
        # 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestCreature.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

    # 結合行動(cohesion)
    # 前方視角180度以内の全個体の重心に向かって少し方向を変える
    cohesion: ->
      # 群のうち認識した個体の数とそのグループの重心
      n = 0
      clusterCenter = null
      # 結合行動の方向転換計算用cos/sin
      cs = Math.cos(BoidCreature.cohesionAngle)
      sn = Math.sin(BoidCreature.cohesionAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @boidCluster.creatures
        if other != this
          # 相手が自身の前方にいるなら、その位置を考慮
          if other.isInFrontOf(this)
            n++
            if clusterCenter?
              clusterCenter.plusEq(other.pos)
            else
              clusterCenter = new Vector(other.pos.x, other.pos.y)

      # 前方の相手が1つでも存在すれば、結合行動をとる
      if clusterCenter?
        clusterCenter.divEq(n)
        # 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更
        if clusterCenter.isOnTheRightOf(this)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

    # 整列行動(alignment)
    # 分離行動と同じ視野内の個体群の平均速度に合わせるよう少し方向を変える
    alignment: ->
      vMean = null
      n = 0
      # 整列行動の方向転換計算用cos/sin
      cs = Math.cos(BoidCreature.alignmentAngle)
      sn = Math.sin(BoidCreature.alignmentAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @boidCluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= BoidCreature.alignmentFieldDepth
              # 既に個体が視野内にあれば平均速度の計算を続行
              n++
              if vMean?
                vMean.plusEq(other.v)
              else
                vMean = new Vector(0, 0)
      # 視野内に個体がいるなら速度変更の計算へ
      if vMean?
        vMean.divEq(n)
        if vMean.isHeadingToRightOf(@v)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

    # Boids3.1で追加
    # 敵を回避する行動で、分離行動と同じロジック
    avoidEnemy: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(BoidCreature.antiEnemyAngle)
      sn = Math.sin(BoidCreature.antiEnemyAngle)
      # 自身に最も近いEnemyの個体
      @nearestCreature = null

      # Enemyのすべての個体についてサーチ
      for enemy in @enemyCluster.creatures
        # その個体が自分の前方にいるなら
        if enemy.isInFrontOf(this)
          d = Vector.distance(this.pos, enemy.pos)
          # その個体が視野の中にいるなら
          if d <= BoidCreature.antiEnemyFieldDepth
            # 既に個体がセットされていて、今回の個体の方が近ければ入れ替え
            # 最初に認識した個体ならそのままセット
            if @nearestEnemy?
              if d <= Vector.distance(@nearestEnemy.pos, this.pos)
                @nearestEnemy = enemy
            else
              @nearestEnemy = enemy
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestEnemy?
        # Enemyが自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestEnemy.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

# Boidの個体を実現するクラス

# Boids3.0で、Creatureクラスを継承するように変更

# 敵を回避するためのプロパティやメソッドを追加

class BoidCreature extends Creature

# private ｓtaticなクラス・プロパティ

@vMax: 0

@vMin: 0

# 描画の基本となるサイズと色

@drawSize: 8

@color: "#000000"

# 視野の深さと分離行動の回避角

@separationFieldDepth: 100

@separationAngle: 0

# 結合行動の変化角

@cohesionAngle: 0

# 整列高度の視野の長さと変化角

@alignmentFieldDepth: 100

@alignmentAngle: 0

# 敵を回避する視野の深さと変化角

@antiEnemyFieldDepth: 100

@antiEnemyAngle: 0

# 自分が属する群と敵の群への参照を保持する

constructor: (boidCluster, enemyCluster, field) ->

super(field)

@boidCluster = boidCluster

@enemyCluster = enemyCluster

@nearestCreature = null

# 個体を描画するメソッド

# canvasのコンテキストを引数で受け取る

draw: (ctx) ->

v = @v.abs()

sx = BoidCreature.drawSize * @v.x / v

sy = BoidCreature.drawSize * @v.y / v

p = 0.25

ctx.fillStyle = BoidCreature.color

ctx.beginPath()

ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)

ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)

ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

# 親クラスのメソッドをオーバーライド

# 親クラスClusterのmove()メソッドから呼ばれる

# intervalInSecは秒単位のアニメーション・フレームのインターバル

specificBehavior: (intervalInSec) ->

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

# 整列行動(alignment)

@alignment()

# 敵回避

@avoidEnemy()

return

# 分離行動(separation)

# 前方視角180度内で一定距離内の視野の中で、最も近い個体を避けるよう方向を変える

# 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。

separation: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(BoidCreature.separationAngle)

sn = Math.sin(BoidCreature.separationAngle)

# 自身に最も近いBoidとEnemyの個体

@nearestCreature = null

@nearestEnemy = null

# 自分以外の群のすべての個体についてサーチ

for other in @boidCluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= BoidCreature.separationFieldDepth

# 既に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestCreature?

if d <= Vector.distance(@nearestCreature.pos, this.pos)

@nearestCreature = other

else

@nearestCreature = other

# 近くの個体が視野内に存在するなら回避計算

if @nearestCreature?

# 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestCreature.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# 結合行動(cohesion)

# 前方視角180度以内の全個体の重心に向かって少し方向を変える

cohesion: ->

# 群のうち認識した個体の数とそのグループの重心

n = 0

clusterCenter = null

# 結合行動の方向転換計算用cos/sin

cs = Math.cos(BoidCreature.cohesionAngle)

sn = Math.sin(BoidCreature.cohesionAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @boidCluster.creatures

if other != this

# 相手が自身の前方にいるなら、その位置を考慮

if other.isInFrontOf(this)

n++

if clusterCenter?

clusterCenter.plusEq(other.pos)

else

clusterCenter = new Vector(other.pos.x, other.pos.y)

# 前方の相手が1つでも存在すれば、結合行動をとる

if clusterCenter?

clusterCenter.divEq(n)

# 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更

if clusterCenter.isOnTheRightOf(this)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# 整列行動(alignment)

# 分離行動と同じ視野内の個体群の平均速度に合わせるよう少し方向を変える

alignment: ->

vMean = null

n = 0

# 整列行動の方向転換計算用cos/sin

cs = Math.cos(BoidCreature.alignmentAngle)

sn = Math.sin(BoidCreature.alignmentAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @boidCluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= BoidCreature.alignmentFieldDepth

# 既に個体が視野内にあれば平均速度の計算を続行

n++

if vMean?

vMean.plusEq(other.v)

else

vMean = new Vector(0, 0)

# 視野内に個体がいるなら速度変更の計算へ

if vMean?

vMean.divEq(n)

if vMean.isHeadingToRightOf(@v)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# Boids3.1で追加

# 敵を回避する行動で、分離行動と同じロジック

avoidEnemy: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(BoidCreature.antiEnemyAngle)

sn = Math.sin(BoidCreature.antiEnemyAngle)

# 自身に最も近いEnemyの個体

@nearestCreature = null

# Enemyのすべての個体についてサーチ

for enemy in @enemyCluster.creatures

# その個体が自分の前方にいるなら

if enemy.isInFrontOf(this)

d = Vector.distance(this.pos, enemy.pos)

# その個体が視野の中にいるなら

if d <= BoidCreature.antiEnemyFieldDepth

# 既に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestEnemy?

if d <= Vector.distance(@nearestEnemy.pos, this.pos)

@nearestEnemy = enemy

else

@nearestEnemy = enemy

# 近くの個体が視野内に存在するなら回避計算

if @nearestEnemy?

# Enemyが自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestEnemy.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

EnemyCreatureクラス

  # Boids3.1で導入
  # Boidsに対する「敵」を表すクラス
  class EnemyCreature extends Creature
    # private ｓtaticなクラス・プロパティ
    @vMax: 0
    @vMin: 0
    # 描画の基本となるサイズと色
    @drawSize: 8
    @color: "#000000"
    # 視野の長さ(奥行)と変化角
    @separationFieldDepth: 100
    @separationAngle: 0

    # 自分が属する群への参照を保持する
    constructor: (cluster, field) ->
      super(field)
      @enemyCluster = cluster
      @nearestCreature = null

    # 個体を描画するメソッド
    # canvasのコンテキストを引数で受け取る
    draw: (ctx) ->
      v = @v.abs()
      sx = EnemyCreature.drawSize * @v.x / v
      sy = EnemyCreature.drawSize * @v.y / v
      p = 0.25

      ctx.fillStyle = EnemyCreature.color
      ctx.beginPath()
      ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)
      ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)
      ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)
      ctx.closePath()
      ctx.fill()
      return

    # 個体を動かすメソッド
    # 親クラスのメソッドをオーバーライド
    # 群れを表すClusterクラスのmove()メソッドから呼ばれる
    # intervalInSecは秒単位のアニメーション・フレームのインターバル
    specificBehavior: (intervalInSec) ->
      # Enemy同士の分離行動
      @separation()

    # 分離行動(sepration)
    # BoidCreatureと同じ内容
    # EnemyCreatureとの衝突のみ避ける
    separation: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(EnemyCreature.separationAngle)
      sn = Math.sin(EnemyCreature.separationAngle)
      # 自身に最も近い個体
      @nearestCreature = null

      # 自分以外の群のすべての個体についてサーチ
      for other in @enemyCluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= EnemyCreature.separationFieldDepth
              # 既に個体がセットされていて、今回の個体の方が近ければ入れ替え
              # 最初に認識した個体ならそのままセット
              if @nearestCreature?
                if d <= Vector.distance(@nearestCreature.pos, this.pos)
                  @nearestCreature = other
              else
                @nearestCreature = other
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestCreature?
        # 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestCreature.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

# Boids3.1で導入

# Boidsに対する「敵」を表すクラス

class EnemyCreature extends Creature

# private ｓtaticなクラス・プロパティ

@vMax: 0

@vMin: 0

# 描画の基本となるサイズと色

@drawSize: 8

@color: "#000000"

# 視野の長さ(奥行)と変化角

@separationFieldDepth: 100

@separationAngle: 0

# 自分が属する群への参照を保持する

constructor: (cluster, field) ->

super(field)

@enemyCluster = cluster

@nearestCreature = null

# 個体を描画するメソッド

# canvasのコンテキストを引数で受け取る

draw: (ctx) ->

v = @v.abs()

sx = EnemyCreature.drawSize * @v.x / v

sy = EnemyCreature.drawSize * @v.y / v

p = 0.25

ctx.fillStyle = EnemyCreature.color

ctx.beginPath()

ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)

ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)

ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

# 親クラスのメソッドをオーバーライド

# 群れを表すClusterクラスのmove()メソッドから呼ばれる

# intervalInSecは秒単位のアニメーション・フレームのインターバル

specificBehavior: (intervalInSec) ->

# Enemy同士の分離行動

@separation()

# 分離行動(sepration)

# BoidCreatureと同じ内容

# EnemyCreatureとの衝突のみ避ける

separation: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(EnemyCreature.separationAngle)

sn = Math.sin(EnemyCreature.separationAngle)

# 自身に最も近い個体

@nearestCreature = null

# 自分以外の群のすべての個体についてサーチ

for other in @enemyCluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= EnemyCreature.separationFieldDepth

# 既に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestCreature?

if d <= Vector.distance(@nearestCreature.pos, this.pos)

@nearestCreature = other

else

@nearestCreature = other

# 近くの個体が視野内に存在するなら回避計算

if @nearestCreature?

# 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestCreature.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

Clusterクラス

  # BoidsとEnemyの群を管理するクラスで、以下を保持する
  # - 群を構成する複数の個体
  # - 個体を描画するcanvasのcontextオブジェクト
  class Cluster
    # canvasのcontextをプロパティに登録
    constructor: (context) ->
      @context = context
      @creatures = []
      return

    # すべての個体オブジェクトを群から削除する
    clearCreatures: ->
      @creatures = []

    # 引数で与えられた個体を群に加える
    addCreature: (creature) ->
      @creatures.push(creature)
      return

    # 群の全個体を描画する
    # 群の全個体のdraw()メソッドを呼び出している
    # 画面のクリアはより上位の処理で行う
    draw: (context) ->
      for creature in @creatures
        creature.draw(context)
      return

    # 秒単位のインターバル受け取り、すべての個体を移動させる
    move: (intervalInSec) ->
      for creature in @creatures
        creature.move(intervalInSec)
      return

# BoidsとEnemyの群を管理するクラスで、以下を保持する

# - 群を構成する複数の個体

# - 個体を描画するcanvasのcontextオブジェクト

class Cluster

# canvasのcontextをプロパティに登録

constructor: (context) ->

@context = context

@creatures = []

return

# すべての個体オブジェクトを群から削除する

clearCreatures: ->

@creatures = []

# 引数で与えられた個体を群に加える

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の全個体を描画する

# 群の全個体のdraw()メソッドを呼び出している

# 画面のクリアはより上位の処理で行う

draw: (context) ->

for creature in @creatures

creature.draw(context)

return

# 秒単位のインターバル受け取り、すべての個体を移動させる

move: (intervalInSec) ->

for creature in @creatures

creature.move(intervalInSec)

return

Controlerクラス

  # Boidsアプリケーションの動作を統括するクラス
  # 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当
  class Controler
    # BoidとEnemyの発生個体数の最小値と最大値
    constructor: (canvas, context) ->
      @canvas = canvas
      @context = context
      # Boidsの活動領域
      @field = new Field(canvas.width, canvas.height)
      # Boidの群とEnemyの群のオブジェクト
      @boidCluster = new Cluster(context)
      @enemyCluster = new Cluster(context)
      # アニメーション用のフラグとtimer
      @isRunning = false
      @timer = undefined
      # 秒単位のアニメーション・フレーム間隔
      @intervalInSec = 1 # animation frame interval in seconds

    # 定数として扱うクラス変数を設定するメソッド群
    # 壁を避けるための認識距離と斥力係数
    setWallDetectionLength: (pix) -> Creature.wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature.wallRepulsionParam = param
    # Boid個体の実体に関するパラメータ
    setBoidVMax: (vMax) -> BoidCreature.vMax = vMax
    setBoidVMin: (vMin) -> BoidCreature.vMin = vMin
    setBoidSize: (size) -> BoidCreature.drawSize = size
    setBoidColor: (color) -> BoidCreature.color = color
    # Boid個体の分離・結合・整列に関するパラメータ
    setBoidSeparationFieldDepth: (length) -> BoidCreature.separationFieldDepth = length
    setBoidSeparationAngle: (angle) -> BoidCreature.separationAngle = angle
    setCohesionAngle: (angle) -> BoidCreature.cohesionAngle = angle
    setAlignmentFieldDepth: (length) -> BoidCreature.alignmentFieldDepth = length
    setAlignmentAngle: (angle) -> BoidCreature.alignmentAngle = angle
    # Boid個体が敵を避ける行動のパラメータ
    setAntiEnemyFieldDepth: (length) -> BoidCreature.antiEnemyFieldDepth = length
    setAntiEnemyAngle: (angle) -> BoidCreature.antiEnemyAngle = angle
    # Enemy個体の実体に関するパラメータ
    setEnemyVMax: (vMax) -> EnemyCreature.vMax = vMax
    setEnemyVMin: (vMin) -> EnemyCreature.vMin = vMin
    setEnemySize: (size) -> EnemyCreature.drawSize = size
    setEnemyColor: (color) -> EnemyCreature.color = color
    # Enemy個体の分離に関するパラメータ
    setEnemySeparationFieldDepth: (length) -> EnemyCreature.separationFieldDepth = length
    setEnemySeparationAngle: (angle) -> EnemyCreature.separationAngle = angle
    # アニメーションフレーム間隔
    setIntervalSec: (@intervalInSec) ->

    # 一つのBoidの個体を発生させるメソッド
    # 位置はFieldに収まるよう、速度はvMax～vMinの範囲でランダム
    createBoidCreature: ->
      cr = new BoidCreature(@boidCluster, @enemyCluster, @field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = Math.random() * (BoidCreature.vMax - BoidCreature.vMin) + BoidCreature.vMin
      ang = Math.random() * Math.PI * 2
      cr.setPosition(x, y)
      cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))
      return cr

    # Boids3.1で追加
    # 一つの敵の個体を発生させるメソッド
    # 位置はFieldに収まるよう、速度はvMax～vMinの範囲でランダム
    createEnemyCreature: ->
      cr = new EnemyCreature(@enemyCluster, @field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = Math.random() * (EnemyCreature.vMax - EnemyCreature.vMin) + EnemyCreature.vMin
      ang = Math.random() * Math.PI * 2
      cr.setPosition(x, y)
      cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))
      return cr

    # Boids3.1で変更
    # 引数で指定された数のBoidとEnemyの個体を発生させ、Clusterオブジェクトに登録する
    generate: (boidPopulation, enemyPopulation) ->
      @enemyCluster.clearCreatures()
      if enemyPopulation > 0
        for i in [1..enemyPopulation]
          cr = @createEnemyCreature()
          @enemyCluster.addCreature(cr)

      @boidCluster.clearCreatures()
      for i in [1..boidPopulation]
        cr = @createBoidCreature()
        @boidCluster.addCreature(cr)
      # 個体発生後に画面をクリアして描画
      @context.fillStyle = "#000080"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      @boidCluster.draw(@context)
      @enemyCluster.draw(@context)

    # Boids3.1でEnemyCreatureにも対応
    # アニメーションの開始／停止の切り替え
    startAndStop: () ->
      if @isRunning
        clearInterval(@timer)
        @isRunning = false
      else
        @timer = setInterval =>
          # 移動・再描画前に画面をクリア
          @context.fillStyle = "#000080"
          @context.fillRect(0, 0, @canvas.width, @canvas.height)
          @boidCluster.move(@intervalInSec)
          @boidCluster.draw(@context)
          @enemyCluster.move(@intervalInSec)
          @enemyCluster.draw(@context)
          return
        , @intervalInSec * 1000
        @isRunning = true
      return

100

101

102

103

104

105

106

107

108

109

110

# Boidsアプリケーションの動作を統括するクラス

# 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当

class Controler

# BoidとEnemyの発生個体数の最小値と最大値

constructor: (canvas, context) ->

@canvas = canvas

@context = context

# Boidsの活動領域

@field = new Field(canvas.width, canvas.height)

# Boidの群とEnemyの群のオブジェクト

@boidCluster = new Cluster(context)

@enemyCluster = new Cluster(context)

# アニメーション用のフラグとtimer

@isRunning = false

@timer = undefined

# 秒単位のアニメーション・フレーム間隔

@intervalInSec = 1 # animation frame interval in seconds

# 定数として扱うクラス変数を設定するメソッド群

# 壁を避けるための認識距離と斥力係数

setWallDetectionLength: (pix) -> Creature.wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature.wallRepulsionParam = param

# Boid個体の実体に関するパラメータ

setBoidVMax: (vMax) -> BoidCreature.vMax = vMax

setBoidVMin: (vMin) -> BoidCreature.vMin = vMin

setBoidSize: (size) -> BoidCreature.drawSize = size

setBoidColor: (color) -> BoidCreature.color = color

# Boid個体の分離・結合・整列に関するパラメータ

setBoidSeparationFieldDepth: (length) -> BoidCreature.separationFieldDepth = length

setBoidSeparationAngle: (angle) -> BoidCreature.separationAngle = angle

setCohesionAngle: (angle) -> BoidCreature.cohesionAngle = angle

setAlignmentFieldDepth: (length) -> BoidCreature.alignmentFieldDepth = length

setAlignmentAngle: (angle) -> BoidCreature.alignmentAngle = angle

# Boid個体が敵を避ける行動のパラメータ

setAntiEnemyFieldDepth: (length) -> BoidCreature.antiEnemyFieldDepth = length

setAntiEnemyAngle: (angle) -> BoidCreature.antiEnemyAngle = angle

# Enemy個体の実体に関するパラメータ

setEnemyVMax: (vMax) -> EnemyCreature.vMax = vMax

setEnemyVMin: (vMin) -> EnemyCreature.vMin = vMin

setEnemySize: (size) -> EnemyCreature.drawSize = size

setEnemyColor: (color) -> EnemyCreature.color = color

# Enemy個体の分離に関するパラメータ

setEnemySeparationFieldDepth: (length) -> EnemyCreature.separationFieldDepth = length

setEnemySeparationAngle: (angle) -> EnemyCreature.separationAngle = angle

# アニメーションフレーム間隔

setIntervalSec: (@intervalInSec) ->

# 一つのBoidの個体を発生させるメソッド

# 位置はFieldに収まるよう、速度はvMax～vMinの範囲でランダム

createBoidCreature: ->

cr = new BoidCreature(@boidCluster, @enemyCluster, @field)

x = Math.floor(Math.random() * @field.xMax)

y = Math.floor(Math.random() * @field.yMax)

v = Math.random() * (BoidCreature.vMax - BoidCreature.vMin) + BoidCreature.vMin

ang = Math.random() * Math.PI * 2

cr.setPosition(x, y)

cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))

return cr

# Boids3.1で追加

# 一つの敵の個体を発生させるメソッド

# 位置はFieldに収まるよう、速度はvMax～vMinの範囲でランダム

createEnemyCreature: ->

cr = new EnemyCreature(@enemyCluster, @field)

x = Math.floor(Math.random() * @field.xMax)

y = Math.floor(Math.random() * @field.yMax)

v = Math.random() * (EnemyCreature.vMax - EnemyCreature.vMin) + EnemyCreature.vMin

ang = Math.random() * Math.PI * 2

cr.setPosition(x, y)

cr.setVelocity(v * Math.cos(ang), v * Math.sin(ang))

return cr

# Boids3.1で変更

# 引数で指定された数のBoidとEnemyの個体を発生させ、Clusterオブジェクトに登録する

generate: (boidPopulation, enemyPopulation) ->

@enemyCluster.clearCreatures()

if enemyPopulation > 0

for i in [1..enemyPopulation]

cr = @createEnemyCreature()

@enemyCluster.addCreature(cr)

@boidCluster.clearCreatures()

for i in [1..boidPopulation]

cr = @createBoidCreature()

@boidCluster.addCreature(cr)

# 個体発生後に画面をクリアして描画

@context.fillStyle = "#000080"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

@boidCluster.draw(@context)

@enemyCluster.draw(@context)

# Boids3.1でEnemyCreatureにも対応

# アニメーションの開始／停止の切り替え

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

# 移動・再描画前に画面をクリア

@context.fillStyle = "#000080"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

@boidCluster.move(@intervalInSec)

@boidCluster.draw(@context)

@enemyCluster.move(@intervalInSec)

@enemyCluster.draw(@context)

return

, @intervalInSec * 1000

@isRunning = true

return

↑　Boids 3.0のコード説明へ

Boids 3.0 – コード説明

2016-08-18 / tau / コメントする

概要

Boids 3.xシリーズで敵(Enemy)を導入する準備として、クラス構成の改良などを行った。

Boids 2.xまではBoidだけだった生物の種類に、新たにEnemyという別の種類が加わるが、どちらについても以下の特徴は共通している。

複数個体をClusterオブジェクトにまとめて扱われる
Field内を移動する
壁との衝突を避ける

そこで、これらの特徴に関する部分をCreatureクラスから抜き出したものを新たにCreatureとしてテンプレート化し、Boid特有の動作についてはCreatureクラスを継承したBoidCreatureで実装した。

このほか、BoidとEnemy2つの群を扱うことから、Clusterで処理していた画面の消去処理を外に出すなどの変更を行っている。

Creatureクラスのテンプレート化

Boids 2.3

まず、元となったBoids 2.3のコードの構成を確認する。壁の回避、分離、結合、整列に関するメソッドを定義し、これらをmove()メソッドで呼び出している。

  class Creature extends MovingAgent

    constructor: (cluster, field) ->

    draw: (ctx) ->

    move: (interval_sec) ->
      @wallAvoidance()
      @separation()
      @cohesion()
      @alignment()
      ....

    wallAvoidance: ->

    separation: ->

    cohesion: ->

    alignment: ->

class Creature extends MovingAgent

constructor: (cluster, field) ->

draw: (ctx) ->

move: (interval_sec) ->

@wallAvoidance()

@separation()

@cohesion()

@alignment()

....

wallAvoidance: ->

separation: ->

cohesion: ->

alignment: ->

Boids 3.0

Boids 3.0では2.3のCreatureクラスをCreatureとBoidCreatureに分け、CreatureクラスにはBoidとEnemyに共通する動作を書き、Boidに特有の動作についてはBoidCreatureのメソッドで実装した。

Creatureクラス

Creatureクラスは以下のメソッドを持っている。

wallAvoidance(): 壁との衝突を回避するメソッド。
specificBehavior(): このクラスを継承するクラスごとに特有の動作を記述するためのメソッド。抽象クラスのabstractメソッドに相当し、継承したクラスにおいてその内容が実装される。
determinePosition(): 上記2つのメソッドで計算された位置と速度から、次の時間ステップにおける位置を決定するメソッド。

  class Creature extends MovingAgent
    constructor: (field) ->

    move: (intervalInSec) ->
      @wallAvoidance(intervalInSec)
      @specificBehavior(intervalInSec)
      @determinePosition(intervalInSec)

    wallAvoidance: (intervalInSec) ->

    specificBehavior: (intervalInSec) ->

    determinePosition: (intervalInSec) ->

class Creature extends MovingAgent

constructor: (field) ->

move: (intervalInSec) ->

@wallAvoidance(intervalInSec)

@specificBehavior(intervalInSec)

@determinePosition(intervalInSec)

wallAvoidance: (intervalInSec) ->

specificBehavior: (intervalInSec) ->

determinePosition: (intervalInSec) ->

BoidCreatureクラス

BoidCreatureクラスはCreatureクラスを継承し、specificBehavior()メソッドを実装する。

BoidCreatureクラスで分離、結合、整列に関するメソッドを定義し、specificBehavior()メソッドでそれらを呼び出している。

  class BoidCreature extends Creature

    constructor: (boidCluster, enemyCluster, field) ->

    draw: (ctx) ->

    specificBehavior: (intervalInSec) ->
      @separation()
      @cohesion()
      @alignment()

    separation: ->

    cohesion: ->

    alignment: ->

class BoidCreature extends Creature

constructor: (boidCluster, enemyCluster, field) ->

draw: (ctx) ->

specificBehavior: (intervalInSec) ->

@separation()

@cohesion()

@alignment()

separation: ->

cohesion: ->

alignment: ->

描画処理の変更

Boid 3.xでは、BoidとEnemyという2つの生物をそれぞれ別のClusterオブジェクトに登録して扱う。Boids 2.3までは、アニメーションフレーム再描画のための画面消去処理をClusterクラスのdraw()メソッドで行っていたが、このままだとBoid、Enemyそれぞれの描画の際に画像が消去されて、どちらか一方が画面に表示されなくなる。

  class Cluster
  ....

      draw: ->
      @context.fillStyle = "#e0e0e0"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      for creature in @creatures
        creature.draw(@context)
      return

class Cluster

....

draw: ->

@context.fillStyle = "#e0e0e0"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

for creature in @creatures

creature.draw(@context)

return

そこで、画面消去処理をClusterではなくControlerのgenerate()メソッドとstartAndStop()メソッドに置いた。

  class Controler
    ....

    generate: (boidPopulation) ->
      @boidCluster.clearCreatures()
      for i in [1..boidPopulation]
        cr = @createBoidCreature()
        @boidCluster.addCreature(cr)
      # 個体発生後に画面をクリアして描画
      @context.fillStyle = "#000080"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      @boidCluster.draw(@context)

    # アニメーションの開始／停止の切り替え
    startAndStop: () ->
      if @isRunning
        clearInterval(@timer)
        @isRunning = false
      else
        @timer = setInterval =>
          # 移動・再描画前に画面をクリア
          @context.fillStyle = "#000080"
          @context.fillRect(0, 0, @canvas.width, @canvas.height)
          @boidCluster.move(@intervalInSec)
          @boidCluster.draw(@context)
          return
        , @intervalInSec * 1000
        @isRunning = true
      return

class Controler

....

generate: (boidPopulation) ->

@boidCluster.clearCreatures()

for i in [1..boidPopulation]

cr = @createBoidCreature()

@boidCluster.addCreature(cr)

# 個体発生後に画面をクリアして描画

@context.fillStyle = "#000080"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

@boidCluster.draw(@context)

# アニメーションの開始／停止の切り替え

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

# 移動・再描画前に画面をクリア

@context.fillStyle = "#000080"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

@boidCluster.move(@intervalInSec)

@boidCluster.draw(@context)

return

, @intervalInSec * 1000

@isRunning = true

return

↑　Boids 2.3のコード説明へ

↓　Boids 3.1のコード説明へ

CoffeeScript – Boids 3.x – 天敵

2016-08-18 / tau / コメントする

Boids 3.xの概要

Boids 3.xでは、群として行動している集団に「敵（Enemy)」を投入する。BoidがEnemyを避けるように行動ルールを加え、群としてどのような行動パターンとなるかを確認する。

Boids 3.0 – 基本コード

敵を導入する準備として、Creatureクラスの抽象化・テンプレート化などの大幅な改定を行った。挙動はBoids 2.3と変わらない。

Boids 3.0のコード説明

個体数：
速　さ：

Boids 3.1 – 敵の導入

このバージョンで「敵(Enemy)」を導入する。

Boidの群の個体数に比べて、Enemyの個体数は高々数個程度
Enemyは互いの衝突を分離行動によって避けるが、Boidに対しては意識しない
BoidはEnemyが視野に入ると回避行動をとる
- 回避行動は分離行動より大きい角度で方向を転換させるのみ

デモンストレーションのBoidsの様子は、あたかも小魚が天敵の魚を避けるような行動パターンをとっている。BoidがEnemyを回避するのはEnemyが前方にいるときだけだが、群としての回避パターンはよく再現できている。

Boids 3.1のコード説明

個体数　　：
個体の速さ：
敵の数　　：
敵の速さ　：

Boids Mobile

2016-08-11 / tau / コメントする

個体数　　：
個体の速さ：
敵の数　　：
敵の速さ　：

Lifegame Mobile (CoffeeScript)

2016-08-11 / tau / コメントする

初期パターン：

サイズ：
10　15　20　30　40

表示間隔：
0.1sec　0.2sec　0.5sec　1.0sec　1.5sec

Boids – 群の行動

2016-08-11 / tau / コメントする

動物の群の行動をシミュレートする”Boids”という考え方をCoffeeScriptで組んでみたもの。個体がそれぞれ独立して一定のルールに従って行動する結果、群としての整然とした行動をとるようになる。

スマートフォン用はこちら

個体数　　：
個体の速さ：
敵の数　　：
敵の速さ　：

Boidsの考え方や開発過程はこちら

このアプリケーションのコード説明はこちら

Boids 2.3 – コード説明

2016-08-11 / tau / コメントする

概要

Boids 2.3では、分離(Separation)、結合(Cohesion)に加えて「整列(Alignment)」のルールを導入する。整列行動の考え方は、ここでは以下の通りとした。

前方視野内に個体が存在する場合、それらの個体の平均速度を求める
進行方向を、群の平均速度の方へ向けて少し変更する

なおこのバージョンで、個体生成時にランダムに与える速度の計算方法を変更した。

速度計算の変更

これまで、個体を生成したときに与える速さは、上限値V_MAXを定数としておいて、V_MAX～VMAX/2の範囲で一様乱数を発生させていた。

  class Controler
    .....
    createCreature: ->
      .....
      v = (Math.random() + 1) * Creature._vMax / 2
      .....

class Controler

.....

createCreature: ->

.....

v = (Math.random() + 1) * Creature._vMax / 2

.....

Boids 2.3では、速さの上限値vMAXに加えて下限値vMINをCreatureクラスのクラス変数に持たせて、この間の一様乱数で速さを設定する。

  class Controler
    .....
    createCreature: ->
      .....
      v = Math.random() * (Creature._vMax - Creature._vMin) + Creature._vMin
      .....

class Controler

.....

createCreature: ->

.....

v = Math.random() * (Creature._vMax - Creature._vMin) + Creature._vMin

.....

これに伴って、以下を追加

HTMLの<script>要素に定数V_MINを追加
ControlerクラスにvMinのセッターを追加
セッターを通してV_MINの値をCreature._vMinにセット

  <script>
  //<![CDATA[
  BD23_V_MAX = 100;
  BD23_V_MIN = 0;
  .....
  //]]>
  </script>

//<![CDATA[

BD23_V_MAX = 100;

BD23_V_MIN = 0;

.....

//]]>

</script>

  class Controler
    .....
    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setVMin: (vMin) -> Creature._vMin = vMin
    .....

class Controler

.....

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setVMin: (vMin) -> Creature._vMin = vMin

.....

jQuery ($) ->
  .....
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD23_V_MAX)
  controler.setVMin(BD23_V_MIN)
  .....

jQuery ($) ->

.....

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

.....

整列のアルゴリズム

平均速度の算出

次図において、先方視野内に個体が存在する場合、それらの平均速度v_meanを計算する。

${\bf v}_{\rm mean} = \frac{1}{n} \sum^n_{i=1} {\bf v}_i$

なお視野内の判定は、ベクトルの前後判定と個体との距離計算によっている。

boid2x_alignment_vmean

進路変更

先の図のように、自身の進行方向に対する平均速度の方向によって、以下の手順で進路を変更する。

平均速度ベクトルの向きが自身の進行方向より左右どちらに向いているかを判定
平均速度ベクトルが進行方向より右に向いているなら右へ、左に向いているなら左へ方向を少し変化させる。

これらの考え方はBoids 2.1の分離行動における回避動作と同じ。

コード内容

初期パラメータ定義

HTMLで定義する初期パラメータに、整列に関する以下の変数を追加する。

整列判定の視野の深さ(BD23_ALIGNMENT_FIELD_DEPTH)
整列行動における速度の変更角(BD23_ALIGNMENT_ANGLE)

なお、このバージョンで分離行動の視野の深さの変数名を変更している。

  <script>
  //<![CDATA[
  BD23_V_MAX = 100;
  BD23_V_MIN = 0;
  BD23_CREATURE_SIZE = 10;
  BD23_WALL_DETECTION_LENGTH = 100;
  BD23_WALL_REPULSION_PARAM = 16;
  // boIDS2.3で名前変更：分離行動の視野の深さ
  BD23_SEPARATION_FIELD_DEPTH = 50;
  BD23_SEPARATION_ANGLE = 10 * Math.PI / 180;
  BD23_COHESION_ANGLE = 5 * Math.PI / 180;
  // Boids 2.3で追加：整列行動の視野の深さと速度変更角
  BD23_ALIGNMENT_FIELD_DEPTH = 250;
  BD23_ALIGNMENT_ANGLE = 5 * Math.PI / 180;
  BD23_INTERVAL_SEC = 0.05;
  //]]>
  </script>

//<![CDATA[

BD23_V_MAX = 100;

BD23_V_MIN = 0;

BD23_CREATURE_SIZE = 10;

BD23_WALL_DETECTION_LENGTH = 100;

BD23_WALL_REPULSION_PARAM = 16;

// boIDS2.3で名前変更：分離行動の視野の深さ

BD23_SEPARATION_FIELD_DEPTH = 50;

BD23_SEPARATION_ANGLE = 10 * Math.PI / 180;

BD23_COHESION_ANGLE = 5 * Math.PI / 180;

// Boids 2.3で追加：整列行動の視野の深さと速度変更角

BD23_ALIGNMENT_FIELD_DEPTH = 250;

BD23_ALIGNMENT_ANGLE = 5 * Math.PI / 180;

BD23_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

初期パラメータの保存のため、Creatureクラスのクラス変数を追加する。

  class Creature extends MovingAgent
    # private ｓtaticなクラス・プロパティ
    # ランダムに速度を発生させるときの最大速度と最小速度
    @_vMax: 100
    @_vMin: 50
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4
    # 視野の長さ(奥行)
    @_separationFieldDepth: 100
    # 分離行動の回避角
    @_separationAngle: 0
    # 結合行動の回避角
    @_cohesionAngle: 0
    # 整列高度の視野の長さ(奥行)
    @_alignmentFieldDepth: 100
    # 整列行動の変化角
    @_alignmentAngle: 0
    .....

class Creature extends MovingAgent

# private ｓtaticなクラス・プロパティ

# ランダムに速度を発生させるときの最大速度と最小速度

@_vMax: 100

@_vMin: 50

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_separationFieldDepth: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

# 整列高度の視野の長さ(奥行)

@_alignmentFieldDepth: 100

# 整列行動の変化角

@_alignmentAngle: 0

.....

パラメータのセッター

Controlerクラスに、Creatureクラス変数へのセッターを定義する。

  class Controler
    .....
    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setVMin: (vMin) -> Creature._vMin = vMin
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setSeparationFieldDepth: (length) -> Creature._separationFieldDepth = length
    setSeparationAngle: (angle) -> Creature._separationAngle = angle
    setCohesionAngle: (angle) -> Creature._cohesionAngle = angle
    setAlignmentFieldDepth: (length) -> Creature._alignmentFieldDepth = length
    setAlignmentAngle: (angle) -> Creature._alignmentAngle = angle
    setIntervalSec: (@interval_sec) ->
    .....

class Controler

.....

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setVMin: (vMin) -> Creature._vMin = vMin

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setSeparationFieldDepth: (length) -> Creature._separationFieldDepth = length

setSeparationAngle: (angle) -> Creature._separationAngle = angle

setCohesionAngle: (angle) -> Creature._cohesionAngle = angle

setAlignmentFieldDepth: (length) -> Creature._alignmentFieldDepth = length

setAlignmentAngle: (angle) -> Creature._alignmentAngle = angle

setIntervalSec: (@interval_sec) ->

.....

パラメータのセット

HTMLで定義されたパラメータをControlerオブジェクトのセッターによってセットする。

# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids23_canvas")[0]
  controler = new Boids23.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD23_V_MAX)
  controler.setVMin(BD23_V_MIN)
  controler.setCreatureSize(BD23_CREATURE_SIZE)
  controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)
  controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)
  controler.setSeparationAngle(BD23_SEPARATION_ANGLE)
  controler.setCohesionAngle(BD23_COHESION_ANGLE)
  controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)
  controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)
  controler.setIntervalSec(BD23_INTERVAL_SEC)
  .....

# スクリプトが読み込まれた時の実行部分

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#Boids23_canvas")[0]

controler = new Boids23.Controler(canvas)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

controler.setCreatureSize(BD23_CREATURE_SIZE)

controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)

controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)

controler.setSeparationAngle(BD23_SEPARATION_ANGLE)

controler.setCohesionAngle(BD23_COHESION_ANGLE)

controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)

controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)

controler.setIntervalSec(BD23_INTERVAL_SEC)

.....

Ceatureクラスの変更 – alignment()メソッドの追加

Creatureクラスのmove()メソッドがalignment()メソッドを呼び出すようにする。

  class Creature extends MovingAgent

    .....

    move: (interval_sec) ->
      # 壁を避ける
      @wallAvoidance()

      # 分離行動(separation)
      @separation()

      # 結合行動(cohesion)
      @cohesion()

      # 整列行動(alignment)
      @alignment()

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

# 整列行動(alignment)

@alignment()

.....

alignment()メソッドを新たに定義する。

速度の方向を変化させる回転行列のcos、sinに対応したローカル変数cs、snを定義している
平均速度の参照がvMeanプロパティに保存されるが、視野内に個体が存在しないときはnullとなる
速度の回転方向は、右がマイナス方向、左がプラス方向となることに注意

    # Boids2.3
    # 整列行動(alignment)
    # 分離行動と同じ視野内の個体群の平均速度に合わせるよう速度の方向を変更
    alignment: ->
      # 平均速度計算用
      vMean = null
      n = 0
      # 整列行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._alignmentAngle)
      sn = Math.sin(Creature._alignmentAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= Creature._alignmentFieldDepth
              # 既に個体が視野内にあれば平均速度の計算を続行
              n++
              if vMean?
                vMean.plusEq(other.v)
              else
                vMean = new Vector(0, 0)
      # 視野内に個体がいたなら速度変更の計算へ
      if vMean?
        vMean.divEq(n)
        ###
        @v.plusEq(vMean)
        newV = @v.abs()
        if newV >= Creature._vMax
          @v.timesEq(vMean.abs() / newV)
        ###
        if vMean.isHeadingToRightOf(@v)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

# Boids2.3

# 整列行動(alignment)

# 分離行動と同じ視野内の個体群の平均速度に合わせるよう速度の方向を変更

alignment: ->

# 平均速度計算用

vMean = null

n = 0

# 整列行動の方向転換計算用cos/sin

cs = Math.cos(Creature._alignmentAngle)

sn = Math.sin(Creature._alignmentAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= Creature._alignmentFieldDepth

# 既に個体が視野内にあれば平均速度の計算を続行

n++

if vMean?

vMean.plusEq(other.v)

else

vMean = new Vector(0, 0)

# 視野内に個体がいたなら速度変更の計算へ

if vMean?

vMean.divEq(n)

###

@v.plusEq(vMean)

newV = @v.abs()

if newV >= Creature._vMax

@v.timesEq(vMean.abs() / newV)

###

if vMean.isHeadingToRightOf(@v)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

全コード

以下に、分離、結合、整列の3ルールすべてを適用したBoids 2.3の全コードを示す。

# Boids 2.3
# Boids 2.2に整列行動(alignment)を加える
Boids23 = {}

# パッケージBoids23の本体
do ->
  # 独自クラスのエイリアス
  # パッケージtaustation_geom2d.jsが必要。
  Vector = taustation_geom2d.Vector
  MovingAgent = taustation_geom2d.MovingAgent

  # Boidsが活動する空間のクラス
  # このバージョンでは、canvasオブジェクトの上下左右の座標を持つ長方形
  class Field
    constructor: (canvas) ->
      @xMin = 0
      @yMin = 0
      @xMax = canvas.width
      @yMax = canvas.height


  # Boidsの個体を実現するクラス
  # 位置座標と速度ベクトルの成分を保持する
  # 自らが活動するFieldクラスのオブジェクトへの参照も保持する
  class Creature extends MovingAgent
    # private ｓtaticなクラス・プロパティ
    # ランダムに速度を発生させるときの最大速度と最小速度
    @_vMax: 100
    @_vMin: 50
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4
    # 視野の長さ(奥行)
    @_separationFieldDepth: 100
    # 分離行動の回避角
    @_separationAngle: 0
    # 結合行動の回避角
    @_cohesionAngle: 0
    # 整列高度の視野の長さ(奥行)
    @_alignmentFieldDepth: 100
    # 整列行動の変化角
    @_alignmentAngle: 0

    # コンストラクタの引数にはFieldオブジェクトを渡す
    # 位置、速度、加速度、自分が属する群、Fieldをプロパティとして持つ
    constructor: (cluster, field) ->
      super()
      @a = new Vector(0, 0)
      @cluster = cluster
      @field = field
      @nearestCreature = null

    # 個体を描画するメソッド
    # canvasのコンテキストを引数で受け取る
    draw: (ctx) ->
      v = @v.abs()
      sx = Creature._drawSize * @v.x / v
      sy = Creature._drawSize * @v.y / v
      p = 0.25

      ctx.fillStyle = "black"
      ctx.beginPath()
      ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)
      ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)
      ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)
      ctx.closePath()
      ctx.fill()
      return

    # 個体を動かすメソッド
    # 「群れ」を表すClusterクラスのmove()メソッドから呼ばれる
    # interval_secは秒単位のアニメーション・フレームのインターバル
    move: (interval_sec) ->
      # 壁を避ける
      @wallAvoidance()

      # 分離行動(separation)
      @separation()

      # 結合行動(cohesion)
      @cohesion()

      # 整列行動(alignment)
      @alignment()

      # 加速度を考慮した速度の変化を計算
      # 速度の絶対値が増え続けないようにキャップで抑える
      # 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、
      # 値/絶対値で符号を得ている
      @v.plusEq(@a.times interval_sec)
      @v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), Creature._vMax)
      @v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), Creature._vMax)

      # インターバルの間の移動量を計算
      @pos.plusEq(@v.times interval_sec)

      # 壁にぶつかった場合は全反射
      if @pos.x <= @field.xMin
        @pos.x = @field.xMin * 2 - @pos.x
        @v.x = -@v.x
      else if @pos.x >= @field.xMax
        @pos.x = @field.xMax * 2 - @pos.x
        @v.x = -@v.x
      if @pos.y <= @field.yMin
        @pos.y = @field.yMin * 2 - @pos.y
        @v.y = -@v.y
      else if @pos.y >= @field.yMax
        @pos.y = @field.yMax * 2 - @pos.y
        @v.y = -@v.y

      return

    # 壁を避ける行動
    # 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算
    wallAvoidance: ->
      if @pos.x <= Creature._wallDetectionLength
        @a.x =
          Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / @pos.x) ** 2
      else if @pos.x >= @field.xMax - Creature._wallDetectionLength
        @a.x =
          -Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / (@field.xMax - @pos.x)) ** 2
      else
        @a.x = 0

      if @pos.y <= Creature._wallDetectionLength
        @a.y =
          Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / @pos.y) ** 2
      else if @pos.y >= @field.yMax - Creature._wallDetectionLength
        @a.y =
          -Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / (@field.yMax - @pos.y)) ** 2
      else
        @a.y = 0

    # Boids2.1
    # 分離行動(separation)
    # 前方視角180度内で一定距離内の視野の中で、最も近い個体を避ける
    # 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。
    separation: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._separationAngle)
      sn = Math.sin(Creature._separationAngle)
      # 自身に最も近い個体
      @nearestCreature = null

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= Creature._separationFieldDepth
              # 周世に個体がセットされていて、今回の個体の方が近ければ入れ替え
              # 最初に認識した個体ならそのままセット
              if @nearestCreature?
                if d <= Vector.distance(@nearestCreature.pos, this.pos)
                  @nearestCreature = other
              else
                @nearestCreature = other
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestCreature?
        # 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestCreature.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

    # Boids2.2
    # 結合行動(cohesion)
    # 前方視角180度以内の全個体の重心に向かって速度を少し変更する
    cohesion: ->
      # 群のうち認識した個体の数とそのグループの重心
      n = 0
      clusterCenter = null
      # 結合行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._cohesionAngle)
      sn = Math.sin(Creature._cohesionAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # 相手が自身の前方にいるなら、その位置を考慮
          if other.isInFrontOf(this)
            n++
            if clusterCenter?
              clusterCenter.plusEq(other.pos)
            else
              clusterCenter = new Vector(other.pos.x, other.pos.y)

      # 前方の相手が1つでも存在すれば、結合行動をとる
      if clusterCenter?
        clusterCenter.divEq(n)
        # 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更
        if clusterCenter.isOnTheRightOf(this)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

    # Boids2.3
    # 整列行動(alignment)
    # 分離行動と同じ視野内の個体群の平均速度に合わせるよう速度の方向を変更
    alignment: ->
      # 平均速度計算用
      vMean = null
      n = 0
      # 整列行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._alignmentAngle)
      sn = Math.sin(Creature._alignmentAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= Creature._alignmentFieldDepth
              # 既に個体が視野内にあれば平均速度の計算を続行
              n++
              if vMean?
                vMean.plusEq(other.v)
              else
                vMean = new Vector(0, 0)
      # 視野内に個体がいたなら速度変更の計算へ
      if vMean?
        vMean.divEq(n)
        ###
        @v.plusEq(vMean)
        newV = @v.abs()
        if newV >= Creature._vMax
          @v.timesEq(vMean.abs() / newV)
        ###
        if vMean.isHeadingToRightOf(@v)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy


  # Boidsの群を管理するクラスで、以下を保持する
  # ・群を構成する複数の個体
  # ・個体を描画するcanvasとそのcontextのオブジェクト
  class Cluster
    # コンストラクタはcanvasオブジェクトを受け取り、そのcontextをプロパティに登録
    constructor: (canvas) ->
      @creatures = []
      @canvas = canvas
      @context = @canvas.getContext("2d") if @canvas.getContext
      return

    # すべての個体オブジェクトを群から削除する
    clearCreatures: ->
      @creatures = []

    # 引数で与えられた個体を群に加える
    addCreature: (creature) ->
      @creatures.push(creature)
      return

    # 群の全個体を描画する
    # 描画エリアをクリアした後、群の全個体のdraw()メソッドを呼び出している
    draw: ->
      @context.fillStyle = "#e0e0e0"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      for creature in @creatures
        creature.draw(@context)
      return

    # 秒単位のインターバル受け取り、すべての個体を移動させる
    move: (interval_sec) ->
      for creature in @creatures
        creature.move(interval_sec)
      return


  # Boidsアプリケーションの動作を統括するクラス
  # 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当
  class Controler
    # Boids 1.2からstaticなクラスプロパティとした
    @interval_sec: 1 # animation frame interval in seconds

    constructor: (canvas) ->
      # Boidsの活動領域
      @field = new Field(canvas)
      # 群のオブジェクト
      @cluster = new Cluster(canvas)
      # 個体の数
      @population = 0
      # アニメーション用のフラグとtimer
      @isRunning = false
      @timer = undefined

    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setVMin: (vMin) -> Creature._vMin = vMin
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setSeparationFieldDepth: (length) -> Creature._separationFieldDepth = length
    setSeparationAngle: (angle) -> Creature._separationAngle = angle
    setCohesionAngle: (angle) -> Creature._cohesionAngle = angle
    setAlignmentFieldDepth: (length) -> Creature._alignmentFieldDepth = length
    setAlignmentAngle: (angle) -> Creature._alignmentAngle = angle
    setIntervalSec: (@interval_sec) ->

    # 一つの個体を発生させるメソッド
    # 位置はcanvasに収まるよう、速度はvMax/2～vMaxの範囲でランダム
    createCreature: ->
      cr = new Creature(@cluster, @field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = Math.random() * (Creature._vMax - Creature._vMin) + Creature._vMin
      a = Math.random() * Math.PI * 2
      cr.setPosition(x, y)
      cr.setVelocity(v * Math.cos(a), v * Math.sin(a))
      return cr

    # 引数で指定された数の個体を発生させ、Clusterオブジェクトに登録する
    generate: (@population) ->
      @cluster.clearCreatures()
      for i in [1..@population]
        cr = @createCreature()
        @cluster.addCreature(cr)
      @cluster.draw()

    # アニメーションの開始／停止の切り替え
    # アニメーションはsetInterval()で実装している
    startAndStop: () ->
      if @isRunning
        clearInterval(@timer)
        @isRunning = false
      else
        @timer = setInterval =>
          @cluster.move(@interval_sec)
          @cluster.draw()
          return
        , @interval_sec * 1000
        @isRunning = true
      return

  # 外部からアクセス可能な名前の設定
  Boids23.Controler = Controler


# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids23_canvas")[0]
  controler = new Boids23.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD23_V_MAX)
  controler.setVMin(BD23_V_MIN)
  controler.setCreatureSize(BD23_CREATURE_SIZE)
  controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)
  controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)
  controler.setSeparationAngle(BD23_SEPARATION_ANGLE)
  controler.setCohesionAngle(BD23_COHESION_ANGLE)
  controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)
  controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)
  controler.setIntervalSec(BD23_INTERVAL_SEC)

  # Generateボタンが押されたとき、指定された個体数で群をつくる
  $("#boids23_generate").click ->
    pop = $("#boids23_population").val()
    if pop < 1
      pop = 1
      $("#boids23_population").val(pop)
    controler.generate(pop)

  # Start/Stopボタンが押されたとき、アニメーションの動作を切り替える
  $("#boids23_start_and_stop").click ->
    controler.startAndStop()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

# Boids 2.3

# Boids 2.2に整列行動(alignment)を加える

Boids23 = {}

# パッケージBoids23の本体

do ->

# 独自クラスのエイリアス

# パッケージtaustation_geom2d.jsが必要。

Vector = taustation_geom2d.Vector

MovingAgent = taustation_geom2d.MovingAgent

# Boidsが活動する空間のクラス

# このバージョンでは、canvasオブジェクトの上下左右の座標を持つ長方形

class Field

constructor: (canvas) ->

@xMin = 0

@yMin = 0

@xMax = canvas.width

@yMax = canvas.height

# Boidsの個体を実現するクラス

# 位置座標と速度ベクトルの成分を保持する

# 自らが活動するFieldクラスのオブジェクトへの参照も保持する

class Creature extends MovingAgent

# private ｓtaticなクラス・プロパティ

# ランダムに速度を発生させるときの最大速度と最小速度

@_vMax: 100

@_vMin: 50

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_separationFieldDepth: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

# 整列高度の視野の長さ(奥行)

@_alignmentFieldDepth: 100

# 整列行動の変化角

@_alignmentAngle: 0

# コンストラクタの引数にはFieldオブジェクトを渡す

# 位置、速度、加速度、自分が属する群、Fieldをプロパティとして持つ

constructor: (cluster, field) ->

super()

@a = new Vector(0, 0)

@cluster = cluster

@field = field

@nearestCreature = null

# 個体を描画するメソッド

# canvasのコンテキストを引数で受け取る

draw: (ctx) ->

v = @v.abs()

sx = Creature._drawSize * @v.x / v

sy = Creature._drawSize * @v.y / v

p = 0.25

ctx.fillStyle = "black"

ctx.beginPath()

ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)

ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)

ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

# 「群れ」を表すClusterクラスのmove()メソッドから呼ばれる

# interval_secは秒単位のアニメーション・フレームのインターバル

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

# 整列行動(alignment)

@alignment()

# 加速度を考慮した速度の変化を計算

# 速度の絶対値が増え続けないようにキャップで抑える

# 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、

# 値/絶対値で符号を得ている

@v.plusEq(@a.times interval_sec)

@v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), Creature._vMax)

@v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), Creature._vMax)

# インターバルの間の移動量を計算

@pos.plusEq(@v.times interval_sec)

# 壁にぶつかった場合は全反射

if @pos.x <= @field.xMin

@pos.x = @field.xMin * 2 - @pos.x

@v.x = -@v.x

else if @pos.x >= @field.xMax

@pos.x = @field.xMax * 2 - @pos.x

@v.x = -@v.x

if @pos.y <= @field.yMin

@pos.y = @field.yMin * 2 - @pos.y

@v.y = -@v.y

else if @pos.y >= @field.yMax

@pos.y = @field.yMax * 2 - @pos.y

@v.y = -@v.y

return

# 壁を避ける行動

# 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算

wallAvoidance: ->

if @pos.x <= Creature._wallDetectionLength

@a.x =

Creature._wallRepulsionParam *

(Creature._wallDetectionLength / @pos.x) ** 2

else if @pos.x >= @field.xMax - Creature._wallDetectionLength

@a.x =

-Creature._wallRepulsionParam *

(Creature._wallDetectionLength / (@field.xMax - @pos.x)) ** 2

else

@a.x = 0

if @pos.y <= Creature._wallDetectionLength

@a.y =

Creature._wallRepulsionParam *

(Creature._wallDetectionLength / @pos.y) ** 2

else if @pos.y >= @field.yMax - Creature._wallDetectionLength

@a.y =

-Creature._wallRepulsionParam *

(Creature._wallDetectionLength / (@field.yMax - @pos.y)) ** 2

else

@a.y = 0

# Boids2.1

# 分離行動(separation)

# 前方視角180度内で一定距離内の視野の中で、最も近い個体を避ける

# 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。

separation: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(Creature._separationAngle)

sn = Math.sin(Creature._separationAngle)

# 自身に最も近い個体

@nearestCreature = null

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= Creature._separationFieldDepth

# 周世に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestCreature?

if d <= Vector.distance(@nearestCreature.pos, this.pos)

@nearestCreature = other

else

@nearestCreature = other

# 近くの個体が視野内に存在するなら回避計算

if @nearestCreature?

# 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestCreature.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# Boids2.2

# 結合行動(cohesion)

# 前方視角180度以内の全個体の重心に向かって速度を少し変更する

cohesion: ->

# 群のうち認識した個体の数とそのグループの重心

n = 0

clusterCenter = null

# 結合行動の方向転換計算用cos/sin

cs = Math.cos(Creature._cohesionAngle)

sn = Math.sin(Creature._cohesionAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# 相手が自身の前方にいるなら、その位置を考慮

if other.isInFrontOf(this)

n++

if clusterCenter?

clusterCenter.plusEq(other.pos)

else

clusterCenter = new Vector(other.pos.x, other.pos.y)

# 前方の相手が1つでも存在すれば、結合行動をとる

if clusterCenter?

clusterCenter.divEq(n)

# 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更

if clusterCenter.isOnTheRightOf(this)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# Boids2.3

# 整列行動(alignment)

# 分離行動と同じ視野内の個体群の平均速度に合わせるよう速度の方向を変更

alignment: ->

# 平均速度計算用

vMean = null

n = 0

# 整列行動の方向転換計算用cos/sin

cs = Math.cos(Creature._alignmentAngle)

sn = Math.sin(Creature._alignmentAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= Creature._alignmentFieldDepth

# 既に個体が視野内にあれば平均速度の計算を続行

n++

if vMean?

vMean.plusEq(other.v)

else

vMean = new Vector(0, 0)

# 視野内に個体がいたなら速度変更の計算へ

if vMean?

vMean.divEq(n)

###

@v.plusEq(vMean)

newV = @v.abs()

if newV >= Creature._vMax

@v.timesEq(vMean.abs() / newV)

###

if vMean.isHeadingToRightOf(@v)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

# Boidsの群を管理するクラスで、以下を保持する

# ・群を構成する複数の個体

# ・個体を描画するcanvasとそのcontextのオブジェクト

class Cluster

# コンストラクタはcanvasオブジェクトを受け取り、そのcontextをプロパティに登録

constructor: (canvas) ->

@creatures = []

@canvas = canvas

@context = @canvas.getContext("2d") if @canvas.getContext

return

# すべての個体オブジェクトを群から削除する

clearCreatures: ->

@creatures = []

# 引数で与えられた個体を群に加える

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の全個体を描画する

# 描画エリアをクリアした後、群の全個体のdraw()メソッドを呼び出している

draw: ->

@context.fillStyle = "#e0e0e0"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

for creature in @creatures

creature.draw(@context)

return

# 秒単位のインターバル受け取り、すべての個体を移動させる

move: (interval_sec) ->

for creature in @creatures

creature.move(interval_sec)

return

# Boidsアプリケーションの動作を統括するクラス

# 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当

class Controler

# Boids 1.2からstaticなクラスプロパティとした

@interval_sec: 1 # animation frame interval in seconds

constructor: (canvas) ->

# Boidsの活動領域

@field = new Field(canvas)

# 群のオブジェクト

@cluster = new Cluster(canvas)

# 個体の数

@population = 0

# アニメーション用のフラグとtimer

@isRunning = false

@timer = undefined

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setVMin: (vMin) -> Creature._vMin = vMin

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setSeparationFieldDepth: (length) -> Creature._separationFieldDepth = length

setSeparationAngle: (angle) -> Creature._separationAngle = angle

setCohesionAngle: (angle) -> Creature._cohesionAngle = angle

setAlignmentFieldDepth: (length) -> Creature._alignmentFieldDepth = length

setAlignmentAngle: (angle) -> Creature._alignmentAngle = angle

setIntervalSec: (@interval_sec) ->

# 一つの個体を発生させるメソッド

# 位置はcanvasに収まるよう、速度はvMax/2～vMaxの範囲でランダム

createCreature: ->

cr = new Creature(@cluster, @field)

x = Math.floor(Math.random() * @field.xMax)

y = Math.floor(Math.random() * @field.yMax)

v = Math.random() * (Creature._vMax - Creature._vMin) + Creature._vMin

a = Math.random() * Math.PI * 2

cr.setPosition(x, y)

cr.setVelocity(v * Math.cos(a), v * Math.sin(a))

return cr

# 引数で指定された数の個体を発生させ、Clusterオブジェクトに登録する

generate: (@population) ->

@cluster.clearCreatures()

for i in [1..@population]

cr = @createCreature()

@cluster.addCreature(cr)

@cluster.draw()

# アニメーションの開始／停止の切り替え

# アニメーションはsetInterval()で実装している

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

@cluster.move(@interval_sec)

@cluster.draw()

return

, @interval_sec * 1000

@isRunning = true

return

# 外部からアクセス可能な名前の設定

Boids23.Controler = Controler

# スクリプトが読み込まれた時の実行部分

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#Boids23_canvas")[0]

controler = new Boids23.Controler(canvas)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

controler.setCreatureSize(BD23_CREATURE_SIZE)

controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)

controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)

controler.setSeparationAngle(BD23_SEPARATION_ANGLE)

controler.setCohesionAngle(BD23_COHESION_ANGLE)

controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)

controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)

controler.setIntervalSec(BD23_INTERVAL_SEC)

# Generateボタンが押されたとき、指定された個体数で群をつくる

$("#boids23_generate").click ->

pop = $("#boids23_population").val()

if pop < 1

pop = 1

$("#boids23_population").val(pop)

controler.generate(pop)

# Start/Stopボタンが押されたとき、アニメーションの動作を切り替える

$("#boids23_start_and_stop").click ->

controler.startAndStop()

↑　Boids 2.2のコード説明へ

↑　Boids 3.0のコード説明へ

Boids 2.2 – コード説明

2016-08-10 / tau / コメントする

概要

Boids 2.2では、分離(Separation)に加えて「結合(Cohesion)」のルールを導入する。結合行動の考え方は、ここでは以下の通りとした。

前方視角内に個体が存在する場合、それらの重心位置を求める
進行方向を、重心の方へ向けて少し変更する

結合のアルゴリズム

重心の算出

次図において、進行方向に直角な直線hより前方側の個体が存在する場合、それらの重心位置gを計算する。

${\bf g} = \frac{1}{n} \sum^n_{i=1} {\bf p}_i$

なお、視野角の前方判定はベクトルの前後判定によって行っている。

boid2x_cohesion_gravity_center

進路変更

先の図のように、自身の進行方向に対する群の重心の位置によって、以下の手順で進路を変更する。

重心位置が自身の進行方向に対して左右どちら側にあるかを判定
重心位置がが進行方向より右側にあるなら右へ、左側にあるなら左へ方向を少し変化させる。

これらの考え方はBoids 2.1の分離行動における回避動作と同じ。

コード内容

初期パラメータ定義

HTMLで定義する初期パラメータに、結合に関する以下の変数を追加する。

結合の進行方向の変化(BD22_COHESION_ANGLE)

  <script>
  //<![CDATA[
  BD22_V_MAX = 100;
  BD22_CREATURE_SIZE = 10;
  BD22_WALL_DETECTION_LENGTH = 100;
  BD22_WALL_REPULSION_PARAM = 16;
  BD22_VIEW_FIELD_LENGTH = 50;
  BD22_SEPARATION_ANGLE = 10 * Math.PI / 180;
  // Boids 2.2で追加：結合行動の速度の向きを変更する角
  BD22_COHESION_ANGLE = 5 * Math.PI / 180;
  BD22_INTERVAL_SEC = 0.05;
  //]]>
  </script>

//<![CDATA[

BD22_V_MAX = 100;

BD22_CREATURE_SIZE = 10;

BD22_WALL_DETECTION_LENGTH = 100;

BD22_WALL_REPULSION_PARAM = 16;

BD22_VIEW_FIELD_LENGTH = 50;

BD22_SEPARATION_ANGLE = 10 * Math.PI / 180;

// Boids 2.2で追加：結合行動の速度の向きを変更する角

BD22_COHESION_ANGLE = 5 * Math.PI / 180;

BD22_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

初期パラメータの保存のため、Creatureクラスのクラス変数を追加する。

  class Creature extends MovingAgent
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4
    # 視野の長さ(奥行)
    @_viewFieldLength: 100
    # 分離行動の回避角
    @_separationAngle: 0
    # 結合行動の回避角
    @_cohesionAngle: 0

class Creature extends MovingAgent

# private ｓtaticなクラス・プロパティ

# 最大速度

@_vMax: 100

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_viewFieldLength: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

パラメータのセッター

Controlerクラスに、Creatureクラス変数へのセッターを定義する。

  class Controler

    .....

    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setViewFieldLength: (length) -> Creature._viewFieldLength = length
    setSeparationAngle: (angle) -> Creature._separationAngle = angle
    setCohesionAngle: (angle) -> Creature._cohesionAngle = angle
    setIntervalSec: (@interval_sec) ->

class Controler

.....

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setViewFieldLength: (length) -> Creature._viewFieldLength = length

setSeparationAngle: (angle) -> Creature._separationAngle = angle

setCohesionAngle: (angle) -> Creature._cohesionAngle = angle

setIntervalSec: (@interval_sec) ->

パラメータのセット

HTMLで定義されたパラメータをControlerオブジェクトのセッターによってセットする。

# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids22_canvas")[0]
  controler = new Boids22.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD22_V_MAX)
  controler.setCreatureSize(BD22_CREATURE_SIZE)
  controler.setWallDetectionLength(BD22_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD22_WALL_REPULSION_PARAM)
  controler.setViewFieldLength(BD22_VIEW_FIELD_LENGTH)
  controler.setSeparationAngle(BD22_SEPARATION_ANGLE)
  controler.setCohesionAngle(BD22_COHESION_ANGLE)
  controler.setIntervalSec(BD22_INTERVAL_SEC)

  .....

# スクリプトが読み込まれた時の実行部分

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#Boids22_canvas")[0]

controler = new Boids22.Controler(canvas)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD22_V_MAX)

controler.setCreatureSize(BD22_CREATURE_SIZE)

controler.setWallDetectionLength(BD22_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD22_WALL_REPULSION_PARAM)

controler.setViewFieldLength(BD22_VIEW_FIELD_LENGTH)

controler.setSeparationAngle(BD22_SEPARATION_ANGLE)

controler.setCohesionAngle(BD22_COHESION_ANGLE)

controler.setIntervalSec(BD22_INTERVAL_SEC)

.....

Ceatureクラスの変更 – cohesion()メソッドの追加

Creatureクラスのmove()メソッドがcohesion()メソッドを呼び出すようにする。

  class Creature extends MovingAgent

    .....

    move: (interval_sec) ->
      # 壁を避ける
      @wallAvoidance()

      # 分離行動(separation)
      @separation()

      # 結合行動(cohesion)
      @cohesion()

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

.....

coheion()メソッドを新たに定義する。

速度の方向を変化させる回転行列のcos、sinに対応したローカル変数cs、snを定義している
重心位置への参照がclusterCenterプロパティに保存されるが、視野内に個体が存在しないときはnullとなる
速度の回転方向は、右がマイナス方向、左がプラス方向となることに注意

    # Boids2.2
    # 結合行動(cohesion)
    # 前方視角180度以内の全個体の重心に向かって速度を少し変更する
    cohesion: ->
      # 群のうち認識した個体の数とそのグループの重心
      n = 0
      clusterCenter = null
      # 結合行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._cohesionAngle)
      sn = Math.sin(Creature._cohesionAngle)

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # 相手が自身の前方にいるなら、その位置を考慮
          if other.isInFrontOf(this)
            n++
            if clusterCenter?
              clusterCenter.plusEq(other.pos)
            else
              clusterCenter = new Vector(other.pos.x, other.pos.y)

      # 前方の相手が1つでも存在すれば、結合行動をとる
      if clusterCenter?
        clusterCenter.divEq(n)
        # 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更
        if clusterCenter.isOnTheRightOf(this)
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        else
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

# Boids2.2

# 結合行動(cohesion)

# 前方視角180度以内の全個体の重心に向かって速度を少し変更する

cohesion: ->

# 群のうち認識した個体の数とそのグループの重心

n = 0

clusterCenter = null

# 結合行動の方向転換計算用cos/sin

cs = Math.cos(Creature._cohesionAngle)

sn = Math.sin(Creature._cohesionAngle)

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# 相手が自身の前方にいるなら、その位置を考慮

if other.isInFrontOf(this)

n++

if clusterCenter?

clusterCenter.plusEq(other.pos)

else

clusterCenter = new Vector(other.pos.x, other.pos.y)

# 前方の相手が1つでも存在すれば、結合行動をとる

if clusterCenter?

clusterCenter.divEq(n)

# 重心が自分の右にあれば左に、自分の左にあれば右に進路を変更

if clusterCenter.isOnTheRightOf(this)

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

else

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

↑　Boids 2.1のコード説明へ

↓　Boids 2.3のコード説明へ

Boids 2.1 – コード説明

2016-08-10 / tau / コメントする

概要

Boids 2.1では、いよいよBoidsのルールの一つ「分離(Separation)」を導入する。分離行動の考え方は、ここでは以下の通りとした。

視野内に個体が存在するとき、最も距離が近い個体を選択する
その直近個体と反対方向に、自身の進行方向を変化させる

分離のアルゴリズム

視野

個体は自身の進行方向の左右90度以内、180度の視野角を持ち、その視野角内で一定距離以内の個体に反応するものとする。

視野内外の判定の概念は下図の通りで、個体Pは視野内と判定され、個体Qは視野外として無視される。

boids2x_perspective

視野内外判定の手順は以下の通り。

前後判定の方法により、視野角内の個体があればそれを選定
その個体について $\overline{\rm SP}} \leqq l$ ならば次へ進む
その個体が最も近いなら入れ替え

回避動作

回避対象が自身の進路の右にいるなら左に、進路の左にいるなら右に、方向ベクトルの角度を変更する。進路変更の角度は予め設定しておく。

boids2x_separation_avoidance

回避動作の手順は以下の通り。

左右判定の方法により、回避対象が進行方向の左右どちらにあるかを判定
回避対象が進行方向の左にあるなら右へ、右にあるなら左へ方向を少し変化させる。

ここで方向ベクトルの変化量θは予め設定しておき、これに対応するcos、sinによる回転行列を適用して方向を変える。cos、sinの値は、できるだけ計算量が少なくなるようにする。

コード内容

初期パラメータ定義

HTMLで定義する初期パラメータに、分離に関する以下の変数を追加する。

分離に関する視野の深さ(BD21_VIEW_FIELD_LENGTH)
回避行動の進行方向の変化(BD21_SEPARATION_ANGLE)

  <script>
  //<![CDATA[
  BD21_V_MAX = 100;
  BD21_CREATURE_SIZE = 10;
  BD21_WALL_DETECTION_LENGTH = 100;
  BD21_WALL_REPULSION_PARAM = 16;
  // Boids 2.1で追加：視野の深さ
  BD21_VIEW_FIELD_LENGTH = 100;
  // Boids 2.1で追加：分離行動の速度の向きを変更する角
  BD21_SEPARATION_ANGLE = 10 * Math.PI / 180;
  BD21_INTERVAL_SEC = 0.05;
  //]]>
  </script>

//<![CDATA[

BD21_V_MAX = 100;

BD21_CREATURE_SIZE = 10;

BD21_WALL_DETECTION_LENGTH = 100;

BD21_WALL_REPULSION_PARAM = 16;

// Boids 2.1で追加：視野の深さ

BD21_VIEW_FIELD_LENGTH = 100;

// Boids 2.1で追加：分離行動の速度の向きを変更する角

BD21_SEPARATION_ANGLE = 10 * Math.PI / 180;

BD21_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

初期パラメータの保存のため、Creatureクラスのクラス変数を追加する。

  class Creature extends taustation_geom2d.MovingAgent
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4
    # 視野の長さ(奥行)
    @_viewFieldLength: 100
    # 分離行動の回避計算用
    @_separationAngle: 0

class Creature extends taustation_geom2d.MovingAgent

# private ｓtaticなクラス・プロパティ

# 最大速度

@_vMax: 100

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_viewFieldLength: 100

# 分離行動の回避計算用

@_separationAngle: 0

パラメータのセッター

Controlerクラスに、Creatureクラス変数へのセッターを定義する。

  class Controler

    .....

    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setViewFieldLength: (length) -> Creature._viewFieldLength = length
    setSeparationAngle: (angle) -> Creature._separationAngle = angle
    setIntervalSec: (@interval_sec) ->

class Controler

.....

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setViewFieldLength: (length) -> Creature._viewFieldLength = length

setSeparationAngle: (angle) -> Creature._separationAngle = angle

setIntervalSec: (@interval_sec) ->

パラメータのセット

HTMLで定義されたパラメータをControlerオブジェクトのセッターによってセットする。

jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids21_canvas")[0]
  controler = new Boids21.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD21_V_MAX)
  controler.setCreatureSize(BD21_CREATURE_SIZE)
  controler.setWallDetectionLength(BD21_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD21_WALL_REPULSION_PARAM)
  controler.setViewFieldLength(BD21_VIEW_FIELD_LENGTH)
  controler.setSeparationAngle(BD21_SEPARATION_ANGLE)
  controler.setIntervalSec(BD21_INTERVAL_SEC)

  # Generateボタンが押されたとき、指定された個体数で群をつくる
  $("#boids21_generate").click ->
    pop = $("#boids21_population").val()
    if pop < 1
      pop = 1
      $("#boids21_population").val(pop)
    controler.generate(pop)

  # Start/Stopボタンが押されたとき、アニメーションの動作を切り替える
  $("#boids21_start_and_stop").click ->
    controler.startAndStop()

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#Boids21_canvas")[0]

controler = new Boids21.Controler(canvas)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD21_V_MAX)

controler.setCreatureSize(BD21_CREATURE_SIZE)

controler.setWallDetectionLength(BD21_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD21_WALL_REPULSION_PARAM)

controler.setViewFieldLength(BD21_VIEW_FIELD_LENGTH)

controler.setSeparationAngle(BD21_SEPARATION_ANGLE)

controler.setIntervalSec(BD21_INTERVAL_SEC)

# Generateボタンが押されたとき、指定された個体数で群をつくる

$("#boids21_generate").click ->

pop = $("#boids21_population").val()

if pop < 1

pop = 1

$("#boids21_population").val(pop)

controler.generate(pop)

# Start/Stopボタンが押されたとき、アニメーションの動作を切り替える

$("#boids21_start_and_stop").click ->

controler.startAndStop()

Ceatureクラスの変更 – separation()メソッドの追加

Creatureクラスのmove()メソッドがseparation()メソッドを呼び出すようにする。

  class Creature extends MovingAgent

    .....

    move: (interval_sec) ->
      # 壁を避ける
      @wallAvoidance()

      # 分離行動(separation)
      @separation()

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

.....

separation()メソッドを新たに定義する。

速度の方向を変化させる回転行列のcos、sinに対応したローカル変数cs、snを定義している
最も近い個体への参照がnearestCreatureプロパティに保存されるが、視野内に個体が存在しないときはnullとなる
速度の回転方向は、右がマイナス方向、左がプラス方向となることに注意

    # Boids2.1
    # 分離行動(separation)
    # 前方視角180度内で一定距離内の視野の中で、最も近い個体を避ける
    # 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。
    separation: ->
      # 回避行動の方向転換計算用cos/sin
      cs = Math.cos(Creature._separationAngle)
      sn = Math.sin(Creature._separationAngle)
      # 自身に最も近い個体
      @nearestCreature = null

      # 自分以外の群のすべての個体についてサーチ
      for other in @cluster.creatures
        if other != this
          # その個体が自分の前方にいるなら
          if other.isInFrontOf(this)
            d = Vector.distance(this.pos, other.pos)
            # その個体が視野の中にいるなら
            if d <= Creature._viewFieldLength
              # 既に個体がセットされていて、今回の個体の方が近ければ入れ替え
              # 最初に認識した個体ならそのままセット
              if @nearestCreature?
                if d <= Vector.distance(@nearestCreature.pos, this.pos)
                  @nearestCreature = other
              else
                @nearestCreature = other
      # 近くの個体が視野内に存在するなら回避計算
      if @nearestCreature?
        # 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更
        if @nearestCreature.isOnTheRightOf(this)
          vx = @v.x * cs - @v.y * sn
          vy = @v.x * sn + @v.y * cs
        else
          vx =  @v.x * cs + @v.y * sn
          vy = -@v.x * sn + @v.y * cs
        @v.x = vx
        @v.y = vy

# Boids2.1

# 分離行動(separation)

# 前方視角180度内で一定距離内の視野の中で、最も近い個体を避ける

# 相手方の速度の向きには関係なく、相手側と反対方向に速度の向きをを少し変更する。

separation: ->

# 回避行動の方向転換計算用cos/sin

cs = Math.cos(Creature._separationAngle)

sn = Math.sin(Creature._separationAngle)

# 自身に最も近い個体

@nearestCreature = null

# 自分以外の群のすべての個体についてサーチ

for other in @cluster.creatures

if other != this

# その個体が自分の前方にいるなら

if other.isInFrontOf(this)

d = Vector.distance(this.pos, other.pos)

# その個体が視野の中にいるなら

if d <= Creature._viewFieldLength

# 既に個体がセットされていて、今回の個体の方が近ければ入れ替え

# 最初に認識した個体ならそのままセット

if @nearestCreature?

if d <= Vector.distance(@nearestCreature.pos, this.pos)

@nearestCreature = other

else

@nearestCreature = other

# 近くの個体が視野内に存在するなら回避計算

if @nearestCreature?

# 相手が自分の右にいるなら左へ、自分の左にいるなら右へ向きを変更

if @nearestCreature.isOnTheRightOf(this)

vx = @v.x * cs - @v.y * sn

vy = @v.x * sn + @v.y * cs

else

vx = @v.x * cs + @v.y * sn

vy = -@v.x * sn + @v.y * cs

@v.x = vx

@v.y = vy

↑　Boids 2.0のコード説明へ

↓　Boids 2.2のコード説明へ

Boids 2.0 – コード説明

2016-08-10 / tau / コメントする

概要

Boids 2.0は以後のBoids 2.xシリーズの土台となるもので、Boids 1.2に対して以下を変更している。

位置と速度を持ったCreatureクラスのうち、位置と速度の保持、互いの位置関係の判定に関する性質を汎用のMovingAgentクラスとしてまとめ、taustation-geo2dパッケージに含めた
初期パラメータをHTMLのスクリプトに置き、再コンパイルしなくてもパラメータを変更しやすくなるようにした。

MovingAgentクラスの導入

CreatureクラスはMovingAgentクラスを継承し、それらのメソッドを利用する。

  class Creature extends MovingAgent

1	class Creature extends MovingAgent

MovingAgentのプロパティを継承するため、位置と速度の指定が変更。たとえばCreatureクラスのインスタンスがcreatureだとすると、以下のようになる。

位置のx座標は、creature:pos.x
位置のy座標は、creature:pos.y
速度のx成分は、creature:v.x
速度のy成分は、creature:v.y

HTMLでの初期パラメータ設定

概要

各種パラメータの設定を、CoffeeScriptの再コンパイルやアップロードをしなくても、HTMLで設定・変更できるようにした。

必要なパラメータをHTMLのスクリプトで定義
以下のパラメータをセットするセッターを、全てControlerクラスのメソッドとして集約
- 個体に関するパラメータはCreatureのクラス変数
- アニメーションのインターバルはControlerクラスのプロパティ
スクリプト読み込み時に、Controlerオブジェクトのセッターにグローバル・パラメータ変数を渡してパラメータ設定

初期パラメータ定義

HTMLにパラメータをグローバル変数としてスクリプト記述。

注意点は、スクリプトはJavascriptにコンパイルされているので、直接読み込まれるグローバル変数もJavascriptの変数として書くこと。特に各定義の文末にセミコロン(;)を付けること。

  <script>
  //<![CDATA[
  BD20_V_MAX = 100;
  BD20_CREATURE_SIZE = 10;
  BD20_WALL_DETECTION_LENGTH = 100;
  BD20_WALL_REPULSION_PARAM = 16;
  BD20_INTERVAL_SEC = 0.05;
  //]]>
  </script>

//<![CDATA[

BD20_V_MAX = 100;

BD20_CREATURE_SIZE = 10;

BD20_WALL_DETECTION_LENGTH = 100;

BD20_WALL_REPULSION_PARAM = 16;

BD20_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

上記のパラメータのうち、個体の運動に関わるものを、Creatureクラスのクラス変数として定義。

なお、アニメーションのフレーム・インターバル(interval_sec)は、Controlerクラスのクラス変数として定義している。

  class Creature extends taustation_geom2d.MovingAgent
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4

class Creature extends taustation_geom2d.MovingAgent

# private ｓtaticなクラス・プロパティ

# 最大速度

@_vMax: 100

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

パラメータのセッター

上記のクラス変数にパラメータをセットするセッターを、Controlerクラスのメソッドとして集約。

  class Controler

    .....

    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setIntervalSec: (@interval_sec) ->

class Controler

.....

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setIntervalSec: (@interval_sec) ->

パラメーターのセット

スクリプト実行時に、上記セッターを通してグローバル変数のパラメータを設定する。

jQuery ($) ->

  .....

  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD20_V_MAX)
  controler.setCreatureSize(BD20_CREATURE_SIZE)
  controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)
  controler.setIntervalSec(BD20_INTERVAL_SEC)

jQuery ($) ->

.....

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD20_V_MAX)

controler.setCreatureSize(BD20_CREATURE_SIZE)

controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)

controler.setIntervalSec(BD20_INTERVAL_SEC)

Boids 2.0の全コード

# Boids 2.1
# Boids 2.0 = 1.2に基づいて、分離(separation)ルールを導入する。
Boids20 = {}

# パッケージBoids20の本体
do ->
  # 独自クラスのエイリアス
  # パッケージtaustation_geom2d.jsが必要。
  Vector = taustation_geom2d.Vector
  MovingAgent = taustation_geom2d.MovingAgent

  # Boidsが活動する空間のクラス
  # このバージョンでは、canvasオブジェクトの上下左右の座標を持つ長方形
  class Field
    constructor: (canvas) ->
      @xMin = 0
      @yMin = 0
      @xMax = canvas.width
      @yMax = canvas.height


  # Boidsの個体を実現するクラス
  # 位置座標と速度ベクトルの成分を保持する
  # 自らが活動するFieldクラスのオブジェクトへの参照も保持する
  class Creature extends taustation_geom2d.MovingAgent
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4

    # コンストラクタの引数にはFieldオブジェクトを渡す
    # 位置、速度、加速度、自分が属する群、Fieldをプロパティとして持つ
    constructor: (cluster, field) ->
      super()
      @a = new Vector(0, 0)
      @cluster = cluster
      @field = field
      @nearestCreature = null

    # 個体を描画するメソッド
    # canvasのコンテキストを引数で受け取る
    draw: (ctx) ->
      v = @v.abs()
      sx = Creature._drawSize * @v.x / v
      sy = Creature._drawSize * @v.y / v
      p = 0.25

      ctx.fillStyle = "black"
      ctx.beginPath()
      ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)
      ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)
      ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)
      ctx.closePath()
      ctx.fill()
      return

    # 個体を動かすメソッド
    # 「群れ」を表すClusterクラスのmove()メソッドから呼ばれる
    # interval_secは秒単位のアニメーション・フレームのインターバル
    move: (interval_sec) ->
      # 壁を避ける
      @wallAvoidance()

      # 加速度を考慮した速度の変化を計算
      # 速度の絶対値が増え続けないようにキャップで抑える
      # 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、
      # 値/絶対値で符号を得ている
      @v.plusEq(@a.times interval_sec)
      @v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), Creature._vMax)
      @v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), Creature._vMax)

      # インターバルの間の移動量を計算
      @pos.plusEq(@v.times interval_sec)

      # 壁にぶつかった場合は全反射
      if @pos.x <= @field.xMin or @pos.x >= @field.xMax then @v.x = -@v.x
      if @pos.y <= @field.yMin or @pos.y >= @field.yMax then @v.y = -@v.y

      return

    # 壁を避ける行動
    # 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算
    wallAvoidance: ->
      if @pos.x <= Creature._wallDetectionLength
        @a.x =
          Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / @pos.x) ** 2
      else if @pos.x >= @field.xMax - Creature._wallDetectionLength
        @a.x =
          -Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / (@field.xMax - @pos.x)) ** 2
      else
        @a.x = 0

      if @pos.y <= Creature._wallDetectionLength
        @a.y =
          Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / @pos.y) ** 2
      else if @pos.y >= @field.yMax - Creature._wallDetectionLength
        @a.y =
          -Creature._wallRepulsionParam *
          (Creature._wallDetectionLength / (@field.yMax - @pos.y)) ** 2
      else
        @a.y = 0


  # Boidsの群を管理するクラスで、以下を保持する
  # ・群を構成する複数の個体
  # ・個体を描画するcanvasとそのcontextのオブジェクト
  class Cluster
    # コンストラクタはcanvasオブジェクトを受け取り、そのcontextをプロパティに登録
    constructor: (canvas) ->
      @creatures = []
      @canvas = canvas
      @context = @canvas.getContext("2d") if @canvas.getContext
      return

    # すべての個体オブジェクトを群から削除する
    clearCreatures: ->
      @creatures = []

    # 引数で与えられた個体を群に加える
    addCreature: (creature) ->
      @creatures.push(creature)
      return

    # 群の全個体を描画する
    # 描画エリアをクリアした後、群の全個体のdraw()メソッドを呼び出している
    draw: ->
      @context.fillStyle = "#e0e0e0"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      for creature in @creatures
        creature.draw(@context)
      return

    # 秒単位のインターバル受け取り、すべての個体を移動させる
    move: (interval_sec) ->
      for creature in @creatures
        creature.move(interval_sec)
      return


  # Boidsアプリケーションの動作を統括するクラス
  # 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当
  class Controler
    # Boids 1.2からstaticなクラスプロパティとした
    @interval_sec: 1 # animation frame interval in seconds

    constructor: (canvas) ->
      # Boidsの活動領域
      @field = new Field(canvas)
      # 群のオブジェクト
      @cluster = new Cluster(canvas)
      # 個体の数
      @population = 0
      # アニメーション用のフラグとtimer
      @isRunning = false
      @timer = undefined

    # 定数として扱うクラス変数を設定するメソッド群
    setVMax: (vMax) -> Creature._vMax = vMax
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param
    setIntervalSec: (@interval_sec) ->

    # 一つの個体を発生させるメソッド
    # 位置はcanvasに収まるよう、速度はvMax/2～vMaxの範囲でランダム
    createCreature: ->
      cr = new Creature(@cluster, @field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = (Math.random() + 1) * Creature._vMax / 2
      a = Math.random() * Math.PI * 2
      cr.setPosition(x, y)
      cr.setVelocity(v * Math.cos(a), v * Math.sin(a))
      return cr

    # 引数で指定された数の個体を発生させ、Clusterオブジェクトに登録する
    generate: (@population) ->
      @cluster.clearCreatures()
      for i in [1..@population]
        cr = @createCreature()
        @cluster.addCreature(cr)
      @cluster.draw()

    # アニメーションの開始／停止の切り替え
    # アニメーションはsetInterval()で実装している
    startAndStop: () ->
      if @isRunning
        clearInterval(@timer)
        @isRunning = false
      else
        @timer = setInterval =>
          @cluster.move(@interval_sec)
          @cluster.draw()
          return
        , @interval_sec * 1000
        @isRunning = true
      return

  # 外部からアクセス可能な名前の設定
  Boids20.Controler = Controler


# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids20_canvas")[0]
  controler = new Boids20.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD20_V_MAX)
  controler.setCreatureSize(BD20_CREATURE_SIZE)
  controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)
  controler.setIntervalSec(BD20_INTERVAL_SEC)

  # Generateボタンが押されたとき、指定された個体数で群をつくる
  $("#boids20_generate").click ->
    pop = $("#boids20_population").val()
    if pop < 1
      pop = 1
      $("#boids20_population").val(pop)
    controler.generate(pop)

  # Start/Stopボタンが押されたとき、アニメーションの動作を切り替える
  $("#boids20_start_and_stop").click ->
    controler.startAndStop()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

# Boids 2.1

# Boids 2.0 = 1.2に基づいて、分離(separation)ルールを導入する。

Boids20 = {}

# パッケージBoids20の本体

do ->

# 独自クラスのエイリアス

# パッケージtaustation_geom2d.jsが必要。

Vector = taustation_geom2d.Vector

MovingAgent = taustation_geom2d.MovingAgent

# Boidsが活動する空間のクラス

# このバージョンでは、canvasオブジェクトの上下左右の座標を持つ長方形

class Field

constructor: (canvas) ->

@xMin = 0

@yMin = 0

@xMax = canvas.width

@yMax = canvas.height

# Boidsの個体を実現するクラス

# 位置座標と速度ベクトルの成分を保持する

# 自らが活動するFieldクラスのオブジェクトへの参照も保持する

class Creature extends taustation_geom2d.MovingAgent

# private ｓtaticなクラス・プロパティ

# 最大速度

@_vMax: 100

# 描画の基本となるサイズ

@_drawSize: 8

# 壁の衝突回避を認識する距離

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# コンストラクタの引数にはFieldオブジェクトを渡す

# 位置、速度、加速度、自分が属する群、Fieldをプロパティとして持つ

constructor: (cluster, field) ->

super()

@a = new Vector(0, 0)

@cluster = cluster

@field = field

@nearestCreature = null

# 個体を描画するメソッド

# canvasのコンテキストを引数で受け取る

draw: (ctx) ->

v = @v.abs()

sx = Creature._drawSize * @v.x / v

sy = Creature._drawSize * @v.y / v

p = 0.25

ctx.fillStyle = "black"

ctx.beginPath()

ctx.moveTo(@pos.x + (1 - p) * sx, @pos.y + (1 - p) * sy)

ctx.lineTo(@pos.x + (-sx - sy) * p, @pos.y + (sx - sy) * p)

ctx.lineTo(@pos.x + (-sx + sy) * p, @pos.y + (-sx - sy) * p)

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

# 「群れ」を表すClusterクラスのmove()メソッドから呼ばれる

# interval_secは秒単位のアニメーション・フレームのインターバル

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 加速度を考慮した速度の変化を計算

# 速度の絶対値が増え続けないようにキャップで抑える

# 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、

# 値/絶対値で符号を得ている

@v.plusEq(@a.times interval_sec)

@v.x = @v.x / Math.abs(@v.x) * Math.min(Math.abs(@v.x), Creature._vMax)

@v.y = @v.y / Math.abs(@v.y) * Math.min(Math.abs(@v.y), Creature._vMax)

# インターバルの間の移動量を計算

@pos.plusEq(@v.times interval_sec)

# 壁にぶつかった場合は全反射

if @pos.x <= @field.xMin or @pos.x >= @field.xMax then @v.x = -@v.x

if @pos.y <= @field.yMin or @pos.y >= @field.yMax then @v.y = -@v.y

return

# 壁を避ける行動

# 壁からの距離に応じた斥力を(repulsion)想定し、ｘ/ｙ方向の加速度を計算

wallAvoidance: ->

if @pos.x <= Creature._wallDetectionLength

@a.x =

Creature._wallRepulsionParam *

(Creature._wallDetectionLength / @pos.x) ** 2

else if @pos.x >= @field.xMax - Creature._wallDetectionLength

@a.x =

-Creature._wallRepulsionParam *

(Creature._wallDetectionLength / (@field.xMax - @pos.x)) ** 2

else

@a.x = 0

if @pos.y <= Creature._wallDetectionLength

@a.y =

Creature._wallRepulsionParam *

(Creature._wallDetectionLength / @pos.y) ** 2

else if @pos.y >= @field.yMax - Creature._wallDetectionLength

@a.y =

-Creature._wallRepulsionParam *

(Creature._wallDetectionLength / (@field.yMax - @pos.y)) ** 2

else

@a.y = 0

# Boidsの群を管理するクラスで、以下を保持する

# ・群を構成する複数の個体

# ・個体を描画するcanvasとそのcontextのオブジェクト

class Cluster

# コンストラクタはcanvasオブジェクトを受け取り、そのcontextをプロパティに登録

constructor: (canvas) ->

@creatures = []

@canvas = canvas

@context = @canvas.getContext("2d") if @canvas.getContext

return

# すべての個体オブジェクトを群から削除する

clearCreatures: ->

@creatures = []

# 引数で与えられた個体を群に加える

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の全個体を描画する

# 描画エリアをクリアした後、群の全個体のdraw()メソッドを呼び出している

draw: ->

@context.fillStyle = "#e0e0e0"

@context.fillRect(0, 0, @canvas.width, @canvas.height)

for creature in @creatures

creature.draw(@context)

return

# 秒単位のインターバル受け取り、すべての個体を移動させる

move: (interval_sec) ->

for creature in @creatures

creature.move(interval_sec)

return

# Boidsアプリケーションの動作を統括するクラス

# 唯一、ブラウザから直接呼び出され、初期値の設定やClusterの操作を担当

class Controler

# Boids 1.2からstaticなクラスプロパティとした

@interval_sec: 1 # animation frame interval in seconds

constructor: (canvas) ->

# Boidsの活動領域

@field = new Field(canvas)

# 群のオブジェクト

@cluster = new Cluster(canvas)

# 個体の数

@population = 0

# アニメーション用のフラグとtimer

@isRunning = false

@timer = undefined

# 定数として扱うクラス変数を設定するメソッド群

setVMax: (vMax) -> Creature._vMax = vMax

setCreatureSize: (size) -> Creature._drawSize = size

setWallDetectionLength: (pix) -> Creature._wallDetectionLength = pix

setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

setIntervalSec: (@interval_sec) ->

# 一つの個体を発生させるメソッド

# 位置はcanvasに収まるよう、速度はvMax/2～vMaxの範囲でランダム

createCreature: ->

cr = new Creature(@cluster, @field)

x = Math.floor(Math.random() * @field.xMax)

y = Math.floor(Math.random() * @field.yMax)

v = (Math.random() + 1) * Creature._vMax / 2

a = Math.random() * Math.PI * 2

cr.setPosition(x, y)

cr.setVelocity(v * Math.cos(a), v * Math.sin(a))

return cr

# 引数で指定された数の個体を発生させ、Clusterオブジェクトに登録する

generate: (@population) ->

@cluster.clearCreatures()

for i in [1..@population]

cr = @createCreature()

@cluster.addCreature(cr)

@cluster.draw()

# アニメーションの開始／停止の切り替え

# アニメーションはsetInterval()で実装している

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

@cluster.move(@interval_sec)

@cluster.draw()

return

, @interval_sec * 1000

@isRunning = true

return

# 外部からアクセス可能な名前の設定

Boids20.Controler = Controler

# スクリプトが読み込まれた時の実行部分

jQuery ($) ->

# Controlerを作成し、canvasオブジェクトを渡す

canvas = $("#Boids20_canvas")[0]

controler = new Boids20.Controler(canvas)

# 固定パラメータのセット

# パラメータの値は、Javascript形式でHTMLに埋め込まれている想定

controler.setVMax(BD20_V_MAX)

controler.setCreatureSize(BD20_CREATURE_SIZE)

controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)

controler.setIntervalSec(BD20_INTERVAL_SEC)

# Generateボタンが押されたとき、指定された個体数で群をつくる

$("#boids20_generate").click ->

pop = $("#boids20_population").val()

if pop < 1

pop = 1

$("#boids20_population").val(pop)

controler.generate(pop)

# Start/Stopボタンが押されたとき、アニメーションの動作を切り替える

$("#boids20_start_and_stop").click ->

controler.startAndStop()

↓　Boids 2.1のコード説明へ

概要

EnemyCreatureクラスの追加

Controlerクラスの変更

パラメータ関係

Enemy発生用メソッドの追加

generate()メソッドを変更

BoidがEnemyから逃げる動作

実行部分

コード全体

HTML

CoffeeScript

クラス構成

Fieldクラス

Creatureクラス

BoidCreatureクラス

EnemyCreatureクラス

Clusterクラス

Controlerクラス

概要

Creatureクラスのテンプレート化

Boids 2.3

Boids 3.0

Creatureクラス

BoidCreatureクラス

描画処理の変更

Boids 3.xの概要

Boids 3.0 – 基本コード

Boids 3.1 – 敵の導入

概要

速度計算の変更

整列のアルゴリズム

平均速度の算出

進路変更

コード内容

初期パラメータ定義

クラス変数

パラメータのセッター

パラメータのセット

Ceatureクラスの変更 – alignment()メソッドの追加

全コード

概要

結合のアルゴリズム

重心の算出

進路変更

コード内容

初期パラメータ定義

クラス変数

パラメータのセッター

パラメータのセット

Ceatureクラスの変更 – cohesion()メソッドの追加

概要

分離のアルゴリズム

視野

回避動作

コード内容

初期パラメータ定義

クラス変数

パラメータのセッター

パラメータのセット

Ceatureクラスの変更 – separation()メソッドの追加

概要

MovingAgentクラスの導入

HTMLでの初期パラメータ設定

概要

初期パラメータ定義

クラス変数

パラメータのセッター

パラメーターのセット

Boids 2.0の全コード

`generate()`メソッドを変更