CoffeeScript – HTMLから外部スクリプトファイルを実行

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

HTMLファイル

test_htmml.html

<html lang="ja">


<head>
<meta charset="utf-8">
<title>CoffeeScript Test</title>
<link rel="stylesheet" href="./coffee.css">
</head>

<body>

<h1 id="header"></h1>

<script type="text/javascript" src="./coffee/test_html.js">
</script>


</body>

</html>

<head>

<title>CoffeeScript Test</title>

</head>

<body>

</script>

</body>

</html>

外部スクリプトファイル

test_html.coffee

func = ->
  elment = document.getElementById("header")
  elment.innerHTML = "CoffeeScriptへようこそ"

func()

func = ->

elment = document.getElementById("header")

elment.innerHTML = "CoffeeScriptへようこそ"

func()

上記のCoffeeScriptファイルをコンパイル

coffee -c test_html.coffee

1	coffee -c test_html.coffee

コンパイル後のファイルは拡張子がjsになり、test_html.jsとなる。

このファイルを上のtest_html.htmlファイルのscript要素から読める場所に配置。

CoffeeScript – 関数

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

通常の関数

CoffeeScript特有の記法による。

関数は最後に演算された結果を戻り値とするようコンパイルされる。
戻り値を戻したくない場合は、引数なしのreturn文を明記する。

# 引数をとる場合
add = (x, y) ->
  x + y

# 引数がない場合
disp = ->
  alert("foo")

# 引数をとる場合

add = (x, y) ->

x + y

# 引数がない場合

disp = ->

alert("foo")

即時関数

引数の有無、値の渡し方などによって、以下から選択。

do ->
  console.log("anonymus") # anonymus

str = "hello"
do (str) ->
  console.log(str) # hello

s = "anonymus!"
do (str = s) ->
  console.log(str) # anonymus!

do ->

console.log("anonymus") # anonymus

str = "hello"

do (str) ->

console.log(str) # hello

s = "anonymus!"

do (str = s) ->

console.log(str) # anonymus!

コールバック

parentFunction = (callbackFunction, a, b) ->
  callbackFunction(a, b)

add = (x, y) ->
  x + y

mul = (x, y) ->
  x * y

console.log parentFunction(add, 2, 3) # 5
console.log parentFunction(mul, 2, 3) # 6

parentFunction = (callbackFunction, a, b) ->

callbackFunction(a, b)

add = (x, y) ->

x + y

mul = (x, y) ->

x * y

console.log parentFunction(add, 2, 3) # 5

console.log parentFunction(mul, 2, 3) # 6

CoffeeScript – 内包表記による配列の操作

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

配列の生成と要素の割り当て

内包表記によりリストを生成し、配列に代入することができる。

# 配列の生成：定数
array = (1 for n in [1..5])
console.log array # [ 1, 1, 1, 1, 1 ]

# 配列の生成：変数
array = (n for n in [1..5])
console.log array # [ 1, 2, 3, 4, 5 ]

# 配列の生成：定数

array = (1 for n in [1..5])

console.log array # [ 1, 1, 1, 1, 1 ]

# 配列の生成：変数

array = (n for n in [1..5])

console.log array # [ 1, 2, 3, 4, 5 ]

要素の取り出し

配列リストの要素を一つずつ列挙できる。

# 配列の要素の和
sum = 0
sum += x for x in array
console.log sum # 15

# 配列の要素の和

sum = 0

sum += x for x in array

console.log sum # 15

二次元配列の生成

ややこしいやり方

(content++ for c in [1..4])で要素数が4のリストを生成
そのリストをgridに3回加えている

# 二次元配列の生成
grid = []
content = 10
for r in [1..3]
  grid.push((content++ for c in [1..4]))
console.log grid
# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

# 二次元配列の生成

grid = []

content = 10

for r in [1..3]

grid.push((content++ for c in [1..4]))

console.log grid

# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

シンプルなやり方

(content++ for c in [1..4])で要素数が4のリストを生成
そのリストを要素とする要素数が3の要素を生成

# もっとシンプルな二次元配列の生成
content = 10
grid = ((content++ for c in [1..4]) for r in [1..3])
console.log grid
# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

# もっとシンプルな二次元配列の生成

content = 10

grid = ((content++ for c in [1..4]) for r in [1..3])

console.log grid

# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

要素の参照

添字をパラメータとして内包表記で順次参照できる。

# 二次元配列の要素の和
sum = 0
sum += grid[r][c] for c in [0...4] for r in [0...3]
console.log sum # 186

# 二次元配列の要素の和

sum = 0

sum += grid[r][c] for c in [0...4] for r in [0...3]

console.log sum # 186

あるいは直接要素を指定し、入れ子で要素の配列を列挙参照することもできる。

# 要素数を意識しない二次元配列の要素の和
sum = 0
sum += x for x in rowArray for rowArray in grid
console.log sum # 186

# 要素数を意識しない二次元配列の要素の和

sum = 0

sum += x for x in rowArray for rowArray in grid

console.log sum # 186

要素の再設定

よくある要素の設定。

# 既存配列の要素の再設定(1次元)
array = [1, 2, 3]
array[i] = 0 for i in [0...array.length]
console.log array # [ 0, 0, 0 ]

# 既存配列の要素の再設定(2次元)
array = [
  [1, 2, 3]
  [4, 5, 6]
]
array[r][c] = 0 for r in [0...array.length] for c in [0...array[0].length]
console.log array # [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]

# 既存配列の要素の再設定(1次元)

array = [1, 2, 3]

array[i] = 0 for i in [0...array.length]

console.log array # [ 0, 0, 0 ]

# 既存配列の要素の再設定(2次元)

array = [

[1, 2, 3]

[4, 5, 6]

]

array[r][c] = 0 for r in [0...array.length] for c in [0...array[0].length]

console.log array # [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]

CoffeeScript – 配列

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

基本的な配列の扱い

配列リテラル

# 配列

array = [1, 2, 3]
console.log array.length # 3 配列の要素数
console.log array[0], array[1], array[2] # 1 2 3 要素番号は0から

array = [
  [11, 12, 13, 14]
  [21, 22, 23, 24]
  [31, 32, 33, 34]
]
console.log array
# [ [ 11, 12, 13, 14 ], [ 21, 22, 23, 24 ], [ 31, 32, 33, 34 ] ]
console.log array.length # 3 1次元目の要素数(行数)
console.log array[0].length # 4 2次元目の要素数(列数)

# 配列

array = [1, 2, 3]

console.log array.length # 3 配列の要素数

console.log array[0], array[1], array[2] # 1 2 3 要素番号は0から

array = [

[11, 12, 13, 14]

[21, 22, 23, 24]

[31, 32, 33, 34]

]

console.log array

# [ [ 11, 12, 13, 14 ], [ 21, 22, 23, 24 ], [ 31, 32, 33, 34 ] ]

console.log array.length # 3 1次元目の要素数(行数)

console.log array[0].length # 4 2次元目の要素数(列数)

要素の参照と代入

先頭要素の添字は0

a = [1, 2, 3, 4]
console.log(a[0], a[1]) # 1 2

a[3] = 5
console.log(a) # [1, 2, 3, 5]

a = [1, 2, 3, 4]

console.log(a[0], a[1]) # 1 2

a[3] = 5

console.log(a) # [1, 2, 3, 5]

各種操作

要素の追加・削除

先頭要素の追加・抜き出し

a = [1, 2, 3, 4]

# 先頭に要素を追加
a.unshift(0)
console.log(a) # [0, 1, 2, 3, 4]

# 先頭から要素を抜き出し
e = a.shift()
console.log(e, a) # 0 [1, 2, 3, 4

a = [1, 2, 3, 4]

# 先頭に要素を追加

a.unshift(0)

console.log(a) # [0, 1, 2, 3, 4]

# 先頭から要素を抜き出し

e = a.shift()

console.log(e, a) # 0 [1, 2, 3, 4

末尾要素の追加・抜き出し

a = [1, 2, 3, 4]

# 末尾に要素を追加
a.push(5)
console.log(a) # [1, 2, 3, 4, 5]

# 末尾から要素を抜き出し
e = a.pop()
console.log(a, e) # [1, 2, 3, 4] 5

a = [1, 2, 3, 4]

# 末尾に要素を追加

a.push(5)

console.log(a) # [1, 2, 3, 4, 5]

# 末尾から要素を抜き出し

e = a.pop()

console.log(a, e) # [1, 2, 3, 4] 5

部分配列の抜き出し

元の配列は保持される。

# 配列の一部を抜き出す
a = [0, 1, 2, 3, 4, 5]
console.log(a[2..4])  # [2, 3, 4]
console.log(a[2...4]) # [2, 3]

# 配列の一部を抜き出す

a = [0, 1, 2, 3, 4, 5]

console.log(a[2..4]) # [2, 3, 4]

console.log(a[2...4]) # [2, 3]

要素の存在チェック

# 要素が含まれるかどうかを調べる
a = [0, 2, 4, 6, 8]
console.log(if 6 in a then "yes" else "no") # yes
console.log(if 3 in a then "yes" else "no") # no

# 要素が含まれるかどうかを調べる

a = [0, 2, 4, 6, 8]

console.log(if 6 in a then "yes" else "no") # yes

console.log(if 3 in a then "yes" else "no") # no

分割代入

個別要素を一括指定して取り出すことができる。

[one, two, three] = [1, 2, 3]
console.log(one, two, three)

1 2	[one, two, three] = [1, 2, 3] console.log(one, two, three)

入れ替え作業も可能。

[boss, vice] = ["John", "Luice"]
[boss, vice] = [vice, boss]
console.log(boss, vice)

[boss, vice] = ["John", "Luice"]

[boss, vice] = [vice, boss]

console.log(boss, vice)

内包表記

内包表記による配列の操作を参照。

CoffeeScript – 演算

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

数値演算

四則演算

+	加算
–	減算
*	乗算
**	べき乗
/	除算：小数の丸めはなし	11 / 4 → 2.75
//	除算の商	11 // 4 → 2
%	除算の剰余	11 % 4 → 3
%%	%と同じ

CoffeeScriptからJavaScrioptへコンパイルした結果は以下のようになる。

11 / 4	11 / 4
11 // 4	Math.floor(11 / 4)
11 % 4	11 % 4
11 %% 4	modulo(11, 4)

インクリメント／デクリメント

インクリメント(++)、デクリメント(–)演算子は、前置・後置で使用可能で、後置は参照後に、前置は参照前に演算が行われる。

a = 0
console.log(a++) # 0
console.log(++a) # 2
console.log(a--) # 2
console.log(--a) # 0

a = 0

console.log(a++) # 0

console.log(++a) # 2

console.log(a--) # 2

console.log(--a) # 0

変数の値が小数部を持つと、演算誤差が発生する。

a = 0.1
console.log(a++) # 0.1
console.log(++a) # 2.1
console.log(a--) # 2.1
console.log(--a) # 0.10000000000000009

a = 0.1

console.log(a++) # 0.1

console.log(++a) # 2.1

console.log(a--) # 2.1

console.log(--a) # 0.10000000000000009

代入演算子

数値演算については、”+=”のような代入演算子が各四則演算子について使える。

丸め処理

Mathライブラリのクラスメソッドを使う。

	小数点以下の処理
Math.floor()	切り捨て
Math.ceil()	切り上げ
Math.round()	四捨五入

文字列演算

結合

+演算子は二つの文字列を結合する。

片方が文字列でもう片方が数値の場合、数値が文字列に変換されて結合される。

演算	結果
“abc” + “def”	“abcdef”
“abc” + 123	“abc123”
123 + “abc”	“123abc”

代入演算子

代入演算子の場合、元の変数かオペランドのいずれか一方が文字数なら、文字列として結合される。

数値と文字列の変換

数値→文字列の変換

12.34 + “deg”
String(12.34) + “deg”
12.34.toString() + “deg”

文字列→数値の変換

Number(“34.56”)
parseInt(“34.56”, 10)
parseFloat(“34.56”)
parseInt(“ffff”, 10)→65535
- parseInt(“0xffff”, 10)→65535
parseInt(“22”, 10)→18
- parseInt(“0o22”, 10)→0
parseInt(“111”, 10)→7
- parseInt(“0b111”, 10)→0
parseInt(“abc”)→NaN

存在演算子

# 以下はtrue="存在"
console.log 0?
console.log 3.14?
console.log "abc"?
console.log ""? # 空文字列は"存在"
console.log (new Object())?

# 以下はfalse="非存在"
console.log null?
console.log undefined?
console.log variable? # 未定義の変数は"非存在"

# 以下はtrue="存在"

console.log 0?

console.log 3.14?

console.log "abc"?

console.log ""? # 空文字列は"存在"

console.log (new Object())?

# 以下はfalse="非存在"

console.log null?

console.log undefined?

console.log variable? # 未定義の変数は"非存在"

CoffeeScript – リテラル

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

数値リテラル

整数

123	10進数
0b110	2進数
0o11	8進数
0xff	16進数

実数

123.456	固定小数点
1.23456e3	浮動小数点

文字列リテラル

シングルクォート(‘)かダブルクォート(‘)の対で囲む。

シングルクォートで囲った場合はダブルクォートを、ダブルクォートで囲った場合はシングルクォートを直接文字列内に書ける。バックスラッシュによるエスケープでも可能。

console.log("ab'cd\"ef") # ab'cd"ef
console.log('ab\'cd"ef') # ab'cd"ef

1 2	console.log("ab'cd\"ef") # ab'cd"ef console.log('ab\'cd"ef') # ab'cd"ef

シングルクォートとダブルクォートの違い

ダブルクォートで囲った場合、文字列リテラル中の#{}によって式が評価された結果を文字列に埋め込めるが、シングルクォートの場合は上記の記号や式がそのまま文字列として返される。

