This post is an examination of the performance provided by JavaScript and the canvas HTML element, and its role on mobile platforms in the future. The inspiration for this post came when I stumpled on Water Ripple Canvas by Almer Thies. It was running without problems (with Canvas: 20fps and Water: 30 fps) on my computer but was frighteningly slow with a max of 0.5 fps on my iPhone 4 (yep. A half frame per second!). I therefore found it relevant to produce a comparable piece of code that could run on the canvas element and easily port to Flash, so I could get an idea of how well each technology performed.
It is not a secret that I’m fond of the Adobe Flash Player, and have always believed that Apples excommunication of the player due performance issues had no standing ground, in light of the present alternatives. But HTML5 is a promising technology, that takes the job as website maker seriously again, and that may result in Flash being able to focus on it plug-in nature again, and help lift sites up above the tomorrows standard sites. The most important topic to discuss is: what should happen when our mobile visits a website in the month/years to come. Not distinguishing between mobile and desktop would lead to sluggish performance on mobiles when canvas gets integrated in eager designers creative solutions – a future that I predict as the “big dip”, in the worst cases.
Study 1
The test case is the famous snowflake that are loved or hated by everyone. The effect is exclusively produced by code and can be scaled easily to increase the load on the processor. I found an example at http://blog.webreakstuff.com/2010/11/building-a-canvas-snowglobe/ by Pedro Freitas. The code can be found on GitHub via https://gist.github.com/716215. I would also use an FPS counter, which could easily be ported to ActionScript and chose snippet from http://stackoverflow.com/questions/4787431/check-fps-in-js
I need it to produce a working example of the FPS counter that can be found at http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowcanvas.html. I have come to the following data (max is set to 100 FPS):
- Desktop PC: 99.9 FPS (Firefox)
- MacBook Pro: 97 - 98 FPS (Safari)
- iPad (iOS 4.3): 19 - 20 FPS (updated 17/3 – 2011)
- HTC Desire HD (2.2): 15.5 - 16.5 FPS
- Inspire 4G (2.3): ~ 14 FPS (updated 17/3 – 2011)
- HTC Desire (2.2): 14.4 - 14.7 FPS
- iPad 1 (iOS 4.3): 13 – 13.5 FPS (updated 17/3 – 2011)
- iPad 1 (iOS 4.2): 12.4 - 13.3 FPS
- iPhone 4 (iOS 4.3): 9.9 - 10.5 FPS (updated 17/3 – 2011)
- iPhone 4 (iOS 4.2): 9.9 - 10.3 FPS
- iPhone 3GS (iOS 4.2): 9.9 - 10.3 FPS
- HTC Legend: 7.5 - 8.9 FPS
Thanks to @seb_ly and @leebrimelow for additional test results
When I dropped the restriction the PC actually easily spun on over 200 FPS, but the intention here is not to benchmark in the high end, but find a relationship in the “low end” and a relative measurement to a standard machine. PC as well as Mac differ so much on hardware as well as range of browsers, it will not contribute anything positive to uncover all facets.
Conclusion 1
It is evident that both computers frame rates hits the ceiling. The portable Mac has thrown a frame or two in the test, but will probably do 100 FPS in a another run, or with another browser. Of course it cannot run from a Quadro graphics card, but it’s clearly capable of running the test. iOS machines (iPad 1, iPhone 3GS and iPhone 4) has a hard time, to produce frames for the canvas element. On average, they just over 10 FPS.
Desire HD is a bit higher. Not much, but still enough that it should be designated as a better settlement. Lowest is the HTC Legend, with around 8 fps.
Desire HD is a bit higher. Not much, but still enough that it should be designated as a better settlement. Lowest is the HTC Legend, with around 8 fps.
Study 2
The second test was made to compare performance between javascripts work on the canvas, and Flash Player’s work with the BitmapData class. The technique used for both are very similar and it will give the best basis for comparison, and minimal editing of the code. You can see an example at http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowFLA.html
The following changes have been made from the original code:
- Snow flakes was made as a separate class (Flake.as)
- Updated variables, etc so they are strictly typed
- Minor changes in variable names
- Used Flash Player’s flash.sensors.Accelerometer to handle motion
Flake.as
package
{
import flash.display.Sprite;
import flash.display.BitmapData;
public class Flake extends Sprite
{
private var canvasWidth;
private var canvasHeight;
private var speed: Number;
private var alpha: Number;
private var size: Number;
private var amp: Number;
private var shift: Number;
private var range: Number;
public function Flake (w, h, a, s)
{
this.canvasWidth = w;
this.canvasHeight = h;
this.x = 200;
this.y = Math.random () * -1 * h;
this.alfa = Math.random () * 0.5 + a;
this.speed = Math.random ();
this.size = s - this.speed - this.alfa;
this.amp = Math.random () * 2;
this.shift = Math.random () * 25 + 25;
if (Math.random ()> 0.5)
{
this.shift *= -1;
}
this.drift = Math.random () - 0.5;
draw ();
}
public function draw (canvas: BitmapData = null): void
{
this.graphics.beginFill (0xFFFFFF, this.alfa);
this.graphics.drawCircle (0.0, this.size);
this.graphics.endFill ();
}
public function move (f, wind): void
{
this.y + = this.speed;
this.x + = Math.cos (f / this.shift) * this.amp + + this.drift wind;
if (this.y> this.canvasHeight)
{
this.restart ();
}
}
public function restart (): void
{
this.y = -20;
this.shift = Math.random () * 25 + 25;
this.x = 200;
}
}
}
MainApp.as
package
{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flashx.textLayout.elements.InlineGraphicElement;
import flash.sensors.Accelerometer;
import flash.events.AccelerometerEvent;
import flash.text.TextField;
public class MainApp extends Sprite
{
private var bgflakes: Array = new Array ();
private var fgflakes: Array = new Array ();
private var bgFlakeCount: int = 200;
private var fgFlakeCount: int = 50;
private var frame count: int = 0;
private var wind: int = 0;
private var dWidth: int;
private var dHeight: int;
private var orientX: int = 1;
private var bgBitmapData: BitmapData;
private var bgCanvas: Bitmap;
private var fgBitmapData: BitmapData;
private var fgCanvas: Bitmap;
private var timer: Timer;
private var orientation: Boolean = false;
private var myAcc: Accelerometer;
private var filter Strength: int = 20;
private var frame hours: int = 0;
private var loading loop: Date = new Date ();
private var this loop: Date = new Date ();
private var fps: TextField;
public function MainApp ()
{
init ();
}
private function init ()
{
dWidth = this.stage.stageWidth;
dHeight = this.stage.stageHeight;
bgBitmapData = new BitmapData (dWidth, dHeight, false, 0x000000);
bgCanvas = new Bitmap (bgBitmapData);
fgBitmapData = new BitmapData (dWidth, dHeight, true, 0xFF0000);
fgCanvas = new Bitmap (fgBitmapData);
addChild (bgCanvas);
addChild (fgCanvas);
fps = new TextField ();
addChild (fps);
fps.textColor = 0xFFFFFF;
was i = 0;
for (i = 0; i {
bgflakes.push (New Flake (bgCanvas.width, bgCanvas.height, 0,3));
}
for (i = 0; i {
fgflakes.push (New Flake (fgCanvas.width, fgCanvas.height, 0.2,4));
}
hours = new Timer (10);
timer.addEventListener (TimerEvent.TIMER, draw);
timer.start ();
if (Accelerometer.isSupported)
{
orientation = true;
myAcc = new Accelerometer ();
myAcc.addEventListener (AccelerometerEvent.UPDATE, onAccUpdate);
}
}
private function onAccUpdate (e: AccelerometerEvent): void
{
orientX = e.accelerationX;
}
private function setWind ()
{
if (! orientation)
{
was mx: Number = mouseX - dWidth / 2;
wind = (mx / dWidth) * 3;
}
lodging
{
Wind = Number (orientX) * 3;
}
if (! wind)
{
wind = 0;
}
}
private function draw (e: Event hours)
{
frame count + = 1;
bgBitmapData.fillRect (new Rectangle (0.0, dWidth, dHeight), 0x000000);
fgBitmapData = new BitmapData (dWidth, dHeight, true, 0xFF0000);
setWind ();
was: int = 0;
for (i = 0; i {
bgflakes [i]. move (frame count, wind);
bgBitmapData.draw (bgflakes [i], new Matrix (1,0,0,1, bgflakes [i]. x, bgflakes [i]. y));
}
for (i = 0; i {
fgflakes [i]. move (frame count, wind);
fgBitmapData.draw (bgflakes [i]);
}
was this frame hours: int = (Number (this loop = new Date ())) - Number (last loop);
Frame hour + = (this frame - time frame hours) / filter strength;
load loop = this loop;
fps.text = (1000/frameTime). toFixed (1) + "fps";
}
}
}
Comments on Code
I have kept the draw () inside the Flake class and draw the flakes with graphics.drawCircle () to keep the code across the examples as similar as possible. The transfer of values on canvas size, etc. are also retained in the Flash version is also preserved. Finally, I used Bitmap () and BitmapData () to simulate the properties used on the canvas element.
Results 2
With mobile units, that is capable of running Flash Player 10.1 and canvas, I try to measure them against each other. Not as a battle, favoring one technology, for the future (I think) belongs to them both. It’s more an attempt to find out how bad Flash performs and supporters of the canvas as a “Flash Killer” has some back support. I’ll update as I stumple on different phones/tablets on my way:
- Dersire HD (2.2): Canvas ~ 16.5 FPS and Flash 10.1 ~ 24.2 FPS
- Inspire 4G (2.3): Canvas ~ 14 FPS and Flash 10.1 ~ 22 FPS (updated 17/3 – 2011)
- HTC Desire (2.2): Canvas ~ 14.5 FPS and Flash 10.1 21.7 to 23.5 FPS
You are welcome to submit own measurements
Conclusion
I get a relatively higher frame rate when running the test in Flash Player on Android than if I the canvas version. I wasn’t able to turn the relationship between the numbers on my phone, not even leveling the difference in frame rate. I therefore think that the user will have a better experience of this experiment in a flash player, than with a canvas version. It is important to remember that the canvas element’s ability to deliver, do not need to inflict on the general view on HTML5 and CSS3. My feeling is that CSS3 has a fairly good performance on the mobile devices, perhaps because of their predictable nature, but I haven’t investigated that topic yet.
Finally, I have not taken installed software on the devices into account. It may be relevant in a recount to look at parameters such as:
- How long the phone has been switched on.
- Is it connected to the charger.
- Programs running in the background.
- Video documentation of test
My point here is to get some numbers up in the air, and a comparison of material playd on mobile devices. Please reply with the results of your own measurements for computer, tablet and mobile.
Links to tests:
- http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowcanvas.html (canvas)
- http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowFLA.html (Flash)
Links to documents
