Path2D

概要

Path2DはJavaScriptによるWeb APIの一つで、一連のサブパスを保持する。Path2Dの内容は後に一度に描画される。

コンストラクタ

Path2Dのコンストラクタは3種類。

Path2D()
空のPath2Dオブジェクトをつくる。
Path2D(path)
既存のPath2Dオブジェクトを複製する。
Path2D(d)
SVGパスの文字列を与えてオブジェクトをつくる。

パスの追加

addPath(path)
現在のパスにpathを追加する。

パスの操作

moveTo(x, y)
(x, y)の点に移動する。
lineTo(x, y)
現在の点から(x, y)の点まで直線を引く。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
現在の点から(x, y)の点までベジエ曲線を描く。
quadraticCurveTo(cpx, cpy, x, y)
現在の点から(x, y)の点まで二次ベジエ曲線を描く。
arcTo(x1, y1, x2, y2, radius)
現在の点から、指定した制御点と半径で円弧を描く。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x, y)を中心とした半径radiusの円弧を描く。startAndleが開始角、endAngleが終了角で、デフォルトは時計回りだがanticlockwiseをtrueにすると反時計回りに描く。
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
(x, y)を中心とし、xyの2方向の半径を指定して楕円(弧)を描く。rotationは楕円全体の傾き。その他はarc()と同じ意味。
rect(x, y, width, height)
(x, y)から幅width、高さheightの長方形を描く。

 

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

概要

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

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

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

結果概要

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

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

一般的な方針

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

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

参考

実行環境1

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

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

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

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

実行環境2

  • 自作PC
  • Intel Core i5-4670/3.40GHz
  • RAM 4.00GB
a+b  9  10  9
a-b 12 11 12
a*b 7 9 7
a/b 7 7 7
a**b 72 71 72
abs(a) 11 12 17
abs(b) 12 17 12
sqrt(a) 13 13 13
sin(a) 27 25 23
cos(a) 24 25 25
tan(a) 43 43 42
asin(a) 53 53 54
acos(a) 53 50 51
atan(a) 41 41 41
atan2(a) 61 62 58
exp(a) 7 7 8
log(a) 6 7 7
random(a) 12 13 12

テストコード

 

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

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

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

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

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

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

 

スクリプトへの引数渡し

たとえば以下のような場合。

  • CoffeeScript、Javascriptの外部スクリプトに引数を渡したい
  • 外部スクリプトの定数定義を柔軟に変更可能なようにしたい

定数となる変数定義をスクリプト内に書くと、定数の値を変更したいときに再コンパイルやアップロードなどが必要になって煩雑。

以下の方法が考えられる。

  • HTMLの外部スクリプト呼び出しより前に、変数定義のscript要素を書く(変数のスコープはグローバルになる)
    • その際、行の末尾にセミコロン(;)をつけること
  • 外部スクリプト内で上で定義した変数を利用する

HTML

外部スクリプト

CoffeeScriptも実行時にはJSにコンパイルしたものを読み込むので、変数定義もJavascriptの文法で末尾にセミコロン(;)をつけなければならない。

上の例では、定数を意識して変数名を大文字のスネークケースとしたが、通常の変数名でも実行に問題はない。

 

Boids 2.x (JavaScript)

概要

Boids 1.3までで、基本的な個体の運動ルールを設定して群の動きを実現した。

これに対して、ルールの条件を変えて、それらが群の挙動に与える影響を見てみる。

Boids 2.0~引力と斥力の導入

考え方

Boids 1.3の基本的なコードでは、3つのルールについて、位置座標を元にした幾何的な計算で速度を変更したが、ここで結合と分離に対して引力・斥力の概念を導入する。

重力や正電気力は距離の自乗に反比例するが、この形で試したところ、かなり距離が近づくまで反応せず、近い距離になって急に力が強くなるため、挙動が不安定な傾向となった。

そこで、ここでは距離に反比例した引力・斥力が個体間に働くものとし、近傍距離以内では斥力が、それより遠く一定距離以内であれば引力が働くものとした。

