HTML5 canvas with JavaScript and Flash Player performance

ockley — Wed, 09 Mar 2011 21:47:35 +0000

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.

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:

Links to documents

https://gist.github.com/716215 (canvas)
http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowFLA.zip (Flash)
http://stackoverflow.com/questions/4787431/check-fps-in-js (Frame Counter)

Google Squared – en interessant søgemulighed

ockley — Thu, 04 Jun 2009 09:23:52 +0000

Jeg stødte i dag på Google Squared. Den ligger i deres laboratorium. Der ligger jo i forvejen en masse interessante ting, så vad er det lige der adskiller Squares fra det andet halløj.

Google Squares giver dig mulighed for at inddele din søgning i rækker og kolonner, så du kan få et skema over resultatet. En søgning på Countries gav følgende:

Resultat af søgning på "countries"

Google Squares opdeler det i relevante kolonner med navne, beskrivelser, hovedstæder osv. Hvis du vil have en specifik kolonne til at være synlig skal du bruge hårde parenteser i stil med “countries [popuplation]“. På den måde vil resultatet blive i stil med dette:

resultat med en specifik kolonne defineret

En anden ting, der er interessant er at det nye resultat giver nogle andre indledende kolonner. Den kigger derfor resultatet igennem og finder ud af, hvilke kolonner der er relevante i søgeresultet.

TIP: Du kan selvfølgelig også skrive en kolonne i Add Columns, i resultatet.

Denne form for søgning giver et helt andet overblik end den normale søgning, og det bliver nemmere at opsamle og sidestille delementer af resultater i forhold til hinanden. Alle skolepligtige vil helt sikkert kunne nyde godt af værktøjet. Jeg får i hvertfald mange sjove søgeaftener med denne utitlity … men igen. Jeg er også lidt underlig

Google Squared er stadig et eksperiment, så der er selvfølgelig mange tilføjelser man kunne ønske sig … meeen. Den er kommet godt ud af starthullerne. Hurra for Google

Prøv værktøjet på http://www.google.com/squared – god fornøjelse.

/ockley

Hjælp mig nu » Google