Home > HTML 5, Programming > It’s…alive!

It’s…alive!

The first question we need to answer when exploring HTML5 development on a mobile device is whether the hardware is going to be powerful enough to create the experience we want our users to have in an interpreted language like JavaScript.  Towards that end, the first test app I built was a very simple JS application that did the least I felt I could get away with:

1) Created a 2d Canvas the size of the screen resolution of a bookmarked webapp on the iPhone (320×460) and grabbed the context

2) Started a heartbeat timer that would optimally go off every 10 ms with setInterval()

3) Every time the heartbeat fired, change a random RGB value one point either up or down (also randomly)

4) Repaint the screen with the new value to show animation working and display the number of times the heartbeat fired in the past second (Frames Per Second)

In other words, I wanted to measure the FPS I could crank out of the iPhone without doing anything else.  If the FPS was in the 10-20 range, the type of animations I’d be able to support in a game would be much more limited than if the FPS was in the 40-60 range.  Here’s what I got on my iPhone 3GS:

Yeah. That'll do.

83 frames per second.  Which is about 5FPS slower than my Chrome desktop can put out.  And conventional wisdom for PC game development is that anything beyond 60FPS hits the diminishing returns curve pretty hard.

Of course, this is with ABSOLUTELY NOTHING else the app has to handle, so it’s not time to pop any champagne corks yet.  But a critical first hurdle has been passed.  Hooray!

Advertisements
Categories: HTML 5, Programming Tags: , , ,
  1. February 7, 2012 at 4:40 PM

    Oh, fun aside: I brought out my ancient first gen iPhone to test the app out just to see what would happen. It rendered the text inverted and upside down with horrible flicker effects. So no 1st gen iPhones need apply for HTML5 webapps, sad to say.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: