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.
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.
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:
In the browser we can access device data via two events:
devicemotion- Provides data regarding the acceleration and general movement the user is applying on the device.
deviceorientation- Provides rotational data relevant to the orientation of the device.
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:
acceleration- A 3d vector containing the amount of acceleration recorded by the device in meters per second squared on the x, y, and z axis. Compensates for the influence of gravity.
accelerationIncludingGravity- A 3d vector containing the sums of
accelerationand the acceleration caused by gravity.
rotationRate- A rotational 3d vector containing the rate the device is rotating around each of its axes in degrees per second. Contains the alpha, beta, and gamma axis.
interval- The interval data is being received from the device in milliseconds.
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:
alpha- Rotation around the z axis, or twisting the device.
beta- Rotation around the x axis, or tipping the device away from or toward the user.
gamma- Rotation around the y axis, or tipping the device toward the left or right.
absolute- Indicates whether or not the device is providing orientation data in reference to the Earth's coordinate frame or using an arbitrary frame determined by the device.