目的はpure JavaScriptで時間のかかる処理をGAEにまかせてしまえば高速に描画できるのではないかと思ったからです。GoogleMapみたいにフラクタル世界をスイスイしたかったのです。
処理内容
1.サーバーサイドで各点の発散を調べ、ループ回数を返します。
2.クライアントサイドでCanvasに色付けします。
問題点
自分の環境だと残念ながらscaleがある程度大きくない限り、ほぼ似たような処理時間になってしまいました。Canvasへのピクセル操作に時間がかかってしまうのです。
JSONのパースに時間がかかるのかと思い、ランレングス圧縮したシリアライズ方式でもやってみましたが、同様の時間がかかてしましました。Canvasのピクセル操作がネックになっているのでどうしようもないんでしょうか...?救いは無いんですか?
ランレングスパック前 http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0¢ery=0&scale=1&pack=0
ランレングスパック後 http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0¢ery=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
Pure JavaScript Demo
参考にさせていただいたページ:
[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
fillRectの方がはやいよ
返信削除こんな感じ:/src/drawtest.html
コメントThanks!!ブログの記事書き直したよ!自分と同じ問題で困っている人もいるだろうし、北本にピクセル操作についてのブログ書いて欲しいなぁ
返信削除