window.ENTITIES={'/api/snippets/javascript/javascript%20-%20calculate%20compass%20heading%20angle%20from%20alpha%2c%20beta%20and%20gamma%20angles%20of%20mobile%20device%20orientation%20(ondeviceorientation%20event%20as%20source)':[{"result":true,"message":null,"batch":{"type":"javascript","name":"javascript - calculate compass heading angle from alpha, beta and gamma angles of mobile device orientation (ondeviceorientation event as source)","items":[{"id":"pYP4kD","type":"javascript","name":"JavaScript - calculate compass heading angle from alpha, beta and gamma angles of mobile device orientation (ondeviceorientation event as source)","content":"const RADIAN = Math.PI / 180;\nconst DEGREE = 180 / Math.PI;\n\n// Calculates compass heading angle from alpha, beta and gamma angles of mobile device orientation.\n//\n// Note:\n//   The Earth coordinate frame, described by the values x, y, and z, is aligned based on gravity and standard magnetic orientation.\n// \n//   Coordinate system\n//     X-axis represents the east-west direction (where east is positive)\n//     Y-axis represents the north-south direction (where north is positive)\n//     Z-axis represents the up-down direction, perpendicular to the ground (where up is positive)\n//\n// Arguments:\n//   alpha  the rotation in degrees around the Z-axis\n//   beta   the rotation in degrees around the X-axis\n//   gamma  the rotation in degrees around the Y-axis\n//\n//                      up\n//                      ^   [N]\n//               Z-axis |   ^ Y-axis\n//                      |  /\n//                    --|-/----\n//                   /  |/   /\n//                  /   *---/------> [E]\n//                 /       /     X-axis\n//                /   o   /\n//               ---------\n//          phone screen surface in the position\n//                alpha=0, beta=0, gamma=0\n//\n// Result:  compass heading angle in degrees in the range <0, 360).\n//\n//                     [N]\n//                      0 \n//                315   ^   45\n//                    . | .\n//          [W] 270 <-- + --> 90 [E]\n//                    . | .\n//                225   v   135\n//                     180\n//                     [S]\n//\nconst calculateCompassHeadingAngle = (alpha, beta, gamma) => {\n    const rX = beta * RADIAN || 0;\n    const rY = gamma * RADIAN || 0;\n    const rZ = alpha * RADIAN || 0;\n    const sX = Math.sin(rX);\n    const sY = Math.sin(rY);\n    const sZ = Math.sin(rZ);\n    const cX = Math.cos(rX);\n    const cY = Math.cos(rY);\n    const cZ = Math.cos(rZ);\n    const vX = -cZ * sY - sZ * sX * cY;\n    const vY = -sZ * sY + cZ * sX * cY;\n    const angle = Math.atan(vX / vY);\n    if (vY < 0) {\n        return angle * DEGREE + 180;\n    }\n    if (vX < 0) {\n        return angle * DEGREE + 360;\n    }\n    return angle * DEGREE;\n};\n\n\n\n// Usage example:\n\n// Hint: consider to use 'deviceorientationabsolute' event.\n\nwindow.addEventListener('deviceorientation', (event) => {\n    //\n    // ⚠️ Warnings ⚠️:\n    //   - on some devices it may be necessary to use `event.webkitCompassHeading` property instead of `calculateCompassHeadingAngle()` method,\n    //   - it is good to check `event.absolute` property to know if compass heading angle indicates absolutely orientation (that is, in reference to the Earth's coordinate) or it is determined by the device.\n    //\n    const angle = calculateCompassHeadingAngle(event.alpha, event.beta, event.gamma);\n    console.log(`compass heading angle: ${angle}`);\n});\n\n\n\n// References:\n//\n//     1. https://web.dev/articles/device-orientation\n//     2. https://w3c.github.io/deviceorientation/spec-source-orientation.html#worked-example","source":"","author":{"id":"Ro42dD","name":"Creg","avatar":"1667335677213__Ro42dD__w40px_h40px.jpg","points":9600,"role":"ADMIN"},"creationTime":1739901678000,"updateTime":1740091943000,"removalTime":null}]}}]};