デザイナー、秋葉秀樹のブログ

最近特に、Apple iPadが発表されるニュースより、AppleがFlashをどんどん淘汰していくような動きの方がよっぽど気になります。
Appleはどうやら HTML5を推進しているとのこと。 確かにAppleのサイトはだいぶ前からリッチコンテンツな部分にもJavaScriptを導入していましたね。
最初は「どっちも良い所あるから仕様をしっかりと見据えて使い分けるべき」と捉えていました。
でもどうやらHTML5のcanvasという要素が、Flashみたいな表現も可能ということで、色々調べてみたら、どうもスゴい所までいってるらしい。
で、色々と試していたんですが、やはりブラウザで動くわけなので、当然描画速度ってブラウザによって違うんじゃないかな？って思います。

どれに優劣を付ける訳じゃないけど、パフォーマンスがどんなものか知っておきたかった。 ついでにFlashでも作ってみた。

• canvasで1000個のパーティクル（重たくなります）
• Flashで10000個のパーティクル

canvasの方はprocessing.jsを使って書きました、基本Javaベースで書くんですね、型の記述とかちょっと手惑いました。
1000個のパーティクルを、それぞれ移動距離をランダムに設定してランダムな向きに移動、 一気に1000個を動かすというものです。
ブラウザは今Mac環境で作ってますが、Firefox3.6, Safari4.0.4, Chrome4.0.249.49betaでそれぞれ確認しました。
結果、Safariが一番速い、ように見えました、Chromeでも同じ位だけど。
頑張れ、Firefox。ってかんじでした。
ところが、パーティクルを5000個に増やすともう、コマ送りのような重さ、とても動いてるという表現は無理でした。

で、Flashですが、全然問題ないです、やはりこのあたり、ブラウザと比較しちゃいけないんだろうけど、このあたりは断然Flashに軍配あり、といった感じでしょう。
一気に1000個から10万個に増やしても全くと言って良いほど処理落ちを感じさせないので、1000個でなんとかの状態のHTML5+canvasの描画APIは今後の課題になってくるんじゃないかな？と思います、Flashにとって代わる、というのであれば、ですが。

※【修正記事】　こういう場合はprocessing.jsを使わずに、フレームワークを使わないで書く方が結構高速に処理しました。補足記事はこちらです、惑わせてしまってすいません！

canvas用（processing.js使用） <script type="application/processing"> int width = 300; int height = 300; int len = 1000; Patticle p = new Particle[len]; void setup() { size(width,height); frameRate(60); for (int i = 0 ; i<len ; i++) { p[i]=new Particle(); } } void draw() { background(10); for (int i = 0 ; i<len ; i++) { Particle pt = p[i]; pt.x+=pt.vx; pt.y+=pt.vy; if(pt.x <0) pt.x=width; if(pt.x >width) pt.x=0; if(pt.y <0) pt.y=height; if(pt.y >height) pt.y=0; pt.dot(); } } class Particle{ //パーティクルのクラス float x, y, vx, vy; color col; Particle () { x = random(width); y = random(height); vx = random(1)*10-5; vy = random(1)*10-5; col = color(random(255),random(255),random(255)); } void dot() { noStroke(); fill(col); ellipse(x, y, 1, 1); } } </script>
Flash用（ActionScript 3.0使用） package { import flash.display.*; import flash.events.*; [SWF(width="300", height="300", backgroundColor="#FFFFFF", frameRate="30")] public class ParticleTest extends Sprite { var _width:uint = 300; var _height:uint = 300; var len:uint = 10000; //パーティクル1万個 var pList:Array = []; var canvas:BitmapData; public function ParticleTest() { // constructor code if(stage) init(); else this.addEventListener(Event.ADDED_TO_STAGE, init); } private function init (e:Event=null):void { canvas = new BitmapData(_width, _height, false, 0x00000000); addChild(new Bitmap(canvas)); for (var i:uint = 0 ; i<len ; i++){ var particle:Particle = new Particle(); particle.x = rand(_width); particle.y = rand(_height); particle.vx = rand(1)*10-5; particle.vy = rand(1)*10-5; particle.col = rand(0xFFFFFF); pList.push(particle); } this.addEventListener(Event.ENTER_FRAME, enterframeHandler); } private function enterframeHandler (e:Event):void { canvas.fillRect(canvas.rect,0x00000000); for (var i:uint = 0 ; i<len ; i++){ var pt:Particle = pList[i]; pt.x+=pt.vx; pt.y+=pt.vy; if(pt.x <0) pt.x=_width; if(pt.x >_width) pt.x=0; if(pt.y <0) pt.y=_height; if(pt.y >_height) pt.y=0; canvas.setPixel(pt.x,pt.y,pt.col); } } private function rand(num:Number):Number { return Math.random()*num; } } } class Particle { var x:Number, y:Number, vx:Number, vy:Number, col:uint; }