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のコード説明へ

CoffeeScript – Boids 2.x – ルールの実装

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

Boids 2.xの概要

Boids 2.xシリーズでは、Boids 1.xで準備した土台となるコードに、個体の行動ルール(分離、結合、整列)を一つずつ実装していく。

Boids 2.0　Boids1.2のコードを以下のように変更。
- Creatureクラスから汎用のMovingAgentクラスを分離して、これを継承
- 初期パラメータの設定値をHTMLに置いて、変更しやすくした
Boids 2.1　分離(Separation)のルールを適用し、互いの衝突を避けるようにする。
Boids 2.2　結合(Cohesion)のルールを適用し、個体が群に集まろうとする傾向を持たせる。
Boids 2.3　整列(Alignment)のルールを適用し、個体が皆と同じ方向に動こうとする傾向を持たせる。

Boids 2.0 – 基本コード

基本コードの挙動はBoids 1.2と同じで、各個体は壁との衝突を避けながら自由に動くが、他の個体は意識しない。

Boids 2.0のコード詳細

Boids 2.1 – 分離(Separation)

個体同士の衝突を避けるように進路を変更する行動ルールを適用する。他の個体が接近したときに、それぞれが進路を変更している様子がわかる。

Boids 2.1のコード詳細

Boids 2.2 – 結合(Cohesion)

各個体が、視野内の群の重心に向かって進路を変更するルールを適用する。全体として群を形成しようとする様子がわかる。

Boids 2.2のコード詳細

Boids 2.3 – 整列(Alignment)

各個体が、視野内の群の全体としての移動方向に自分の進路を合わせるよう変更するルールを適用する。群が全体として同じ方向に動こうとしている様子がわかる。

Boids 2.3のコード詳細

↑　Boids 1.x

CoffeeScript – geom2d.MovingAgentクラス

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

パッケージ

taustation_geom2d

クラス名

taustation_geom2d.MovingAgent

クラス仕様

概要

自分の位置を表すVectorオブジェクトと移動速度を表すVectorオブジェクトを要素に持ち、他のMovingAgentとの位置関係を判定するメソッドを準備している。

なお、Vectorクラスには、Vectorを位置ベクトルとしたときに、その点とMovingAgentとの位置関係を表すメソッドが用意されている。

クラス変数

なし

クラス・メソッド

なし

インスタンス・プロパティ

pos: 自らの位置を保持するVectorオブジェクト
v: 自らの移動速度を保持するVectorオブジェクト

コンストラクタ

constructor(): 位置(0, 0)、速度(0, 0)のMovingAgentインスタンスを生成する。

インスタンス・メソッド

基本メソッド

setPosition(x, y): MovingAgentの位置をx、yの座標値で指定する。
setVelocity(vx, vy): MovingAgentの速度をvx、vyの成分で指定する。
getClone(): 元のMovingAgentオブジェクトと同じ内容のクローンを生成して返す。

判定

isInFrontOf(other): このMovingAgentオブジェクトが引数のMovingAgentオブジェクトの前方(左右180度より進行方向の側)にあるときtrue、後方にあるときfalseを返す。真横の時は前方と判定される。
isIntheRearOf(other): isInFrontOf()と前後逆の判定結果を返す。
isOnTheRightOf(other): このMovingAgentオブジェクトが引数のMovingAgentオブジェクトの右方にあるときtrue、左方にあるときfalseを返す。進行方向の延長線上にあるときは右方と判定される。
isOnTheLeftOf(movingAgent): isOnTheRightOf()と左右逆の判定結果を返す。

コード

  class MovingAgent
    constructor: ->
      @pos = new Vector(0, 0)
      @v = new Vector(0, 0)
      return

    # 個体の位置をセットするメソッド
    setPosition: (x, y) ->
      @pos.x = x
      @pos.y = y
      return

    # 個体の速度をセットするメソッド
    setVelocity: (vx, vy) ->
      @v.x = vx
      @v.y = vy
      return
      
    # 自身と同じ内容のMovingAgentオブジェクトを生成して返す
    getClone: ->
      clone = new MovingAgent()
      clone.setPosition(@pos.x, @pos.y)
      clone.setVelocity(@v.x, @v.y)
      return clone

    # 以下、他のMovingAgentとの位置関係
    #
    # このMovingAgentが引数のMovingAgentの前方か
    isInFrontOf: (other) ->
      inprod = other.v.x * (@pos.x - other.pos.x) +
               other.v.y * (@pos.y - other.pos.y)
      if inprod >= 0 then true else false

    # このMovingAgentが引数のMovingAgentの後方か
    isInTheRearOf: (other) -> not @isInFrontOf(other)

    # このMovingAgentが引数のMovingAgentの右方か
    isOnTheRightOf: (other) ->
      inprod = other.v.y * (@pos.x - other.pos.x) -
               other.v.x * (@pos.y - other.pos.y)
      if inprod >= 0 then true else false

    # このMovingAgentが引数のMovingAgentの左方か
    isOnTheLeftOf: (other) -> not @isOnTheRightOf(other)

class MovingAgent

constructor: ->

@pos = new Vector(0, 0)

@v = new Vector(0, 0)

return

# 個体の位置をセットするメソッド

setPosition: (x, y) ->

@pos.x = x

@pos.y = y

return

# 個体の速度をセットするメソッド

setVelocity: (vx, vy) ->

@v.x = vx

@v.y = vy

return

# 自身と同じ内容のMovingAgentオブジェクトを生成して返す

getClone: ->

clone = new MovingAgent()

clone.setPosition(@pos.x, @pos.y)

clone.setVelocity(@v.x, @v.y)

