X-Git-Url: http://git.plutz.net/?a=blobdiff_plain;f=static%2Fstereoview.js;h=50863d5533f5219f0db0aff3362d36e2b8a4ffc6;hb=c538b709b14789a26233f39c3c359059e4ec8969;hp=b2eac9a90d71bfcd48ccd90d6af9f8451b141643;hpb=3fcb8652dc12ebccb83176bac1948a809322105d;p=serve0 diff --git a/static/stereoview.js b/static/stereoview.js old mode 100755 new mode 100644 index b2eac9a..50863d5 --- a/static/stereoview.js +++ b/static/stereoview.js @@ -16,50 +16,68 @@ along with Serve0 If not, see . */ -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); @@ -69,16 +87,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 + 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(); };