挙動と考察

その挙動は、若干の振動があるものの基本コードと似ており、基本コードに対して、個体間の距離がより均等に近くなっている。心理的な行動が物理法則と類似である可能性を示唆している。

デモンストレーション

Boids 2.0を新しいタブで実行

Boids 2.1~直近個体に追随

考え方

結合と分離の実装は上記のまま、整列の条件を、直近の一個体の速度に追随するようルールを変更した。

挙動と考察

各個体が集まるのが極めて速く、群が密集状態になる。

また、群を形成してからのは振動を繰り返すのみで、、群全体としての移動は鈍い。

日常生活でも、近くの一人のみに注意して歩こうとすると却ってスムーズに移動できないことが多いが、これを示唆している。

デモンストレーション

Boids 2.1を新しいタブで実行

Boids 2.2~周辺個体に追随

考え方

整列のために追随するのが直近一個体では「近視眼的」なため、一定距離内の個体群の平均速度に追随するように変更。

挙動と考察

一個体のみに追随するよりも群として移動しやすくなるが、それほど大きな効果はなく、個体数が多くなるに従って(このケースでは個体数が15~20程度以上で)群として振動状態に入りやすくなる。

直近1個体でないとしても、周辺の動きだけに合わせると整然とした動きになりにくいことを示唆している。

デモンストレーション

Boids 2.2を新しいタブで実行

Boids 2.3~リーダーに追随

考え方

特定の一つの個体がリーダーとしてふるまい、他の個体はリーダーにのみ追随するルール。リーダーは他の個体のようなルールに従わないとしている。

挙動と考察

当然ながら、群の行動はリーダーの動きのみに追随して比較的なめらかになる。さらに、群全体が広がりを持つのも特徴。「雁行」を想起させる。

デモンストレーション

Boids 2.3を新しいタブで実行


前の記事:基本コード

 

Boids 1.x (JavaScript)

概要

Boids 1.0で準備した枠組みに、分離(Separation)、結合(Cohesion)、整列(Alignment)のルールを適用していく。

Boids 1.1~分離の導入

個体が近づいたときに、互いに近づき過ぎないように速度を修正するルールを導入。

デモンストレーション

Boids 1.1を新しいタブで実行

各個体が他の個体とぶつからないよう避けながらランダムに移動している。

グローバル定義部

個体同士が近づきすぎた場合の分離行動に入る最大距離を指定。

Creatureクラス

分離行動は個体のmove()メソッド内で実装し、相手との距離が大きいほど逆方向への力をかける。速度調整後、速さを初期設定の値にそろえる。

Boids 1.2~結合(Cohesion)の導入

分離に加えて、各個体が群として集まろうとするルール。具体には、群の中心に向かおうと速度を変更するルールを導入。

デモンストレーション

Boids 1.2を新しいタブで実行

個体がランダムに移動しながら、群を形成しようとしている。

グローバル定義部

まず、群の中心をグローバル変数として保持。

中心に向かって速度を変更する度合いを定数で指定。この値が小さいほど素早く、大きいほどゆるやかに群れようとする。

結合とのバランスで、分離の判定距離を小さめの値に設定している。

群の中心の算出

各個体が目指す群の中心を、実行関数moveAll()の中で計算する。ここでは、全個体の平均重心を群の中心としている。

Creatureクラス

結合行動も個体のmove()メソッド内で実装する。群の中心に向かって行くよう速度を変更。

ルールの適用準は、衝突回避を後にするため、結合→分離の順としている。

Boids 1.3~整列(Alignment)の導入

一通りのBoidsの実装の最終段階。

各個体が、群全体の移動方向に合わせようとするルールを導入。各個体が、自分の速度を群の全個体の平均速度に近づけようとする。

デモンストレーション

個体数

各個体が集まりながら「なんとなく」一定方向に動こうとしている。個体数が200程度と多くなると、群としての動きは鈍くなる。このとき、各個体が全く均等になるのではなく、数個程度集まって移動するさまが見られるのは興味深い。

