Accelerometer data game controller

Using JavaScript with Hype
10

Unfortunately manufacturer is not very good at responding and everything runs via c-sharp and python or via node and feels pretty confusing. So I'm reverse engineering stuff and looking at forums and articles.

I thought that maybe using native physics in Hype would be better, so used a method I found by @Photics here Physics Mini Templates for Tumult Hype 4

It's quite interesting, but still feels like the same logic problem. If the motion is continuous the response is pretty good it seems. But if there is a stop-start, the motion is reversed back to start (or close enough). So I made a little file to illustrate my thinking.

scurve.zip (55.9 KB)

Any suggestions how to make such logic work?

Here is the code I'm using at the moment:

		
var paddle = document.querySelector('#paddle');
var currentPosX = hypeDocument.getElementProperty(paddle, 'left')
var currentPosY = hypeDocument.getElementProperty(paddle, 'top')
		
  var accelerationXPointsArray = [];
  var accelerationYPointsArray = [];
  
  var viewBoxX = document.querySelector('#accelerationX_path').parentNode;
  viewBoxX.setAttribute("viewBox", "0 -100 866 200");
  var viewBoxY = document.querySelector('#accelerationY_path').parentNode;
  viewBoxY.setAttribute("viewBox", "0 -100 866 200");
  
  var steps = [];
  var step = -1;
  var stepSize = 1;
  var command = 'M ';
  var i = 0;
    
  var accelerationX = 0;
  var accelerationY = 0;

function mjsApplyForce (xPosition, yPosition, xForce, yForce) {
hypeDocument.setElementProperty(paddle, 'rotateZ', 0);
Matter.Body.applyForce(hypeDocument.getElementProperty(paddle, "physics-body"), {x: xPosition, y: yPosition}, {x: xForce, y: yForce});
}

setInterval(function(){

accelerationX = document.querySelector('#x').textContent / 9.81;
accelerationY = document.querySelector('#y').textContent / 9.81;

mjsApplyForce(currentPosX, currentPosY, accelerationX, -accelerationY)

    step += stepSize;
    steps.push(step);
    accelerationXPointsArray.push(command + steps[i] + ' ' + accelerationX*60 + ' ');
    accelerationYPointsArray.push(command + steps[i] + ' ' + accelerationY*60 + ' ');
    command = 'L ';
    
    var accelerationXPath = document.querySelector('#accelerationX_path');
    accelerationXPath.setAttribute('d', accelerationXPointsArray.join(' '));
    var accelerationYPath = document.querySelector('#accelerationY_path');
    accelerationYPath.setAttribute('d', accelerationYPointsArray.join(' '));
 
	i++
	
},50);

Thanks

1 Like