git.plutz.net Git - serve0/blob - static/stereoview.js

   1 /*  Copyright 2018 Paul Hänsch
   2
   3     This file is part of Serve0
   4
   5     Serve0 is free software: you can redistribute it and/or modify
   6     it under the terms of the GNU Affero General Public License as published by
   7     the Free Software Foundation, either version 3 of the License, or
   8     (at your option) any later version.
   9
  10     Serve0 is distributed in the hope that it will be useful,
  11     but WITHOUT ANY WARRANTY; without even the implied warranty of
  12     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13     GNU Affero General Public License for more details.
  14
  15     You should have received a copy of the GNU Affero General Public License
  16     along with Serve0  If not, see <http://www.gnu.org/licenses/>.
  17 */
  18
  19 var render, video;
  20 var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
  21 var scale, lv, rv, debug;
  22 var w, h, scale;
  23
  24 function draw() {
  25   ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
  26   tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
  27   v = tz / 9.81 / 2;
  28   r = ty / 9.81 * -90;
  29   ox = ox + ty * 2;
  30
  31   if ( layout == "180" ) {
  32     if      (ox > w / 8)   { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
  33     sy = ( v * h + h / 4) |0;
  34     lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
  35     rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
  36   } else {
  37     sx = (w / 8 * 3 + ox) % (w) |0;
  38     lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
  39     rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
  40     if (sx < 0) {
  41       lc.drawImage(video, sx + w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
  42       rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
  43     } else if ( sx + w / 4 > w) {
  44       lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
  45       rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
  46     }
  47   }
  48
  49   lv.style.transform = "rotate(" + r + "deg)"
  50   rv.style.transform = "rotate(" + r + "deg)"
  51
  52   requestAnimationFrame(draw);
  53 };
  54
  55 function stereoview(layout, video) {
  56   this.layout = layout; this.video = video;
  57   document.body.appendChild( lv = document.createElement("canvas") );
  58   document.body.appendChild( rv = document.createElement("canvas") );
  59   // debug = document.getElementById("debug");
  60
  61   lv.setAttribute( "style", "position: fixed; top: 0; left:  0 ; width: 50%; height: 100%; z-index: 100;");
  62   rv.setAttribute( "style", "position: fixed; top: 0; left: 50%; width: 50%; height: 100%; z-index: 100;");
  63
  64   lv.setAttribute( "width", "" + lv.offsetWidth);
  65   rv.setAttribute( "width", "" + rv.offsetWidth);
  66   lv.setAttribute("height", "" + lv.offsetHeight);
  67   rv.setAttribute("height", "" + rv.offsetHeight);
  68
  69   lc = lv.getContext("2d");
  70   rc = rv.getContext("2d");
  71
  72   window.addEventListener("devicemotion", function(event) {
  73     // x[cnt] = event.accelerationIncludingGravity.x;
  74     y[cnt] = event.accelerationIncludingGravity.y;
  75     z[cnt] = event.accelerationIncludingGravity.z;
  76     cnt = (cnt + 1) % 6;
  77   }, true);
  78
  79   w = video.videoWidth; h = video.videoHeight;
  80   scale = lv.width / (w / 4);
  81   video.play();
  82   // video.setAttribute("style", "display: none;");
  83   draw();
  84 };