Track Your Smartphone in 2D With JavaScript
By: Sanjeet Chatterjee
Tags: Nodejs, JavaScript, Front End Development, Programming, Web Development

Tracking Your Smartphone

Let’s start off with a generic controller.html file and corresponding controller.js script:

The Generic Sensor API supports multiple sensors. However, for our requirements, we will be using the AbsoluteOrientationSensor.

According to MDN web docs, the AbsoluteOrientationSensor is a sensor fusion API that “describes the device's physical orientation in relation to the Earth's reference coordinate system.”

By combining data from multiple real sensors, new virtual sensors can be implemented that combine and filter the data so that it’s easier to use — these are known as fusion sensors. In this case, data from the onboard magnetometer, accelerometer, and gyroscope are used for the AbsoluteOrientationSensor ’s implementation.

Below is the code for interfacing with this virtual sensor. And that’s it!

First, the sensor object is initialised with a set frequency — the rate at which the sensor is read and corresponding handleSensor callback is fired. Then it starts the reading process.

After refreshing your page, move your phone around to see the following output. You should see a stream of quaternions:

But what are quaternions?

“Quaternions are a number system that extends the complex numbers.” — Wikipedia

In place of Euler angles, they can be used as an alternative method of describing the orientation of an object in space. Quaternions are extensively used in game development, as calculations using them are less computationally expensive.

However, for simplicity, let’s convert these to the more intuitive Euler angles. Following the conversion formula, below is a JavaScript implementation. As we are tracking in two dimensions, pitch has been omitted:

Update your handleSensor function to now print the converted Euler angles by using the function above:

You should see the angle output in radians, which should change intuitively as you rotate your phone around. Below are the dimensions we will be using to track our pointer in 2D.

Photo by the author.

We have successfully interfaced with the Generic Sensor API to obtain the required sensor data to track your smartphone’s orientation in real-time. We need to now translate these changing angles into movement projected on the screen.

But first, we need a method of calibration — setting an initial start position from which all distances are measured:

When you click on the controller page body, the current orientation of the phone is set as the start point from which all angles — and therefore distances — are measured.

Photo by the author.

For calculating the relative distance moved, simple trigonometry is required by using the change in angle from the start point.

When taking differences, we need a way to wrap around to ensure a correct value (i.e. at the 180° and -180° points).

Here’s the code:

Note: The number 800 in the final calculation determines the virtual distance of the controller from the canvas. In the real world, this does not make sense and instead can be used to change the sensitivity of movement.

Update your handleSensor function to print out the calculated distance using the function above:

And that’s it!

You now have the ability to track your smartphone’s movement in real-time and translate it into a distance measurement for on-screen movement.