HTML5 の canvas 上に coffeescript で マンデルブロ集合を描く例を4つ作成してみました。
google で "canvas mandelbrot javascript" を検索した結果から
サンプルをピックアップし、javascript -> coffeescript に変換すると共に、自分なりにすこし改良を加えています。
4 つの動作デモを設置してあります。
http://homepage2.nifty.com/youichi_kato/src/canvas-mandelbrot/public/main.html
http://homepage2.nifty.com/youichi_kato/src/canvas-mandelbrot/public2/jsMandelbrot.html
http://homepage2.nifty.com/youichi_kato/src/canvas-mandelbrot/public3/main.html
http://homepage2.nifty.com/youichi_kato/src/canvas-mandelbrot/public4/main.html
以下のテクニックの例にもなっています。
- canvas に ピクセル単位で描画する
- html5 の worker をつかったマルチスレッド
- javascript の setinterval, cancelinterval
- javascript の requestAnimationFrame
javascript -> coffeescript 変換には js2coffee を使いました。
注意：
js2coffee は現状では npm install js2coffee で インストールしただけでは動作しません。
( See
https://github.com/rstacruz/js2coffee/pull/194
https://github.com/rstacruz/js2coffee/pull/196
)
私は、 js2coffee の インストール先で
$ npm install coffee-script@1.4.0
として、js2coffee は coffescript の version 1.4.0 を利用させるようにしています。
また、whlle ループ中の continue は正しく変換されません。
(See
https://github.com/rstacruz/js2coffee/issues/197
)
変換後に、
該当部分を for で書き換えるか、
ループ制御変数の ++ を追加する
といった修正が必要です。