return clone

# 以下、他のMovingAgentとの位置関係

# このMovingAgentが引数のMovingAgentの前方か

isInFrontOf: (other) ->

inprod = other.v.x * (@pos.x - other.pos.x) +

other.v.y * (@pos.y - other.pos.y)

if inprod >= 0 then true else false

# このMovingAgentが引数のMovingAgentの後方か

isInTheRearOf: (other) -> not @isInFrontOf(other)

# このMovingAgentが引数のMovingAgentの右方か

isOnTheRightOf: (other) ->

inprod = other.v.y * (@pos.x - other.pos.x) -

other.v.x * (@pos.y - other.pos.y)

if inprod >= 0 then true else false

# このMovingAgentが引数のMovingAgentの左方か

isOnTheLeftOf: (other) -> not @isOnTheRightOf(other)

CS/JS – Mathクラスメソッドの実行速度

2016-07-30 / tau / コメントする

概要

2点間の距離を比較するときに、sqrtといった関数で距離を求める汎用メソッド／関数を使うのに対して、距離の2乗のままで比較して計算スピードを上げることが考えられる。

昔の大型計算機で大きな規模の方程式を解くときなどは、計算スピードを上げるために距離の2乗のままで比較をしていたりしたが、簡単なシミュレーションやアニメーションなどで、それがどれくらい効いてくるのかがよくわからなかった。

そこで、他の関数も含めて、Mathクラスのクラスメソッドとして定義されている浮動小数点系の関数群の実行時間を計ってみた。

結果概要

加減乗除算の間では実行時間にあまり差はなく、これらを1としたときの各関数の実行時間程度は以下のようになった。

+-*/	1
abs、sqrt、exp、log、random	1
sin、cos	2～3
tan、atan	4～5
atan2	5～6
asin、acos	6～7
pow(**)	7～8

一般的な方針

先の結果から、浮動小数点の計算を含むコードに関して、以下のようにまとめられる。

距離の計算などにsqrtを気軽に使ってもよい(足し算を一つ増やす程度)
exp、logも気軽に使ってよい
累乗計算はコストが高い
- 距離計算などで自乗項が出てくる場合、乗算に変更した方がよい
三角関数は、加減乗除の2～5倍のコスト
逆三角関数は、加減乗除の5～7倍のコスト

参考

実行環境1

mouse製ノートPC
Celeron-325U/1.70GHz
RAM 8GB
Windows 10 Home(64bit)

コンソールからテストコードを実行。

ここでa = 1.1、b = -2.2で、各関数の繰り返し回数は100万回。時間の単位はミリ秒。

a+b	17	17	17
a-b	26	26	28
a*b	20	18	20
a/b	16	17	18
a**b	156	157	157
abs(a)	29	27	30
abs(b)	30	29	30
sqrt(a)	29	30	31
sin(a)	71	71	71
cos(a)	59	61	61
tan(a)	83	84	84
asin(a)	125	128	128
acos(a)	124	127	125
atan(a)	85	84	87
atan2(a)	138	140	146
exp(a)	15	17	17
log(a)	15	17	18
random(a)	26	27	27

実行環境2

自作PC
Intel Core i5-4670/3.40GHz
RAM 4.00GB

a+b	9	10	9
a-b	12	11	12
a*b	7	9	7
a/b	7	7	7
a**b	72	71	72
abs(a)	11	12	17
abs(b)	12	17	12
sqrt(a)	13	13	13
sin(a)	27	25	23
cos(a)	24	25	25
tan(a)	43	43	42
asin(a)	53	53	54
acos(a)	53	50	51
atan(a)	41	41	41
atan2(a)	61	62	58
exp(a)	7	7	8
log(a)	6	7	7
random(a)	12	13	12

テストコード

a = 1.1
b = -2.2

sTime = new Date().valueOf()
for i in [1..1000000]
  x = a + b
