Add working translation to sphere coordinates
This commit is contained in:
Paul Brinkmeier
parent
1635eb9ede
commit
26c35b27b4
47
gyro/debug.html
Normal file
47
gyro/debug.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Is it working?</h1>
|
||||||
|
<button id="perm">click me for permissions</button>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>α</th>
|
||||||
|
<td id="disp-a">?</td>
|
||||||
|
<th>x</th>
|
||||||
|
<td id="disp-x">?</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>β</th>
|
||||||
|
<td id="disp-b">?</td>
|
||||||
|
<th>y</th>
|
||||||
|
<td id="disp-y">?</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>γ</th>
|
||||||
|
<td id="disp-c">?</td>
|
||||||
|
<th>z</th>
|
||||||
|
<td id="disp-z">?</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>φ</th>
|
||||||
|
<td id="disp-phi">?</td>
|
||||||
|
<th>θ</th>
|
||||||
|
<td id="disp-theta">?</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<script src="m3.js"></script>
|
||||||
|
<script src="util.js"></script>
|
||||||
|
<script src="v3.js"></script>
|
||||||
|
<script src="debug.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
gyro/debug.js
Normal file
38
gyro/debug.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
document.querySelector("#perm").addEventListener("click", e => {
|
||||||
|
util.getGyroPermission()
|
||||||
|
.then((response) => {
|
||||||
|
const disp = {
|
||||||
|
a: document.querySelector("#disp-a"),
|
||||||
|
b: document.querySelector("#disp-b"),
|
||||||
|
c: document.querySelector("#disp-c"),
|
||||||
|
x: document.querySelector("#disp-x"),
|
||||||
|
y: document.querySelector("#disp-y"),
|
||||||
|
z: document.querySelector("#disp-z"),
|
||||||
|
phi: document.querySelector("#disp-phi"),
|
||||||
|
theta: document.querySelector("#disp-theta"),
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
disp.a.innerHTML = `${Math.round(e.alpha)}`;
|
||||||
|
disp.b.innerHTML = `${Math.round(e.beta)}`;
|
||||||
|
disp.c.innerHTML = `${Math.round(e.gamma)}`;
|
||||||
|
|
||||||
|
disp.x.innerHTML = `${Math.round(100 * screenNormal[0])}`;
|
||||||
|
disp.y.innerHTML = `${Math.round(100 * screenNormal[1])}`;
|
||||||
|
disp.z.innerHTML = `${Math.round(100 * screenNormal[2])}`;
|
||||||
|
|
||||||
|
disp.phi.innerHTML = `${Math.round(phi / Math.PI * 180)}`;
|
||||||
|
disp.theta.innerHTML = `${Math.round(theta / Math.PI * 180)}`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, { once: true });
|
||||||
|
})();
|
||||||
@ -1,26 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Is it working?</h1>
|
<h1>Is it working?</h1>
|
||||||
<button id="perm">click me for permissions</button>
|
<button id="perm">click me for permissions</button>
|
||||||
<div style="color: red" id="disp">lalala</div>
|
<canvas width="200" height="200" id="canvas"></canvas>
|
||||||
<script>
|
<script src="m3.js"></script>
|
||||||
document.querySelector("#perm").addEventListener("click", e => {
|
<script src="util.js"></script>
|
||||||
const ac = new AudioContext();
|
<script src="v3.js"></script>
|
||||||
const osc = ac.createOscillator();
|
<script src="index.js"></script>
|
||||||
|
|
||||||
osc.type = "square";
|
|
||||||
osc.frequency.setValueAtTime(440, ac.currentTime);
|
|
||||||
osc.connect(ac.destination);
|
|
||||||
osc.start();
|
|
||||||
|
|
||||||
DeviceMotionEvent.requestPermission().then(response => {
|
|
||||||
window.addEventListener("devicemotion", e => {
|
|
||||||
document.querySelector("#disp").innerHTML = Math.round(e.acceleration.x);
|
|
||||||
osc.frequency.setValueAtTime(440 * Math.pow(2, e.acceleration.x / 10), ac.currentTime);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
42
gyro/index.js
Normal file
42
gyro/index.js
Normal file
@ -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 });
|
||||||
|
})();
|
||||||
63
gyro/m3.js
Normal file
63
gyro/m3.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
const m3 = {
|
||||||
|
xRotation: (phi) => {
|
||||||
|
const c = Math.cos(phi), s = Math.sin(phi);
|
||||||
|
return [
|
||||||
|
1, 0, 0,
|
||||||
|
0, c, -s,
|
||||||
|
0, s, c
|
||||||
|
];
|
||||||
|
},
|
||||||
|
yRotation: (phi) => {
|
||||||
|
const c = Math.cos(phi), s = Math.sin(phi);
|
||||||
|
return [
|
||||||
|
c, 0, s,
|
||||||
|
0, 1, 0,
|
||||||
|
-s, 0, c
|
||||||
|
];
|
||||||
|
},
|
||||||
|
zRotation: (phi) => {
|
||||||
|
const c = Math.cos(phi), s = Math.sin(phi);
|
||||||
|
return [
|
||||||
|
c, -s, 0,
|
||||||
|
s, c, 0,
|
||||||
|
0, 0, 1
|
||||||
|
];
|
||||||
|
},
|
||||||
|
add: (m1, m2) => [
|
||||||
|
m1[0] + m2[0],
|
||||||
|
m1[1] + m2[1],
|
||||||
|
m1[2] + m2[2],
|
||||||
|
m1[3] + m2[3],
|
||||||
|
m1[4] + m2[4],
|
||||||
|
m1[5] + m2[5],
|
||||||
|
m1[6] + m2[6],
|
||||||
|
m1[7] + m2[7],
|
||||||
|
m1[8] + m2[8],
|
||||||
|
],
|
||||||
|
mul: (m1, m2) => [
|
||||||
|
m1[0]*m2[0] + m1[1]*m2[3] + m1[2]*m2[6],
|
||||||
|
m1[0]*m2[1] + m1[1]*m2[4] + m1[2]*m2[7],
|
||||||
|
m1[0]*m2[2] + m1[1]*m2[5] + m1[2]*m2[8],
|
||||||
|
m1[3]*m2[0] + m1[4]*m2[3] + m1[5]*m2[6],
|
||||||
|
m1[3]*m2[1] + m1[4]*m2[4] + m1[5]*m2[7],
|
||||||
|
m1[3]*m2[2] + m1[4]*m2[5] + m1[5]*m2[8],
|
||||||
|
m1[6]*m2[0] + m1[7]*m2[3] + m1[8]*m2[6],
|
||||||
|
m1[6]*m2[1] + m1[7]*m2[4] + m1[8]*m2[7],
|
||||||
|
m1[6]*m2[2] + m1[7]*m2[5] + m1[8]*m2[8],
|
||||||
|
],
|
||||||
|
mulV: (m, v) => [
|
||||||
|
m[0]*v[0] + m[1]*v[1] + m[2]*v[2],
|
||||||
|
m[3]*v[0] + m[4]*v[1] + m[5]*v[2],
|
||||||
|
m[6]*v[0] + m[7]*v[1] + m[8]*v[2]
|
||||||
|
],
|
||||||
|
eq: (m1, m2) =>
|
||||||
|
m1[0] === m2[0] &&
|
||||||
|
m1[1] === m2[1] &&
|
||||||
|
m1[2] === m2[2] &&
|
||||||
|
m1[3] === m2[3] &&
|
||||||
|
m1[4] === m2[4] &&
|
||||||
|
m1[5] === m2[5] &&
|
||||||
|
m1[6] === m2[6] &&
|
||||||
|
m1[7] === m2[7] &&
|
||||||
|
m1[8] === m2[8],
|
||||||
|
};
|
||||||
32
gyro/util.js
Normal file
32
gyro/util.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
const util = {
|
||||||
|
getGyroPermission: () => {
|
||||||
|
if(!DeviceOrientationEvent.requestPermission) {
|
||||||
|
return Promise.resolve("granted")
|
||||||
|
} else{
|
||||||
|
return DeviceOrientationEvent.requestPermission()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
round: (x, decimalPlaces) =>
|
||||||
|
Math.round(x * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces),
|
||||||
|
// parameters in radians
|
||||||
|
// return values in radians
|
||||||
|
toPolarCoordinates: (alpha, beta, gamma) => {
|
||||||
|
const rz = m3.zRotation(alpha);
|
||||||
|
const rx = m3.xRotation(beta);
|
||||||
|
const ry = m3.yRotation(gamma);
|
||||||
|
|
||||||
|
const rot = m3.mul(rz, m3.mul(rx, ry));
|
||||||
|
|
||||||
|
const screenNormal = m3.mulV(rot, [0, 0, 1]);
|
||||||
|
|
||||||
|
const phi = Math.atan2(screenNormal[1], screenNormal[0]);
|
||||||
|
const r = v3.norm2(screenNormal);
|
||||||
|
// theta ∈ [0, π]
|
||||||
|
// where 0 is lying flat and π is upside down
|
||||||
|
const theta = Math.acos(screenNormal[2] / r);
|
||||||
|
|
||||||
|
return [screenNormal, phi, theta];
|
||||||
|
},
|
||||||
|
rgb: (r, g, b) => `rgb(${255 * r}, ${255 * g}, ${255 * b})`,
|
||||||
|
deg2rad: (deg) => deg / 180 * Math.PI,
|
||||||
|
};
|
||||||
18
gyro/v3.js
Normal file
18
gyro/v3.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const v3 = {
|
||||||
|
add: (v1, v2) => [
|
||||||
|
v1[0] + v2[0],
|
||||||
|
v1[1] + v2[2],
|
||||||
|
v1[2] + v2[2],
|
||||||
|
],
|
||||||
|
subtract: (v1, v2) => [
|
||||||
|
v1[0] - v2[0],
|
||||||
|
v1[1] - v2[2],
|
||||||
|
v1[2] - v2[2],
|
||||||
|
],
|
||||||
|
norm2: (v) =>
|
||||||
|
Math.sqrt(
|
||||||
|
v[0] * v[0] +
|
||||||
|
v[1] * v[1] +
|
||||||
|
v[2] * v[2]
|
||||||
|
),
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user