Skip to content

Instantly share code, notes, and snippets.

Created January 2, 2017 17:27

Revisions

  1. @invalid-email-address Anonymous created this gist Jan 2, 2017.
    101 changes: 101 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css">
    html {
    background: url(http://i.imgur.com/Rksbpdu.jpg) no-repeat center fixed;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    }
    #moveThis {
    position: relative;
    width: 20%;
    height: 20%;
    margin: auto;
    }
    </style>
    </head>
    <body>
    <div id="output"></div>
    <img id='moveThis' src='https://upload.wikimedia.org/wikipedia/commons/e/ee/Aircraft_Airport_ecomo.svg'>I move according to device motion</img>
    <p>By Michael Salaverry</p>
    <script id="jsbin-javascript">
    var x = [];
    var y = [];
    var z = [];
    function handleMotionEvent(event) {

    x.push(event.accelerationIncludingGravity.x);
    y.push(event.accelerationIncludingGravity.y);
    z.push(event.accelerationIncludingGravity.z);
    //console.log(x,y,z);
    // Do something awesome.
    document.querySelector('#output').innerText = `${Math.round(x[x.length-1])},${Math.round(y[y.length-1])},${Math.round(z[z.length-1])}`;

    //butt.style.transform = `translate(${x*50 +'px'},${(y*50 +'px')}`;
    butt.style.left = `${((window.innerWidth/2)-butt.style.width +(x.simpleSMA(5)[x.length-1]*50) +'px')}`;
    butt.style.top = `${((window.innerHeight/2)-butt.style.height+(y.simpleSMA(5)[y.length-1]*50) +'px')}`;
    }


    window.addEventListener("devicemotion", handleMotionEvent, true);
    //window.addEventListener('orientationchange', handleMotionEvent, true);

    var butt = document.querySelector('#moveThis');

    Array.prototype.simpleSMA=function(N) {
    return this.map(function(x,i,v) {
    if(i<N-1) return NaN;
    return v.filter(function(x2,i2) { return i2<=i && i2>i-N; }).reduce(function(a,b){ return a+b; })/N;
    }); };
    //thanks for the simple moving average which smooths the event data https://rosettacode.org/wiki/Averages/Simple_moving_average#JavaScript
    </script>


    <script id="jsbin-source-css" type="text/css">html {
    background: url(http://i.imgur.com/Rksbpdu.jpg) no-repeat center fixed;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    }
    #moveThis {
    position: relative;
    width: 20%;
    height: 20%;
    margin: auto;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">var x = [];
    var y = [];
    var z = [];
    function handleMotionEvent(event) {

    x.push(event.accelerationIncludingGravity.x);
    y.push(event.accelerationIncludingGravity.y);
    z.push(event.accelerationIncludingGravity.z);
    //console.log(x,y,z);
    // Do something awesome.
    document.querySelector('#output').innerText = `${Math.round(x[x.length-1])},${Math.round(y[y.length-1])},${Math.round(z[z.length-1])}`;

    //butt.style.transform = `translate(${x*50 +'px'},${(y*50 +'px')}`;
    butt.style.left = `${((window.innerWidth/2)-butt.style.width +(x.simpleSMA(5)[x.length-1]*50) +'px')}`;
    butt.style.top = `${((window.innerHeight/2)-butt.style.height+(y.simpleSMA(5)[y.length-1]*50) +'px')}`;
    }


    window.addEventListener("devicemotion", handleMotionEvent, true);
    //window.addEventListener('orientationchange', handleMotionEvent, true);

    var butt = document.querySelector('#moveThis');

    Array.prototype.simpleSMA=function(N) {
    return this.map(function(x,i,v) {
    if(i<N-1) return NaN;
    return v.filter(function(x2,i2) { return i2<=i && i2>i-N; }).reduce(function(a,b){ return a+b; })/N;
    }); };
    //thanks for the simple moving average which smooths the event data https://rosettacode.org/wiki/Averages/Simple_moving_average#JavaScript</script></body>
    </html>
    12 changes: 12 additions & 0 deletions jsbin.haziyef.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    html {
    background: url(http://i.imgur.com/Rksbpdu.jpg) no-repeat center fixed;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    }
    #moveThis {
    position: relative;
    width: 20%;
    height: 20%;
    margin: auto;
    }
    29 changes: 29 additions & 0 deletions jsbin.haziyef.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    var x = [];
    var y = [];
    var z = [];
    function handleMotionEvent(event) {

    x.push(event.accelerationIncludingGravity.x);
    y.push(event.accelerationIncludingGravity.y);
    z.push(event.accelerationIncludingGravity.z);
    //console.log(x,y,z);
    // Do something awesome.
    document.querySelector('#output').innerText = `${Math.round(x[x.length-1])},${Math.round(y[y.length-1])},${Math.round(z[z.length-1])}`;

    //butt.style.transform = `translate(${x*50 +'px'},${(y*50 +'px')}`;
    butt.style.left = `${((window.innerWidth/2)-butt.style.width +(x.simpleSMA(5)[x.length-1]*50) +'px')}`;
    butt.style.top = `${((window.innerHeight/2)-butt.style.height+(y.simpleSMA(5)[y.length-1]*50) +'px')}`;
    }


    window.addEventListener("devicemotion", handleMotionEvent, true);
    //window.addEventListener('orientationchange', handleMotionEvent, true);

    var butt = document.querySelector('#moveThis');

    Array.prototype.simpleSMA=function(N) {
    return this.map(function(x,i,v) {
    if(i<N-1) return NaN;
    return v.filter(function(x2,i2) { return i2<=i && i2>i-N; }).reduce(function(a,b){ return a+b; })/N;
    }); };
    //thanks for the simple moving average which smooths the event data https://rosettacode.org/wiki/Averages/Simple_moving_average#JavaScript