console.log("3 / 4 = #{3/4}") # 3 / 4 = 0.75
console.log('3 / 4 = #{3/4}') # 3 / 4 = #{3/4}

1 2	console.log("3 / 4 = #{3/4}") # 3 / 4 = 0.75 console.log('3 / 4 = #{3/4}') # 3 / 4 = #{3/4}

リストと配列

console.log([-2..3])
# [ -2, -1, 0, 1, 2, 3 ]

console.log(
  [
    1, 2, "three"
    4, "five"]
  )
# [ 1, 2, 'three', 4, 'five' ]

console.log([-2..3])

# [ -2, -1, 0, 1, 2, 3 ]

console.log(

[

1, 2, "three"

4, "five"]

)

# [ 1, 2, 'three', 4, 'five' ]

Lifegame （CoffeeScript)

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

概要

CoffeeScriptに慣れるための習作。

ライフゲームの世界をLifeWorldクラスで構築し、パターンのセットや描画を行わせている。表示に関してはcanvasを利用している。

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

デモンストレーション

初期パターン：

サイズ：
10　15　20　30　40

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

HTML内容

bodyブロックの構成は以下の通り。

初期パターン選択
サイズ選択
時間間隔選択
開始／停止ボタン
表示領域

初期パターン選択

規定パターンの中から、ドロップダウンリストで初期パターンを選択。この要素の選択状態が変化した場合の処理は、スクリプト側でjQueryを用いてコールバックを定義している。

<p>
<label>初期パターン：</label>
<select id="pattern">
  <option value="glider">Glider</option>
  <option value="spaceshipL">Lightweight Spaceship</option>
  <option value="spaceshipM">Middleweight Spaceship</option>
  <option value="spaceshipH">Heavyweight Spaceship</option>
  <option value="octagon">Octagon</option>
  <option value="galaxy">Galaxy</option>
  <option value="pulser">Pulser</option>
  <option value="pentadecathron">Pentadecathron</option>
  <option value="dieHard">Die Hard</option>
  <option value="random">Random</option>
</select>
</p>

<p>

<label>初期パターン：</label>

<option value="glider">Glider</option>

<option value="spaceshipL">Lightweight Spaceship</option>

<option value="spaceshipM">Middleweight Spaceship</option>

<option value="spaceshipH">Heavyweight Spaceship</option>

<option value="octagon">Octagon</option>

<option value="galaxy">Galaxy</option>

<option value="pulser">Pulser</option>

<option value="pentadecathron">Pentadecathron</option>

<option value="random">Random</option>

</select>

</p>

サイズと表示間隔の選択

それぞれラジオボタン群で選択させる。これらの要素の選択状態が変化した場合の処理も、スクリプト側でjQueryを用いてコールバックを定義している。

<p>
<label>サイズ：</label>
<label><input name="size" type="radio" value="10" />10</label>
<label><input checked="checked" name="size" type="radio" value="15" />15</label>
<label><input name="size" type="radio" value="20" />20</label>
<label><input name="size" type="radio" value="30" />30</label>
<label><input name="size" type="radio" value="40" />40</label>
</p>

<p>
<label>表示間隔：</label>
<label><input name="interval" type="radio" value="100" />0.1sec</label>
<label><input name="interval" type="radio" value="200" />0.2sec</label>
<label><input checked="checked" name="interval" type="radio" value="500" />0.5sec</label>
<label><input name="interval" type="radio" value="1000" />1.0sec</label>
<label><input name="interval" type="radio" value="1500" />1.5sec</label>
</p>

<p>

</p>

<p>

</p>

開始／停止ボタン

ボタンが押されるた時の処理はスクリプト側でjQueryを用いてコールバックを定義しており、その時の状態によって停止と起動を繰り返す。

<input id="btn_start_stop" type="button" value="Start/Stop" />

1	<input id="btn_start_stop" type="button" value="Start/Stop" />

描画領域

HTMLのcanvasを設置。

<canvas id="canvas" width="399" height="399">

1	<canvas id="canvas" width="399" height="399">

CoffeeScriptコード

初期パターン

初期パターンを配列にセットしている。たとえば「グライダー」の場合は以下のように定義している。

@patternGrider = [
  [1, 1, 1]
  [1, 0, 0]
  [0, 1, 0]
]

@patternGrider = [

[1, 1, 1]

[1, 0, 0]

[0, 1, 0]

]

本体

本体コードは、LifeWorldクラスとグローバル関数の定義からなる。

ブラウザのボタン操作なや状態変化などに対応するコールバックは、jQueryを利用して実装。

