Flash / HTML Comparison

Friday, June 18th, 2010 | Web Development | 2 Comments
This comparison is very similar to the Flash/Canvas comparison with a minor change. The first Flash demo utilizes BitmapData to render the particles. Much like Canvas renders directly to a bitmap array. But I wanted to compare the speed versus HTML (animating with elements) and a Bitmap demo isn’t a fair comparison. So I have a second Flash demo that animated with Sprites. As with the previous demos, the particles are 1x1px white boxes to keep the look the same.

Another small change in these demos is that they increment by 10s instead of 100s. This is because it’s much more intensive to animate a sprite over a single pixel that really only exists when it’s finally drawn on the bitmap.

Also in an effort to let you see what the you can do with each, I’ve added controls to manipulate the minimum FPS. This will affect when the demos actually begin to throttle back.

Browser Particles Particles Added Per Render
HTML – Firefox 3.6.4 400 20
HTML – Chrome 6.0.437.1 800 30
HTML – Opera 10.60 Beta 800 30
Flash 6,000 220
Flash Debugger 5,000 180
Flash 7,500 270
Flash Debugger 6,500 230

* All results tested with a minimum FPS of 29

HTML Particle Speed Test

Flash (Sprite) Particle Speed Test

Tags: , ,

Flash / Canvas Comparison

Wednesday, June 16th, 2010 | Web Development | 2 Comments
With the canvas being a bit more prevalent and wanting to learn more about this HTML5 thing I decided to port Orion (one of my favorite projects) into JavaScript. I was curious to see the perfomance difference between the Flash Player and the (currently) fastest browser Google Chrome.

Now, I’m no JS expert so please let me know if there are any optimizations I could make but the logic is pretty sound in Flash. Keep in mind I don’t care how fast the page loads up, just how fast it performs afterward.

I also have it separated into two pages to keep the browsers from crashing or taking up too much memory. Also, to prevent crashing both demos auto throttle. As long as they can stay above 29fps they’ll add more particles. If not, it’ll throttle down and remove particles. This is checked every 3 seconds.

Below is the current test results I’ve experienced on my computer here at work. Just from what I’ve been able to experience, the Flash Player performs about 600% faster than Google Chrome. Which makes me wonder when HTML will be able to replace Flash in the interactive realm.

Also something to note, is the memory usage (which you can see in Chrome) is about the same in Canvas or Flash. Which leads me to believe that if people are complaining about performance in Flash now. Wait till people try to do the same thing in JavaScript. Same memory usage, same CPU usage, just slower.

Browser Particles Particles Added Per Render
Canvas – Firefox 3.6.4 14,000 600
Canvas – Chrome 6.0.427.0 50,000 2,100
Canvas – Opera 10.60 Beta 50,000 2,100
Flash 260,000 11,000
Flash Debugger 150,000 6,400
Flash 270,000 11,500
Flash Debugger 225,000 9,500

* All results tested with a minimum FPS of 29

Canvas Particle Speed Test

Flash (Bitmap) Particle Speed Test

Update June 17

Here are the specs for my work computer as a reference:
MS Windows XP Professional 32-bit SP3
Intel Core 2 Duo E6550 @ 2.33GHz
2.0GB Dual-Channel DDR2 @ 332MHz
256MB ATI Radeon HD 2400 Pro (Dell)
78GB Western Digital WDC WD800ADFS-75SLR2 (IDE)

As you can see, nothing terribly impressive.

Tags: , ,

Orion 2.0 Preview

Friday, September 18th, 2009 | Projects | 2 Comments
It’s been a while since I’ve posted anything project related. It’s not to say I haven’t been busy, quite the opposite. One of the projects I’m ready to debut is the next iteration of Orion. I posted earlier about some of my findings in loop optimizations and this is the project that I learned them on. This is just a glimpse for now, I’ll be updating Orion’s page with the source and more details. Below is a comparison of Orion 1.0 versus Orion 2.0.

Orion 1.0 – 8.6k running about 1500 – 3000 particles at 30fps

Orion 2.0 – 6.7k running about 100,000 – 130,000 particles at 30fps

Edit: (Sept 22nd 2009) Turned off scaling on the 1.0 demo, and made some updates to 2.0 (it’s still a work in progress after all)

Tags: , ,

Orion Particle Engine

Thursday, March 5th, 2009 | Projects | 22 Comments
Version 1.0.0, Updated March 4, 2009
  • Compatibility: Flash Player 9 and later (ActionScript 3.0)
  • File Size: About 2Mb
  • Usage Size: 5.5kb+

Download Now (1.0.0)

What’s New

  • Initial Release – Read below to find out more.


Orion is an all around simple and flexible particle generator. I created Orion in order to have an easy method of creating and controlling particle effects. Orion is very fast and can handle thousands of particles and still keep frame rates high. It’s also very small weighing in at around 5.5kb.

› Continue reading

Tags: , ,