Skip to content

Instantly share code, notes, and snippets.

@barakplasma

barakplasma/index.html

Forked from anonymous/index.html
Created January 2, 2017 17:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barakplasma/0e4fa6f9016e376c0e72833f063e4b6c to your computer and use it in GitHub Desktop.
Save barakplasma/0e4fa6f9016e376c0e72833f063e4b6c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/haziyef
Raw
index.html
<!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>
Raw
jsbin.haziyef.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;
}
Raw
jsbin.haziyef.js
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