# LifeWorldクラス
# Lifegameのグリッドを保持し、初期設定や世代交代の操作をし、アニメーションを描画
class LifeWorld
  # コンストラクタ
  constructor: (canvas)->
  # 指定サイズで、0で埋められたグリッドを生成
  create: (row, col)->
  # 表示間隔設定
  setDisplayInterval: (@interval)->
  # 初期状態を設定
  setPattern: (patternString)->
  # gridの状態を表示
  draw: ->
  # 次の世代の状態を計算
  nextGeneration: ->
  # グリッドと位置を指定して生死を返すメソッド
  getNewStatusAt: (grid, row, col)->
  # タイマ処理に渡すメソッド
  animate: ->
  # アニメーションの開始／停止
  startAndStop: ->
  # アニメーションの停止
  stop: ->

# 以下はグローバル関数
# ブラウザからのイベントによって起動され、LifeWorldクラスをコントロールする

# 初期化関数
getNewLifeWorld = ->


# 以下は初期動作
# ブラウザから読み込まれたときに一回だけ作動する。
jQuery ($) ->

# LifeWorldクラス

# Lifegameのグリッドを保持し、初期設定や世代交代の操作をし、アニメーションを描画

class LifeWorld

# コンストラクタ

constructor: (canvas)->

# 指定サイズで、0で埋められたグリッドを生成

create: (row, col)->

# 表示間隔設定

setDisplayInterval: (@interval)->

# 初期状態を設定

setPattern: (patternString)->

# gridの状態を表示

draw: ->

# 次の世代の状態を計算

nextGeneration: ->

# グリッドと位置を指定して生死を返すメソッド

getNewStatusAt: (grid, row, col)->

# タイマ処理に渡すメソッド

animate: ->

# アニメーションの開始／停止

startAndStop: ->

# アニメーションの停止

stop: ->

# 以下はグローバル関数

# ブラウザからのイベントによって起動され、LifeWorldクラスをコントロールする

# 初期化関数

getNewLifeWorld = ->

# 以下は初期動作

# ブラウザから読み込まれたときに一回だけ作動する。

jQuery ($) ->

初期動作

ブラウザからこのスクリプトが呼び出されたときに一回だけ動作。

LifeWorldの初期化や、コールバックの設定を行う。

jQuery ($) ->
  lifeWorld = getNewLifeWorld()
  lifeWorld.draw()

  $("#pattern").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("input[name='size']:radio").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("input[name='interval']:radio").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("#btn_start_stop").click ->
    lifeWorld.startAndStop()
    return

jQuery ($) ->

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

$("#pattern").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("input[name='size']:radio").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("input[name='interval']:radio").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("#btn_start_stop").click ->

lifeWorld.startAndStop()

return

グローバル関数

getNewLifeWorld（）

LifeWorldの新しい状態を設定する際に呼ばれる関数。

ブラウザの部品から直接は呼ばれないため、windows.の要素とはしていないが、グローバルスコープの関数。

getNewLifeWorld = ->
  # 初期パターン、サイズ、表示間隔の取得・設定
  initialPattern = $("#pattern").val()
  gridSize = parseInt($("input[name='size']:checked").val(), 10)
  interval= parseInt($("input[name='interval']:checked").val(), 10)
  canvas = $("#canvas")[0]

  lifeWorld = new LifeWorld(canvas)
  lifeWorld.create(gridSize, gridSize)
  lifeWorld.setDisplayInterval(interval)
  lifeWorld.setPattern(initialPattern)

  return lifeWorld

getNewLifeWorld = ->

# 初期パターン、サイズ、表示間隔の取得・設定

initialPattern = $("#pattern").val()

gridSize = parseInt($("input[name='size']:checked").val(), 10)

interval= parseInt($("input[name='interval']:checked").val(), 10)

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

lifeWorld = new LifeWorld(canvas)

lifeWorld.create(gridSize, gridSize)

lifeWorld.setDisplayInterval(interval)

lifeWorld.setPattern(initialPattern)

return lifeWorld

LifeWorldクラス

constructor(canvas)

LifeWorldクラスのコンストラクタ。

canvasを引数にしてインスタンスを生成するが、この段階ではグリッドも生成されていない。他のパラメータについては個別に設定することを意図している。

  constructor: (canvas)->
    @row = 0
    @col = 0
    @grid = []
    @canvas = canvas
    @isRunning = false
    @timer = null
    @interval = 1000

constructor: (canvas)->

@row = 0

@col = 0

@grid = []

@canvas = canvas

@isRunning = false

@timer = null

@interval = 1000

create(row, col)

行数と列数を指定してインスタンスのグリッドを構築する。グリッドの全要素が0で埋められている。

  create: (row, col)->
    @row = row
    @col = col
    @grid = ((0 for c in [0..@col+1]) for r in [0..@row+1])
    return

