Read smartphone accelerometer data on a website

Almost everybody has one nowadays: A smartphone. But how often did you come across a website that used the phone’s tilt sensor? More than often enough a website only changes the layout if tilt your phone. How cool would it be, if the background would move around slightly when you tilt the phone? This short article will show you how to read the phone sensors and how to process the data with JavaScript!

An updated guide for iOS 13 and phones, that support the Permissions API, is available here!

A common ground to start from

You can download this zip archive which contains a simple website with a background image and a short JavaScript program. I will use this website as a starting point for this tutorial and modify the script so that it reads the sensor’s values and then moves the background image.

Read the sensor data

When the orientation of your phone changes, the “deviceorientation” event gets raised. So all you need to do in order to process the sensor’s data is to listen to that event:

window.addEventListener(
    "deviceorientation",
    orientationChanged,
    true
);

Now define the “orientationChanged” function and add the following code to read each axis of the accelerometer:

function orientationChanged(event)
{
    var absolute = event.absolute;
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;

    console.log(alpha + ', ' + beta + ', ' + gamma);
}

Whereas alpha represents the z-axis (ranging from 0 to 360 degrees), beta is the x-axis (ranging from 0-180°) and the y-axis is represented by the gamma value (also ranging from 0-90°).

Add the code to the JavaScript file, host all files on a webserver and then visit the website from a mobile device.

Dynamically change the background image position

In the sample script from above, I defined a variable add which will, as the name suggests, add a value to the width and height of the background image. The image is then moved to the top left by add/2, so that the image is centered on devices that don’t have accelerometers (like desktop computers). All this happens outside of the event’s method.

In the orientationChanged method the sensor’s values are read and because the screen is two dimensional, we’ll only need the beta and gamma values from the sensor. I normalized both values so that they range from 0 to 180 degrees. This way it’s easier to move the image around because you can use the same offset for both directions. Additionally, it won’t confuse the script if you flip the phone upside-down with the screen locked to one orientation:

function orientationChanged(event)
{
    var beta = event.beta;
    var gamma = event.gamma;

    if(beta > 90)
        beta = 90;

    if(beta < -90)
        beta = -90;

    beta += 90;
    gamma += 90;

    body.style.backgroundPosition = (x + gamma - add/2) + 'px ' + (y + beta - add/2) + 'px';
}

As you can see, I used the backgroundPosition css value to move the image around. I also had to subtract half the offset, so that the image is always shown in the background and it won’t repeat at the edges.

Browser compatibility

Should work with every modern browser. Tested it with iOS12 on an iPhone and an iPad and both worked. For a full list of compatible browsers see [2].

Finished example

You can download the complete example with comments here.

Conclusion

It’s much easier than expected to read the accelerometer’s values from mobile devices via JavaScript and I think it’s a shame that there aren’t more websites that utilze this feature because it creates a unique look and feel without being annoying.

Sources

[1] DeviceOrientation event specification – w3.org
[2] Detecting device orientation – mozilla.org