I am making a 2D maze game for mobile using the device orientation as controls. After reading https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation it seemed pretty simple to take the beta and gamma values from the deviceorientation event as per the example. However, this assumes that the device will be laid down on a flat surface and rotated from there. It would be far more intuitive to take an initial set of values from the deviceorientation event when starting a level and find the relative beta and gamma between the initial and current values to ultimately determine 2D vector to control direction.
After trying to achieve this I came across a problem that for some reason the alpha, beta, gamma values seem to completely flip in the opposite direction when crossing over some threshold. This got me reading about Gimbal Locks, Quaternions, trying different JS libraries to attempt matrix transformations and all sorts. All of this is completely over my head and I'm getting nowhere with it.
So in short given an initialAlpha, initialBeta, initialGamma, currentAlpha, currentBeta, currentGamma how do I convert that into relativeBeta and relativeGamma.
The solution only needs to work on Chrome. Thanks to anyone who can help provide an example JS implementation, vanilla or with whatever library is fine.