create: (row, col)->

@row = row

@col = col

@grid = ((0 for c in [0..@col+1]) for r in [0..@row+1])

return

setDisplayInterval(interval)

動画フレームの時間間隔を設定。

CoffeeScript特有の、引数を直接パラメータに代入する形式。

  # 表示間隔設定
  setDisplayInterval: (@interval)->

1 2	# 表示間隔設定 setDisplayInterval: (@interval)->

setPattern(patternString)

選択されているラジオボタンの文字により、あらかじめ定義された初期パターンを登録。

初期パターンがグリッドの中央付近に来るように調整している。

  setPattern: (patternString)->
    switch patternString
      when "glider" then pattern = patternGrider
      when "spaceshipL" then pattern = patternSpaceshipL
      when "spaceshipM" then pattern = patternSpaceshipM
      when "spaceshipH" then pattern = patternSpaceshipH
      when "octagon" then pattern = patternOctagon
      when "galaxy" then pattern = patternGalaxy
      when "pulser" then pattern = patternPulser
      when "pentadecathron" then pattern = patternPentadecathron
      when "dieHard" then pattern = patternDieHard
      when "random"
        for r in [1..@row]
          for c in [1..@col]
            if Math.random() > 0.5 then @grid[r][c] = 1
        return

    @grid[r][c] = 0 for r in [0...@grid.length] for c in [0...@grid[0].length]

    pivotR = Math.floor((@grid.length - pattern.length) / 2)
    pivotC = Math.floor((@grid[0].length - pattern[0].length) / 2)

    for r in [0...pattern.length]
      for c in [0...pattern[0].length]
        @grid[pivotR + r][pivotC + c] = pattern[r][c]

    return

setPattern: (patternString)->

switch patternString

when "glider" then pattern = patternGrider

when "spaceshipL" then pattern = patternSpaceshipL

when "spaceshipM" then pattern = patternSpaceshipM

when "spaceshipH" then pattern = patternSpaceshipH

when "octagon" then pattern = patternOctagon

when "galaxy" then pattern = patternGalaxy

when "pulser" then pattern = patternPulser

when "pentadecathron" then pattern = patternPentadecathron

when "dieHard" then pattern = patternDieHard

when "random"

for r in [1..@row]

for c in [1..@col]

if Math.random() > 0.5 then @grid[r][c] = 1

return

@grid[r][c] = 0 for r in [0...@grid.length] for c in [0...@grid[0].length]

pivotR = Math.floor((@grid.length - pattern.length) / 2)

pivotC = Math.floor((@grid[0].length - pattern[0].length) / 2)

for r in [0...pattern.length]

for c in [0...pattern[0].length]

@grid[pivotR + r][pivotC + c] = pattern[r][c]

return

draw()

グリッドの状態に応じてcanvasのコンテキストに描画。格子線も描いている。

  draw: ->
    w = @canvas.width
    h = @canvas.height

    ctx = @canvas.getContext("2d")
    ctx.fillStyle = "#000000"
    ctx.fillRect(0, 0, w, h)

    cellSize = (h + 1) / @row

    ctx.strokeStyle = "#808080"
    ctx.beginPath()
    for r in [0...@row]
      ctx.moveTo(r*cellSize, 0)
      ctx.lineTo(r*cellSize, w)
    for c in [0...@col]
      ctx.moveTo(0, c*cellSize)
      ctx.lineTo(h, c*cellSize)
    ctx.stroke()

    ctx.fillStyle = "#ffffff"
    ctx.strokeStyle = "#404040"
    y = 0
    for r in [1..@row]
      x = 0
      for c in [1..@col]
        if @grid[r][c] == 1
          ctx.fillRect(x, y, cellSize, cellSize)
          ctx.strokeRect(x, y, cellSize, cellSize)
        x += cellSize
      y += cellSize

    return

draw: ->

w = @canvas.width

h = @canvas.height

ctx = @canvas.getContext("2d")

ctx.fillStyle = "#000000"

ctx.fillRect(0, 0, w, h)

cellSize = (h + 1) / @row

ctx.strokeStyle = "#808080"

ctx.beginPath()

for r in [0...@row]

ctx.moveTo(r*cellSize, 0)

ctx.lineTo(r*cellSize, w)

for c in [0...@col]

ctx.moveTo(0, c*cellSize)

ctx.lineTo(h, c*cellSize)

ctx.stroke()

ctx.fillStyle = "#ffffff"

ctx.strokeStyle = "#404040"

y = 0

for r in [1..@row]

x = 0

for c in [1..@col]

if @grid[r][c] == 1

ctx.fillRect(x, y, cellSize, cellSize)

ctx.strokeRect(x, y, cellSize, cellSize)

x += cellSize

y += cellSize

return

nextGeneration()

次のgetNewStatusAt()メソッドを使いながら、次の世代のグリッドの状態を形成。

新しい世代用の一時的なグリッドを生成している。

  nextGeneration: ->
    # grid->cloneへの複製
    clone = ((x for x in rowArray) for rowArray in @grid)
    # 各セルの次の世代の生死を設定
    for r in [1..@row]
      for c in [1..@col]
        clone[r][c] = @getNewStatusAt(@grid, r, c)
    # clone->gridへの複製
    @grid = ((x for x in rowArray) for rowArray in clone)
    return

nextGeneration: ->

# grid->cloneへの複製

clone = ((x for x in rowArray) for rowArray in @grid)

# 各セルの次の世代の生死を設定

for r in [1..@row]

for c in [1..@col]

clone[r][c] = @getNewStatusAt(@grid, r, c)

# clone->gridへの複製

@grid = ((x for x in rowArray) for rowArray in clone)

return

getNewStatusAt(grid, row, col)

現在の状態から、次の世代のグリッドの状態を算出。

自分のマスの周囲8つのマスの存在状態から、次の世代の誕生／存続／死滅を決定。

周囲の生存数	現状＝存在	現状＝不在
0	死滅	不在
1～2	存続	不在
3	存続	誕生
4以上	死滅	不在

  getNewStatusAt: (grid, row, col)->
    count = 0
    count += grid[r][c] for c in [col-1..col+1] for r in [row-1..row+1]
    count -= grid[row][col]

    switch count
      when 0 then status = 0
      when 1 then status = 0
      when 2 then status = grid[row][col]
      when 3 then status = 1
      else status = 0

    return status

getNewStatusAt: (grid, row, col)->

count = 0

count += grid[r][c] for c in [col-1..col+1] for r in [row-1..row+1]

count -= grid[row][col]

switch count

when 0 then status = 0

when 1 then status = 0

when 2 then status = grid[row][col]

when 3 then status = 1

else status = 0

return status

animate()

setInterval()メソッドに登録するための、ワンフレームの画像を描くメソッド。

  animate: ->
    @nextGeneration()
    @draw()
    return

animate: ->

@nextGeneration()

@draw()

return

startAndStop() / ｓtop()

startAndStop()は、現在動画を実行中かどうかのフラグをチェックし、停止していればsetInterval()を用いて起動、起動中ならclearInterval()停止を行う。

stop()は、状態によらず停止処理。

  # アニメーションの開始／停止
  startAndStop: ->
    if @isRunning
      clearInterval(@timer)
      @isRunning = false
    else
      @timer = setInterval(@animate.bind(this), @interval)
      @isRunning = true
    return

  # アニメーションの停止
  stop: ->
    if @isRunning
      clearInterval(@timer)
    return

# アニメーションの開始／停止

startAndStop: ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval(@animate.bind(this), @interval)

@isRunning = true

return

# アニメーションの停止

stop: ->

if @isRunning

clearInterval(@timer)

return

Brython – Timer

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

Brythonにおけるタイマ処理

Brthonでタイマ処理を実装する場合、time.sleep()メソッドとスレッドクラスの継承を用いても、ブラウザで適切に処理されない(Chromeで実行した場合、処理の冒頭に反応がなく、ある程度の時間後にそれまでの処理が一挙に実行され、その後正常なタイマ処理が続行された)。

Brython固有の機能としてbrowser.timerモジュールにJavaScriptのintervalやtimeoutに相当する以下のメソッド群が用意されている。

set_interval()/clear_interval
set_timeout()/clear_timeout()
request_animation_frame()/cancel_animation_frame

これらはJavaScriptのそれぞれに相当する関数のwrapperであり、JavaScriptの仕様に従っていると考えられる。

JavaScriptのタイマ関係の関数についてはこちらを参照。

interval

基本形

timerパッケージのset_interval()メソッドで一定時間間隔で関数を起動し、clear_interval()メソッドでタイマーの実行を停止する。

<input type="button" id="btn_interval" value="Click"></input>
<input type="text" id="txt_interval"></input>

<script type="text/python">
from browser import document as doc
from browser import timer


tmr = None
is_running = False
animation_flag = True


def show():
    global animation_flag
    if animation_flag:
        doc['txt_interval'].value = '□'
        animation_flag = False
    else:
        doc['txt_interval'].value = '■'
        animation_flag = True


def switch_interval():
    global tmr
    global is_running
    if is_running:
        timer.clear_interval(tmr)
        is_running = False
    else:
        tmr = timer.set_interval(show, 1000)
        is_running = True


