Boids – 群れの再現

2016-06-22 / tau / 1件のコメント

概要

ボイド(Boids)は、アメリカのアニメーション・プログラマCraig Raynoldsが考案した人工生命シミュレーションプログラム。名称は鳥もどき(bird-oid)に由来。

多数の個体からなる群において、各個体の行動ルールを定めておき、一定のランダム性のもと自由に行動させる。個体が単純なルールに基づいて動きながら、群全体としてまとまった動きが再現される。

ルール

Boidsのルールとして、一般に以下の3項目が適用される。

分離(Separation): 他の個体とぶつからないように距離をとる。
結合(Cohesion): 群れの中心方向へ向かうように方向を変える。
整列(Alignment): 他の個体群と概ね同じ方向に飛ぶように速度と方向を合わせる。

群を構成する個体は、それぞれ独自の位置・速度を持って動きながら、上記3つのルールに従うことによって、群としての行動をとるようになる。

デモンストレーション

CoffeeScript

JavaScriptよりすっきりと書けるCoffeeScriptで、より遊べるものを作っていった。この過程で、CoffeeScript/JavaScriptの変数のスコープだとかパッケージの考え方だとかが勉強になった。

CoffeeScript版Boidsのトップ
Boids 1.x – 準備用コードの開発過程
Boids 2.x – 行動ルールの適用過程
Boids Application

JavaScript

JavaScriptに慣れるために作ったプログラム群。

基本的なBoidsのコード構築
- 枠組みの準備
- 基本コード
条件と挙動のバリエーション

JavaScript Tips – 文字列の一括置換

2016-06-22 / tau / コメントする

String.prototype.replace()

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

var str = "abcdefabcdefabcdef";
var newStr = str.replace( /cd/g, "CD" );

1 2	var str = "abcdefabcdefabcdef"; var newStr = str.replace( /cd/g, "CD" );

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

split/join

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

split

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

var str = "abcdefabcdefabcdef";
var array = str.split( "cd" );

1 2	var str = "abcdefabcdefabcdef"; var array = str.split( "cd" );

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

[ "ab", "efab", "efab", "ef" }

1	[ "ab", "efab", "efab", "ef" }

join

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

var newStr = array.join( "CD" );

1	var newStr = array.join( "CD" );

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

abCDwfabCDef

1	abCDwfabCDef

一括置換

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

var newStr = str.split( "置換対象" ).join( "置換内容" );

1	var newStr = str.split( "置換対象" ).join( "置換内容" );

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

2016-06-22 / tau / コメントする

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

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

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

<script>
main();

function main() {
  console.log( "First main() function" );
}
</script>


<script>
main();

function main() {
  console.log( "Second main() function" );
}
</script>


<script src="third_main_function.js">
</script>

main();

function main() {

console.log( "First main() function" );

}

</script>

main();

function main() {

console.log( "Second main() function" );

}

</script>

</script>

グローバル変数は干渉

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

<script>
var grovalVariable="global";

main();

function main() {
  console.log( grovalVariable );
}
</script>


<script>
main();

function main() {
  console.log( grovalVariable );
}
</script>


<script>
var grovalVariable = "overwritten"
main();

function main() {
  console.log( grovalVariable );
}
</script>

var grovalVariable="global";

main();

function main() {

console.log( grovalVariable );

}

</script>

main();

function main() {

console.log( grovalVariable );

}

</script>

var grovalVariable = "overwritten"

main();

function main() {

console.log( grovalVariable );

}

</script>

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

global
global
overwritten

global

overwritten

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

外部ファイルの注意点

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

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

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

【HTMLファイル】

<!DOCTYPE html>

<html lang="ja">

<head>
<script src="myclass.js"></script>
<script src="instance1.js"></script>
<script src="instance2.js"></script>
</head>

<body>
<input type="button" value="Instance 1" onclick="instance1()"><br>
<input type="button" value="Instance 2" onclick="instance2()">
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

【クラス定義ファイル】

function MyClass( name ) {
  this.name = name;
}

function MyClass( name ) {

this.name = name;

}

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

var globalVariable = 1;
var globalInstance = new MyClass( "Global 1" );

function instance1() {
  var localInstance = new MyClass( "Local 1" );

  console.log( globalVariable );
  console.log( globalInstance.name );
  console.log( localInstance.name );
}

var globalVariable = 1;

var globalInstance = new MyClass( "Global 1" );

function instance1() {

var localInstance = new MyClass( "Local 1" );

console.log( globalVariable );

console.log( globalInstance.name );

console.log( localInstance.name );

}

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

var globalVariable = 2;
var globalInstance = new MyClass( "Global 2" );

function instance2() {
  var localInstance = new MyClass( "Local 2" );

  console.log( globalVariable );
  console.log( globalInstance.name );
  console.log( localInstance.name );
}

var globalVariable = 2;

var globalInstance = new MyClass( "Global 2" );

function instance2() {

var localInstance = new MyClass( "Local 2" );

console.log( globalVariable );

console.log( globalInstance.name );

console.log( localInstance.name );

}

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

("Instance 1"ボタンを押下)
2
Global 2
Local 1
("Instance 2"ボタンを押下)
2
Global 2
Local 2

("Instance 1"ボタンを押下)

Global 2

Local 1

("Instance 2"ボタンを押下)

Global 2

Local 2

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

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

JavaScript – その他

2016-06-21 / tau / コメントする

処理時間の計測

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

console.time( "timer" );

var n = 0;
while ( n < 1000000 ) {
  n++;
}

console.timeEnd( "timer" );

console.time( "timer" );

var n = 0;

while ( n < 1000000 ) {

n++;

}

console.timeEnd( "timer" );

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

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

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
  } else {
    n--;
    countdown( n - 1 );
  }
}


console.log( "start" );
countdown( 100000 );

// 実行結果
// start
// Uncaught RangeError: Maximum call stack size exceeded

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

} else {

n--;

countdown( n - 1 );

}

console.log( "start" );

countdown( 100000 );

// 実行結果

// start

// Uncaught RangeError: Maximum call stack size exceeded

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

Lifegame (JavaScript)

2016-06-21 / tau / コメントする

概要

Javascript学習のスタートアップのために試作したもの。

内部に配列を持ち、世代交代の結果を文字ベースで表示し、setInterval()で更新している。

htmlのdiv要素内に文字ベースで表示している。

デモンストレーション

このアプリケーションは文字ベースなため、ブラウザやスタイルによって大変見にくい。別ページで用意したこのアプリケーションで、ブラウザによっては見やすくなる場合がある

パターン選択

移動体

周期型

長寿型

ランダム

実行

表示エリア

コード内容

HTML

カテゴリーごとの初期パターン選択ボタン、起動／停止ボタン、表示エリアを表示させている。

<div>
<h3>パターン選択</h3>
移動体
<input type="button" value="Grider" onclick="patternGrider()">
<input type="button" value="L-Spaceship" onclick="patternSpaceshipL()">
<input type="button" value="M-Spaceship" onclick="patternSpaceshipM()">
<input type="button" value="H-Spaceship" onclick="patternSpaceshipH()">
<br>
周期型
<input type="button" value="Octagon" onclick="patternOctagon()">
<input type="button" value="Nebula" onclick="patternNebula()">
<br>
長寿型
<input type="button" value="Die hard" onclick="patternDiehard()">
<br>
ランダム
<input type="button" value="Random" onclick="patternRandom()">
</div>