グローバル定義部

整列の際の速度変更の度合いを指定する。この値が小さいほど素早く整列しようとする。

群の平均速度の算出

moveAll()関数を変更し、群の中心の算出に続いて平均速度を求める。

Creatureクラス

整列のルールを個体のmove()メソッドに実装する。

ルール適用の順番は、結合→整列→分離。これは一般に想定される生物の行動形態、「集まろうとする→一緒の方向に向かおうとする→衝突を避ける」と符合している。


前の記事:枠組みの準備

次の記事:条件と挙動のバリエーション


 

Boids 1.0 (JavaScript)

概要

BoidsをJavaScriptで再現するために、基本コードの枠組みとなるコード準備する。

  • 指定した下図の個体を発生させる
  • ボタン操作で各個体の動作を開始・停止する
  • 個体の動作は同じ速さでランダムな方向に動く

基本の動作から始めて順次拡充していくが、以後共通する仕様は以下の通り。

  • グローバル定義
    • HTML5のcanvasで描画することとし、canvasとそのコンテキストをグローバルオブジェクトとする
    • その他、個体や群れの挙動に係るパラメータもグローバル定義する
  • 個体のクラスCreature
    • move()メソッドは、個々のCreatureインスタンスの一定時間後の位置をその現在位置と速度から決定し、新しい位置に変更する
    • draw()メソッドは個々のCreatureインスタンスをcanvasに描く
    • 初期段階から、Boidsの3つのルールに対応するメソッドの枠のみ用意し、順次実装していく
  • Boidsの実行
    • 個体クラスのインスタンスをランダムな位置に複数発生させ、配列に格納する
    • 以下を繰返す
      • 現在位置の全てのCreatureオブジェクトをdrawAll()関数で描画
      • 一定時間間隔で全てのCreatureオブジェクトの位置をmoveAll()関数で変更する
      • moveAll()の中で3つのルールに対応する関数を呼び出すが、初期段階では枠のみ用意し、順次実装していく

仕様

以下の仕様で、個体とその群の生成、基本動作のみを実装する。

  • 操作
    • ブラウザのテキストボックスに個体数を入力
    • ボタンを押すごとに起動・停止を繰り返す
  • 初期設定
    • 初期状態で、ランダムな位置に個体を生成
    • 各個体の速さは一定とし、速度ベクトルの向きはランダムに与える
  • 挙動
    • 各個体は与えられた速度で移動
    • 上下左右の壁に当たった時は全反射
    • 個体間の干渉は考慮しない(重なりを許す)

デモンストレーション

個体数

スクリプトの内容

グローバル定義部

アプリケーション全体で保持・利用する変数・オブジェクトを定義。

Creatureクラス

一つ一つの個体を表すCreatureクラスを以下の様に構築する。これらのコンストラクタやメソッドは、以後の拡張を通して変わらない。

コンストラクタ

コンストラクタは、Creatureクラスのインスタンスを生成する。Creatureオブジェクトは、個々の座標と速度ベクトルの要素を保持する。

位置と速度のセッター

位置座標、速度ベクトルの要素を個体にセットする。

描画メソッド

自身をcanvasに描画する。ここでは位置座標を中心とする小円を描いている。canvasのコンテキストはグローバル変数contextに設定されている前提。

移動メソッド

与えられた速度で移動する。上下・左右の壁に当たった時の反射処理を行っている。

実行関数群

以下の関数群のうち、createCreatures()はボタンが押されるたときに与えられた数の個体を生成。

boids()はボタンが押されるたびに実行・停止を切り替える。

他の関数は、実行時に群全体を異動させ、描画するための関数。

createCreatures()~個体の生成

与えられた数の個体をCreatureインスタンスとして生成し、グローバルな配列に格納する。

boids()~メイン関数

ボタンが押されるたびに呼び出され、全体の実行/停止を制御する。

