From: Paul Hänsch Date: Fri, 29 Dec 2023 03:13:10 +0000 (+0100) Subject: adjustable eye distance in stereoview + use of gyroscopes X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=73e4a59c307fa8f9b46e76fb0d9839277198e353;p=serve0 adjustable eye distance in stereoview + use of gyroscopes --- diff --git a/stereoview.js b/stereoview.js index edba378..3b0faa7 100644 --- a/stereoview.js +++ b/stereoview.js @@ -18,7 +18,7 @@ var render, video, controlTimeout = 0; var pitch = 0, roll = 0, yaw = 0; -var w, h, hdeg, vdeg, scale, fov = 90; +var w, h, hdeg, vdeg, scale, fov = 90, dist=0; var lv = document.createElement("canvas"); var rv = document.createElement("canvas"); var debug = document.createElement("p"); @@ -33,20 +33,17 @@ function draw() { sx = (w / 2 - fov * hdeg) / 2 + yaw * hdeg |0; sy = ( h - fov * vdeg) / 2 + pitch * vdeg |0; if (sx + sw > w / 2) { sx = w / 2 - sw; } else if (sx < 0) { sx = 0; } - lc.drawImage(video, sx, sy, sw, sh, 0, 0, lv.width, dh); - rc.drawImage(video, w / 2 + sx, sy, sw, sh, 0, 0, rv.width, dh); + lc.drawImage(video, sx + dist, sy, sw, sh, 0, 0, lv.width, dh); + rc.drawImage(video, w / 2 + sx - dist, sy, sw, sh, 0, 0, rv.width, dh); } else { sx = (w - fov * hdeg) / 2 + yaw * hdeg |0; sy = (h - fov * vdeg) / 4 + pitch * vdeg |0; - lc.drawImage(video, sx, sy, sw, sh, 0, 0, lv.width, dh); - rc.drawImage(video, sx, h/2 + sy, sw, sh, 0, 0, rv.width, dh); - if (sx < 0) { - lc.drawImage(video, sx + w, sy, sw, sh, 0, 0, lv.width, dh); - rc.drawImage(video, sx + w, h/2 + sy, sw, sh, 0, 0, rv.width, dh); - } else if ( sx + fov * hdeg > w) { - lc.drawImage(video, sx - w, sy, sw, sh, 0, 0, lv.width, dh); - rc.drawImage(video, sx - w, h/2 + sy, sw, sh, 0, 0, rv.width, dh); - } + lc.drawImage(video, sx + dist, sy, sw, sh, 0, 0, lv.width, dh); + rc.drawImage(video, sx - dist, h/2 + sy, sw, sh, 0, 0, rv.width, dh); + if (sx + dist < 0) { lc.drawImage(video, sx + w + dist, sy, sw, sh, 0, 0, lv.width, dh); } + if (sx - dist < 0) { rc.drawImage(video, sx + w - dist, h/2 + sy, sw, sh, 0, 0, rv.width, dh); } + if (sx + dist + fov * hdeg > w) { lc.drawImage(video, sx - w + dist, sy, sw, sh, 0, 0, lv.width, dh); } + if (sx - dist + fov * hdeg > w) { rc.drawImage(video, sx - w - dist, h/2 + sy, sw, sh, 0, 0, rv.width, dh); } } lv.style.transform = "rotate(" + roll + "deg)"; @@ -64,9 +61,17 @@ function draw() { if ( gp.buttons[1].pressed ) { video.play(); } if ( gp.buttons[2].pressed ) { fov -= 10; controlTimeout = Date.now() + 500; } if ( gp.buttons[3].pressed ) { fov += 10; controlTimeout = Date.now() + 500; } + if ( gp.axes[2] < -.3) { dist -= 1; controlTimeout = Date.now() + 500; } + if ( gp.axes[2] > .3) { dist += 1; controlTimeout = Date.now() + 500; } + + date = new Date(); + date.setTime(date.getTime() + 3 * 365 * 86400 * 1000) + document.cookie = "StereoDist=" + dist + "; expires=" + date.toUTCString() + "; path=/"; + document.cookie = "StereoFOV=" + fov + "; expires=" + date.toUTCString() + "; path=/"; } // debug.textContent = "" + video.currentTime + " " + controlTimeout + " " + tx + " " + ty + " " + tz; + // debug.textContent = "Pitch: " + pitch + " | Yaw: " + yaw + " | Roll: " + roll; }; function stereoview(layout, video) { @@ -87,30 +92,30 @@ function stereoview(layout, video) { lc = lv.getContext("2d"); rc = rv.getContext("2d"); - mpuevent = new EventSource("http://localhost:314"); - var x = [], y = [], z = [], cnt = -1, inertia = 6; - - mpuevent.addEventListener("bearing", function(e) { - bearing = e.data.split(" "); - yaw = -parseFloat(bearing[0]); - }, false); - mpuevent.addEventListener("motion", function(e) { - motion = e.data.split(" "); - - cnt = (cnt + 1) % inertia; - x[cnt] = parseFloat(motion[0]); - y[cnt] = parseFloat(motion[1]); - z[cnt] = parseFloat(motion[2]); - - // tx = 0; x.forEach( function(n, i){ tx += n; } ); tx /= inertia; - ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia; - tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia; - - pitch = Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180 + 22.5; - roll = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180; - // yaw = (yaw + ty) % 360; - }, false ); - + // mpuevent = new EventSource("http://localhost:314"); + // var x = [], y = [], z = [], cnt = -1, inertia = 6; + + // mpuevent.addEventListener("bearing", function(e) { + // bearing = e.data.split(" "); + // yaw = -parseFloat(bearing[0]); + // }, false); + // mpuevent.addEventListener("motion", function(e) { + // motion = e.data.split(" "); + + // cnt = (cnt + 1) % inertia; + // x[cnt] = parseFloat(motion[0]); + // y[cnt] = parseFloat(motion[1]); + // z[cnt] = parseFloat(motion[2]); + + // // tx = 0; x.forEach( function(n, i){ tx += n; } ); tx /= inertia; + // ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia; + // tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia; + + // pitch = Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180 + 22.5; + // roll = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180; + // // yaw = (yaw + ty) % 360; + // }, false ); + window.addEventListener("devicemotion", (function() { var x = [], y = [], z = [], cnt = -1, inertia = 6; return function(event) { @@ -124,9 +129,12 @@ function stereoview(layout, video) { ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia; tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia; - pitch = Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180 + 22.5; + pitch = Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180; roll = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180; - yaw = (yaw + ty) % 360; + // pitch = (pitch + event.rotationRate.beta / 1000 * event.interval) % 360; + // roll = (roll + event.rotationRate.gamma / 1000 * event.interval) % 360; + yaw = (yaw - event.rotationRate.alpha / 1000 * event.interval) % 360; + // yaw = (yaw + ty) % 360; }; })()); @@ -140,6 +148,9 @@ function stereoview(layout, video) { w = video.videoWidth; h = video.videoHeight; hdeg = w / 360; vdeg = h / 180; scale = lv.width / (fov * hdeg |0); + + dist = parseInt(document.getElementById("StereoDist").getAttribute("value")); + fov = parseInt(document.getElementById("StereoFOV").getAttribute("value")); // scale = lv.width / (w / 4); video.play(); video.style.display = "none"; diff --git a/view.sh b/view.sh index c7f030e..0bc524a 100755 --- a/view.sh +++ b/view.sh @@ -26,6 +26,8 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n' w_advsearch w_prefs cat <<-EOF + [input type=hidden id=StereoFOV name=StereoFOV value="$(COOKIE StereoFOV |grep -xE '[0-9]+' || printf 90)"] + [input type=hidden id=StereoDist name=StereoDist value="$(COOKIE StereoDist |grep -xE '[0-9]+' || printf 0)"] [video #mainvideo controls="controls" preload="auto" [source src="?a=download" type="video/mp4"]] [a "?a=download" Download] [a "javascript:stereoview(180, document.getElementById("mainvideo"));" View 180° Stereoscopic]