eTime = new Date().valueOf()
console.log("+ #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a - b
eTime = new Date().valueOf()
console.log("- #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a * b
eTime = new Date().valueOf()
console.log("* #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a / b
eTime = new Date().valueOf()
console.log("/ #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a ** b
eTime = new Date().valueOf()
console.log("** #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.abs(a)
eTime = new Date().valueOf()
console.log("abs(+) #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.abs(b)
eTime = new Date().valueOf()
console.log("abs(-) #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.sqrt(a)
eTime = new Date().valueOf()
console.log("sqrt() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.sin(a)
eTime = new Date().valueOf()
console.log("sin() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.cos(a)
eTime = new Date().valueOf()
console.log("cos() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.tan(a)
eTime = new Date().valueOf()
console.log("tan() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.asin(a)
eTime = new Date().valueOf()
console.log("asin() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.acos(a)
eTime = new Date().valueOf()
console.log("acos() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.atan(a)
eTime = new Date().valueOf()
console.log("atan() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.atan2(a)
eTime = new Date().valueOf()
console.log("atan2() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.exp(a)
eTime = new Date().valueOf()
console.log("exp() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.log(a)
eTime = new Date().valueOf()
console.log("log() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.random()
eTime = new Date().valueOf()
console.log("random() #{eTime - sTime}ms")
sTime = eTime

100

101

102

103

104

105

106

107

108

109

110

111

a = 1.1

b = -2.2

sTime = new Date().valueOf()

for i in [1..1000000]

x = a + b

eTime = new Date().valueOf()

console.log("+ #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a - b

eTime = new Date().valueOf()

console.log("- #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a * b

eTime = new Date().valueOf()

console.log("* #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a / b

eTime = new Date().valueOf()

console.log("/ #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a ** b

eTime = new Date().valueOf()

console.log("** #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.abs(a)

eTime = new Date().valueOf()

console.log("abs(+) #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.abs(b)

eTime = new Date().valueOf()

console.log("abs(-) #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.sqrt(a)

eTime = new Date().valueOf()

console.log("sqrt() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.sin(a)

eTime = new Date().valueOf()

console.log("sin() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.cos(a)

eTime = new Date().valueOf()

console.log("cos() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.tan(a)

eTime = new Date().valueOf()

console.log("tan() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.asin(a)

eTime = new Date().valueOf()

console.log("asin() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.acos(a)

eTime = new Date().valueOf()

console.log("acos() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.atan(a)

eTime = new Date().valueOf()

console.log("atan() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.atan2(a)

eTime = new Date().valueOf()

console.log("atan2() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.exp(a)

eTime = new Date().valueOf()

console.log("exp() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.log(a)

eTime = new Date().valueOf()

console.log("log() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.random()

eTime = new Date().valueOf()

console.log("random() #{eTime - sTime}ms")

sTime = eTime

CS/JS – Math.signが使えない話

2016-07-29 / tau / コメントする

CoffeeScriptで書いたコードが、ローカルでもネット上のWordPressでも動くことを確認したが、Android端末で動かないという事象が発生した。

sgn = Math.sign(val) # Javascript実行時にエラー

1	sgn = Math.sign(val) # Javascript実行時にエラー

同じ症状がWindowsマシンのExplorerでも起こったので、開発ツールで確認したところ、”Math.signはサポートされていない”とのこと。

調べてみると、JavaScript | MDN(Mozilla Developer Network)のMath.sign()のところでブラウザ実装状況を見ると、

デスクトップでは、Chrome38、FireFox(Gecko)25、Opera25はサポート、IEとSafariは未サポート
モバイルでは、Firefox Mobile(Gecko)25のみサポートで、あとは全滅

当分、この関数は利用できそうにないので、以下のように値を絶対値で割って取り出すのが手っ取り早い(可読性は悪くなるが)。

sgn = val / Math.abs(val)

1	sgn = val / Math.abs(val)

Boids 1.x – コード説明

2016-07-26 / tau / コメントする

Boids 0.5

全体構成

Boidsを構築していくために、以下のような全体構成とした。

HTML: WordPressのテキストエディタで、入力やボタン、canvasなどの必要な要素を書き込む。
外部スクリプトファイル: 各バージョンのBoidsを実行するための外部スクリプトファイルを用意する。バージョンごとにパッケージ化する。

HTML

個体数をセットするためのinput要素のタイプは”number”とした。こうすることにより、ボックスの右側に値をコントロールする矢印が出たり、最小値の指定などができる。

ボタンはWordPressでonclickを使うと問題が生じるので、HTMLでは単にボタンを表示させるだけとし、リスナについてはコード側で対応する。

canvas要素は書き方によってWordPressで勝手に変更されてしまうので注意。

input要素とcanvasについては、コード側から参照するためのidを付与している。

スクリプトについては、jQueryはWordPress側で読み込まれるとのこと。外部スクリプトファイルは、</body>タグの直前あたりを想定して、WordPressのテキストモードで最後尾にscript要素を書いた。<script type="..." src="..."></script>とテキストモードで書いても、ビジュアルモードを経由すると以下のように書き換えられてしまう。

勝手にCDATAのパターンが挿入され、間に改行が入ってしまう
srcとtypeの指定順序が逆になってしまう

<!-- Boids 0.5-->
<input id="boids05_population" min="1" type="number" value="1" />
<input id="boids05_generate" type="button" value="Generate" />
<canvas id="boids05_canvas" style="background-color: #e0e0e0;" width="400" height="300">
</canvas>

<!-- テキストモードで最後尾に以下を追加 -->
<script src="../coffee/boids/boids_0_5.js" type="text/javascript">// <![CDATA[

// ]]></script>

</canvas>

// ]]></script>

クラス構成

クラスは以下の4つを準備

Boidsの活動領域となるFieldクラス
個々の個体を表現するCreatureクラス
複数のCreatureが集まった群を表現するClusterクラス
各オブジェクトを生成し、ボタン操作に対応してアニメーションをコントロールするControlerクラス

パッケージ

異なるバージョンのBoidsを同じページで動かすため、バージョンごとのパッケージに上記4つのクラスを入れることとした。

初めのバージョンに対応したパッケージ名はboids05で、グローバルにアクセスするのはControlerオブジェクトだけとし、Boids05.Controlerを定義している。

そして最後に、このスクリプトファイルが読み込まれたときにボタンに対するリスナを登録するための処理を記述している。

# Boidsの準備として、個体を運動させる
# Boids 0.5
# 指定した数の個体を発生させ、canvas内のランダムな位置に表示させる
Boids05 = {}

# パッケージBoids05の本体
do ->
  # Boidsが活動する空間のクラス
  # このバージョンでは、canvasオブジェクトの上下左右の座標を持つ長方形
  class Field

  # Boidsの個体を実現するクラス
  # 位置座標と速度ベクトルの成分を保持する
  # 自らが活動するFieldクラスのオブジェクトへの参照も保持する
  class Creature

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

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

  # Boids 0.5で用いるための名前空間を設定
  Boids05.Controler = Controler

# Boids 0.5に対応したDOMの操作に対応し、このパッケージを操作する
# DOMがすべて読み込まれてから以下を実行するよう保証
jQuery ($) ->

# Boidsの準備として、個体を運動させる

# Boids 0.5

# 指定した数の個体を発生させ、canvas内のランダムな位置に表示させる

Boids05 = {}

# パッケージBoids05の本体

do ->

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

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

class Field

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

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

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

class Creature

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

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

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

class Cluster

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

# Creatureや

class Controler

# Boids 0.5で用いるための名前空間を設定

Boids05.Controler = Controler

# Boids 0.5に対応したDOMの操作に対応し、このパッケージを操作する

# DOMがすべて読み込まれてから以下を実行するよう保証

jQuery ($) ->

各ブロックとクラスの説明

リスナ登録

jQueryの構文を用いている。WordPressでjQueryを用いる場合、”$”が別のエイリアスに定義されているらしいので、1行目のように書くとのこと。

1つ目のブロックではcanvas要素のDOMオブジェクトを取得し、controlerオブジェクトを生成して初期値をセットしている。

この段階では速度関係は必要ないが、次のステップの前にとりあえず実装したため、Controler.setVMax()メソッドを読んでいる。

2つ目のブロックでは、ボタンが押されたときの処理を記述しており、numberボックスから値を読み込み、それに基づいて個体生成の指令を出している。

jQuery ($) ->
  # Boids0.5のControlerを作成し、canvasオブジェクトを渡す
  canvas = $("#boids05_canvas")[0]
  controler = new Boids05.Controler(canvas)
  controler.setVMax(50)

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

jQuery ($) ->

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

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

controler = new Boids05.Controler(canvas)

controler.setVMax(50)

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

$("#boids05_generate").click ->

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

if pop < 1

pop = 1

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

controler.generate(pop)

Controlerクラス

ブラウザ側からの指令と、スクリプト内の各クラスとの仲立ちを一手に引き受けるクラスで、この段階では以下の機能を提供する。

constructor: canvasオブジェクトを渡してControlerオブジェクトを生成する。
constructor(canvas): canvasオブジェクトを渡してConstructorオブジェクトを生成する。
setVMax(vMax): ランダムに生成する速さの最大値をConstructorオブジェクトにセットする。
createCreature(): 位置と速度(速さと方向)をランダムに与えて個体を生成する。
generate(population): 指定した数の個体を生成し、Clusterオブジェクトに格納する。

  class Controler
    constructor: (canvas) ->
      @vMax = 0
      @field = new Field(canvas)
      @cluster = new Cluster(canvas)
      @population = 0 # number of creatures

    # 個体の速度を発生させるときの最大値
    setVMax: (@vMax) ->

    # 一つの個体を発生させるメソッド
    # 位置はcanvasに収まるよう、速度はvMax/2～vMaxの範囲でランダム
    createCreature: ->
      cr = new Creature(@field)
      x = Math.floor(Math.random() * @field.xMax)
      y = Math.floor(Math.random() * @field.yMax)
      v = (Math.random() + 1) * @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()

class Controler

constructor: (canvas) ->

@vMax = 0

@field = new Field(canvas)

@cluster = new Cluster(canvas)

@population = 0 # number of creatures

# 個体の速度を発生させるときの最大値

setVMax: (@vMax) ->

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

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

createCreature: ->

cr = new Creature(@field)

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

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

v = (Math.random() + 1) * @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()

Fieldクラス

将来の拡張も考慮して、一つのクラスとした。現時点では単なる矩形で、上下左右の座標値をプロパティに持つ。

  class Field
    constructor: (canvas) ->
      @xMin = 0
      @yMin = 0
      @xMax = canvas.width
      @yMax = canvas.height

class Field

constructor: (canvas) ->

@xMin = 0

@yMin = 0

@xMax = canvas.width

@yMax = canvas.height

Clusterクラス

Creatureオブジェクトを1～複数保持する「群」のクラス。提供する機能は以下の通り。

constructor(canvas): 個体を描画するcanvasを渡してClusterオブジェクトを生成。
clearCreatures(): 群の個体を空にする。
addCreature(creature): Creatureオブジェクトを渡し、群に追加する。
draw(): 群の全ての個体を描画する。実際には、保持している個体のdraw()メソッドを呼び出しているだけ。

  class Cluster
    constructor: (canvas) ->
      @creatures = []
      @canvas = canvas
      @context = @canvas.getContext("2d") if @canvas.getContext
      return

    # 群の個体をすべてクリアする
    clearCreatures: ->
      @creatures = []

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

    # 群の善個体を描画する
    draw: ->
      @context.fillStyle = "#e0e0e0"
      @context.fillRect(0, 0, @canvas.width, @canvas.height)
      for creature in @creatures
        creature.draw(@context)
      return

class Cluster

constructor: (canvas) ->

@creatures = []

@canvas = canvas

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

return

# 群の個体をすべてクリアする

clearCreatures: ->

@creatures = []

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

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の善個体を描画する

draw: ->

@context.fillStyle = "#e0e0e0"

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

for creature in @creatures

creature.draw(@context)

return

Creatureクラス

個々のクラスを表現するクラス。このバージョンでは運動はさせないが、速度関係のプロパティや初期化は行っている。

constructor(canvas): Fieldオブジェクトを指定してCreatureオブジェクトを生成。
setPosition(x, y): 個体が存在する座標を指定。
setVelocity(vx, vy): 速度の成分をセット。このバージョンでは必要ないが実装。
draw(context): 描画コンテキストを指定して、個体を描画する。このバージョンでは単純な円を描いている。

  class Creature
    # 描画の基本となるサイズ
    # private ｓtaticなクラス・プロパティ
    _drawSize = 4

    constructor: (field) ->
      @x = 0
      @y = 0
      @vx = 0
      @vy = 0
      @field = field

    # 個体の位置をセットするメソッド
    setPosition: (@x, @y) ->

    # 個体の速度をセットするメソッド
    setVelocity: (@vx, @vy) ->

    # 個体を描画するメソッド
    # canvasのコンテキストを引数で受け取る
    draw: (ctx) ->
      ctx.fillStyle = "black"
      ctx.beginPath()
      ctx.arc(@x, @y, _drawSize, 0, Math.PI*2, true)
      ctx.fill()
      return

class Creature

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

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

_drawSize = 4

constructor: (field) ->

@x = 0

@y = 0

@vx = 0

@vy = 0

@field = field

# 個体の位置をセットするメソッド

setPosition: (@x, @y) ->

# 個体の速度をセットするメソッド

setVelocity: (@vx, @vy) ->

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

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

draw: (ctx) ->

ctx.fillStyle = "black"

ctx.beginPath()

ctx.arc(@x, @y, _drawSize, 0, Math.PI*2, true)

ctx.fill()

return

Boids 1.0

HTML

Boids 1.0用のボックスやボタンを用意し、外部スクリプトファイルを読み込んでいる。

このバージョンから個体の運動をさせるので、Start/Stopボタンを追加している。

<input type="number" id="boids10_population" value="1" min="1" /><br />
<input type="button" id="boids10_generate" value="Generate" />
<input type="button" id="boids10_start_and_stop" value="Start/Stop" />

<canvas id="boids10_canvas" width="400" height="300" style="background-color: #e0e0e0">

<!-- テキストモードの最後尾 -->
...
<script src="../coffee/boids/boids_1_0.js" type="text/javascript">// <![CDATA[

// ]]></script>

...

// ]]></script>

パッケージとクラスの変更

パッケージ構成

パッケージについては、パッケージ名やエイリアスを変更。

また、個体の運動を追加するため、以下のメソッドを追加。

Creature.move(interval_sec)
Cluster.move()
Controler.setIntervalSec(interva._sec)
Controler.startAndStop()

Boids10 = {}


do ->
  class Field
    constructor: (canvas) ->

  class Creature
    constructor: (field) ->
    setPosition: (@x, @y) ->
    setVelocity: (@vx, @vy) ->
    draw: (ctx) ->
    move: (interval_sec) ->

  class Cluster
    constructor: (canvas) ->
    clearCreatures: ->
    draw: ->
    move: (interval_sec) ->

  class Controler
    constructor: (canvas) ->
    setVMax: (@vMax) ->
    setIntervalSec: (@interval_sec) ->
    createCreature: ->
    generate: (@population) ->
    startAndStop: () ->

  Boids10.Controler = Controler


jQuery ($) ->

Boids10 = {}

do ->

class Field

constructor: (canvas) ->

class Creature

constructor: (field) ->

setPosition: (@x, @y) ->

setVelocity: (@vx, @vy) ->

draw: (ctx) ->

move: (interval_sec) ->

class Cluster

constructor: (canvas) ->

clearCreatures: ->

draw: ->

move: (interval_sec) ->

class Controler

constructor: (canvas) ->

setVMax: (@vMax) ->

setIntervalSec: (@interval_sec) ->

createCreature: ->

generate: (@population) ->

startAndStop: () ->

Boids10.Controler = Controler

jQuery ($) ->

Creature.move()

秒単位のフレームタイムを指定して呼び出される。

各個体の速度で等速度運動
壁に当たった場合は全反射

  class Field
  ...
    # Boids 1.0で追加
    # interval_msはアニメーションのフレームタイム
    # 秒単位で与えられることを想定
    move: (interval_sec) ->
      @x += @vx * interval_sec
      @y += @vy * interval_sec

      # 壁にぶつかった場合は全反射
      if @x <= @field.xMin or @x >= @field.xMax then @vx = -@vx
      if @y <= @field.yMin or @y >= @field.yMax then @vy = -@vy

      return

class Field

...

# Boids 1.0で追加

# interval_msはアニメーションのフレームタイム

# 秒単位で与えられることを想定

move: (interval_sec) ->

@x += @vx * interval_sec

@y += @vy * interval_sec

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

if @x <= @field.xMin or @x >= @field.xMax then @vx = -@vx

if @y <= @field.yMin or @y >= @field.yMax then @vy = -@vy

return

Cluster.move()

秒単位のフレームタイムを指定し、群の個体の数の分だけCreature.move()メソッドを呼び出す。

  class Cluster
  ...
    # Boids 1.0で追加
    # フレームタイムを秒単位で受け取り、すべての個体を移動させる
    move: (interval_sec) ->
      for creature in @creatures
        creature.move(interval_sec)
      return

class Cluster

...

# Boids 1.0で追加

# フレームタイムを秒単位で受け取り、すべての個体を移動させる

move: (interval_sec) ->

for creature in @creatures

creature.move(interval_sec)

return

Controlerクラス

変更内容は以下の通り。

プロパティ追加

アニメーションをコントロールするプロパティとして以下を追加。

運動中かどうかを保持するisRunningフラグ
作動中のintervalタイマを保持するtimer
秒単位のフレームタイムを保持するinterval_sec

setIntervalSec(interval_sec)

アニメーションのフレームタイムをセット。

startAndStop()

Start/Stopボタンを押すごとに、作動状態と停止状態を切り替え。特にリスナにコールバック関数を無名関数で登録するときに、thisをバインドするためのファットアローを使っていることと、無名関数で引数を表示する記法に留意。

  class Controler
    constructor: (canvas) ->
      ...
      # Boids 1.0で追加／アニメーション用
      @isRunning = false
      @timer = undefined
      @interval_sec = 1 # animation frame interval in seconds

    ...

    # Boids 1.0で追加
    # フレームタイムのセット
    setIntervalSec: (@interval_sec) ->

    ...

    # Boids 1.0で追加
    # この関数を呼び出すたびに、アニメーションの開始と停止が切り替わる
    # アニメーションにはsetInterval()に以下の引数を渡している
    # ・アニメーション1フレームの操作
    # ・ミリ秒単位の時間間隔
    startAndStop: () ->
      if @isRunning
        clearInterval(@timer)
        @isRunning = false
      else
        @timer = setInterval =>
          @cluster.move(@interval_sec)
          @cluster.draw()
          return
        , @interval_sec * 1000
        @isRunning = true
      return

class Controler

constructor: (canvas) ->

...

# Boids 1.0で追加／アニメーション用

@isRunning = false

@timer = undefined

@interval_sec = 1 # animation frame interval in seconds

...

# Boids 1.0で追加

# フレームタイムのセット

setIntervalSec: (@interval_sec) ->

...

# Boids 1.0で追加

# この関数を呼び出すたびに、アニメーションの開始と停止が切り替わる

# アニメーションにはsetInterval()に以下の引数を渡している

# ・アニメーション1フレームの操作

# ・ミリ秒単位の時間間隔

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

@cluster.move(@interval_sec)

@cluster.draw()

return

, @interval_sec * 1000

@isRunning = true

return

Boids 1.1

このバージョンでは、個体を壁にぶつかってから全反射させるのではなく、壁が近づくとともに斥力を感じるように壁を避けようとする動作を導入する。

HTML

Boids 1.0用のボックスやボタンを用意し、外部スクリプトファイルを読み込んでいる。

<input type="number" id="boids11_population" value="1" min="1" /><br />
<input type="button" id="boids11_generate" value="Generate" />
<input type="button" id="boids11_start_and_stop" value="Start/Stop" />
<canvas id="boids11_canvas" width="400" height="300" style="background-color: #e0e0e0">
</canvas>


<!-- テキストモードの最後尾 -->
...
<script src="../coffee/boids/boids_1_1.js" type="text/javascript">// <![CDATA[

// ]]></script>

</canvas>

...

// ]]></script>

パッケージとクラスの変更

パッケージ構成

クラス構成は特に変わらず、パッケージ名とエイリアスを本バージョンにあったものとする。以下のバージョンでも同じ。

Boids11 = {}


do ->
  class Field
  class Creature
  class Cluster
  class Controler

  Boids11.Controler = Controler


jQuery ($) ->

Boids11 = {}

do ->

class Field

class Creature

class Cluster

class Controler

Boids11.Controler = Controler

jQuery ($) ->

Creatureのクラスプロパティ

このバージョンから、速度の最大値をControlerからCreatureのクラスプロパティに変更(6行目)。

また、壁の接近を認識する距離(_detectionLength)と回避加速度計算時のパラメータ(_repulsionParam)を定義。

  class Creature
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    # Boids1.0ではControlerクラスに置いていたが、
    #　Boids1.1からCreatureクラスのクラスプロパティとした
    _vMax = 0
    # 描画の基本となるサイズ
    _drawSize = 4
    # 壁の衝突回避を認識する距離
    _detectionLength =  100
    # 反発力パラメータ
    _repulsionParam = 4

class Creature

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

# 最大速度

# Boids1.0ではControlerクラスに置いていたが、

#　Boids1.1からCreatureクラスのクラスプロパティとした

_vMax = 0

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

_drawSize = 4

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

_detectionLength = 100

# 反発力パラメータ

_repulsionParam = 4

Creature.move

認識距離以内に壁に近づき始めると、壁からの斥力を想定した加速度を計算し、速度を変更。

加速度は重力加速度をイメージし、距離の2乗に反比例させた。

boids11_wall_avoidance

そもそもピクセル単位の計算では最小でも距離の値が”1″となるため、重力モデルでは大きな加速度が出ない。ここでは_detectionLengthを長さの基準としたが、壁との距離に応じて自然に避けるような運動をさせるためにパラメータ(_repulsionParam)を導入しなければならなかった。

なお、速度ベクトルの値のキャップを判定する際に速度成分の符号を用いているが、Math.sign()はほとんどのブラウザで使えないため、「値／絶対値」で符号を得ている。

    move: (interval_sec) ->
      # Boids 1.1から追加
      # 壁からの距離に応じた斥力を想定し、ｘ/ｙ方向の加速度を計算
      if @x <= _detectionLength
        ax =  (_detectionLength * _repulsionParam / @x) ** 2
      else if @x >= @field.xMax - _detectionLength
        ax = -(_detectionLength * _repulsionParam / (@field.xMax - @x)) ** 2
      else
        ax = 0

      if @y <= _detectionLength
        ay = (_detectionLength * _repulsionParam / @y) ** 2
      else if @y >= @field.yMax - _detectionLength
        ay = -(_detectionLength * _repulsionParam / (@field.yMax - @y)) ** 2
      else
        ay = 0

      # Boids 1.1から追加
      # 加速度を考慮した速度の変化
      # 速度の絶対値が増え続けないようにキャップで抑える
      # 速度成分の符号を得るのに、Math.signがサポートされていないブラウザが多いため、
      # 値/絶対値で符号を得ている
      @vx += ax * interval_sec
      @vx = @vx / Math.abs(@vx) * Math.min(Math.abs(@vx), Creature._vMax)
      @vy += ay * interval_sec
      @vy = @vy / Math.abs(@vy) * Math.min(Math.abs(@vy), Creature._vMax)

      # インターバルの間の移動量
      @x += @vx * interval_sec
      @y += @vy * interval_sec

      # 壁にぶつかった場合は全反射
      if @x <= @field.xMin or @x >= @field.xMax then @vx = -@vx
      if @y <= @field.yMin or @y >= @field.yMax then @vy = -@vy

      return

move: (interval_sec) ->

# Boids 1.1から追加

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

if @x <= _detectionLength

ax = (_detectionLength * _repulsionParam / @x) ** 2

else if @x >= @field.xMax - _detectionLength

ax = -(_detectionLength * _repulsionParam / (@field.xMax - @x)) ** 2

else

ax = 0

if @y <= _detectionLength

ay = (_detectionLength * _repulsionParam / @y) ** 2

else if @y >= @field.yMax - _detectionLength

ay = -(_detectionLength * _repulsionParam / (@field.yMax - @y)) ** 2

else

ay = 0

# Boids 1.1から追加

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

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

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

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

@vx += ax * interval_sec

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

@vy += ay * interval_sec

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

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

@x += @vx * interval_sec

@y += @vy * interval_sec

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

if @x <= @field.xMin or @x >= @field.xMax then @vx = -@vx

if @y <= @field.yMin or @y >= @field.yMax then @vy = -@vy

return

Controlerクラス

vMaxの変更のみ。

  class Controler
    constructor: (canvas) ->
      # @vMax = 0 は削除
      @field = new Field(canvas)
      @cluster = new Cluster(canvas)
      ...

    # 実際にはCreatureクラスのクラスプロパティにセットしている
    setVMax: (vMax) -> Creature._vMax = vMax
    ...

class Controler

constructor: (canvas) ->

# @vMax = 0 は削除

@field = new Field(canvas)

@cluster = new Cluster(canvas)

...

# 実際にはCreatureクラスのクラスプロパティにセットしている

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

...

Boids 1.2

このバージョンで、以下の点を変更している。

座標単位のプロパティ定義・計算を、独自クラスgeom2d.Vectorで書き換え
描画サイズなど各種パラメータをHTMLで設定できるようにする
- 各種パラメータをstaticなクラス変数とする
- HTMLでグローバルな変数としてパラメータ群を設定
- 実行時にControlerオブジェクトのセッターでパラメータ群を設定
Creatureオブジェクトの形状を自由に設定可能にする

HTML

独自クラスパッケージファイルの読み込み

本体のスクリプトファイルに先立って、独自クラスのパッケージファイル(taustation_geom2d.js)を読み込ませている。

パラメータ群の設定

HTMLのscript要素でパラメータ用のグローバル変数を定義する。これらはその後に読み込まれたスクリプトで利用される。

script要素内の変数定義はJavascriptで書くため、行末にコロン(;)をつけている。

<input type="number" id="boids12_population" value="1" min="1" /><br />
<input type="button" id="boids12_generate" value="Generate" />
<input type="button" id="boids12_start_and_stop" value="Start/Stop" />
<canvas id="boids12_canvas" width="400" height="300" style="background-color: #e0e0e0">
</canvas>


<!-- テキストモードの最後尾 -->

<!-- Boids 1.2用のパラメータ -->
<script type="text/javascript">// <![CDATA[
V_MAX = 100; CREATURE_SIZE = 8; WALL_DETECTION_LENGTH = 100; WALL_REPULSION_PARAM = 16; INTERVAL_SEC = 0.05;
// ]]></script>

<script src="../lib/taustation_geom2d.js" type="text/javascript">// <![CDATA[

// ]]></script> 
...
<script src="../coffee/boids/boids_1_2.js" type="text/javascript">// <![CDATA[

// ]]></script>

</canvas>

V_MAX = 100; CREATURE_SIZE = 8; WALL_DETECTION_LENGTH = 100; WALL_REPULSION_PARAM = 16; INTERVAL_SEC = 0.05;

// ]]></script>

// ]]></script>

...

// ]]></script>

script要素をWordPressのテキストモードで書くと、ビジュアルモードを経由したときに//<![CDATA[～改行～//]]>が挿入される。

また、Javascriptをscript要素に直接書くと、改行が除かれて一行になってしまう。

パッケージの準備とクラスの変更

Vectorクラスの利用

独自クラスgeom2d.Vectorを使って、位置・速度・加速度のコーディングを見やすくした。

各オブジェクトの生成と計算時にVectorオブジェクトを生成するnew演算子が介在するが、400個体程度の計算でもパフォーマンスの問題は見られなかった。

個体の形

これまではdraw()メソッドの中で直接円を描いていたが、今回はヘルパーメソッドdrawShape()を実装。

パラメータ設定

HTML内のスクリプト要素で定義されたグローバル変数を参照し、パラメータとしてクラス変数に格納。

この操作はControlerクラスに集約した。

変更に関係する箇所

Creatureクラスのクラス変数

@var: valの形式でクラス変数として定義。

  class Creature
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4

class Creature

# 最大速度

@_vMax: 100

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

Creatureの基本メソッド

これまでx, y, vx, vyのように個別の座標値で扱っていたプロパティを、Vectorクラスで置き換える。

    # 位置、速度、加速度をプロパティとして持つ
    constructor: (field) ->
      @pos = new Vector(0, 0)
      @v = new Vector(0, 0)
      @a = new Vector(0, 0)
      @field = field

    # 個体の位置をセットするメソッド
    setPosition: (x, y) ->
      @pos.x = x
      @pos.y = y
      return

    # 個体の速度をセットするメソッド
    setVelocity: (vx, vy) ->
      @v.x = vx
      @v.y = vy
      return

# 位置、速度、加速度をプロパティとして持つ

constructor: (field) ->

@pos = new Vector(0, 0)

@v = new Vector(0, 0)

@a = new Vector(0, 0)

@field = field

# 個体の位置をセットするメソッド

setPosition: (x, y) ->

@pos.x = x

@pos.y = y

return

# 個体の速度をセットするメソッド

setVelocity: (vx, vy) ->

@v.x = vx

@v.y = vy

return

Creature.draw()

単純な円ではなく、方向を持った細長い三角形を描くように変更。

下図のように、基準点(x, y)から速度ベクトルの方向に頂点を、速度ベクトルと直角な報告に底辺を描く。ここで $0 < p < 1$ で、これによって三角形の細長さが決まる。

boids12_shape1

ここで $s_x = s(v_x / v) , \: s_y = s(v_y /v)$ と置くと下図のようになる。

boids12_shape3

コードは以下の通り。

    # 個体を描画するメソッド
    # 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

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

# 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

Creature.move()

Vectorオブジェクトの導入に対応して書き直した。

斥力加速度計算のパラメータ(Creature._wallRepulsionParam)は()の外に出した。

    move: (interval_sec) ->
      #　Boids 1.1から追加
      # 壁からの距離に応じた斥力を想定し、ｘ/ｙ方向の加速度を計算
      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 1.1から追加
      # 加速度を考慮した速度の変化
      # 速度の絶対値が増え続けないようにキャップで抑える
      @v.plusEq(@a.times interval_sec)
      @v.x = Math.sign(@v.x) * Math.min(Math.abs(@v.x), Creature._vMax)
      @v.y = Math.sign(@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

move: (interval_sec) ->

#　Boids 1.1から追加

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

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 1.1から追加

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

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

@v.plusEq(@a.times interval_sec)

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

@v.y = Math.sign(@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

Clusterクラス

変更箇所はない。

Controlerクラスのセッター

以下のメソッド群で整理。Creatureのクラス変数をセットしている。

    setVMax: (vMax) -> Creature._vMax = vMax
    setCreatureSize: (size) -> Creature._drawSize = size
    setWallDetectionLength: (pix) -> Creature._wallDetectionLength =  pix
    setWallRepulsionParam: (param) -> Creature._wallRepulsionParam = param

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

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

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

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

実行部分

Controlerオブジェクトのセッター群を呼び出している。

jQuery ($) ->
  canvas = $("#boids12_canvas")[0]
  controler = new Boids12.Controler(canvas)

  controler.setVMax(V_MAX)
  controler.setCreatureSize(CREATURE_SIZE)
  controler.setWallDetectionLength(WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(WALL_REPULSION_PARAM)
  controler.setIntervalSec(INTERVAL_SEC)

jQuery ($) ->

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

controler = new Boids12.Controler(canvas)

controler.setVMax(V_MAX)

controler.setCreatureSize(CREATURE_SIZE)

controler.setWallDetectionLength(WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(WALL_REPULSION_PARAM)

controler.setIntervalSec(INTERVAL_SEC)

CoffeeScript – Boids 1.x – 準備

2016-07-26 / tau / コメントする

Boids構築の準備

ここでは、以下のバージョンに沿って、Boidsの準備段階のコードを組み立てていく。

Boids 0.5～ブラウザ上で指定した数の個体を表示させる
Boids 1.0～個体を運動させる
Boids 1.1～各個体が壁との衝突を避けるようにする
Boids 1.2～個体の形をそれらしくする(内部的には独自クラスを導入)

Boids 0.5～個体の発生と表示

概要

まずスタートアップとして、指定された数の個体を発生・表示させるという簡単な枠組みを作る。

仕様は以下の通り。

numberボックスで個体数を指定
“GENERATE”ボタンを押すとcanvasに指定した数の個体が表示される
- 個体の位置はその都度ランダムに設定される

デモンストレーション

コード詳細

Boids 0.5のコード説明へ

Boids 1.0～個体を動かす

概要

発生させた個体を表示させると同時に運動させる。

仕様は以下の通り

Numberボックスで個体数を指定
GENERATEボタンを押すとcanvasに指定した数の個体が表示される
- 個体の位置はランダム
START/STOPボタンを押すたびに、各個体の運動と停止が切り替わる
- 個体のスピードは一定の範囲内でランダムに設定され、スピードは変化しない
- 壁に当たった場合は全反射する

デモンストレーション

コード詳細

Boids 1.0のコード説明へ

Boids 1.1～壁を避ける

概要

各個体が壁をよける動作を導入。壁からの距離に応じた斥力を想定し、それに応じた加速度を計算している。

操作方法はこれまでのものと同じ。

デモンストレーション

コード詳細

Boids 1.1のコード説明へ

Boids 1.2～Vectorの利用と個体の形

概要

このバージョンでは2つのことを導入している。

一つは独自クラスのgeom2d.Vectorを利用していること
今一つは個体の形を単純な円から任意の形とできるよう変更したこと

操作方法はこれまでのものと同じ。

デモンストレーション

コード詳細

Boids 1.2のコード説明へ

CoffeeScript – Boids

2016-07-26 / tau / コメントする

Boidsとは

Boidsは鳥や魚が群をなして移動する様をシミュレートするもので、概要はこちらにまとめている。

一つ一つの個体は、一定の行動規範に従って「自律的に」動いていながら、全体が群として整然と運動することを再現する。

CoffeeScriptによるBoidsの開発

以下のステップで開発を進める。

Boids 1.xのシリーズで、個体の生成・表示、運動、壁の回避などを実装
Boids 2.xのシリーズで、最もシンプルな運動ルールを個体に与える
Boids 3.xのシリーズで、「敵」を導入する
アプリケーション版