Device Orientation - 360

Overview

This is the second post in a series of four posts on experiments with the JavaScript deviceorientation event:

• One: Device Orientation - Vertical
• Two: Device Orientation - 360
• Three: Device Orientation - 3d
• Four: Device Orientation - websockets

This lab is an example of scrolling a website using the deviceorientation event reported by mobile devices.

The logic behind the event values is explained by these Dev.Opera and MDN articles.

Three values are returned by the event - alpha (α), beta (β) and gamma (γ) - that relate to the orientation of the device.

1
2
3
4
window.addEventListener('deviceorientation', handleOrientationEvent);
function handleOrientationEvent(event) {
  console.log(event.alpha, event.beta, event.gamma);
}

For this lab, we expand the width of the web page so that it expands in both directions around the currently visible viewport. We then use the alpha value to control the horizontal scroll position. The vertical scroll uses the beta value when the device is held in portrait orientation, or gamma value when the device is held in landscape orientation.

The JavaScript file contains plenty of comments to describe the logic that calculates these values.

This is a basic implementation that doesn’t use Euler angles or Quaternions (etc) and therefore suffers from Gimbal Lock. (Read More Here).

Example video