Gyroscope Experiments

April, 2016

I asked myself: How to use the Smartphone Gyroscope via Web Technologies and what to do with it?

Here’s the basic js for getting the rotaiton angle for y,x and z axis:

window.ondeviceorientation = function(event) {
	alpha = Math.round(event.alpha);
	beta = Math.round(event.beta);
	gamma = Math.round(event.gamma);
	console.log(alpha, beta, gamma);
}

Now, if you rotate your device (laptop or phone with gyroscope), you will see the x,y and z rotation logged in the console, everytime you move the device.

So, what to do with it?
I tried to manipulate the position of a div with this data and created a simple math game for smartphones. It checks the position of the divs that show either the right or wrong sum of the calculation.

http://fabianburghardt.de/blog/demos/mathgame/

mathgame

 

That’s quite cool, but I wanted to do something more useful. So I thought about a webapp which manipulates sounds based on the device movement. Maybe something like an extension for DJ’s to control EQ’s, Filters and Effects via the movement of the phone.

I worked on a demo to controlĀ a low pass filter on a sound depending on the laptop-rotation. I’m not finished yet and it only works on desktop computers. But here is the first attempt:

http://fabianburghardt.de/blog/demos/gyro-eq