Skip to content

Fix cube rotation in Device Orientation API demo #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Macil wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix cube rotation in Device Orientation API demo #12

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d05b4b
Increase opacity to make cube easier to understand.
Macil Sep 28, 2018
0c69732
Fix cube rotation.
Macil Sep 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 100 additions & 5 deletions demos/device-orientation-api-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
line-height: 150px;
background-color: #999999;
box-shadow: inset 0 0 20px #333333;
opacity: 0.6;
opacity: 0.9;
}

.cube .one
Expand Down Expand Up @@ -129,17 +129,112 @@ <h1>Device Orientation API</h1>
</small>

<script>
//
// 3D Transform code for handling the cube rotation.
// Based on https://dev.opera.com/articles/w3c-device-orientation-usage/
//

var degtorad = Math.PI / 180;

function convertToRotationMatrix(alpha, beta, gamma) {
var _x = beta * degtorad;
var _y = gamma * degtorad;
var _z = alpha * degtorad;

var cX = Math.cos(_x);
var cY = Math.cos(_y);
var cZ = Math.cos(_z);
var sX = Math.sin(_x);
var sY = Math.sin(_y);
var sZ = Math.sin(_z);

// ZXY-ordered rotation matrix construction.

var m11 = cZ * cY - sZ * sX * sY;
var m12 = - cX * sZ;
var m13 = cY * sZ * sX + cZ * sY;

var m21 = cY * sZ + cZ * sX * sY;
var m22 = cZ * cX;
var m23 = sZ * sY - cZ * cY * sX;

var m31 = - cX * sY;
var m32 = sX;
var m33 = cX * cY;

return [
m11, m12, m13,
m21, m22, m23,
m31, m32, m33
];
}

function getScreenOrientationRotationMatrix(screenOrientation) {
var orientationAngle = screenOrientation * degtorad;

var cA = Math.cos(orientationAngle);
var sA = Math.sin(orientationAngle);

return [
cA, -sA, 0,
sA, cA, 0,
0, 0, 1
];
}

function matrixMultiply(a, b) {
return [
a[0] * b[0] + a[1] * b[3] + a[2] * b[6],
a[0] * b[1] + a[1] * b[4] + a[2] * b[7],
a[0] * b[2] + a[1] * b[5] + a[2] * b[8],

a[3] * b[0] + a[4] * b[3] + a[5] * b[6],
a[3] * b[1] + a[4] * b[4] + a[5] * b[7],
a[3] * b[2] + a[4] * b[5] + a[5] * b[8],

a[6] * b[0] + a[7] * b[3] + a[8] * b[6],
a[6] * b[1] + a[7] * b[4] + a[8] * b[7],
a[6] * b[2] + a[7] * b[5] + a[8] * b[8]
];
}

function computeCubeRotationMatrix(alpha, beta, gamma) {
var rotationMatrix = convertToRotationMatrix(-alpha, -beta, gamma);

var screenTransform = getScreenOrientationRotationMatrix(window.orientation || 0);
var screenAdjustedMatrix = matrixMultiply(rotationMatrix, screenTransform);

return screenAdjustedMatrix;
}

function convertRotationMatrixToTransform(r) {
return [
r[0], r[1], r[2], 0,
r[3], r[4], r[5], 0,
r[6], r[7], r[8], 0,
0, 0, 0, 1
];
}

function convertRotationMatrixToCssTransform(rotationMatrix) {
var transformMatrix = convertRotationMatrixToTransform(rotationMatrix);
return "matrix3d(" + transformMatrix.join(', ') + ")";
}

//
// HTML5 API Usage
//

if (!('ondeviceorientation' in window)) {
document.getElementById('do-unsupported').classList.remove('hidden');
} else {
document.getElementById('do-info').classList.remove('hidden');

window.addEventListener('deviceorientation', function(event) {
var matrix = computeCubeRotationMatrix(event.alpha, event.beta, event.gamma);
var cssMatrix = convertRotationMatrixToCssTransform(matrix);
document.getElementById('cube').style.webkitTransform =
document.getElementById('cube').style.transform =
'rotateX(' + event.beta + 'deg) ' +
'rotateY(' + event.gamma + 'deg) ' +
'rotateZ(' + event.alpha + 'deg)';
document.getElementById('cube').style.transform = cssMatrix;

document.getElementById('beta').innerHTML = Math.round(event.beta);
document.getElementById('gamma').innerHTML = Math.round(event.gamma);
Expand Down