canvasに3000個のドット、Processing.jsを使わないと…

canvasに3000個のドット

processing_no_use.html ←クリックして見てください、Safari,Chromeあたりが速いです、Mac版でしか見てませんが…

この前書いたブログ記事のあと、「Flashとcanvasを比べるなんておかしい」なんて声をいただきました、、、すいませんすいません。。。

ただし、最近どこかのサイトで「Flashに取って代わる」、とか「Flashが要らなくなる」、とか、ずいぶんはっきりした書き方をしている所もあるから。。

で、、そのときの記事でJavaScriptのフレームワーク、「Processing.js」を使って1000個のドットを動かしたんですが、システムエンジニアの方に「フレームワークを使ったら処理も影響されるんじゃない?」って言われて、良く分かんない僕は「え?」って思いました。

で、1000個のドットを動かすのもやっとこさのProcessing.js+canvasだったんですが、(初めてProcessingを書いたに等しいので書き方としてソースの善し悪しがわからず。)結構重たい。
そんなものかと思っていましたが、Processing.jsナシで書いてみると、、

え?

割と軽快でした。

今回はブラウザでパフォーマンス比較、もうFlashとの比較はしません。。
今このマシンにあるブラウザの中で軽快な順番だと

1位がSafari
2位がChrome
3位がOpera
4位がFirefox
(全てMac版)

やっぱりSafariが軽快でした。
JavaScript、あんまりわからずに書いてみたけど、一応動きました、こんな感じで書いてみました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>