Add working translation to sphere coordinates

gyro/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+(() => {
+  const ctx = canvas.getContext("2d");
+  const scale = Math.min(canvas.width, canvas.height) / 2;
+  ctx.setTransform(
+    scale, 0,
+    0, -scale,
+    canvas.width / 2, canvas.height / 2
+  );
+
+  ctx.fillStyle = util.rgb(1, 0, 0);
+  ctx.fillRect(-0.5, -0.5, 1, 1);
+
+  perm.addEventListener("click", e => {
+    util.getGyroPermission()
+    .then((response) => {
+      window.addEventListener("deviceorientation", e => {
+        const alpha = util.deg2rad(e.alpha);
+        const beta = util.deg2rad(e.beta);
+        const gamma = util.deg2rad(e.gamma);
+
+        const [screenNormal, phi, theta] = util.toPolarCoordinates(alpha, beta, gamma);
+        const theta_ = Math.abs(theta - Math.PI / 2) / Math.PI * 2;
+        const phi_ = phi - Math.PI / 2;
+
+        ctx.clearRect(-1, -1, 2, 2);
+
+        const g = theta_;
+        ctx.fillStyle = util.rgb(255, g, g);
+        ctx.fillRect(-1, -1, 2, 2);
+
+        ctx.strokeStyle = "black";
+        ctx.lineWidth = 0.01;
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(Math.cos(phi_), Math.sin(phi_));
+        ctx.stroke();
+      });
+    });
+  }, { once: true });
+})();