2010/10/19

Ajaxでフラクタルを描画 with Google App Engine

Google App Engineを用いてマンデルブロ集合を描画してみました。
目的はpure JavaScriptで時間のかかる処理をGAEにまかせてしまえば高速に描画できるのではないかと思ったからです。GoogleMapみたいにフラクタル世界をスイスイしたかったのです。

処理内容
1.サーバーサイドで各点の発散を調べ、ループ回数を返します。
2.クライアントサイドでCanvasに色付けします。

問題点
自分の環境だと残念ながらscaleがある程度大きくない限り、ほぼ似たような処理時間になってしまいました。Canvasへのピクセル操作に時間がかかってしまうのです。

JSONのパースに時間がかかるのかと思い、ランレングス圧縮したシリアライズ方式でもやってみましたが、同様の時間がかかてしましました。Canvasのピクセル操作がネックになっているのでどうしようもないんでしょうか...?救いは無いんですか?
ランレングスパック前 http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0&centery=0&scale=1&pack=0
ランレングスパック後 http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0&centery=0&scale=1&pack=1

折角AjaxにしたんならGoogle Mapみたいにドラッグや拡大などできるようにするべきですが、ラグが大きいので諦めてしまいました。

ちなみに"Access-Control-Allow-Origin: *"をHTTP Responseに加えてあるので、Same Origin Policyを満たさなくてもどなたでもご自由にお使いいただけます。サーバーサイドはJavaで書きました。

Fractal with Google App Engine
http://mandelbrot-fractal.appspot.com/

追記(2010/11/10)
コメントしてくださったYkitamotoさんの指摘を元に、ピクセル操作を改善したところ、かなり速くなりました!デモまでつくって教えてくださったYkitamotoさん、ありがとうございます!下記の実行時間比較も書き直しました。



実行時間(ms)比較(パラメーター:Center x = -1.1, Center y = 0, Scale = 10)


GAE PureJS
Google Chrome7 681 1787
Safari5 753 923
FireFox3.6 732 231

IE8とOpera10.63には未対応です。


Ajax with GAE Demo



Center x :
Center y :
Scale :


Pure JavaScript Demo



Center x :
Center y :
Scale :

参考にさせていただいたページ:
[xhr] XMLHttpRequest Level 2時代のクロスドメインリクエストProxy
http://blog.hidekiy.com/2010/10/xhr-xhr-lv2proxy.html
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
http://blog.livedoor.jp/dankogai/archives/51502865.html

2 件のコメント:

  1. fillRectの方がはやいよ
    こんな感じ:/src/drawtest.html

    返信削除
  2. コメントThanks!!ブログの記事書き直したよ!自分と同じ問題で困っている人もいるだろうし、北本にピクセル操作についてのブログ書いて欲しいなぁ

    返信削除