-
-
Save barakplasma/0e4fa6f9016e376c0e72833f063e4b6c to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/haziyef
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment