WordPressでカテゴリをクリックしても表示されない

2016-08-18 / tau / 2件のコメント

WordPressでカテゴリをクリックしても「ページが見つかりませんでした」と表示される現象が生じた。

ネット上で同様の現象が挙げられており、「タグやカテゴリをクリックすると404エラーで表示されない」というものが多かった。それらのうち以下の方法で解決したので記録しておく。

ダッシュボードメニューの「設定」→「パーマリンク設定」
下部の「カテゴリーベース」が”.”となっていたのを”category”に書き換え
保存

他にもパーマリンクの設定を保存しなおすだけで直る、というのもあったが、こちらは効かなかった。

CoffeeScript – 継承・オーバーライド・super()

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

クラスの継承とコンストラクタ

ポイント

親クラスを継承した子クラスのコンストラクタでは、基本的にsuper()で親クラスのコンストラクタを呼び出す。

たとえば次のように親クラスParentを子クラスChildが継承した場合、子クラスに親クラスのプロパティが引き継がれている。

class Parent
  constructor: -> @name = "parent"

class Child extends Parent

ins = new Parent()
console.log(ins.name)

ins = new Child()
console.log(ins.name)

# 実行結果
# parent
# parent

class Parent

constructor: -> @name = "parent"

class Child extends Parent

ins = new Parent()

console.log(ins.name)

ins = new Child()

console.log(ins.name)

# 実行結果

# parent

ところが次のように子クラスでコンストラクタを定義した場合は、親クラスのプロパティが引き継がれない。

class Parent
  constructor: -> @name = "parent"

class Child extends Parent
  constructor: ->

ins = new Parent()
console.log(ins.name)

ins = new Child()
console.log(ins.name)

# 実行結果
# parent
# undefined

class Parent

constructor: -> @name = "parent"

class Child extends Parent

constructor: ->

ins = new Parent()

console.log(ins.name)

ins = new Child()

console.log(ins.name)

# 実行結果

# parent

# undefined

これは子クラスのコンストラクタが親クラスのコンストラクタをオーバーライドしてしまったためで、この状態では親クラスのコンストラクタが実行されない。

そこで、子クラスのコンストラクタからsupper()で親クラスのコンストラクタを呼び出すと、親クラスのコンストラクタも実行され、プロパティが引き継がれる。

class Parent
  constructor: -> @name = "parent"

class Child extends Parent
  constructor: -> super()

ins = new Parent()
console.log(ins.name)

ins = new Child()
console.log(ins.name)

# 実行結果
# parent
# parent

class Parent

constructor: -> @name = "parent"

class Child extends Parent

constructor: -> super()

ins = new Parent()

console.log(ins.name)

ins = new Child()

console.log(ins.name)

# 実行結果

# parent

コンストラクタが引数をとる場合も、super()で親クラスのコンストラクタに合わせた引数を指定すればよい。

class Parent
  constructor: (@name)->

class Child extends Parent
  constructor: (name)-> super(name)

ins = new Parent("parent")
console.log(ins.name)

ins = new Child("child")
console.log(ins.name)

# 実行結果
# parent
# child

class Parent

constructor: (@name)->

class Child extends Parent

constructor: (name)-> super(name)

ins = new Parent("parent")

console.log(ins.name)

ins = new Child("child")

console.log(ins.name)

# 実行結果

# parent

# child

メソッドのオーバーライドと継承

例えば次のコードでは、親クラスのmethod()を子クラスのmethod()がオーバーライドしている。

class Parent
  method: -> console.log("in Parent")

class Child extends Parent
  method: -> console.log("in Child")

ins = new Parent()
ins.method()
ins = new Child()
ins.method()

# 実行結果
# in Parent
# in Child

class Parent

method: -> console.log("in Parent")

class Child extends Parent

method: -> console.log("in Child")

ins = new Parent()

ins.method()

ins = new Child()

ins.method()

# 実行結果

# in Parent

# in Child

子クラスからオーバーライドした親クラスのメソッドを呼び出したい場合は、super()を使う。

class Parent
  method: -> console.log("in Parent")

class Child extends Parent
  method: ->
    super()
    console.log("in Child")

ins = new Child()
ins.method()

# 実行結果
# in Parent
# in Child

class Parent

method: -> console.log("in Parent")

class Child extends Parent

method: ->

super()

console.log("in Child")

ins = new Child()

ins.method()

# 実行結果

# in Parent

# in Child

CoffeeScript – 抽象クラス

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

概要

Javaの場合だと、抽象クラスを書く場合には”abstract”宣言をして、具体のクラスで実装すべきメソッドの宣言だけを行うが、CoffeeScript/Javascriptの場合はこれと異なる。

準備

まず、同じ名前executionのメソッドを持つ2つのクラスConcrete1とConcrete2を考える。メソッド名は同じだが、各クラスで処理内容は異なる。

class Concrete1
  execution: -> console.log("execution in Concrete 1")

class Concrete2
  execution: -> console.log("execution in Concrete 2")

ins = new Concrete1()
ins.execution()

ins = new Concrete2()
ins.execution()

# 実行結果
# execution in Concrete 1
# execution in Concrete 2

class Concrete1

execution: -> console.log("execution in Concrete 1")

class Concrete2

execution: -> console.log("execution in Concrete 2")

ins = new Concrete1()

ins.execution()

ins = new Concrete2()

ins.execution()

# 実行結果

# execution in Concrete 1

# execution in Concrete 2

次にexecution()について共通な2つのクラスを抽象化したAbstractクラスを導入する。

抽象クラスの導入

CoffeeScript/Javascriptではabstractキーワードがなく、abstractなメソッドも中身が空のもので定義。ただし抽象クラスのままでインスタンス化したときの注意喚起のメッセージを実装。

class Abstract
  execution: -> console.log("execution of Abstrac must be overridden")

class Concrete1
  execution: -> console.log("execution in Concrete 1")

class Concrete2
  execution: -> console.log("execution in Concrete 2")

ins = new Abstract()
ins.execution()

ins = new Concrete1()
ins.execution()

ins = new Concrete2()
ins.execution()

# 実行結果
# execution of Abstrac must be overridden
# execution in Concrete 1
# execution in Concrete 2

class Abstract

execution: -> console.log("execution of Abstrac must be overridden")

class Concrete1

execution: -> console.log("execution in Concrete 1")

class Concrete2

execution: -> console.log("execution in Concrete 2")

ins = new Abstract()

ins.execution()

ins = new Concrete1()

ins.execution()

ins = new Concrete2()

ins.execution()

# 実行結果

# execution of Abstrac must be overridden

# execution in Concrete 1

# execution in Concrete 2

Javaなどでは型指定が厳格なので、異なる2つのクラスをAbstractクラスで抽象化して、同じメソッドを呼び出すことでクラスごとに特有の処理をさせる。

CoffeeScript/Javascriptでは変数の型がないため、抽象化をしなくてもメソッド名を同じにしておくだけで同じ効果を得る。ただしコンパイル時のチェックなどがない点に注意。

共通部分がある場合

以下のように、2つのクラスで共通の処理と個別の処理が混在している場合を考える。

共通の処理を各クラスごとに実装しているが、コピー／ペースト操作で行うとしてもエラーが入り込みやすく、その後の保守性も悪い。

class Concrete1
  execution: ->
    @commonExecution()
    @specificExecution()

  commonExecution: -> console.log("common execution")
  specificExecution: -> console.log("execution for Concrete 1")

class Concrete2
  execution: ->
    @commonExecution()
    @specificExecution()

  commonExecution: -> console.log("opening execution")
  specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()
ins.execution()

ins = new Concrete2()
ins.execution()

# 実行結果
# common execution
# execution for Concrete 1
# opening execution
# execution for Concrete 2

class Concrete1

execution: ->

@commonExecution()

@specificExecution()

commonExecution: -> console.log("common execution")

specificExecution: -> console.log("execution for Concrete 1")

