Boids 2.3 – コード説明

1 概要
2 速度計算の変更
3 整列のアルゴリズム
- 3.1 平均速度の算出
- 3.2 進路変更
4 コード内容
5 全コード

概要

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

TauStation

Boids 2.3 – コード説明

概要

速度計算の変更

整列のアルゴリズム

平均速度の算出

進路変更

コード内容

初期パラメータ定義

クラス変数

パラメータのセッター

パラメータのセット

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

全コード

コメントを残すコメントをキャンセル

概要

速度計算の変更

整列のアルゴリズム

平均速度の算出

進路変更

コード内容

初期パラメータ定義

クラス変数

パラメータのセッター

パラメータのセット

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

全コード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル