Add gyro and webgl demo

2025-07-21 08:30:08 +02:00
parent 611cee6f40
commit 1635eb9ede
7 changed files with 1989 additions and 0 deletions
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+
+<html>
+    <body>
+
+
+
+<h1>colles gyro dingens</h1>
+
+<marquee>ich bin der Davidmann2</marquee>
+
+<fieldset>
+    <legend>
+        status
+    </legend>
+    <strong id="status">
+        loading
+    </strong>
+</fieldset>
+
+<fieldset>
+    <legend>
+        gyro
+    </legend>
+    <strong id="gyro">
+        loading
+    </strong>
+</fieldset>
+
+<fieldset>
+    <legend>
+        gyro
+    </legend>
+    <strong id="gyro2">
+        loading
+    </strong>
+</fieldset>
+
+<script>
+    function loadAudioFile(fileName){
+        return (
+            fetch(fileName)
+            .then(response=>{
+                return(response.arrayBuffer())
+                })
+            .then(arrayBuffer=>{
+                return(ctx.decodeAudioData(arrayBuffer))
+                })
+            .then(audioBuffer=>{
+                loaded++
+                document.getElementById("status").innerHTML = "loaded " + loaded + "/" + fileNames.length
+                return(audioBuffer)
+            })
+        )
+    }
+    const fileNames = ["AufnahmeLIna.mp3", "blatters.mp3"]
+    let buffers = null
+    let loaded = 0
+    Promise.all(fileNames.map(loadAudioFile))
+    .then(audioBuffers=>{
+        document.getElementById("status").innerHTML = "Done loading"
+        buffers = audioBuffers
+    })
+
+</script>
+
+<script>
+    let samples = null
+    const ctx = new AudioContext()
+    function playStuff(){
+        console.log("imStuff")
+        if(samples == null){
+            samples = []
+            for(const buffer of buffers){
+                const sample = ctx.createBufferSource()
+                sample.buffer = buffer
+
+                const gain = ctx.createGain()
+
+                sample.connect(gain)
+                gain.connect(ctx.destination)
+
+                sample.start()
+                samples.push({sample:sample, gainNode:gain})
+            }
+        }
+    }   
+</script>
+
+<script>
+    function stopStuff(){
+        for(sample of samples){
+            sample.sample.stop()
+        }
+        samples = null
+    }
+</script>
+
+<script>
+    function getGyroPermission(){
+        if(!DeviceOrientationEvent.requestPermission){
+            return Promise.resolve("granted")
+        }
+        else{
+            return DeviceOrientationEvent.requestPermission()
+        }
+    }
+    function initGyro(){
+        //alert(DeviceOrientationEvent.requestPermission())
+        getGyroPermission().then(response => {
+		window.addEventListener("deviceorientation", e => {
+			document.querySelector("#gyro").innerHTML = e.alpha / 360
+            document.querySelector("#gyro2").innerHTML = (e.beta + 180) / 360
+            if(samples != null){
+                samples[0].gainNode.gain.value = e.alpha / 360
+                samples[1].gainNode.gain.value = (e.beta + 180) / 360
+            }
+		})
+	})
+    }
+</script>
+
+<button onclick="playStuff()">PLAY</button>
+
+<button onclick="stopStuff()">STOP</button>
+
+<button onclick="initGyro()">START GYRO</button>
+
+    </body>
+</html>
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>Is it working?</h1>
+<button id="perm">click me for permissions</button>
+<div style="color: red" id="disp">lalala</div>
+<script>
+document.querySelector("#perm").addEventListener("click", e => {
+	const ac = new AudioContext();
+	const osc = ac.createOscillator();
+
+	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>
+</html>