🧪 Website Experiment: Mobile Gyroscope
Testing how to get a phone's accelerometer to work to trigger interactive graphics.
So this is a little experiment to get device motion working on mobile. At this moment, I am trying to get a 2.5D browser interaction working on the touch screens. The solution is device xyz motion or touch events.
Challenges:
For this to work, you need to ask the user for permission to gain access to their phone's gyroscope or accelerometer.
Documentation: Orientation-event
"Devicemotion"
Registering to receive devicemotion events:
window.addEventListener("devicemotion", function(event) {
// Process
event.acceleration,
event.accelerationIncludingGravity,
// event.rotationRate and event.interval
}, true);
The Experiment
Code-pen: Link
Code
HTML, CSS and Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Set up basic styling for the body and cube */
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
/* Set Poppins as the default font */
}
p {
font-family: 'Poppins', sans-serif;
color: rgba(255, 255, 255, 0.3);
}
/* Set semibold (600) font weight for h3 elements */
h3 {
pading-top: 16px;
font-weight: 600;
}
/* Styling for the 3D cube */
.cube {
z-index: -1;
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg) translate(-50%, -50%);
}
.face {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #fff;
}
.front {
transform: translateZ(50px);
backdrop-filter: blur(10px);
/* Adjust the blur radius as needed */
background-color: transparent;
/* Fully transparent background */
}
.back {
transform: rotateY(180deg) translateZ(50px);
backdrop-filter: blur(10px);
background-color: transparent;
}
.top {
transform: rotateX(-90deg) translateZ(50px);
backdrop-filter: blur(10px);
background-color: transparent;
}
.bottom {
transform: rotateX(90deg) translateZ(50px);
backdrop-filter: blur(10px);
background-color: transparent;
}
.left {
transform: rotateY(-90deg) translateZ(50px);
backdrop-filter: blur(10px);
background-color: transparent;
}
.right {
transform: rotateY(90deg) translateZ(50px);
backdrop-filter: blur(10px);
background-color: transparent;
}
/* Style for the button */
button {
background-color: white;
color: #fff;
padding: 10px 24px;
border: none;
width: 100%;
border-radius: 5px;
cursor: pointer;
font-weight: 400;
color: grey;
font-family: 'Poppins', sans-serif;
font-size: 16px;
margin-top: 12px;
}
/* Hover effect for the button */
button:hover {
background-color: black;
color: white;
}
/* Styling for the modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
align-items: center;
z-index: 999;
/* Set a higher z-index value */
}
.modal-content {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
/* Adjust the blur radius as needed */
color: rgba(255, 255, 255, 0.7);
min-height: 128px;
width: 300px;
max-width: 320px;
padding: 20px;
border-radius: 16px;
text-align: center;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;
margin-right: 24px;
margin-left: 24px;
z-index: 9999;
}
</style>
</head>
<body>
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<h3>Device Motion Access</h3>
<p>For this website we would like access to your phones 'Gyroscope' </p>
<button onclick="requestDeviceOrientation()">Sure</button>
</div>
</div>
<!-- Cube container -->
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face left"></div>
<div class="face right"></div>
</div>
<script>
// Function to handle device orientation events
function handleOrientation(event) {
let alpha = event.alpha;
let beta = event.beta;
let gamma = event.gamma;
// Update cube rotation based on device orientation
let cube = document.querySelector('.cube');
cube.style.transform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
}
// Function to request device orientation permission
async function requestDeviceOrientation() {
// Hide the modal
const modal = document.getElementById('modal');
modal.style.display = 'none';
// Check for device orientation support and permission request method
if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
try {
// Request permission on iOS 13+ devices
const permissionState = await DeviceOrientationEvent.requestPermission();
if (permissionState === 'granted') {
// Add event listener for device orientation
window.addEventListener('deviceorientation', handleOrientation);
} else {
// Display alert if permission is denied
alert('Permission was denied');
}
} catch (error) {
// Display alert if an error occurs during permission request
alert(error);
}
} else if ('DeviceOrientationEvent' in window) {
// Add event listener for device orientation on non-iOS 13+ devices
window.addEventListener('deviceorientation', handleOrientation);
} else {
// Display alert if device orientation is not supported
alert('Device orientation not supported');
}
}
// Trigger modal on page load
window.addEventListener('load', function() {
const modal = document.getElementById('modal');
modal.style.display = 'flex';
});
</script>
</body>
</html>