Gyroscope / Accelerometer Fun

A small collection of demos that use the built in gyroscope/accelerometer to make the user think you're a magician.

I'm kinda digging these gyroscope things.

What are gyros?

But what are gyroscopes and accelerometers?

Sensors inside of most mobile devices that measure device acceleration and rotation in 3d space. Tapping into these allows us to provide functionality that directly correlates to how the user is handling their device.

What can do this wizardry?

Most modern mobile devices, however it's still experimental and the data provided by the sensors can vary greatly between devices/browsers.

Mobile browser support as per MDN:

How do I do?

In the browser we can access device data via two events:

devicemotion

The devicemotion event provides both positional constants as well as acceleration rates, so it's got a plethora of uses; not to mention some laptops that have motion sensors built in to protect hard drives and such will also be able to make use of it.

Most of the properties provided by the devicemotion event deal with the devices coordinate frame, which provides us with a 3d vector that contains data about the x, y and z axis.

The event gives us the following properties to work with:

deviceorientation

The deviceorientation event focuses on data received via the gyroscope, and exclusively contains rotational information about the devices orientation in the real world. This is extremely useful for simple translations of device orientation, such as determining whether or not a user is simply tilting their phone away from them or towards them.

The event provides the following properties containing rotational information in degrees:

Examples