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>

Brython

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

Brython利用の基本形

Brythonのライブラリを読み込む
brython()を実行させるよう指示する
scriptタグでPythonを指定する
script要素内にPythonのコードを記述する

Brythonのライブラリを読み込む

ライブラリはJavascriptファイル。head要素内でライブラリを指定して読み込ませるが、サーバ上にライブラリを配置しておく方法と、その都度Brythonのサイトから読み込む方法がある。

サーバ上にライブラリを置く場合

<head>
.....
<script src="brython.js"></script>
.....
</head>

<head>

.....

.....

</head>

サーバ上にライブラリを置かない場合

<head>
.....
<script src="http://brython.info/src/brython_dist.js"></script>
.....
</head>

<head>

.....

.....

</head>

brython()を実行させる

通常の事例では、body要素のonload属性で指示している。

<body onload="brython()">

1	<body onload="brython()">

scriptタグでPythonを指定する

<script type="text/python">

1	<script type="text/python">

コード例

Brythonのコード例。テクストボックスに名前を入力し、alertで表示。

ボタンのonclick属性でhello()関数を呼び出そうとするとundefinedエラーとなる。Brythonのサイトの事例ではdocオブジェクトのbindメソッドを用いており、これで動作した。

WordPressに移行してからスクリプトの使い方がわからないので、ここではコード例のみ。

<script type="text/python">

from browser import document as doc
from browser import alert

def hello():
  alert( "Hello " + doc["txt"].value + "\nバージョン　Python 3\n3 / 2 = " + str ( 3 / 2 ) )

doc["btn"].bind( "click", hello )

</script>

<P>Brythonテスト</p>
<input id="txt">
あなたの名前は？<input type="button" id="btn" value="click!">

from browser import document as doc

from browser import alert

def hello():

alert( "Hello " + doc["txt"].value + "\nバージョン　Python 3\n3 / 2 = " + str ( 3 / 2 ) )

doc["btn"].bind( "click", hello )

</script>

<P>Brythonテスト</p>

あなたの名前は？<input type="button" id="btn" value="click!">

console.log

Brythonでconsole.logを使うためには、browser.consoleパッケージを利用する。

from browser import console

def console_test():
  console.log( "Python3では整数同士の除算は浮動小数点になる" )
  console.log( "5 / 2 = " + str( 5 / 2 ) )

console_test()

from browser import console

def console_test():

console.log( "Python3では整数同士の除算は浮動小数点になる" )

console.log( "5 / 2 = " + str( 5 / 2 ) )

console_test()

Python3 – 処理時間の計測

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

time.time()関数は、呼び出した時点のエポックタイムを秒単位の浮動小数点型で返す。

import time
from browser import console

startTime = time.time()

for i in range( 1000000 ):
  i

console.log( time.time() - startTime )

# 実行結果
# 0.7800002098083496

import time

from browser import console

startTime = time.time()

for i in range( 1000000 ):

console.log( time.time() - startTime )

# 実行結果

# 0.7800002098083496

Python3 – スレッド

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

基本形

threading.Threadクラスで実行する関数と引数を指定し、start()メソッドで開始させる。

import threading

def func(name):
    for i in range(10):
        print(name + ':' + str(i))

ta = threading.Thread(target=func, args=('A'))
tb = threading.Thread(target=func, args=('B'))

ta.start()
tb.start()

# 実行結果
# A:0
# B:0
# A:1
# B:1
# B:2
# A:2
# B:3
# A:3
# B:4
# A:4
# B:5
# B:6
# A:5
# B:7
# B:8
# A:6
# B:9
# A:7
# A:8
# A:9

import threading

def func(name):

for i in range(10):

print(name + ':' + str(i))

ta = threading.Thread(target=func, args=('A'))

tb = threading.Thread(target=func, args=('B'))

ta.start()

tb.start()

# 実行結果

# A:0

# B:0

# A:1

# B:1

# B:2

# A:2

# B:3

# A:3

# B:4

# A:4

# B:5

# B:6

# A:5

# B:7

# B:8

# A:6

# B:9

# A:7

# A:8

# A:9

同期

幾つかのスレッドの終了を待ってから後続のスレッドを実行させたい場合、join()メソッドで同期をとりたいスレッドの終了を待機する。

import threading

def func(name):
    for i in range(3):
        print(name + ':' + str(i))

t1a = threading.Thread(target=func, args=['t1a'])
t1b = threading.Thread(target=func, args=['t1b'])
t2 = threading.Thread(target=func, args=['t2'])

t1a.start()
t1b.start()
t1a.join()
t1b.join()
t2.start()

# 実行結果
# t1a:0
# t1b:0
# t1a:1
# t1b:1
# t1b:2
# t1a:2
# t2:0
# t2:1
# t2:2

import threading

def func(name):

for i in range(3):

print(name + ':' + str(i))

t1a = threading.Thread(target=func, args=['t1a'])

t1b = threading.Thread(target=func, args=['t1b'])

t2 = threading.Thread(target=func, args=['t2'])

t1a.start()

t1b.start()

t1a.join()

t1b.join()

t2.start()

# 実行結果

# t1a:0

# t1b:0

# t1a:1

# t1b:1

# t1b:2

# t1a:2

# t2:0

# t2:1

# t2:2

スレッドクラス

スレッドクラスを継承したカスタムクラスでの実装方法。

thread.Threadクラスを継承する
コンストラクタでThreadクラスのコンストラクタを呼び、必要なプロパティをセット
run()メソッドをオーバーライドし、処理内容を記述
カスタムクラスのインスタンスでstart()を実行

start()メソッドを実行すると、親のThreadクラスのstart()メソッドが呼び出され、そこでrun()メソッドが呼ばれ、カスタムクラスでオーバーライドしたrun()メソッドが実行される。run()メソッドを直接実行すると、シングルスレッドとして実行される。

class MyThread(threading.Thread):

    def __init__(self, name):
        threading.Thread.__init__(self)
        self.name = name

    def run(self):
        for i in range(5):
            print(self.name + ':' + str(i))


ta = MyThread('A')
tb = MyThread('B')
ta.start()
tb.start()

# 実行結果
# A:0
# A:1
# A:2
# B:0
# A:3
# B:1
# B:2
# A:4
# B:3
# B:4

class MyThread(threading.Thread):

def __init__(self, name):

threading.Thread.__init__(self)

self.name = name

def run(self):

for i in range(5):

print(self.name + ':' + str(i))

ta = MyThread('A')

tb = MyThread('B')

ta.start()

tb.start()

# 実行結果

# A:0

# A:1

# A:2

# B:0

# A:3

# B:1

# B:2

# A:4

# B:3

# B:4

スレッドの停止

スレッド停止の機能は、thread.Threadクラスを継承したカスタムクラスで実装する。

import threading
import time


class MyThread(threading.Thread):

    def __init__(self):
        threading.Thread.__init__(self)
        self.counter = 0
        self.is_running = True

    def run(self):
        while self.is_running:
            print(self.counter)
            self.counter += 1
            time.sleep(1)

    def stop(self):
        self.is_running = False


t =MyThread()
t.start()

time.sleep(5)
t.stop()

# 約5秒後にスレッドが停止

import threading

import time

class MyThread(threading.Thread):

def __init__(self):

threading.Thread.__init__(self)

self.counter = 0

self.is_running = True

def run(self):

while self.is_running:

print(self.counter)

self.counter += 1

time.sleep(1)

def stop(self):

self.is_running = False

t =MyThread()

t.start()

time.sleep(5)

t.stop()

# 約5秒後にスレッドが停止

Python3 – 変数のスコープ

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

ブロックスコープはない