<div>
<h3>実行</h3>
<input type="button" value="start/stop" onclick="startAndStop()">
</div>

<div>
<h3>表示エリア</h3>
<div id="display_area"></div>


<script src="./js/app_lifegame1.js"></script>

<div>

<h3>パターン選択</h3>

移動体

<br>

周期型

<br>

長寿型

<br>

ランダム

</div>

<div>

</div>

<div>

<h3>表示エリア</h3>

JavaScript

グローバルな二次元配列にセルの情報を保持し、配列上で世代交代の処理をしたうえで、HTMLに書き出している。初期パターンの選択は、パターンごとの設定用関数を準備し、ボタンで呼び出している。主な処理ブロックは以下の通り。

グローバル処理: グローバル変数の宣言と初期値定義を行っている。
初期パターン選択: 各パターンのボタンのクリックに応じて、パターンごとに準備された関数が呼び出され、初期pターンの設定と表示を行う。
起動・停止: ボタンのクリックによって、一定時間間隔で世代交代関数を実行させ、停止させる。
世代交代: ライフゲームのルールに従い、一世代後のパターンを決定し、表示する。

グローバル処理

共通して利用する変数の宣言／定義
グリッドの初期化
初期状態のグリッドの表示

var isRunning = false;
var timer;

var rows = 20;
var cols = 20;
// エリアサイズ+2のグリッドを確保
var cell = new Array( rows + 2 );
for ( var i = 0; i <= rows + 1; i++ ) {
  cell[i] = new Array( cols + 2 );
}
// 更新用のグリッドを確保
var newCell = new Array( rows + 2 );
for ( var i = 0; i <= rows + 1; i++ ) {
  newCell[i] = new Array( cols + 2 );
}

initialize();

display();


function initialize() {
  for ( var i = 0; i <= rows + 1; i++ ) {
    for ( var j = 0; j <= cols + 1; j++ ) {
      cell[i][j] = 0;
      newCell[i][j] = 0;
    }
  }
}


function display() {
  var displayArea = document.getElementById( "display_area" );
  displayArea.innerHTML = "";

  for ( var i = 1; i <= rows; i++ ) {
    for ( var j = 1; j <= cols; j++ ) {
      displayArea.innerHTML += ( cell[i][j] == 0 ) ? "□" : "■";
    }
    displayArea.innerHTML += "<br>";
  }
}

var isRunning = false;

var timer;

var rows = 20;

var cols = 20;

// エリアサイズ+2のグリッドを確保

var cell = new Array( rows + 2 );

for ( var i = 0; i <= rows + 1; i++ ) {

cell[i] = new Array( cols + 2 );

}

// 更新用のグリッドを確保

var newCell = new Array( rows + 2 );

for ( var i = 0; i <= rows + 1; i++ ) {

newCell[i] = new Array( cols + 2 );

}

initialize();

display();

