From 322d268de4129979701509897434acd9dfc0072f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikael=20L=C3=B6vqvist?= <mikael.lovqvist.mail@gmail.com>
Date: Wed, 17 Sep 2025 17:59:06 +0200
Subject: [PATCH] Added GravitySensor demo

---
 index.html               |   2 +
 standalone/imu-1/3d.html | 204 +++++++++++++++++++++++++++++++++++++++
 standalone/imu-1/t1.html |  23 +++++
 3 files changed, 229 insertions(+)
 create mode 100644 standalone/imu-1/3d.html
 create mode 100644 standalone/imu-1/t1.html
diff --git a/index.html b/index.html
index 4ad0232..c607317 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
 			<h2>Standalone experiments</h2>
 			<ul>
 				<li><a href="standalone/tables-1/t10.html">Table 1</a></li>
+				<li><a href="standalone/imu-1/t1.html">Read out GravitySensor</a></li>
 			</ul>
 		</li>
 
@@ -36,6 +37,7 @@
 			<h2>Standalone vibe coded utilities/experiments</h2>
 			<ul>
 				<li><a href="standalone/gradient_editor.html">Gradient editor</a></li>
+				<li><a href="standalone/imu-1/3d.html">3D view using GravitySensor</a></li>
 			</ul>
 		</li>
 