したがって、if文やfor文などの制御構文はスコープを持たない。制御文の外で定義された変数は制御文内で参照でき、制御文内での変更は変数に影響を与える。

a = 1

if True:
    print(a) # 1
    a += 1
    print(a) # 2

print(a) # 2

for i in [1]:
    print(a) # 2
    a += 1
    print(a) # 3

print(a) # 3

a = 1

if True:

print(a) # 1

a += 1

print(a) # 2

for i in [1]:

print(a) # 2

a += 1

print(a) # 3

関数のスコープ

関数内では変数はローカルスコープを持つ。

グローバル変数は関数内から直接には参照できないため、無定義で参照しようとするとエラーとなる
関数内でグローバル変数と同じ名前の変数を定義すると、ローカル変数として扱われる
ローカル変数の変更は、同名のグローバル変数に影響を与えない

g = 1

def func():
    # print(g)
    # UnboundLocalError: local variable 'g' referenced before assignment
    g = 2
    print(g) # 2 (when called later)

func() # 2
print(g) # 1

g = 1

def func():

# print(g)

# UnboundLocalError: local variable 'g' referenced before assignment

g = 2

print(g) # 2 (when called later)

func() # 2

print(g) # 1

クラスのスコープ

クラスはローカルのスコープを持つが、クラス変数とインスタンス変数でもスコープが異なる。

g = 1

class MyClass:
    print(' 1:',g)
    g = 10
    print(' 2:', g)

    def __init__(self):
        self.g = 100

print(' 3:', g)
print(' 4:', MyClass.g)

MyClass.g = 50
print(' 5:', MyClass.g)
print(' 6:', g)

g = 5
print(' 7:', g)
print(' 8:', MyClass.g)

instance = MyClass()
print(' 9:', instance.g)
print('10:', MyClass.g)
print('11:', g)


# 実行結果
#  1: 1   クラス変数はグローバル変数の値を引き継ぐ
#  2: 10  クラス変数の値を変更しても
#  3: 1   グローバル変数は影響を受けない
#  4: 10  クラス変数はクラススコープ
#  5: 50  クラス変数を外から変更しても
#  6: 1   グローバル変数は影響を受けない
#  7: 5   グローバル変数を変更しても
#  8: 50  クラス変数は影響を受けない
#  9: 100 インスタンス生成時にインスタンス変数を定義
# 10: 50  インスタンス変数はクラス変数とは別のスコープ
# 11: 5   グローバル変数とも別のスコープ

g = 1

class MyClass:

print(' 1:',g)

g = 10

print(' 2:', g)

def __init__(self):

self.g = 100

print(' 3:', g)

print(' 4:', MyClass.g)

MyClass.g = 50

print(' 5:', MyClass.g)

print(' 6:', g)

g = 5

print(' 7:', g)

print(' 8:', MyClass.g)

instance = MyClass()

print(' 9:', instance.g)

print('10:', MyClass.g)

print('11:', g)

# 実行結果

# 1: 1 クラス変数はグローバル変数の値を引き継ぐ

# 2: 10 クラス変数の値を変更しても

# 3: 1 グローバル変数は影響を受けない

# 4: 10 クラス変数はクラススコープ

# 5: 50 クラス変数を外から変更しても

# 6: 1 グローバル変数は影響を受けない

# 7: 5 グローバル変数を変更しても

# 8: 50 クラス変数は影響を受けない

# 9: 100 インスタンス生成時にインスタンス変数を定義

# 10: 50 インスタンス変数はクラス変数とは別のスコープ

# 11: 5 グローバル変数とも別のスコープ

global宣言

グローバル変数をglobal宣言することで、関数の中で参照・変更が可能となる。

g = 1

def func():
    global g
    print(g) # 1
    g += 1
    print(g) # 2

func()
print(g) # 2

g = 1

def func():

global g

print(g) # 1

g += 1

print(g) # 2

func()

print(g) # 2