Created
January 2, 2017 17:27
-
-
Save anonymous/cacc2d5a20caf4d92775d52a7a602224 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