diff --git a/standalone/imu-1/3d.html b/standalone/imu-1/3d.html
new file mode 100644
index 0000000..43eef1c
--- /dev/null
+++ b/standalone/imu-1/3d.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>WebGL Cube Lines (MVP in Shader)</title>
+<style>
+	body, html {
+		padding: 0;
+		margin: 0;
+	}
+	canvas {
+		width: 100vw;
+		height: 100vh;
+		display: block;
+	}
+</style>
+<script>
+const vsSource = `
+attribute vec3 aPos;
+uniform mat4 uProjection;
+uniform mat4 uView;
+uniform vec3 uDir;
+
+mat4 rotationY(float a) {
+		float c = cos(a);
+		float s = sin(a);
+		return mat4(
+				c,  0.0,  s, 0.0,
+				0.0,1.0, 0.0,0.0,
+			 -s,  0.0,  c, 0.0,
+				0.0,0.0, 0.0,1.0
+		);
+}
+
+// Input: n is normalized
+void makeBasis(in vec3 n, out vec3 b1, out vec3 b2) {
+    if (n.z < -0.9999999) {
+        // special case: n ~ (0,0,-1)
+        b1 = vec3(0.0, -1.0, 0.0);
+        b2 = vec3(-1.0, 0.0, 0.0);
+    } else {
+        float a = 1.0 / (1.0 + n.z);
+        float b = -n.x * n.y * a;
+        b1 = vec3(1.0 - n.x*n.x*a, b, -n.x);
+        b2 = vec3(b, 1.0 - n.y*n.y*a, -n.y);
+    }
+}
+
+mat4 basisFromDir(vec3 dir) {
+    vec3 b1, b2;
+    makeBasis(normalize(dir), b1, b2);
+    vec3 f = normalize(dir);
+    return mat4(
+        b1.x, b2.x, f.x, 0.0,
+        b1.y, b2.y, f.y, 0.0,
+        b1.z, b2.z, f.z, 0.0,
+        0.0,  0.0,  0.0, 1.0
+    );
+}
+
+
+void main() {
+		gl_Position = uProjection * uView * basisFromDir(uDir) * vec4(aPos, 1.0);
+}
+
+
+`;
+const fsSource = `
+precision mediump float;
+void main() {
+	gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0);
+}`;
+
+
+
+
+function start_app() {
+	const canvas = document.getElementById("glcanvas");
+	const gl = canvas.getContext("webgl");
+
+	const resize = () => {
+		const w = canvas.clientWidth;
+		const h = canvas.clientHeight;
+		if (canvas.width !== w || canvas.height !== h) {
+			canvas.width = w;
+			canvas.height = h;
+		}
+	};
+	const ro = new ResizeObserver(resize);
+	ro.observe(canvas);
+	resize(); // initial setup
+
+
+	function compile(type, src) {
+		const s = gl.createShader(type);
+		gl.shaderSource(s, src);
+		gl.compileShader(s);
+		if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+			throw gl.getShaderInfoLog(s);
+		return s;
+	}
+	const vs = compile(gl.VERTEX_SHADER, vsSource);
+	const fs = compile(gl.FRAGMENT_SHADER, fsSource);
+	const prog = gl.createProgram();
+	gl.attachShader(prog, vs);
+	gl.attachShader(prog, fs);
+	gl.linkProgram(prog);
+	if (!gl.getProgramParameter(prog, gl.LINK_STATUS))
+		throw gl.getProgramInfoLog(prog);
+	gl.useProgram(prog);
+
+	const verts = new Float32Array([
+		-1,-1,-1,  1,-1,-1,
+		 1,-1,-1,  1, 1,-1,
+		 1, 1,-1, -1, 1,-1,
+		-1, 1,-1, -1,-1,-1,
+		-1,-1, 1,  1,-1, 1,
+		 1,-1, 1,  1, 1, 1,
+		 1, 1, 1, -1, 1, 1,
+		-1, 1, 1, -1,-1, 1,
+		-1,-1,-1, -1,-1, 1,
+		 1,-1,-1,  1,-1, 1,
+		 1, 1,-1,  1, 1, 1,
+		-1, 1,-1, -1, 1, 1
+	]);
+	const vbo = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+	gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
+	const aPos = gl.getAttribLocation(prog, "aPos");
+	gl.enableVertexAttribArray(aPos);
+	gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0);
+
+	function perspective(fovy, aspect, near, far) {
+		const f = 1 / Math.tan(fovy/2);
+		const nf = 1 / (near - far);
+		return new Float32Array([
+			f/aspect, 0, 0, 0,
+			0, f, 0, 0,
+			0, 0, (far+near)*nf, -1,
+			0, 0, (2*far*near)*nf, 0
+		]);
+	}
+	function translateZ(z) {
+		return new Float32Array([
+			1,0,0,0,
+			0,1,0,0,
+			0,0,1,0,
+			0,0,z,1
+		]);
+	}
+
+	const proj = perspective(Math.PI/3, canvas.width/canvas.height, 0.1, 100);
+	const view = translateZ(-6);
+
+	const uProjection = gl.getUniformLocation(prog, "uProjection");
+	const uView = gl.getUniformLocation(prog, "uView");
+	const uDir = gl.getUniformLocation(prog, "uDir");
+	gl.uniformMatrix4fv(uProjection, false, proj);
+	gl.uniformMatrix4fv(uView, false, view);
+
+
+	let uDirData = [0, 0, 1];
+
+
+	if (window.GravitySensor) {
+		const acl = new GravitySensor({ frequency: 60 });
+		acl.addEventListener("reading", (e) => {
+			const {x, y, z} = acl;
+			const s = 1 / (Math.sqrt(x**2 + y**2 + z**2));
+			uDirData = [-s*x, -s*y, s*z];
+		});
+		acl.start();
+	}
+
+	function draw() {
+
+		const w = canvas.width;
+		const h = canvas.height;
+
+		gl.viewport(0, 0, w, h);
+		const proj = perspective(Math.PI/3, w/h, 0.1, 100);
+		gl.uniformMatrix4fv(uProjection, false, proj);
+
+		gl.uniform3f(uDir, ...uDirData);
+		gl.clearColor(0,0,0,1);
+		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+		gl.enable(gl.DEPTH_TEST);
+		gl.drawArrays(gl.LINES, 0, verts.length/3);
+		window.requestAnimationFrame(draw);
+	}
+
+
+
+	window.requestAnimationFrame(draw);
+
+}
+
+document.addEventListener("DOMContentLoaded", start_app);
+</script>
+</head>
+<body>
+<canvas id="glcanvas" width="600" height="400"></canvas>
+</body>
+</html>
diff --git a/standalone/imu-1/t1.html b/standalone/imu-1/t1.html
new file mode 100644
index 0000000..fce7dd9
--- /dev/null
+++ b/standalone/imu-1/t1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Accelerometer test</title>
+</head>
+<script>
+
+	const acl = new GravitySensor({ frequency: 60 });
+	acl.addEventListener("reading", () => {
+		document.body.innerHTML = `<pre>
+		Acceleration along the X-axis ${acl.x}
+		Acceleration along the Y-axis ${acl.y}
+		Acceleration along the Z-axis ${acl.z}
+		</pre>`;
+	});
+
+acl.start();
+
+</script>
+
+<body>
+</body>
+</html>
\ No newline at end of file