doc['btn_interval'].bind('click', switch_interval)
</script>

from browser import document as doc

from browser import timer

tmr = None

is_running = False

animation_flag = True

def show():

global animation_flag

if animation_flag:

doc['txt_interval'].value = '□'

animation_flag = False

else:

doc['txt_interval'].value = '■'

animation_flag = True

def switch_interval():

global tmr

global is_running

if is_running:

timer.clear_interval(tmr)

is_running = False

else:

tmr = timer.set_interval(show, 1000)

is_running = True

doc['btn_interval'].bind('click', switch_interval)

</script>

引数を渡す場合

ターゲットの関数に引数を渡したい場合、BrythonではJavaScriptのような文字列渡しはできないが、lambda関数式で無名関数の中でターゲットの関数に引数を渡すことができる。

def show(str0, str1):
    global animation_flag
    if animation_flag:
        doc['txt_interval'].value = str0
        animation_flag = False
    else:
        doc['txt_interval'].value = str1
        animation_flag = True

..........

    tmr = timer.set_interval(lambda: show('□■', '■□'), 1000)

def show(str0, str1):

global animation_flag

if animation_flag:

doc['txt_interval'].value = str0

animation_flag = False

else:

doc['txt_interval'].value = str1

animation_flag = True

..........

tmr = timer.set_interval(lambda: show('□■', '■□'), 1000)

こちらのデモにもtimer.set_interval()を利用している。

Brythonの実行時間

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

概要

Python3、JavaScriptとBrythonの実行時間を比較してみる。

数値演算

Python/Brythonコード

import time

start = time.time()
a = 1
b = 2

for i in range(1000000):
    c = a + b

elapsed_time = time.time() - start
print("elapsed time: %fsec" % elapsed_time)

import time

start = time.time()

a = 1

b = 2

for i in range(1000000):

c = a + b

elapsed_time = time.time() - start

print("elapsed time: %fsec" % elapsed_time)

JavaScriptコード

var startTime = ( new Date() ).valueOf();

var a = 1;
var b = 2;

for ( i = 0; i < 1000000; i++ ) {
    var c = a + b;
}

elapsedTime = ( new Date() ).valueOf() - startTime;
console.log( "elapsed time: " + parseFloat(elapsedTime).toFixed(6) + "sec" );

var startTime = ( new Date() ).valueOf();

var a = 1;

var b = 2;

for ( i = 0; i < 1000000; i++ ) {

var c = a + b;

}

elapsedTime = ( new Date() ).valueOf() - startTime;

console.log( "elapsed time: " + parseFloat(elapsedTime).toFixed(6) + "sec" );

結果

	経過時間
Python3	0.152009sec
Brython	3.068000sec
JavaScript	3.000000sec

配列の確保

Python/Brython

import time

start = time.time()

for i in range(1000):
    a = [0 for i in range(100)]

elapse = time.time() - start
print("elapsed time: %fsec" % elapse)

import time

start = time.time()

for i in range(1000):

a = [0 for i in range(100)]

elapse = time.time() - start

print("elapsed time: %fsec" % elapse)

JavaScript

var startTime = ( new Date() ).valueOf();

var array = [];
for ( i = 0; i < 1000; i++ ) {
    for ( j = 0; j < 100; j++ ) {
        array[j] = 0;
    }
}

elapsedTime = ( new Date() ).valueOf() - startTime;
console.log( "elapsed time: " + parseFloat(elapsedTime).toFixed(6) + "sec" );

var startTime = ( new Date() ).valueOf();

var array = [];

for ( i = 0; i < 1000; i++ ) {

for ( j = 0; j < 100; j++ ) {

array[j] = 0;

}

elapsedTime = ( new Date() ).valueOf() - startTime;

console.log( "elapsed time: " + parseFloat(elapsedTime).toFixed(6) + "sec" );

結果

	経過時間
Python3	0.006001sec
Brython	8.212000sec
JavaScript	2.000000sec

Brython – canvas

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

Brythonによるcanvasの利用

HTMLで、canvas要素をidを付して記述
browserからdocumentをインポート
documentからcanvasを取得
canvasが取得可能かどうか判定
2Dのcontextを取得
contextに対してライブラリで描画

canvasライブラリについてはHTML5-canvasを参照。

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

<script type="text/python">
from browser import document as doc

canvas = doc['canvas_test']
if hasattr(canvas, 'getContext'):
    context = canvas.getContext('2d')
    context.fillRect(50, 50, 300, 200)
</script>

from browser import document as doc

canvas = doc['canvas_test']

if hasattr(canvas, 'getContext'):

context = canvas.getContext('2d')

context.fillRect(50, 50, 300, 200)

</script>