along with Serve0 If not, see <http://www.gnu.org/licenses/>.
*/
-var render, video;
-var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
-var scale, lv, rv, debug;
-var w, h, scale;
+var render, video, controlTimeout = 0;
+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");
+var gp;
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);
+
+ gp = navigator.getGamepads()[0];
+ if ( gp && Date.now() > controlTimeout ) {
+ if ( gp.axes[0] > .3) { video.currentTime += 10; controlTimeout = Date.now() + 500; }
+ if ( gp.axes[0] < -.3) { video.currentTime -= 10; controlTimeout = Date.now() + 500; }
+ if ( gp.axes[1] < -.3) { video.currentTime += 60; controlTimeout = Date.now() + 500; }
+ if ( gp.axes[1] > .3) { video.currentTime -= 60; controlTimeout = Date.now() + 500; }
+ if ( gp.buttons[0].pressed ) { video.currentTime += 1/30; video.pause(); }
+ 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; }
+ }
+
+ // debug.textContent = "" + video.currentTime + " " + controlTimeout;
};
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);
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 + 22.5;
+ roll = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180;
+ yaw = (yaw + ty) % 360;
+ };
+ })());
+
+ 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();
};
projects / serve0 / blobdiff