adjustable eye distance in stereoview + use of gyroscopes

diff --git a/stereoview.js b/stereoview.js
index edba3784704ff3775e980c6f355e431a351c946e..3b0faa79bb83da4aca67a46afb5e06878ac26a86 100644 (file)
--- 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 c7f030e23cf41f27b120f16e89329b0dfd5b3167..0bc524ad2710491122af4ae564696f3695f85168 100755 (executable)
--- 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(&#34;mainvideo&#34;));" View 180° Stereoscopic]