base drawing logic on rotation, define field of view

svn path=/trunk/; revision=203

diff --git a/static/stereoview.js b/static/stereoview.js
index b2eac9a90d71bfcd48ccd90d6af9f8451b141643..6e3f5b06b44ec1fc1417e24bc8ae63929bd63279 100644 (file)
--- a/static/stereoview.js
+++ b/static/stereoview.js
@@ -17,49 +17,52 @@
 */
 
 var render, video;
-var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
-var scale, lv, rv, debug;
-var w, h, scale;
+var pitch = 0, roll = 0, yaw = 0;
+var w, h, hdeg, vdeg, scale, fov = 90;
+var lv = document.createElement("canvas");
+var rv = document.createElement("canvas");
+var debug = document.createElement("p");
 
 function draw() {
-  ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
-  tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
-  v = tz / 9.81 / 2;
-  r = ty / 9.81 * -90;
-  ox = ox + ty * 2;
+  sw = fov * hdeg |0;
+  sh = h / 2 |0;
+  dh = h / 2 * scale |0;
 
   if ( layout == "180" ) {
-    if      (ox > w / 8)   { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
-    sy = ( v * h + h / 4) |0;
-    lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-    rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    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);
   } else {
-    sx = (w / 8 * 3 + ox) % (w) |0;
-    lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-    rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    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, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-      rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
-    } else if ( sx + w / 4 > w) {
-      lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-      rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+      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);
     }
   }
 
-  lv.style.transform = "rotate(" + r + "deg)"
-  rv.style.transform = "rotate(" + r + "deg)"
+  lv.style.transform = "rotate(" + roll + "deg)";
+  rv.style.transform = "rotate(" + roll + "deg)";
 
   requestAnimationFrame(draw);
 };
 
 function stereoview(layout, video) {
   this.layout = layout; this.video = video;
-  document.body.appendChild( lv = document.createElement("canvas") );
-  document.body.appendChild( rv = document.createElement("canvas") );
-  // debug = document.getElementById("debug");
+  document.body.appendChild( lv );
+  document.body.appendChild( rv );
+  // document.body.appendChild( debug );
   
   lv.setAttribute( "style", "position: fixed; top: 0; left:  0 ; width: 50%; height: 100%; z-index: 100;");
   rv.setAttribute( "style", "position: fixed; top: 0; left: 50%; width: 50%; height: 100%; z-index: 100;");
+  debug.setAttribute( "style", "position: fixed; top: 0; left: 0; z-index: 101; background: #000;");
 
   lv.setAttribute( "width", "" + lv.offsetWidth);
   rv.setAttribute( "width", "" + rv.offsetWidth);
@@ -69,16 +72,37 @@ function stereoview(layout, video) {
   lc = lv.getContext("2d");
   rc = rv.getContext("2d");
   
-  window.addEventListener("devicemotion", function(event) {
-    // x[cnt] = event.accelerationIncludingGravity.x;
-    y[cnt] = event.accelerationIncludingGravity.y;
-    z[cnt] = event.accelerationIncludingGravity.z;
-    cnt = (cnt + 1) % 6;
+  window.addEventListener("devicemotion", (function() {
+    var x = [], y = [], z = [], cnt = -1, inertia = 6;
+    return function(event) {
+      cnt = (cnt + 1) % inertia;
+
+      x[cnt] = event.accelerationIncludingGravity.x;
+      y[cnt] = event.accelerationIncludingGravity.y;
+      z[cnt] = event.accelerationIncludingGravity.z;
+
+      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;
+      roll  = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180;
+      yaw   = (yaw + ty) % 360;
+    };
+  })(), true);
+
+  window.addEventListener("click", function(event) {
+    (lv.parentElement)?lv.parentElement.removeChild(lv):{};
+    (rv.parentElement)?rv.parentElement.removeChild(rv):{};
+    video.style.display = "block";
+    video.pause();
   }, true);
 
   w = video.videoWidth; h = video.videoHeight;
-  scale = lv.width / (w / 4); 
+  hdeg = w / 360; vdeg = h / 180;
+  scale = lv.width / (fov * hdeg |0);
+  // scale = lv.width / (w / 4);
   video.play();
-  // video.setAttribute("style", "display: none;");
+  video.style.display = "none";
   draw();
 };