so getting device position from an accelerometer and gyroscope is, like, nontrivial, due to noise and very severe error propagation in double-integrating the sensor data. here is a good answer that will smash your dreams.
but i'm just lookin for somethin very very rough..... like, oh, you moved the phone upwards.
runge-kutta would be better than euler integration: python, javascript.
and a kalman filter might help clean up the sensor data.
ugh : )
gnight for now
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| body { | |
| perspective: 100px; | |
| padding: 100px; | |
| } | |
| svg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| } | |
| path { | |
| stroke: black; | |
| stroke-width: 1; | |
| fill: none; | |
| } | |
| #phone { | |
| border: 5px solid black; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <body> | |
| <svg> | |
| </svg> | |
| <div id="phone"></div> | |
| </body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // store current rotation in euler angles | |
| var rotation = { | |
| alpha: 0, beta: 0, gamma: 0 | |
| }; | |
| // store whole history of acceleration and implied velocity and position, | |
| // starting from these initial conditions | |
| var z = [ | |
| { | |
| position: 0, | |
| velocity: 0, | |
| acceleration: 0, | |
| time: undefined | |
| } | |
| ]; | |
| // visualize motion through a box | |
| var phone = d3.select('#phone'); | |
| window.addEventListener('devicemotion', handleMotion); | |
| window.addEventListener('deviceorientation', handleOrientation); | |
| window.addEventListener('mousemove', handleMousemove); | |
| d3.timer(renderState); | |
| d3.interval(renderHistory, 500); | |
| // not the focus here, but it also shows rotation! | |
| function handleOrientation(e) { | |
| if(e.gamma === null || e.beta === null || e.alpha === null) return; | |
| rotation = { | |
| gamma: e.gamma || 0, | |
| beta: e.beta || 0, | |
| alpha: e.alpha || 0 | |
| } | |
| } | |
| // accelerate according to z-axis device motion | |
| function handleMotion(e) { | |
| if(e.acceleration.x === null || e.acceleration.y === null || e.acceleration.z === null) return; | |
| accelerate(e.acceleration.z, e.timeStamp); | |
| } | |
| // for testing on desktop, basically: map horizontal mouse position to acceleration | |
| function handleMousemove(e) { | |
| var mouseAccelerator = d3.scaleLinear() | |
| .domain([0,innerWidth]) | |
| .range([-.2,.2]); | |
| accelerate(mouseAccelerator(e.pageX), e.timeStamp); | |
| console.log(mouseAccelerator(e.pageX)); | |
| } | |
| // step forward with new acceleration, applying some very crude filtering & friction | |
| function accelerate(a, t) { | |
| var newZ = Object.assign({}, z[0]); | |
| newZ.acceleration = Math.abs(a) > .1 ? a : 0; // noise filter | |
| newZ.time = t; | |
| newZ = eulerStep(z[0], newZ); | |
| newZ.velocity *= .9; // friction | |
| newZ.velocity = Math.abs(newZ.velocity) < .01 ? 0 : newZ.velocity; // noise filter | |
| newZ.position *= .999; // tend back to zero | |
| z.unshift(newZ); | |
| } | |
| // euler double integration | |
| function eulerStep(state0, state1) { | |
| var interval = (state1.time - state0.time) / 1000; // convert ms to s | |
| if(interval) { | |
| state1.position = state0.position + state0.velocity * interval; | |
| state1.velocity = state0.velocity + state0.acceleration * interval; | |
| } | |
| return Object.assign({}, state1); | |
| } | |
| // transform lil box representing your phone | |
| function renderState() { | |
| phone.style('transform', '' | |
| // + 'rotateZ('+rotation.alpha+'deg) ' | |
| + 'rotateX('+rotation.beta+'deg) ' | |
| + 'rotateY('+rotation.gamma+'deg) ' | |
| + 'translate3d('+0+'px,'+0+'px,'+(-z[0].position*1000)+'px)' | |
| ); | |
| } | |
| // draw graph | |
| function renderHistory() { | |
| // draw three lines: x, dx, ddx | |
| var data = ['position','velocity','acceleration'].map(function(d,i) { | |
| return z.filter(function(dd) { return dd.time; }).map(function(dd,ii) { | |
| return { | |
| 'value': dd[d], | |
| 'time': dd.time | |
| } | |
| }); | |
| }); | |
| var svg = d3.select('svg'); | |
| var x = d3.scaleLinear() | |
| .domain(d3.extent(d3.merge(data), function(d) { return d.time; })) | |
| .range([0,svg.node().getBoundingClientRect().width]); | |
| var y = d3.scaleLinear() | |
| .domain(d3.extent(d3.merge(data), function(d) { return d.value; })) | |
| .range([0,svg.node().getBoundingClientRect().height]); | |
| var line = d3.line() | |
| .x(function(d,i) { return x(d.time); }) | |
| .y(function(d,i) { return y(d.value); }); | |
| var path = svg.selectAll('path') | |
| .data(data); | |
| path.enter().append('path') | |
| .style('stroke', function(d,i) { | |
| var colors = { | |
| 0: 'red', //position | |
| 1: 'green', //velocity | |
| 2: 'blue' //acceleration | |
| } | |
| return colors[i]; | |
| }); | |
| path.attr('d', line); | |
| } | |
| </script> |
