Accelerometer data game controller

Using JavaScript with Hype
6

The math is beyond me I'm afraid. Not sure how to integrate, never mind integrating twice! But I will try and learn.

My first goal is to visualize the curve from X value with a path so I can see how the value from the accelerometer is mapped. That seems to have worked, but ideally I would remove points I no longer need from the beginning of the path at the same time as new points are pushed to the end so the path doesn't run out of space.

The second goal is to understand the logic of how to apply the data to the object. I have added a Direction display so when the object moves left it should show "left" and when object is moving right it shows "right". Also a zeroCount, because it seems to me that:

  1. If the initial value goes above 0.25, start moving object right.
  2. While it is above 0 keep moving right.
  3. If we cross 0 the first time, increment zeroCount and keep moving right.
  4. While zeroCount = 1, and value is below -0.25, keep moving right.
  5. Only when we come to 0 for the second time, reset zeroCount and start again.

Same for movement to the left, but only if the initial value is less than -0.25 and everything is reversed. That seems kind of logical to me, but doesn't work.

Cheers

  var accelerationValues = [];
  var accelerationPointsArray = [];
  
  var viewBox = document.querySelector('#acceleration_path').parentNode;
  viewBox.setAttribute("viewBox", "0 -50 866 105");
  console.log(viewBox)
  
  var steps = [];
  var step = -1;
  var stepSize = 1;
  var command = 'M ';
  var i = 0;
  var zeroCount = 0;
  
var paddle = document.querySelector('#paddle');
var currentPos = hypeDocument.getElementProperty(paddle, 'left')
var posX = paddle.style.left;

setInterval(function(){
var newX = document.querySelector('#x').textContent;
var zero = document.querySelector('#zero');
var direction = document.querySelector('#direction');

if (!(newX > -0.2 && newX < 0.2) && newX < 0.25 && newX > -0.25){
zeroCount++
zero.textContent = zeroCount;
}

if (newX > 0.25 && zeroCount % 2) {
  hypeDocument.setElementProperty(paddle, 'left', currentPos + newX*20)
  direction.textContent = ' right'
}

if (newX > 0.25 && !(zeroCount % 2)) {
  hypeDocument.setElementProperty(paddle, 'left', currentPos - newX*20)
  direction.textContent = ' left'
}

    step += stepSize;
    steps.push(step);
    accelerationPointsArray.push(command + steps[i] + ' ' + newX*20 + ' ');
    command = 'L ';
    
    var acceleration = document.querySelector('#acceleration_path');
    acceleration.setAttribute('d', accelerationPointsArray.join(' '));
    
    currentPos = hypeDocument.getElementProperty(paddle, 'left')
	i++
	
},20);