class Concrete2

execution: ->

@commonExecution()

@specificExecution()

commonExecution: -> console.log("opening execution")

specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()

ins.execution()

ins = new Concrete2()

ins.execution()

# 実行結果

# common execution

# execution for Concrete 1

# opening execution

# execution for Concrete 2

共通部分の集約(1)

エラー回避と保守性の向上のため、共通部分を一つにまとめる。

抽象クラスAbstractを導入
Abstractにexecution()メソッドのフレームを集約
共通処理部分commonExecution()をAbstractのメソッドとして実装
2つのクラスでAbstractを継承
これらの子クラスで、それぞれの個別処理部分のみを実装

class Abstract
  execution: ->
    @commonExecution()
    @specificExecution()

  commonExecution: -> console.log("common execution")

class Concrete1 extends Abstract
  specificExecution: -> console.log("execution for Concrete 1")

class Concrete2 extends Abstract
  specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()
ins.execution()

ins = new Concrete2()
ins.execution()

# 実行結果
# common execution
# execution for Concrete 1
# opening execution
# execution for Concrete 2

class Abstract

execution: ->

@commonExecution()

@specificExecution()

commonExecution: -> console.log("common execution")

class Concrete1 extends Abstract

specificExecution: -> console.log("execution for Concrete 1")

class Concrete2 extends Abstract

specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()

ins.execution()

ins = new Concrete2()

ins.execution()

# 実行結果

# common execution

# execution for Concrete 1

# opening execution

# execution for Concrete 2

Concrete1とConcrete2がAbstractを継承したことによって2つの具象クラスがAbstractクラスのexecute()メソッドも継承され、具象クラスでexecute()メソッドを呼ぶと、Abstractのexecute()メソッドが実行される。

その後、共通部分のcommonExecution()はAbstractのメソッドが呼ばれ、specificExecution()については、各具象クラスでオーバーライドされたメソッドが呼ばれる。

共通部分の集約(2)

各具象クラスでexecution()のから書いていくこともできるが、この場合は共通処理が一括してsuper()で実行されるため、「共通の前処理と後処理の間に各クラス独自の処理を置きたい」という場合には適さない。

class Abstract
  execution: ->
    @commonExecution()
    @specificExecution()

  commonExecution: -> console.log("common execution")

class Concrete1 extends Abstract
  execution: ->
    super()
    @specificExecution

  specificExecution: -> console.log("execution for Concrete 1")

class Concrete2 extends Abstract
  execution: ->
    super()
    @specificExecution

  specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()
ins.execution()

ins = new Concrete2()
ins.execution()

# 実行結果
# common execution
# execution for Concrete 1
# opening execution
# execution for Concrete 2

class Abstract

execution: ->

@commonExecution()

@specificExecution()

commonExecution: -> console.log("common execution")

class Concrete1 extends Abstract

execution: ->

super()

@specificExecution

specificExecution: -> console.log("execution for Concrete 1")

class Concrete2 extends Abstract

execution: ->

super()

@specificExecution

specificExecution: -> console.log("execution for Concrete 2")

ins = new Concrete1()

ins.execution()

ins = new Concrete2()

ins.execution()

# 実行結果

# common execution

# execution for Concrete 1

# opening execution

# execution for Concrete 2

Boids Mobile

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

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

Lifegame Mobile (CoffeeScript)

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

初期パターン：

サイズ：
10　15　20　30　40

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

Boids – 群の行動

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

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

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

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

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

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

Boids 2.3 – コード説明

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

概要

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

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

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

速度計算の変更

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

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

class Controler

.....

createCreature: ->

.....

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

.....

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

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

class Controler

.....

createCreature: ->

.....

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

.....

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

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

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

//<![CDATA[

BD23_V_MAX = 100;

BD23_V_MIN = 0;

.....

//]]>

</script>

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

class Controler

.....

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

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

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

.....

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

jQuery ($) ->

.....

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

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

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

.....

整列のアルゴリズム

平均速度の算出

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

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

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

boid2x_alignment_vmean

進路変更

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

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

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

コード内容

初期パラメータ定義

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

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

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

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

//<![CDATA[

BD23_V_MAX = 100;

BD23_V_MIN = 0;

BD23_CREATURE_SIZE = 10;

BD23_WALL_DETECTION_LENGTH = 100;

BD23_WALL_REPULSION_PARAM = 16;

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

BD23_SEPARATION_FIELD_DEPTH = 50;

BD23_SEPARATION_ANGLE = 10 * Math.PI / 180;

BD23_COHESION_ANGLE = 5 * Math.PI / 180;

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

BD23_ALIGNMENT_FIELD_DEPTH = 250;

BD23_ALIGNMENT_ANGLE = 5 * Math.PI / 180;

BD23_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

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

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

class Creature extends MovingAgent

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

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

@_vMax: 100

@_vMin: 50

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_separationFieldDepth: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

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

@_alignmentFieldDepth: 100

# 整列行動の変化角

@_alignmentAngle: 0

.....

パラメータのセッター

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

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

class Controler

.....

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

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

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

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

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

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

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

.....

パラメータのセット

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

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

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

jQuery ($) ->

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

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

controler = new Boids23.Controler(canvas)

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

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

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

controler.setCreatureSize(BD23_CREATURE_SIZE)

controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)

controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)

controler.setSeparationAngle(BD23_SEPARATION_ANGLE)

controler.setCohesionAngle(BD23_COHESION_ANGLE)

controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)

controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)

controler.setIntervalSec(BD23_INTERVAL_SEC)

.....

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

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

  class Creature extends MovingAgent

    .....

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

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

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

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

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

# 整列行動(alignment)

@alignment()

.....

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

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

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

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

# Boids2.3

# 整列行動(alignment)

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

alignment: ->

# 平均速度計算用

vMean = null

n = 0

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

cs = Math.cos(Creature._alignmentAngle)

sn = Math.sin(Creature._alignmentAngle)

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

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

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

if d <= Creature._alignmentFieldDepth

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

n++

if vMean?

vMean.plusEq(other.v)

else

vMean = new Vector(0, 0)

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

if vMean?

vMean.divEq(n)

###

@v.plusEq(vMean)

newV = @v.abs()

if newV >= Creature._vMax

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

###

if vMean.isHeadingToRightOf(@v)

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

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

else

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

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

@v.x = vx

@v.y = vy

全コード

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

      return

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

# Boids 2.3

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

Boids23 = {}

# パッケージBoids23の本体

do ->

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

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

Vector = taustation_geom2d.Vector

MovingAgent = taustation_geom2d.MovingAgent

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

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

class Field

constructor: (canvas) ->

@xMin = 0

@yMin = 0

@xMax = canvas.width

@yMax = canvas.height

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

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

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

class Creature extends MovingAgent

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

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

@_vMax: 100

@_vMin: 50

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_separationFieldDepth: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

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

@_alignmentFieldDepth: 100

# 整列行動の変化角

@_alignmentAngle: 0

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

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

constructor: (cluster, field) ->

super()

@a = new Vector(0, 0)

@cluster = cluster

@field = field

@nearestCreature = null

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

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

draw: (ctx) ->

v = @v.abs()

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

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

p = 0.25

ctx.fillStyle = "black"

ctx.beginPath()

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

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

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

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

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

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

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

# 整列行動(alignment)

@alignment()

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

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

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

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

@v.plusEq(@a.times interval_sec)

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

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

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

@pos.plusEq(@v.times interval_sec)

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

if @pos.x <= @field.xMin

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

@v.x = -@v.x

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

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

@v.x = -@v.x

if @pos.y <= @field.yMin

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

@v.y = -@v.y

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

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

@v.y = -@v.y

return

# 壁を避ける行動

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

wallAvoidance: ->

if @pos.x <= Creature._wallDetectionLength

@a.x =

Creature._wallRepulsionParam *

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

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

@a.x =

-Creature._wallRepulsionParam *

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