動画処理

タイマーにより個体を動かし、描画する。呼び出されるたびに、全ての個体を移動させ、描画する関数を呼び出す。

個体の移動

配列に格納された個体に移動を指示する。

個体の描画

配列に格納された個体に描画を指示する。


次の記事:基本コード

 

JavaScript Tips – 文字列の一括置換

String.prototype.replace()

以下の例は、文字列str中の”cd”を”CD”に一括置換し、結果は”abCDefabCDefabCDef”となる。

ただしこの方法では、//の間が直接文字列と評価されてしまうので、変数の内容を引き渡すことができない。

split/join

String.prototypeで定義されたsplit()メソッドとjoin()メソッドと用いて、文字列変数で引数を与えて一括置換ができる。

split

文字列操作のsplit()メソッドは、指定した文字列を検索して、それらで区切られた文字列を配列で返す。

上記の結果、配列arrayは以下の要素が格納される。

join

文字列操作のjoin()メソッドは、配列の要素を引数の文字列で繋いだ文字列を返す。

一つ上でsplit()の結果得られた配列に上記を適用すると、結果の文字列は以下のようになる。

一括置換

上記のsplit()join()の機能・戻値を考慮して、以下の用法で文字列の一括置換が可能。

 

JavaScript Tips – スクリプト単位のスコープ

関数はスクリプト・ローカル

関数はスクリプト間で影響を与えない。同じ関数名を異なるスクリプトで用いても干渉しない。

以下のコードのうち外部スクリプトの内容は、それより上の二つのスクリプトの内容と同じ。スクリプトごとにmain()関数を実行しているが、それぞれのスクリプトで定義されたmain()関数が実行され、エラーや干渉は起きない。

グローバル変数は干渉

以下のコードは、スクリプト間のグローバル変数の挙動を示している。

上記コードの実行結果は以下のとおり。

  • あるスクリプトでグローバル定義された変数は、それ以後のスクリプトに残される
  • それ以後のスクリプトで、重ねてvar定義は可能で、その後はそれ以降の定義による

外部ファイルの注意点

クラスなどの資源を共有化するために、スクリプトを外部ファイルとする場合の注意点。

  • 読み込みと実行
    • head要素内でスクリプトファイルを読み込む場合、script要素を記述した順番に読み込まれる
    • スクリプトファイルが読み込まれた時点で実行される
  • グローバル変数
    • グローバル変数を定義していた場合、スクリプトファイル読み込み時に定義される
    • 同じグローバル変数を異なるファイルで重複定義した場合、最後に読み込まれたスクリプトの定義結果が反映される(変数の重複宣言を参照)
  • クラス
    • ローカルなインスタンス名は同じ名前でも干渉しない
    • グローバルなインスタンスで重複定義されたオブジェクトは、最後に定義されたものが残る

以下に、クラス定義ファイルとインスタンス定義ファイルを別ファイルに分けた例を示す。

【HTMLファイル】

【クラス定義ファイル】

【インスタンス定義ファイル】

【別のインスタンス定義ファイル】

上記の実行結果と挙動は以下の通り。

  • head要素で3つのjsファイルが読み込まれる
  • 読み込まれた時点で、グローバルな変数とオブジェクトが定義される
  • 以降、ボタンを押すごとに、それぞれの関数でローカルな変数とオブジェクトが定義・表示される
  • グローバルな変数・オブジェクトについては、最後に定義されたinstance2.jsの定義内容

変数、オブジェクトとも、グローバル・スコープのものについては、head要素内で最後に読み込まれたinstance2.jsの内容が保持される。読み込み順を入れ替えて最後にinstance1.jsを置くと、結果も変化する。

 

JavaScript – その他

処理時間の計測

処理時間の計測には、console.time()とconsole.timeEnd()を用いることができる。

コールスタック・オーバーフロー

再帰のネストが深すぎると、コールスタック・オーバーフローが発生する。

これを回避する方法の一つとして、setTimeout()関数による方法がある。