Murray Picton

Exploring the iPhone’s accelerometer through Javascript

The iPhone has had an accelerometer in it since the start, allowing users to tilt the device and it would pick up the orientation and movement and alter the screen as necessary. It is only recently however, that they have opened up access to the data to pages through the browser and the new devicemotion javascript API. In this post, I will explore what can be done with the devicemotion API and how to do it.

Devicemotion API

The devicemotion API is the way we access the data held by the accelerometer. In it’s simplest form, it puts out a devicemotion event whenever it registers a change, allowing us to pick up this change. We use this is javascript by binding an event handler to the event:

var ax, ay;
window.addEventListener('devicemotion', function (e) {
	ax = e.accelerationIncludingGravity.x;
	ay = -e.accelerationIncludingGravity.y;
}

As you can see, the event passed through contains an x and a y parameter that allows us to access it and pick up any changes. To use this within a script is then really easy. We have our data, let’s take a look at a simple script that scrolls the page using the accelerometer. This is extremely simple, but I have found that it improves the usability of a page in certain situations greatly. Quite simply, I take the accelerometer values and add them onto the x-axis scroll position of an element:

mainLoop = setInterval("moveMe()");

moveMe = function() {
	$(items).each(function() {
		scrollPos = $(this).scrollLeft() + ax;
		$(this).scrollLeft(scrollPos);
	});
}

I’m sure, as you can see I am using jQuery functions to provide functionality. In fact, my script in full is available as a simple to use jQuery plugin for free download here.

Using the accelerometer to make a simple game

So, what else can we do with the accelerometer? Another simple example I have knocked up is a simple game with a rotating circle that you have to tilt your device to keep at the same orientation. First of all, take a look at it: Spinr – simple tilting iPhone game.

This game once again just tracks the parameters in the devicemotion event and compares them against the tilt of the circle and awards points when you are close. I think the interesting things about this game are not the use of the accelerometer but the use of the new CSS3 functionality to draw a gradient and tilt elements. I draw my gradient as follows:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));

This is quite simple, I define the type of gradient, 2 positions for the start and end positions and then my colours with the percentages where they should start. The format of defining a gradient changes depending on the browser but seeing as my game only works on the iPhone with the accelerometer I have only included the webkit version.

To move my circle I use the following:

ball.style.webkitTransform = "rotate(" + cssRotation + "deg)";

This is called regularly to update the rotation with the latest cssRotation value. It is very simple to use but provides great functionality.

I suggest you take a look at the source of Spinr and see how I have used these functions to provide an easy to use but very playable game.

Thanks for reading! If you have enjoyed it, take a look at some of my older posts for other great ideas and sign up to my RSS to receive future posts sent straight to you.