else

@a.x = 0

if @pos.y <= Creature._wallDetectionLength

@a.y =

Creature._wallRepulsionParam *

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

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

@a.y =

-Creature._wallRepulsionParam *

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

else

@a.y = 0

# Boids2.1

# 分離行動(separation)

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

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

separation: ->

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

cs = Math.cos(Creature._separationAngle)

sn = Math.sin(Creature._separationAngle)

# 自身に最も近い個体

@nearestCreature = null

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

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

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

if d <= Creature._separationFieldDepth

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

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

if @nearestCreature?

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

@nearestCreature = other

else

@nearestCreature = other

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

if @nearestCreature?

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

if @nearestCreature.isOnTheRightOf(this)

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

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

else

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

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

@v.x = vx

@v.y = vy

# Boids2.2

# 結合行動(cohesion)

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

cohesion: ->

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

n = 0

clusterCenter = null

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

cs = Math.cos(Creature._cohesionAngle)

sn = Math.sin(Creature._cohesionAngle)

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

n++

if clusterCenter?

clusterCenter.plusEq(other.pos)

else

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

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

if clusterCenter?

clusterCenter.divEq(n)

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

if clusterCenter.isOnTheRightOf(this)

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

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

else

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

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

@v.x = vx

@v.y = vy

# Boids2.3

# 整列行動(alignment)

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

alignment: ->

# 平均速度計算用

vMean = null

n = 0

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

cs = Math.cos(Creature._alignmentAngle)

sn = Math.sin(Creature._alignmentAngle)

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

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

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

if d <= Creature._alignmentFieldDepth

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

n++

if vMean?

vMean.plusEq(other.v)

else

vMean = new Vector(0, 0)

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

if vMean?

vMean.divEq(n)

###

@v.plusEq(vMean)

newV = @v.abs()

if newV >= Creature._vMax

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

###

if vMean.isHeadingToRightOf(@v)

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

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

else

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

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

@v.x = vx

@v.y = vy

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

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

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

class Cluster

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

constructor: (canvas) ->

@creatures = []

@canvas = canvas

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

return

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

clearCreatures: ->

@creatures = []

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

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の全個体を描画する

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

draw: ->

@context.fillStyle = "#e0e0e0"

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

for creature in @creatures

creature.draw(@context)

return

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

move: (interval_sec) ->

for creature in @creatures

creature.move(interval_sec)

return

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

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

class Controler

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

@interval_sec: 1 # animation frame interval in seconds

constructor: (canvas) ->

# Boidsの活動領域

@field = new Field(canvas)

# 群のオブジェクト

@cluster = new Cluster(canvas)

# 個体の数

@population = 0

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

@isRunning = false

@timer = undefined

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

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

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

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

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

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

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

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

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

createCreature: ->

cr = new Creature(@cluster, @field)

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

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

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

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

cr.setPosition(x, y)

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

return cr

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

generate: (@population) ->

@cluster.clearCreatures()

for i in [1..@population]

cr = @createCreature()

@cluster.addCreature(cr)

@cluster.draw()

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

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

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

@cluster.move(@interval_sec)

@cluster.draw()

return

, @interval_sec * 1000

@isRunning = true

return

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

Boids23.Controler = Controler

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

jQuery ($) ->

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

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

controler = new Boids23.Controler(canvas)

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

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

controler.setVMax(BD23_V_MAX)

controler.setVMin(BD23_V_MIN)

controler.setCreatureSize(BD23_CREATURE_SIZE)

controler.setWallDetectionLength(BD23_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD23_WALL_REPULSION_PARAM)

controler.setSeparationFieldDepth(BD23_SEPARATION_FIELD_DEPTH)

controler.setSeparationAngle(BD23_SEPARATION_ANGLE)

controler.setCohesionAngle(BD23_COHESION_ANGLE)

controler.setAlignmentFieldDepth(BD23_ALIGNMENT_FIELD_DEPTH)

controler.setAlignmentAngle(BD23_ALIGNMENT_ANGLE)

controler.setIntervalSec(BD23_INTERVAL_SEC)

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

$("#boids23_generate").click ->

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

if pop < 1

pop = 1

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

controler.generate(pop)

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

$("#boids23_start_and_stop").click ->

controler.startAndStop()

↑　Boids 2.2のコード説明へ

↑　Boids 3.0のコード説明へ

Boids 2.2 – コード説明

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

概要

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

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

結合のアルゴリズム

重心の算出

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

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

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

boid2x_cohesion_gravity_center

進路変更

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

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

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

コード内容

初期パラメータ定義

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

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

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

//<![CDATA[

BD22_V_MAX = 100;

BD22_CREATURE_SIZE = 10;

BD22_WALL_DETECTION_LENGTH = 100;

BD22_WALL_REPULSION_PARAM = 16;

BD22_VIEW_FIELD_LENGTH = 50;

BD22_SEPARATION_ANGLE = 10 * Math.PI / 180;

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

BD22_COHESION_ANGLE = 5 * Math.PI / 180;

BD22_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

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

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

class Creature extends MovingAgent

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

# 最大速度

@_vMax: 100

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_viewFieldLength: 100

# 分離行動の回避角

@_separationAngle: 0

# 結合行動の回避角

@_cohesionAngle: 0

パラメータのセッター

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

  class Controler

    .....

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

class Controler

.....

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

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

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

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

パラメータのセット

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

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

  .....

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

jQuery ($) ->

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

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

controler = new Boids22.Controler(canvas)

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

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

controler.setVMax(BD22_V_MAX)

controler.setCreatureSize(BD22_CREATURE_SIZE)

controler.setWallDetectionLength(BD22_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD22_WALL_REPULSION_PARAM)

controler.setViewFieldLength(BD22_VIEW_FIELD_LENGTH)

controler.setSeparationAngle(BD22_SEPARATION_ANGLE)

controler.setCohesionAngle(BD22_COHESION_ANGLE)

controler.setIntervalSec(BD22_INTERVAL_SEC)

.....

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

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

  class Creature extends MovingAgent

    .....

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

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

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

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

# 結合行動(cohesion)

@cohesion()

.....

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

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

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

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

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

# Boids2.2

# 結合行動(cohesion)

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

cohesion: ->

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

n = 0

clusterCenter = null

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

cs = Math.cos(Creature._cohesionAngle)

sn = Math.sin(Creature._cohesionAngle)

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

n++

if clusterCenter?

clusterCenter.plusEq(other.pos)

else

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

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

if clusterCenter?

clusterCenter.divEq(n)

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

if clusterCenter.isOnTheRightOf(this)

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

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

else

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

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

@v.x = vx

@v.y = vy

↑　Boids 2.1のコード説明へ

↓　Boids 2.3のコード説明へ

Boids 2.1 – コード説明

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

概要

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

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

分離のアルゴリズム

視野

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

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

boids2x_perspective

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

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

回避動作

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

boids2x_separation_avoidance

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

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

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

コード内容

初期パラメータ定義

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

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

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

//<![CDATA[

BD21_V_MAX = 100;

BD21_CREATURE_SIZE = 10;

BD21_WALL_DETECTION_LENGTH = 100;

BD21_WALL_REPULSION_PARAM = 16;

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

BD21_VIEW_FIELD_LENGTH = 100;

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

BD21_SEPARATION_ANGLE = 10 * Math.PI / 180;

BD21_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

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

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

class Creature extends taustation_geom2d.MovingAgent

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

# 最大速度

@_vMax: 100

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

# 視野の長さ(奥行)

@_viewFieldLength: 100

# 分離行動の回避計算用

@_separationAngle: 0

パラメータのセッター

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

  class Controler

    .....

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

class Controler

.....

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

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

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

パラメータのセット

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

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

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

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

jQuery ($) ->

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

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

controler = new Boids21.Controler(canvas)

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

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

controler.setVMax(BD21_V_MAX)

controler.setCreatureSize(BD21_CREATURE_SIZE)

controler.setWallDetectionLength(BD21_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD21_WALL_REPULSION_PARAM)

controler.setViewFieldLength(BD21_VIEW_FIELD_LENGTH)

controler.setSeparationAngle(BD21_SEPARATION_ANGLE)

controler.setIntervalSec(BD21_INTERVAL_SEC)

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

$("#boids21_generate").click ->

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

if pop < 1

pop = 1

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

controler.generate(pop)

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

$("#boids21_start_and_stop").click ->

controler.startAndStop()

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

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

  class Creature extends MovingAgent

    .....

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

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

      .....

class Creature extends MovingAgent

.....

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

# 分離行動(separation)

@separation()

.....

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

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

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

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

# Boids2.1

# 分離行動(separation)

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

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

separation: ->

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

cs = Math.cos(Creature._separationAngle)

sn = Math.sin(Creature._separationAngle)

# 自身に最も近い個体

@nearestCreature = null

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

for other in @cluster.creatures

if other != this

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

if other.isInFrontOf(this)

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

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

if d <= Creature._viewFieldLength

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

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

if @nearestCreature?

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

@nearestCreature = other

else

@nearestCreature = other

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

if @nearestCreature?

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

if @nearestCreature.isOnTheRightOf(this)

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

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

else

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

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

@v.x = vx

@v.y = vy

↑　Boids 2.0のコード説明へ

↓　Boids 2.2のコード説明へ

Boids 2.0 – コード説明

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

概要

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

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

MovingAgentクラスの導入

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

  class Creature extends MovingAgent

1	class Creature extends MovingAgent

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

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

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

概要

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

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

初期パラメータ定義

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

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

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

//<![CDATA[

BD20_V_MAX = 100;

BD20_CREATURE_SIZE = 10;

BD20_WALL_DETECTION_LENGTH = 100;

BD20_WALL_REPULSION_PARAM = 16;

BD20_INTERVAL_SEC = 0.05;

//]]>

</script>

クラス変数

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

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

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

class Creature extends taustation_geom2d.MovingAgent

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

# 最大速度

@_vMax: 100

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

パラメータのセッター

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

  class Controler

    .....

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

class Controler

.....

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

パラメーターのセット

スクリプト実行時に、上記セッターを通してグローバル変数のパラメータを設定する。

jQuery ($) ->

  .....

  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD20_V_MAX)
  controler.setCreatureSize(BD20_CREATURE_SIZE)
  controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)
  controler.setIntervalSec(BD20_INTERVAL_SEC)

jQuery ($) ->

.....

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

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

controler.setVMax(BD20_V_MAX)

controler.setCreatureSize(BD20_CREATURE_SIZE)

controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)

controler.setIntervalSec(BD20_INTERVAL_SEC)

Boids 2.0の全コード

# Boids 2.1
# Boids 2.0 = 1.2に基づいて、分離(separation)ルールを導入する。
Boids20 = {}

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

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


  # Boidsの個体を実現するクラス
  # 位置座標と速度ベクトルの成分を保持する
  # 自らが活動するFieldクラスのオブジェクトへの参照も保持する
  class Creature extends taustation_geom2d.MovingAgent
    # private ｓtaticなクラス・プロパティ
    # 最大速度
    @_vMax: 100
    # 描画の基本となるサイズ
    @_drawSize: 8
    # 壁の衝突回避を認識する距離
    @_wallDetectionLength:  100
    # 反発力パラメータ
    @_wallRepulsionParam: 4

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

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

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

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

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

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

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

      return

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

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


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

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

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

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

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


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

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

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

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

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

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

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


# スクリプトが読み込まれた時の実行部分
jQuery ($) ->
  # Controlerを作成し、canvasオブジェクトを渡す
  canvas = $("#Boids20_canvas")[0]
  controler = new Boids20.Controler(canvas)
  # 固定パラメータのセット
  # パラメータの値は、Javascript形式でHTMLに埋め込まれている想定
  controler.setVMax(BD20_V_MAX)
  controler.setCreatureSize(BD20_CREATURE_SIZE)
  controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)
  controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)
  controler.setIntervalSec(BD20_INTERVAL_SEC)

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

# Boids 2.1

# Boids 2.0 = 1.2に基づいて、分離(separation)ルールを導入する。

Boids20 = {}

# パッケージBoids20の本体

do ->

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

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

Vector = taustation_geom2d.Vector

MovingAgent = taustation_geom2d.MovingAgent

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

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

class Field

constructor: (canvas) ->

@xMin = 0

@yMin = 0

@xMax = canvas.width

@yMax = canvas.height

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

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

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

class Creature extends taustation_geom2d.MovingAgent

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

# 最大速度

@_vMax: 100

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

@_drawSize: 8

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

@_wallDetectionLength: 100

# 反発力パラメータ

@_wallRepulsionParam: 4

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

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

constructor: (cluster, field) ->

super()

@a = new Vector(0, 0)

@cluster = cluster

@field = field

@nearestCreature = null

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

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

draw: (ctx) ->

v = @v.abs()

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

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

p = 0.25

ctx.fillStyle = "black"

ctx.beginPath()

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

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

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

ctx.closePath()

ctx.fill()

return

# 個体を動かすメソッド

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

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

move: (interval_sec) ->

# 壁を避ける

@wallAvoidance()

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

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

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

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

@v.plusEq(@a.times interval_sec)

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

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

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

@pos.plusEq(@v.times interval_sec)

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

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

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

return

# 壁を避ける行動

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

wallAvoidance: ->

if @pos.x <= Creature._wallDetectionLength

@a.x =

Creature._wallRepulsionParam *

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

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

@a.x =

-Creature._wallRepulsionParam *

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

else

@a.x = 0

if @pos.y <= Creature._wallDetectionLength

@a.y =

Creature._wallRepulsionParam *

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

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

@a.y =

-Creature._wallRepulsionParam *

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

else

@a.y = 0

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

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

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

class Cluster

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

constructor: (canvas) ->

@creatures = []

@canvas = canvas

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

return

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

clearCreatures: ->

@creatures = []

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

addCreature: (creature) ->

@creatures.push(creature)

return

# 群の全個体を描画する

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

draw: ->

@context.fillStyle = "#e0e0e0"

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

for creature in @creatures

creature.draw(@context)

return

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

move: (interval_sec) ->

for creature in @creatures

creature.move(interval_sec)

return

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

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

class Controler

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

@interval_sec: 1 # animation frame interval in seconds

constructor: (canvas) ->

# Boidsの活動領域

@field = new Field(canvas)

# 群のオブジェクト

@cluster = new Cluster(canvas)

# 個体の数

@population = 0

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

@isRunning = false

@timer = undefined

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

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

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

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

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

setIntervalSec: (@interval_sec) ->

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

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

createCreature: ->

cr = new Creature(@cluster, @field)

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

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

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

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

cr.setPosition(x, y)

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

return cr

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

generate: (@population) ->

@cluster.clearCreatures()

for i in [1..@population]

cr = @createCreature()

@cluster.addCreature(cr)

@cluster.draw()

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

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

startAndStop: () ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval =>

@cluster.move(@interval_sec)

@cluster.draw()

return

, @interval_sec * 1000

@isRunning = true

return

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

Boids20.Controler = Controler

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

jQuery ($) ->

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

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

controler = new Boids20.Controler(canvas)

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

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

controler.setVMax(BD20_V_MAX)

controler.setCreatureSize(BD20_CREATURE_SIZE)

controler.setWallDetectionLength(BD20_WALL_DETECTION_LENGTH)

controler.setWallRepulsionParam(BD20_WALL_REPULSION_PARAM)

controler.setIntervalSec(BD20_INTERVAL_SEC)

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

$("#boids20_generate").click ->

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

if pop < 1

pop = 1

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

controler.generate(pop)

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

$("#boids20_start_and_stop").click ->

controler.startAndStop()

↓　Boids 2.1のコード説明へ