function initialize() {

for ( var i = 0; i <= rows + 1; i++ ) {

for ( var j = 0; j <= cols + 1; j++ ) {

cell[i][j] = 0;

newCell[i][j] = 0;

}

function display() {

var displayArea = document.getElementById( "display_area" );

displayArea.innerHTML = "";

for ( var i = 1; i <= rows; i++ ) {

for ( var j = 1; j <= cols; j++ ) {

displayArea.innerHTML += ( cell[i][j] == 0 ) ? "□" : "■";

}

displayArea.innerHTML += "<br>";

}

初期パターン選択

ボタンで選択された初期パターンに対応した設定関数が呼び出される。設定関数はパターンごとに準備され、配列リテラルの内容を、グリッドの”ほぼ中央”にコピーする。

function patternGrider() {
  initialize();

  var pattern = [
    [1,1,1],
    [1,0,0],
    [0,1,0]
  ];

  copyPattern( pattern );

  display();
}

function patternSpaceshipL() {
  initialize();

  var pattern = [
    [0,1,0,0,1],
    [1,0,0,0,0],
    [1,0,0,0,1],
    [1,1,1,1,0]
  ];

  copyPattern( pattern );

  display();
}


function copyPattern( pattern ) {
  var patternRow = pattern.length;
  var patternCol = pattern[0].length;
  var startRow = Math.floor( rows / 2 ) - Math.floor( patternRow / 2 );
  var startCol = Math.floor( cols / 2 ) - Math.floor( patternCol / 2 );
  for ( var i = 0; i < patternRow; i++ ) {
    for ( var j = 0; j < patternCol; j++ ) {
      cell[startRow + i][startCol + j] = pattern[i][j];
    }
  }
}

function patternGrider() {

initialize();

var pattern = [

[1,1,1],

[1,0,0],

[0,1,0]

];

copyPattern( pattern );

display();

}

function patternSpaceshipL() {

initialize();

var pattern = [

[0,1,0,0,1],

[1,0,0,0,0],

[1,0,0,0,1],

[1,1,1,1,0]

];

copyPattern( pattern );

display();

}

function copyPattern( pattern ) {

var patternRow = pattern.length;

var patternCol = pattern[0].length;

var startRow = Math.floor( rows / 2 ) - Math.floor( patternRow / 2 );

var startCol = Math.floor( cols / 2 ) - Math.floor( patternCol / 2 );

for ( var i = 0; i < patternRow; i++ ) {

for ( var j = 0; j < patternCol; j++ ) {

cell[startRow + i][startCol + j] = pattern[i][j];

}

起動・停止

起動・停止のボタンが押されるたびに、稼働状態／停止状態がスイッチする。稼働時には、一定時間間隔で関数life()を呼び出している。life()関数内では、世代交代を施した後、表示をさせる。

function startAndStop() {
  if ( isRunning ) {
    clearInterval( timer );
    isRunning = false;
  } else {
    timer = setInterval( "life()", 500 );
    isRunning = true;
  }
}


function life() {
  nextGeneration();

  display();
}

function startAndStop() {

if ( isRunning ) {

clearInterval( timer );

isRunning = false;

} else {

timer = setInterval( "life()", 500 );

isRunning = true;

}

function life() {

nextGeneration();

display();

}

世代交代

あるセルの次世代の状態は、そのセル自身の状態と、その周囲8つのセルの数によって定められる。

	存在	不在
0～1	死滅	不在
2	存在	不在
3	存在	誕生
4～	死滅	不在

function nextGeneration() {
  var n;
  for ( var i = 1; i <= rows; i++ ) {
    for ( var j = 1; j <= cols; j++ ) {
      n = numOfNeighbors( i, j );

      if ( n <= 1 )
        newCell[i][j] = 0;
      else if ( n == 2 )
        newCell[i][j] = cell[i][j];
      else
        if ( n == 3 ) newCell[i][j] = 1;
      else
        newCell[i][j] = 0;
    }
  }

  for ( var i = 0; i <= rows + 1; i++ ) {
    for ( var j = 0; j <= cols + 1; j++ ) {
      cell[i][j] = newCell[i][j];
    }
  }
}

function numOfNeighbors( i, j ) {
  var count = 0;
  count += cell[i-1][j-1] + cell[i-1][j] + cell[i-1][j+1];
  count += cell[i][j-1] + cell[i][j+1];
  count += cell[i+1][j-1] + cell[i+1][j] + cell[i+1][j+1];

  return count;
}

function nextGeneration() {

var n;

for ( var i = 1; i <= rows; i++ ) {

for ( var j = 1; j <= cols; j++ ) {

n = numOfNeighbors( i, j );

if ( n <= 1 )

newCell[i][j] = 0;

else if ( n == 2 )

newCell[i][j] = cell[i][j];

else

if ( n == 3 ) newCell[i][j] = 1;

else

newCell[i][j] = 0;

}

for ( var i = 0; i <= rows + 1; i++ ) {

for ( var j = 0; j <= cols + 1; j++ ) {

cell[i][j] = newCell[i][j];

}

function numOfNeighbors( i, j ) {

var count = 0;

count += cell[i-1][j-1] + cell[i-1][j] + cell[i-1][j+1];

count += cell[i][j-1] + cell[i][j+1];

count += cell[i+1][j-1] + cell[i+1][j] + cell[i+1][j+1];

return count;

}

JavaScript – Timer

2016-06-21 / tau / コメントする

概要

JavaScriptのタイマ関連の実装。

Dateオブジェクトによる経過時間の計測
setInterval()による等時間間隔の起動
setTomeout()による等時間間隔の実行キュー登録

Dateオブジェクト

Dateオブジェクトのミリ秒単位の値を用いる方法。

DateオブジェクトのvalueOf()メソッドでミリ秒単位の現在時刻を取得し、これを用いて時間を判定する。これに続く処理を純粋に遅延させることになる。

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

なお、valueOf()メソッドの代わりに、+newオペレータを用いることができる。

var endTime = +new Date() + 3000

1	var endTime = +new Date() + 3000

setInterval()

起動

指定した時間間隔で関数を呼び出す。他の処理とは無関係に呼び出されるため、関数の処理内容が重い場合には、処理が終わる前に呼び出されてしまうことがある。

setInterval()関数の第1引数に繰り返し実行したい関数を、第2引数に繰り返し間隔をミリ秒単位の数値で指定。関数の指定方法としては、以下の3通り。

文字列で記述	関数名を文字列として記述。その際、関数の後の()も付けて記述
直接記述	関数名をクォート／ダブルクォートで囲まず直接記述。関数の後ろの()はつけない
無名関数を使って記述	function(){}の中にターゲットとなる関数を記述

# 文字列で関数名を記述する例
setInterval( "animation()";

# 関数名を直接記述する例
setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例
setInterval( function() { animation(); }, 1000 );

# 文字列で関数名を記述する例

setInterval( "animation()";

# 関数名を直接記述する例

setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例

setInterval( function() { animation(); }, 1000 );

引数がある場合

繰り返し実行する関数が引数を持つ場合、文字列で引数を記述するか、無名関数を使って記述する。

var char0 = '□';
var char1 = '■';

# 文字列で記述する例
setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例
setInterval( function() { animation( char0, char1 ); }, 1000 );

var char0 = '□';

var char1 = '■';

# 文字列で記述する例

setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例

setInterval( function() { animation( char0, char1 ); }, 1000 );

停止

タイマーの起動と停止を制御するには、起動時にsetInterval()を変数で参照し、そのオブジェクトに対してclearInterval()で停止をかける。

<input type="button" id="id_button" value="start/stop" onclick="startAndStop()">
<p id="id_target"></p>

<script>
<!--

var target = document.getElementById( "id_target" );
var char0 = '□';
var char1 = '■';
var isRunning = false;
var flag = 0;
var timer;

function startAndStop() {
  if ( isRunning ) {
    clearInterval( timer );
    isRunning = false;
  } else {
    timer = setInterval( "animation( char0, char1 )", 1000 );
    isRunning = true;
  }
}

function animation( ch0, ch1 ) {
  if ( flag == 0 ) {
    target.innerHTML = ch0;
    flag = 1;
  } else {
    target.innerHTML = ch1;
    flag = 0;
  }
}

//-->
</script>

<!--

var target = document.getElementById( "id_target" );

var char0 = '□';

var char1 = '■';

var isRunning = false;

var flag = 0;

var timer;

function startAndStop() {

if ( isRunning ) {

clearInterval( timer );

isRunning = false;

} else {

timer = setInterval( "animation( char0, char1 )", 1000 );

isRunning = true;

}

function animation( ch0, ch1 ) {

if ( flag == 0 ) {

target.innerHTML = ch0;

flag = 1;

} else {

target.innerHTML = ch1;

flag = 0;

}

//-->

</script>

setTimeout()

基本形

setTimeout()の第1引数に実行したい関数を文字列で、第2引数に遅延時間をミリ秒で指定する。

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {
  console.log( "in main()" );
}

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {

console.log( "in main()" );

}

上記の例では、以下のように推移する。

“start”を表示
setTimeout()を実行→3秒後にmain()関数が呼び出されるよう指定
“end”を表示
約3秒後にmain()が実行され、”in main()”を表示

起動

関数を文字列とする方法

setTimeout( "main()", 3000 );
setTimeout( "main( 100 )", 3000 );
setTimeout( "main( arg )", 3000 );

setTimeout( "main()", 3000 );

setTimeout( "main( 100 )", 3000 );

setTimeout( "main( arg )", 3000 );

文字列で引数を分離する方法

setTimeout( "main(" + 100 + ")", 3000);
setTimeout( "main(" + arg + ")", 3000 );

1 2	setTimeout( "main(" + 100 + ")", 3000); setTimeout( "main(" + arg + ")", 3000 );

無名関数を使う方法

setTimeout( function() { main(); }, 3000 );
setTimeout( function() { main( 100 ); }, 3000 );
setTimeout( function() { main( arg ); }, 3000 );

setTimeout( function() { main(); }, 3000 );

setTimeout( function() { main( 100 ); }, 3000 );

setTimeout( function() { main( arg ); }, 3000 );

タイマとしての利用

等時間間隔で実行したい関数で、setTimeout()において再帰的に自己を呼び出すことによってタイマーとして利用できる。

counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

遅延時間後に実行キューに登録されることから、それぞれの関数の実行は重複することなく担保される。このため、setInterval()に比べて関数間の衝突は生じないが、実際の実行間隔は遅延時間より長くなる。

停止

setTimeout()はsetInterval()と同じくタイマーIDを返し、これに対してclearTimeout()を実行することでタイマーを停止できる。

var timer;

setTimeout( function() { stop(); }, 5000 );
counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}


function stop() {
  clearTimeout( timer );
}

var timer;

setTimeout( function() { stop(); }, 5000 );

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

function stop() {

clearTimeout( timer );

}

上記の例では、タイマーを止めるstop()関数が5秒後に実行されるようにし、counter()を開始している。counter()自身がが終了する前にstop()が実行され、counter()は停止する。

補足

実行キュー

setTimeout()は、指定した関数を指定した遅延時間後に実行キューに登録する。このため、setTimeout()実行後に時間がかかる処理に移った場合、その処理中に遅延指定した関数がキューに登録され、処理実行後に関数が実行される。

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );


function hoo() {
  console.log( "delay" );
}

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

function hoo() {

console.log( "delay" );

}

上記の例の場合、

setTimeout()が実行され、3秒の遅延時間のカウント開始
whileループに入る
3秒後、hoo()が実行キューに登録される
5秒後、whileループから抜ける
実行キューに登録されたhoo()が即時実行される

スタック・オーバーフローの回避

setTimeout()を用いるシーンの一つに、再帰定義のコールスタック・オーバーフローの回避がある。この場合、再帰呼び出しの度にsetTimeout()でラップし、待機時間をゼロとする。

setTimeout( 関数, 0 )；

1	setTimeout( 関数, 0 )；

これにより、関数はスタックではなく実行キューに並べられ、オーバーフローは発生しない。ただし、通常の再帰呼び出しに比べて大幅に実行時間が増加する。

たとえば以下の例では単純なループにかかる時間を測っており、

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
  } else {
    n--;
    countdown( n );
  }
}


console.log( "start" );
console.time( "timer" );
countdown( 10000 );
console.timeEnd( "timer" );

// 実行結果
// start
// end
//timer: 10.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

} else {

n--;

countdown( n );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

console.timeEnd( "timer" );

// 実行結果

// start

// end

//timer: 10.000ms

次の例では、再帰的にsetTimeout()で自己を呼び出すようにしているが、処理時間の乖離が大きい。

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
    console.timeEnd( "timer" );
  } else {
    n--;
    setTimeout( function() {
      countdown( n ); 
    }, 0 );
  }
}

console.log( "start" );
console.time( "timer" );
countdown( 10000 );

// 実行結果
// start
// end
// timer: 40317.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

console.timeEnd( "timer" );

} else {

n--;

setTimeout( function() {

countdown( n );

}, 0 );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

// 実行結果

// start

// end

// timer: 40317.000ms

なお、この方法で関数をsetTimeout()に引き渡す際、引数まで含めて文字列で引き渡そうとするとUncaught ReferenceError: 引数 is not definedとエラーになる。

HTML Entity Converter (JavaScript)

2016-06-21 / tau / コメントする

概要

HTMLの文字のうち、'<‘、’>’、’&’とそれぞれの実体参照を相互変換。

変換の時は’&’→”&”の変換を最初にし、逆変換の時は”&”→’&’の変換を最後にする。
文字列の検索と置換には、[string].split[beforeString].join[afterString]で行っている。

実行

Entity Converterを新しいタブで開く

HTML5 – Canvas

2016-06-21 / tau / コメントする

基本手順

HTMLでのcanvas要素の設置、またはスクリプトでcanvas要素の動的な作成と埋め込み
canvasオブジェクトの取得と描画コンテキストの取得
描画コンテキストに対する描画

canvas要素の準備

HTMLに書く場合

id、幅と高さのほか、背景色や枠線など一般的なスタイルも設定可能。idを通して、スクリプトでcanvas要素のオブジェクトを取得する。

<canvas id="canvas1" width="300" height="200"></canvas>

<canvas id="canvas2" width="300" height="300" style="background-color: blue"></canvas>

<canvas id="canvas3" width="400" height="300" style="border:1px solid #000"></canvas>

canvasオブジェクトと描画コンテキストの取得

基本形

HTML要素でcanvasを配置し、JavaScriptで取得して操作する手順。

canvasオブジェクトに描画するために描画コンテキストを取得するが、その取得が可能かどうかの判定が必要。コンテキストは今のところ2Dのみ提供されている。

JavaScriptによる標準的な手順

※”2d”の引数を”2D”とすると読み込んでくれないので要注意。また、後述の注意点を参照。

<canvas id="canvas_test" width="400" height="300" style="border:1px solid #000"></canvas>


<script>
canvasTest();

function canvasTest() {
  var canvas = document.getElementById( "canvas_test" );
  if ( canvas.getContext ) {
    var ctx = canvas.getContext( "2d" );

    ctx.fillRect( 50, 50, 300, 200 );
  }
}
</script>

canvasTest();

function canvasTest() {

var canvas = document.getElementById( "canvas_test" );

if ( canvas.getContext ) {

var ctx = canvas.getContext( "2d" );

ctx.fillRect( 50, 50, 300, 200 );

}

</script>

実行結果

javascript-canvas-fillrect

CoffeeScriptとjQueryによる標準的な手順

jQuery ($) ->
  canvas = $("#canvas_test")[0]
  if canvas.getContext
    context = canvas.getContext("2d")
  context.fillRect(0, 0, 400, 300)

jQuery ($) ->

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

if canvas.getContext

context = canvas.getContext("2d")

context.fillRect(0, 0, 400, 300)

注意点～オブジェクト取得のタイミング

先の基本手順のスクリプトファイルをheadセクションで読み込んで実行すると、canvasオブジェクトが適正に読み込まれず、コンテキストがnullになってしまう。これは、canvasオブジェクトが形成される前にheadセクションでcanvasオブジェクトの処理を行うことになるため。

解決策として、DOMがすべて読み込まれてから必要なオブジェクトを取得するようにする。

スクリプトの読み込み位置を最後にする

外部ファイルをscript要素で読み込む場所を、</body>タグの直前のように最後に持ってくる。

DOMの読み込みが終わってから取得する

たとえばjQueryのjQuery(document).ready()を実装して、DOMがすべて読み込まれてから実行することを保証する。

基本の描画方法

単一の矩形

矩形や円弧など、単一の図形を一つの命令で書く方法。矩形の外形を描くstrokeRect()などが準備されている。

パスを指定する方法

以下の手順をとる。

必要に応じて、線の色や太さ、塗りつぶしの色などのスタイルを設定～strokeStyleなど
前のパスをリセットし、新しいパスの描画を始める～beginPath()
パラメータを指定して、直線や円弧などのパスを辿っていく～lineTo()など
それまでのパスの輪郭描画、塗りつぶしなどを行う～stroke()など

<canvas id="cvs" width="400" height="150" style="background-color:silver">
</canvas>

<script type="text/coffeescript">
  jQuery ($) ->
    canvas = $("#cvs")[0]
    context = canvas.getContext("2d") if canvas.getContext

    <!-- 左に黒枠の正方形を描く／デフォルトの線の色は黒、太さ1 -->
    x = 20
    y = 20
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.stroke()

    <!-- 真ん中に赤枠の正方形を描く／線の色と幅を指定 -->
    x = 140
    y = 20
    context.strokeStyle = "#ff0000"
    context.lineWidth = 10
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.closePath()
    context.stroke()

    <!-- 右に緑枠で青塗りつぶしの正方形を描く／塗りつぶしは線の中央が基準 -->
    x = 260
    y = 20
    context.strokeStyle = "#00ff00"
    context.fillStyle = "#0000ff"
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.closePath()
    context.stroke()
    context.fill()
</script>

</canvas>

jQuery ($) ->

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

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

x = 20

y = 20

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.stroke()

x = 140

y = 20

context.strokeStyle = "#ff0000"

context.lineWidth = 10

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.closePath()

context.stroke()

x = 260

y = 20

context.strokeStyle = "#00ff00"

context.fillStyle = "#0000ff"

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.closePath()

context.stroke()

context.fill()

</script>

実行結果

html-canvas-basic

スタイル設定

色と背景

strokeStyle [= value]: 線・輪郭の色やスタイルを指定。色指定の場合、red, blueなどの色名、”rgb(xx, xx, xx)”、”#dddddd”の3種類の指定方法。
fillStyle [= value]: 塗りつぶしの色やスタイルを指定。

線のスタイル

lineWidth [= value]: 線の幅を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は1.0。
lineCap [= value]: ラインキャップ(“butt”, “round”, “square”)を保持する。参照・設定可能。
lineJoin [= value]: 線の接合方法(“bevel”, “round”, “miter”)を保持する。参照・設定可能。
miterLimit [= value]: miter接合の場合の限界値を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は10.0。
setLineDash([segments]): 破線のパターンをセットする。パターンはリストで与え、[実線(, 間隔, 実線, 間隔...)]と記述。
getLineDash(): 破線のパターンを返す。
lineDashOffset [= value]: 破線パターンのオフセットを返す。

描画メソッド

矩形

strokeRect( x, y, w, h ): 矩形の外枠を描く。
fillRect( x, y, w, h ): 矩形の内側を塗りつぶす。塗りつぶしの基準となる外枠は、線の太さに関わらず線の中心線
clearRect( x, y, w, h ): 指定した矩形の内部を背景色でクリアする。

canvasの描画は、ほとんどの場合線分、曲線、図形が繋がったパスとして描かれるが、矩形に関しては、パスとは独立した図形として描くメソッドが準備されている。

引数は4つで、左上のx座標、y座標、長方形の幅、高さ。

ctx.strokeRect( 50, 50, 250, 150 );
ctx.fillRect( 100, 100, 250, 150 );

// clearRect()は背景色で矩形型に消去
ctx.clearRect( 25, 150, 200, 100 );

ctx.strokeRect( 50, 50, 250, 150 );

ctx.fillRect( 100, 100, 250, 150 );

// clearRect()は背景色で矩形型に消去

ctx.clearRect( 25, 150, 200, 100 );

実行結果

javascript-canvas-rect

パス

パスの構成方法

パスは線分、円弧などの要素を連続して繋いだもので、パスの軌跡を描画するだけでなく、パスに対して内部を塗りつぶしたり、ある点がパスの内部にあるか判定したりすることができる。

パス描画の手順は、抽象的な構造を保存するパスに対して要素を追加していく段階と、それらに対して描画や塗りつぶしなどの操作を行う段階からなる。

パスの実装方法として、以下のいくつかがありうる。

beginPath()による直接描画

beginPath()メソッドで開始し、一連のパス追加などの操作の後、stroke()メソッドで描画する。パスの再利用はできない。

【例】画面中央に白抜きの三角形が描画される。

ctx.beginPath();
ctx.moveTo(  50,  50 );
ctx.lineTo( 350, 100 );
ctx.lineTo( 200, 250 );
ctx.closePath();
ctx.stroke();

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 350, 100 );

ctx.lineTo( 200, 250 );

ctx.closePath();

ctx.stroke();

※begtinPath()を書かないと、前の描画がリフレッシュされず全て残ってしまう。
※stroke()を書かないとパスが描画されない。

パス構築を関数とする方法

パスの構築までを関数化し、その関数呼び出し後に描画する。関数を呼び出すことで、直前のパスとして再利用可能

【例】上記と同じ三角形が一旦白抜きで描かれた後、すぐに同じ三角形が黒で塗りつぶされて描かれる。

drawPath();
ctx.stroke();

drawPath();
ctx.fill();

function drawPath() {
  ctx.beginPath();
  ctx.moveTo(  50,  50 );
  ctx.lineTo( 350, 100 );
  ctx.lineTo( 200, 250 );
  ctx.closePath();
}

drawPath();

ctx.stroke();

drawPath();

ctx.fill();

function drawPath() {

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 350, 100 );

ctx.lineTo( 200, 250 );

ctx.closePath();

}

Path2Dオブジェクトを用いる方法

Path2Dオブジェクトのインスタンスにパスを追加し、これに対して描画する。パスオブジェクトが残るので、再利用可能。

【例】上記と同じく、白抜きの三角形の描画後に黒塗りの三角形が描画される。

var path = new Path2D();

path.moveTo(  50,  50 );
path.lineTo( 350, 100 );
path.lineTo( 200, 250 );
path.closePath();

ctx.stroke( path );

ctx.fill( path );

var path = new Path2D();

path.moveTo( 50, 50 );

path.lineTo( 350, 100 );

path.lineTo( 200, 250 );

path.closePath();

ctx.stroke( path );

ctx.fill( path );

クリッピング

＜略＞

パス内部の判定

context.isPointInPath( x, y )
- 現在の設定されているサブパスに対して、点(x, y)が内部にあればtrue、外ならばfalseを返す
context.isPointInPath( path, x, y )
- pathで指定されたPath2Dオブジェクトに対して、天(x, y)が内部にあるかどうかを判定する

直接描画に対する判定の問題

1番目の表現の場合、直前に構成されたパスが判定対象となる。以下の例では二つの矩形を描いているが、内部判定は最後に書かれた矩形に対してのみなされる。

javascript-canvas-inner

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

ctx.beginPath();
ctx.rect(  50,  50, 150, 100 );
ctx.stroke();

ctx.beginPath();
ctx.rect( 180, 120, 150, 100 );
ctx.stroke();


ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
console.log( ctx.isPointInPath( x1, y1 ) );
// 結果はfalse
// 最後に描かれた右下の矩形から見れば外側になるため

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );
console.log( ctx.isPointInPath( x2, y2 ) );
// 結果はtrue
// 最後に書かれた右下の矩形の内部にあるため

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

ctx.beginPath();

ctx.rect( 50, 50, 150, 100 );

ctx.stroke();

ctx.beginPath();

ctx.rect( 180, 120, 150, 100 );

ctx.stroke();

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

console.log( ctx.isPointInPath( x1, y1 ) );

// 結果はfalse

// 最後に描かれた右下の矩形から見れば外側になるため

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( x2, y2 ) );

// 結果はtrue

// 最後に書かれた右下の矩形の内部にあるため

パス構成の関数化

複数のパスに対して判定を繰り返す場合、stroke()/fill()の描画メソッドを実行する前でもパスが構成されることを利用して、パス構成のための関数を切り分ける方法が考えられる。

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

rect1( ctx ).stroke();
rect2( ctx ).stroke();
ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

rect1( ctx );// 左上の長方形
console.log( ctx.isPointInPath( x1, y1 ) );// true
console.log( ctx.isPointInPath( x2, y2 ) );// false

rect2( ctx );// 右下の長方形
console.log( ctx.isPointInPath( x1, y1 ) );// false
console.log( ctx.isPointInPath( x2, y2 ) );// true


function rect1( ctx ) {
  ctx.beginPath();
  ctx.rect(  50,  50, 150, 100 );
  return ctx;
}

function rect2( ctx ) {
  ctx.beginPath();
  ctx.rect( 180, 120, 150, 100 );
  return ctx;
}

　上記のコードにより期待した結果は得られるが、判定の度にパス構成

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

rect1( ctx ).stroke();

rect2( ctx ).stroke();

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

rect1( ctx );// 左上の長方形

console.log( ctx.isPointInPath( x1, y1 ) );// true

console.log( ctx.isPointInPath( x2, y2 ) );// false

rect2( ctx );// 右下の長方形

console.log( ctx.isPointInPath( x1, y1 ) );// false

console.log( ctx.isPointInPath( x2, y2 ) );// true

function rect1( ctx ) {

ctx.beginPath();

ctx.rect( 50, 50, 150, 100 );

return ctx;

}

function rect2( ctx ) {

ctx.beginPath();

ctx.rect( 180, 120, 150, 100 );

return ctx;

}

　上記のコードにより期待した結果は得られるが、判定の度にパス構成

Path2Dオブジェクトに対する判定

isPointInPath()メソッドの2番目の表現は、第1引数にpathを渡すことができる。各々のパスをPath2Dオブジェクトに保持することで、よりシンプルに内部判定を行うことができる。

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

var rect1 = new Path2D();
var rect2 = new Path2D();

// 左上の矩形のパス構成
rect1.rect( 50, 50, 150, 100 );

// 右下の矩形のパス構成
rect2.rect( 180, 120, 150, 100 );

ctx.stroke( rect1 );
ctx.stroke( rect2 );

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( rect1, x1, y1 ) );// true
console.log( ctx.isPointInPath( rect1, x2, y2 ) );// false
console.log( ctx.isPointInPath( rect2, x1, y1 ) );// false
console.log( ctx.isPointInPath( rect2, x2, y2 ) );// true

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

var rect1 = new Path2D();

var rect2 = new Path2D();

// 左上の矩形のパス構成

rect1.rect( 50, 50, 150, 100 );

// 右下の矩形のパス構成

rect2.rect( 180, 120, 150, 100 );

ctx.stroke( rect1 );

ctx.stroke( rect2 );

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( rect1, x1, y1 ) );// true

console.log( ctx.isPointInPath( rect1, x2, y2 ) );// false

console.log( ctx.isPointInPath( rect2, x1, y1 ) );// false

console.log( ctx.isPointInPath( rect2, x2, y2 ) );// true

パスの要素

線分

moveTo()　開始点に移動
lineTo()　次の点まで線を描く～以下、繰り返し
closePath()　パスの終了時、開始点まで繋いでパスを閉じる場合に指定

// 左上、閉じたパスの例
ctx.beginPath();
ctx.moveTo(  20,  30 );
ctx.lineTo( 190,  50 );
ctx.lineTo( 150, 140 );
ctx.closePath();
ctx.stroke();

// 右上、閉じたパスを塗りつぶした例
ctx.beginPath();
ctx.moveTo(  20, 170 );
ctx.lineTo( 190, 190 );
ctx.lineTo( 150, 280 );
ctx.stroke();

// 左下、開いたパスの例
ctx.beginPath();
ctx.moveTo( 220,  30 );
ctx.lineTo( 390,  50 );
ctx.lineTo( 350, 140 );
ctx.closePath();
ctx.fill();

// 右下、開いたパスを塗りつぶした例
ctx.beginPath();
ctx.moveTo( 220, 170 );
ctx.lineTo( 390, 190 );
ctx.lineTo( 350, 280 );
ctx.fill();

// 左上、閉じたパスの例

ctx.beginPath();

ctx.moveTo( 20, 30 );

ctx.lineTo( 190, 50 );

ctx.lineTo( 150, 140 );

ctx.closePath();

ctx.stroke();

// 右上、閉じたパスを塗りつぶした例

ctx.beginPath();

ctx.moveTo( 20, 170 );

ctx.lineTo( 190, 190 );

ctx.lineTo( 150, 280 );

ctx.stroke();

// 左下、開いたパスの例

ctx.beginPath();

ctx.moveTo( 220, 30 );

ctx.lineTo( 390, 50 );

ctx.lineTo( 350, 140 );

ctx.closePath();

ctx.fill();

// 右下、開いたパスを塗りつぶした例

ctx.beginPath();

ctx.moveTo( 220, 170 );

ctx.lineTo( 390, 190 );

ctx.lineTo( 350, 280 );

ctx.fill();

実行結果

javascript-canvas-line

曲線

quadraticCurveTo(…)
bezierCurveTo(…)

＜略＞

円弧

arc( x, y, r, startAngle, endAngle, anticlockwise )
arcTo( x1, y1, x2, y2, r )

arcメソッドはパスの一部として円弧を描く。直前の座標軸からarcの開始点までと、arcの終了点から次の開始点なまでは線分が挿入される。

座標軸の正の方向が、x軸は右、y軸は下となっていることに注意。このため、一般的な数学表現と上限反転した体系になっていて、一般的な正の回転方向も時計回りとなる。

arcTo()メソッドの挙動は以下の通り。

直前の描画点(x0, y0)と(x1, y1)を結ぶ線分l1を想定する
(x1, y1)と(x2, y2)を結ぶ線分l2を想定する
半径rでこの二つの線分に接する円弧を想定する(二つの直線の角をとるイメージ
l1、l2と円弧の接点を算出する
(x0, y0)～l1と円弧の接点を直線で結ぶ
l1とl2を円弧で結ぶ
l2の接点と次の描画開始点を直線で結ぶ

すなわち、(x2, y2)を次の描画開始点と一致させておけば、折れ線(x0, y0)～(x1, y1)～(x2, y2)の角が半径rの円弧で丸くなる。

// 左上、真円の例
ctx.beginPath();
ctx.arc( 100, 80, 60, 0, Math.PI * 2, true );
ctx.stroke();

// 右上、0度～225度まで時計回りに描いた円弧
ctx.beginPath();
ctx.arc( 300, 80, 60, 0, 225 / 180 * Math.PI, false );
ctx.stroke();

// 左下、円弧を塗りつぶした例
ctx.beginPath();
ctx.arc( 100, 220, 60, 0, 270 / 180 * Math.PI, false );
ctx.fill();

// 右下、arcはパスの一部として扱われる
ctx.beginPath();
ctx.arc( 300, 220, 60, 0, Math.PI, true );
ctx.arc( 300, 220, 40, Math.PI, 0, false );
ctx.arc( 300, 220, 20, 0, Math.PI, true );
ctx.stroke();

// arcToの例、直線の角が丸くなる
ctx.beginPath();
ctx.moveTo( 250, 280 );
ctx.arcTo( 300, 280, 300, 200, 20 );
ctx.lineTo( 300, 230 );
ctx.stroke();

// 左上、真円の例

ctx.beginPath();

ctx.arc( 100, 80, 60, 0, Math.PI * 2, true );

ctx.stroke();

// 右上、0度～225度まで時計回りに描いた円弧

ctx.beginPath();

ctx.arc( 300, 80, 60, 0, 225 / 180 * Math.PI, false );

ctx.stroke();

// 左下、円弧を塗りつぶした例

ctx.beginPath();

ctx.arc( 100, 220, 60, 0, 270 / 180 * Math.PI, false );

ctx.fill();

// 右下、arcはパスの一部として扱われる

ctx.beginPath();

ctx.arc( 300, 220, 60, 0, Math.PI, true );

ctx.arc( 300, 220, 40, Math.PI, 0, false );

ctx.arc( 300, 220, 20, 0, Math.PI, true );

ctx.stroke();

// arcToの例、直線の角が丸くなる

ctx.beginPath();

ctx.moveTo( 250, 280 );

ctx.arcTo( 300, 280, 300, 200, 20 );

ctx.lineTo( 300, 230 );

ctx.stroke();

実行結果

javascript-canvas-arc

矩形

rect( x, y, w, h )

rect()はサブパスを持つ矩形を描く。

先行するパスとは接続しない
後続のパスがある場合、(x, y)から次の描画開始点まで線分で結ばれる

ctx.beginPath();
ctx.moveTo( 50, 50 );
ctx.lineTo( 150, 50 );
// この間は接続されず、新たに矩形が開始図形となる
ctx.rect( 150, 150, 100, 50 );
ctx.lineTo( 300, 50 );
ctx.stroke();

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 150, 50 );

// この間は接続されず、新たに矩形が開始図形となる

ctx.rect( 150, 150, 100, 50 );

ctx.lineTo( 300, 50 );

ctx.stroke();

実行結果

javascript-canvas-rectpath

JavaScript – クラス

2016-06-21 / tau / コメントする

クラスの構築

コンストラクタ

JavaScriptではクラス定義はなく、コンストラクタを関数で定義する。

thisはこの関数が含まれるオブジェクト(のインスタンス)を指す
newによって新しいオブジェクトの無名インスタンスが生成される
代入演算子(=)によって、変数が上記のインスタンスを参照する
その結果、thisは定義されたインスタンスを指す

コンストラクタで定義されていないプロパティでも、インスタンスごとに後から追加可能だが、これは可読性やクラスとしての一貫性を損なう。

function MyClass( name ) {
this.name = name;
}

var john = new MyClass( "John" );
var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される
console.log( john.name );
console.log( louis.name );

// 未定義のプロパティはundefined
console.log( john.age );
console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能
instance1.age = 30;
console.log( john.age );// 30
console.log( louis.age );// undefined

function MyClass( name ) {

this.name = name;

}

var john = new MyClass( "John" );

var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される

console.log( john.name );

console.log( louis.name );

// 未定義のプロパティはundefined

console.log( john.age );

console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能

instance1.age = 30;

console.log( john.age );// 30

console.log( louis.age );// undefined

インスタンスの識別

同じクラスのインスタンスへの参照が同一か異なるかを比較することができる。

function MyClass() {
}

me = new MyClass();
copy = me;
other = new MyClass();

console.log( ( me == me ) ); // true
console.log( ( me == copy ) ); // true
console.log( ( me == other ) ); // false
console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false
console.log( ( me != copy ) ); // false
console.log( ( me != other ) ); // true
console.log( ( copy != other ) ); // true

function MyClass() {

}

me = new MyClass();

copy = me;

other = new MyClass();

console.log( ( me == me ) ); // true

console.log( ( me == copy ) ); // true

console.log( ( me == other ) ); // false

console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false

console.log( ( me != copy ) ); // false

console.log( ( me != other ) ); // true

console.log( ( copy != other ) ); // true

この比較はthisを用いても可能。

function MyClass() {
}

MyClass.prototype.isSameAs = function( other ) {
return ( this == other ) ? true : false;
}

me = new MyClass();
copy = me;
another = new MyClass();

console.log( me.isSameAs( me ) ); // true
console.log( me.isSameAs( copy ) ); // true
console.log( me.isSameAs( another ) ); // false

function MyClass() {

}

MyClass.prototype.isSameAs = function( other ) {

return ( this == other ) ? true : false;

}

me = new MyClass();

copy = me;

another = new MyClass();

console.log( me.isSameAs( me ) ); // true

console.log( me.isSameAs( copy ) ); // true

console.log( me.isSameAs( another ) ); // false

メソッド

非効率的な方法

コンストラクタの中で、プロパティと同じようにthis.[関数名]と無名関数定義によってプロパティを定義可能。

function MyClass( name ) {
this.name = name;
this.age;

this.setAge = function( age ) {
this.age = age;
}
}

var john = new MyClass( "John" );
john.setAge( 30 );

console.log( john.age );

function MyClass( name ) {

this.name = name;

this.age;

this.setAge = function( age ) {

this.age = age;

}

var john = new MyClass( "John" );

john.setAge( 30 );

console.log( john.age );

ただし、thisで指定された対象はインスタンスごとに生成・保持されるため、上記コードではインスタンスの数分のメソッドが生成されてしまう。

prototypeによる方法

JavaScriptにおける全てのオブジェクトはObjectに由来する。すべてのオブジェクトはObject.prototypeからメソッドとプロパティを継承しているが、それらは上書きすることが可能。

インスタンスでメソッドを実行しようとした時にそのメソッドが存在しない場合、そのクラスのprototypeにメソッドを探しに行く。新たに定義したクラスのprototypeプロパティに関数を定義しておくことで、全てのインスタンスが共通のprototype下のメソッドを利用することになる。

prototypeにメソッドを定義する方法の一つは、メソッド単位でクラスのprototypeに登録する方法と、オブジェクトリテラルでまとめて定義する方法がある。

メソッド単位で定義する方法

メソッドごとにクラスのprotottypeに一つずつ記述していく方法。

function MyClass() {
this.name = "";
}

MyClass.prototype.setName = function( name ) {
this.name = name;
}

MyClass.prototype.getName = function() {
return( this.name );
}

function MyClass() {

this.name = "";

}

MyClass.prototype.setName = function( name ) {

this.name = name;

}

MyClass.prototype.getName = function() {

return( this.name );

}

オブジェクトリテラルでまとめて定義する方法

クラスの初期設定時に連想配列で定義する。

この方法は、新規にメソッドを定義する場合に一回のみ使用するもので、後から同じ方法でメソッドを追加しようとしした場合、最初の定義内容がすべてオーバーライドされる。

ただ、メソッド定義を敢えてダイナミックに変更するのでなければ、この方法はメソッドの定義のあり方として明快ともいえる。

function MyClass() {
this.name = "";
}

MyClass.prototype = {
setName: function( name ) {
this.name = name;
}, // ここのカンマに注意

getName: function() {
return( this.name );
}
}

function MyClass() {

this.name = "";

}

MyClass.prototype = {

setName: function( name ) {

this.name = name;

}, // ここのカンマに注意

getName: function() {

return( this.name );

}

メソッド定義の注意点

クラスの生成はコンクトラクタの前後を問わないが、メソッドを実行する段階では、prototypeへのメソッドの登録が実行済みでなければならない(記述位置の前後関係ではなく、関数呼び出しも含めた実体上の実行順序)。

C++やJavaなどコンパイラが全体の宣言・定義をパースする場合は問題ないが、インタプリタ系のJavaScriptは、定義=宣言と実行の順序については厳しい。

継承

子クラスのprototypeに親クラスを登録することで継承でき、親クラスのプロパティ、メソッドも利用可能となる。

ChildClass.prototype = new ParentClass();

1	ChildClass.prototype = new ParentClass();

これは厳密な意味でのクラスの継承というよりは、そのような挙動をするためのprototypeチェーンに組み込んだというところ。

注意点

子クラスのメソッドの定義は必ず親クラスの継承の後で行うこと。継承の際にprototypeの内容が上書きされてしまうため、継承の前にメソッド定義すると子クラスのメソッドが参照されなくなってしまう(下記の例では、”instance.setAge is not a function”とエラーになる)。

子クラスのメソッド定義でオブジェクトリテラルを使ってはいけない。継承の後にこれを行うと、親クラスのメソッドがすべて上書きされてしまう。

// 親クラスとメソッドの定義
function ParentClass() {
this.name = "";
}

ParentClass.prototype = {
setName: function( name ) {
this.name = name;
}
}

// 子クラスの定義
function ChildClass() {
this.age = 0;
}

// クラスの継承
ChildClass.prototype = new ParentClass();


// 【重要】子クラスのメソッド定義は必ず継承の後で
// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で
ChildClass.prototype.setAge = function( age ) {
this.age = age;
}

/*
// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない
ChildClass.prototype = {
setAge: function( age ) {
this.age = age;
}
}
*/

// テスト
var instance = new ChildClass();
instance.setName( "John" );
instance.setAge( 30 );

console.log( instance.name );
console.log( instance.age );

// 親クラスとメソッドの定義

function ParentClass() {

this.name = "";

}

ParentClass.prototype = {

setName: function( name ) {

this.name = name;

}

// 子クラスの定義

function ChildClass() {

this.age = 0;

}

// クラスの継承

ChildClass.prototype = new ParentClass();

// 【重要】子クラスのメソッド定義は必ず継承の後で

// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で

ChildClass.prototype.setAge = function( age ) {

this.age = age;

}

// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない

ChildClass.prototype = {

setAge: function( age ) {

this.age = age;

}

// テスト

var instance = new ChildClass();

instance.setName( "John" );

instance.setAge( 30 );

console.log( instance.name );

console.log( instance.age );

JavaScript – 変数・スコープ

2016-06-21 / tau / コメントする

変数のスコープ

グローバルスコープ／ローカルスコープ

var宣言で定義された変数は、その関数内のローカルスコープ
var宣言なしで定義された変数は、どこで定義されてもグローバルスコープ

/*
　グローバル領域での定義
*/
v1 = "global1";
var v2 = "global2";

console.log( "start" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"


/*
　グローバル変数の関数内での参照
*/
f1();

function f1() {
  console.log( "in f1()" );
  console.log( "v1=" + v1 );// ->"global1"
  console.log( "v2=" + v2 );// ->"global2"
}


/*
　ローカル変数とグローバル変数
　・まずf2()内で同名の変数をローカル定義(var宣言)
　・その実行結果は、同名のグローバル変数に影響を与えない
　・ローカルで定義された変数はグローバル参照できない
*/
f2();
console.log( "after f2()" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"
//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {
  var v1 = "local1";
  var v2 = "local2";
  var v3 = "local3";
  console.log( "in f2()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}


/*
　関数内でのグローバル変数の影響
　・f3()内でvarなしで定義された変数はグローバル
　・既に存在すれば上書きされる(v1, v2)
　・存在していなければ新たにグローバル定義される(v3)
　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける
*/
f3();
console.log( "after f3()" );
console.log( "v1=" + v1 );// ->"local1"
console.log( "v2=" + v2 );// ->"local2"
console.log( "v3=" + v3 );// ->"local3"

function f3() {
  v1 = "local1";
  v2 = "local2";
  v3 = "local3";
  console.log( "in f3()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}<br>

　グローバル領域での定義

v1 = "global1";

var v2 = "global2";

console.log( "start" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

　グローバル変数の関数内での参照

f1();

function f1() {

console.log( "in f1()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

}

　ローカル変数とグローバル変数

　・まずf2()内で同名の変数をローカル定義(var宣言)

　・その実行結果は、同名のグローバル変数に影響を与えない

　・ローカルで定義された変数はグローバル参照できない

f2();

console.log( "after f2()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {

var v1 = "local1";

var v2 = "local2";

var v3 = "local3";

console.log( "in f2()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}

　関数内でのグローバル変数の影響

　・f3()内でvarなしで定義された変数はグローバル

　・既に存在すれば上書きされる(v1, v2)

　・存在していなければ新たにグローバル定義される(v3)

　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける

f3();

console.log( "after f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

function f3() {

v1 = "local1";

v2 = "local2";

v3 = "local3";

console.log( "in f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}<br>

ブロックスコープ

JavaScriptにはブロックスコープの概念はない。

関数の中のif{}やfor{}など複数のブロックで同じ変数名を用いると、関数内で共通の変数になる。

特に、for文のループカウンタなどの一時的な変数は、不用意にvar宣言なしで用いると、予期しないところでグローバルに影響を与えてしまう可能性がある。

/*
　関数f()を呼び出し、その後の変数をチェック
*/
f();
console.log( "after f()" );
console.log( "v1=" + v1 );// 関数内のvarなしはグローバル
//console.log( "v1=" + v2 ); -> error "not defined"
//console.log( "v1=" + v3 ); -> error "not defined"
console.log( "v4=" + v4 );// for文でもvarなしはグローバル


function f() {
  console.log( "in f()" );
  {
    v1 = "v1 in block";
    var v2 = "v2 in block";
  }
  console.log( "v1=" + v1 );
  console.log( "v2=" + v2 );

  // for文でvar宣言すれば、関数内ローカルにはなる
  for ( var v3 = 0; v3 < 2; v3++ ) {
    console.log( "v3 in for block:" + v3 );
  }
  // ただしブロック内のみのローカルとはならない
  console.log( "v3 out of for block:" + v3 );

  // for文でvarなしで宣言するとグローバル変数になる
  for ( v4 = 0; v4 < 2; v4++ ) {
    console.log( "v4 in for block:" + v4 );
  }
  console.log( "v4 out of for block:" + v4 );
}

　関数f()を呼び出し、その後の変数をチェック

f();

console.log( "after f()" );

console.log( "v1=" + v1 );// 関数内のvarなしはグローバル

//console.log( "v1=" + v2 ); -> error "not defined"

//console.log( "v1=" + v3 ); -> error "not defined"

console.log( "v4=" + v4 );// for文でもvarなしはグローバル

function f() {

console.log( "in f()" );

{

v1 = "v1 in block";

var v2 = "v2 in block";

}

console.log( "v1=" + v1 );

console.log( "v2=" + v2 );

// for文でvar宣言すれば、関数内ローカルにはなる

for ( var v3 = 0; v3 < 2; v3++ ) {

console.log( "v3 in for block:" + v3 );

}

// ただしブロック内のみのローカルとはならない

console.log( "v3 out of for block:" + v3 );

// for文でvarなしで宣言するとグローバル変数になる

for ( v4 = 0; v4 < 2; v4++ ) {

console.log( "v4 in for block:" + v4 );

}

console.log( "v4 out of for block:" + v4 );

}

関数の引数のスコープ

関数の引数はvarなしで宣言するが、スコープは関数内ローカルとなる。

var n = 1;

console.log( f( n ) );
console.log( n );

function f( n ) {
  console.log( n );

  n++;
  console.log( n );

  return n;
}

var n = 1;

console.log( f( n ) );

console.log( n );

function f( n ) {

console.log( n );

n++;

console.log( n );

return n;

}

グローバル領域でn = 1を定義
f( n )で引数を引き取った後、関数内ではn == 1
関数内でnをインクリメントし、n = 2
関数の結果はf( n ) = 2
その後、グローバル領域でn == 1で変化していない

変数操作のタイミング

グローバル変数への操作は、スクリプトがの実行の際に行われる。htmlファイル内であれば、そのファイルが読み込まれた時。別のjsファイルの場合はそれが読み込まれた時。

ローカル変数への操作は、その関数が実行された時。

以下の例では、htmlファイル読み込み時にグローバル変数が定義・参照され、その後ボタンを押すたびにmain()関数が実行され、ローカル変数が定義・参照される。

<input type="button" value="Test" onclick="main()">

<script>
var global = "global";

console.log( global );


function main() {
  var local = "local";

  console.log( global );
  console.log( local );
}
</script>

// 実行結果
// global
// 以下、ボタンを押すごとに
// global
// local

var global = "global";

console.log( global );

function main() {

var local = "local";

console.log( global );

console.log( local );

}

</script>

// 実行結果

// global

// 以下、ボタンを押すごとに

// global

// local