Standalone device orientation + device motion normalization and conversion library
Usage no npm install needed!
<script type="module">
import hughskFulltilt from 'https://cdn.skypack.dev/@hughsk/fulltilt';
</script>
README
Full Tilt
Standalone device orientation + motion detection, normalization and conversion library
This is a fork published to npm. See the original for support etc. Warning: Full-Tilt has a non-commercial license, so cannot be used in commercial projects.
Full Tilt is a Promise-based JavaScript library that detects support for device orientation and device motion sensor data and then normalizes that data across different platforms for web applications to use within their own 'world' or 'game' based frames.
Full Tilt provides developers with three complementary device orientation sensor output representations – screen-adjusted Quaternions, Rotation Matrixes and Euler Angles – that can be used to create 2D or 3D experiences in web browsers that work consistently across all mobile web platforms and in all screen orientations.
This library also provides all the functions necessary to convert between different device orientation types. Orientation angle conversion is possible via this API from/to Device Orientation and Motion API-derived Euler Angles, Rotation Matrices and/or Quaternions (i.e. from raw sensor inputs that supply intrinsic Tait-Bryan angles of type Z-X'-Y').
If the requested sensor is supported on the current device then this Promise object will resolve to FULLTILT.DeviceOrientation and FULLTILT.DeviceMotion as appropriate. This returned object can then be used to interact with the device's sensors via the FULLTILT APIs.
If the requested sensor is not supported on the current device then this Promise object will reject with a simple error message string. In such circumstances it is recommended to provide manual fallback controls so users can still interact with your web page appropriately.
Here is a quick example of how to use Full Tilt:
<script>
// Create a new FULLTILT Promise for e.g. *compass*-based deviceorientation data
var promise = new FULLTILT.getDeviceOrientation({ 'type': 'world' });
// FULLTILT.DeviceOrientation instance placeholder
var deviceOrientation;
promise
.then(function(controller) {
// Store the returned FULLTILT.DeviceOrientation object
deviceOrientation = controller;
})
.catch(function(message) {
console.error(message);
// Optionally set up fallback controls...
// initManualControls();
});
(function draw() {
// If we have a valid FULLTILT.DeviceOrientation object then use it
if (deviceOrientation) {
// Obtain the *screen-adjusted* normalized device rotation
// as Quaternion, Rotation Matrix and Euler Angles objects
// from our FULLTILT.DeviceOrientation object
var quaternion = deviceOrientation.getScreenAdjustedQuaternion();
var matrix = deviceOrientation.getScreenAdjustedMatrix();
var euler = deviceOrientation.getScreenAdjustedEuler();
// Do something with our quaternion, matrix, euler objects...
console.debug(quaternion);
console.debug(matrix);
console.debug(euler);
}
// Execute function on each browser animation frame
requestAnimationFrame(draw);
})();
</script>