Getting your bearings on DeviceOrientation

Not too long ago, a 'computer" was a static object. Weighing a metric tonne, for the most part it just stood there under your desk, gathering dustbunnies in peace. It changed somewhat with the introduction of laptops — but compared to your phone it still doesn't move all that much. And your smartphone records all kinds of interesting information, like movement and rotation data. Wouldn't it be great if we could do something with this information? Good thing we can, thanks to the deviceorientation event!

What are we on about?

Rotate your device to see the angle of the plane change while the graph plots your rotation axis.

I'm dizzy now. How does it work?

We add an event listener on the window object, which listens for the deviceorientation event. Every time the orientation of the device changes, the event gets called. Inside the event handler we get the following data:

  • alpha for the rotation around the z-axis (also known as the direction), ranges from 0 to 360 degrees
  • beta for the rotation around the x-axis (also known as the front/back tilt), ranges from -180 to 180 degrees
  • gamma for the rotation around the y-axis (also known as the left/right tilt), ranges from -90 to 90 degrees
  • absolute defines whether the given degrees are provided as the differences between the Earth's and the device's coordinate frames, or the given coordinates are provided relative to an arbitrary (device specific) coordinate frame.

Okay, what would I use this for? Farming? Salad making?

What do you think? Besides it being cool, you can do a lot of useful things with this. Gaming is the first thing we thought of, but there are whole array of stuff to make with this feature:

  • Augmented reality applications, where the device orientation is factored in what you look at to show you more relative information.
  • Labyrinth style games (sort of like the ones where you direct a marble through a maze).
  • Using your phone as a controller for a game in combination with WebRTC (like o Wii controller).

Great, but can I use it today?

As the DeviceOrientation matters most on mobile platforms, support for it has been around a while there. Most (newer) smartphones should be able to handle this, the major exception being the Blackberry browser.

One thing to keep in mind though: the information you get may vary in accuracy per device, and even though the browser supports it, your device might not. This is the case for instance with older iPhones (3GS, 3G and first-gen) that do not have a gyroscope.

Show me the source!

Feel free to look around the differente source files we used for this example.

We need your help!

We wanted to have Bob the Christmas alien slide left and right, accelerating as you increase the tilt your device. However, we could not figure out how to get to factor in friction, so he would stop moving when there is no more acceleration (i.e. he was on a straight plane).

We created a jsfiddle with we've got so far.

If you know a solution for our problem, we would love to hear it! You can contact us via twitter (@flurin or @digitpaint) or via e-mail advent@digitpaint.nl. We will of course fully credit you if we use your solution.