next »

[quantumpotato]

Hello, I am having trouble interpolating gamepads.

2 main problems: 1, Xbox360 controller keeps jiggling, it's off center. I try to use a deadzone to avoid this.

2: I want the movement vector to be applied proportionally based on your angle. Moving diagonally down and right should not make you move +1 x and +1 y, but +0.5x and +0.5y.

To account for deadzones + scaling, I try using a "zm" (margin back to zero). This seems to help some, but the controls still don't feel right moving diagonals. Please help! 

Code:

	loopGamepadInput() {
		var pads = navigator.getGamepads();

		if (pads) {
			for (var i = 0; i < pads.length; i++) {
				var gp = pads[i];	
				if (!gp) {
					break;
				}
				var x = gp.axes[0];
	    	var y = gp.axes[1];
	    	if (!this.deadzone) {
	    		this.deadzone = {'x' : x, 'y': y};
	    	}
	    
    		var ratio = 0.8;
    		x = x - this.deadzone.x;
    		y = y - this.deadzone.y;

    		var zm = 1 - ratio;

    		if (x > 0) {
    			x -= zm;
    			if (x < 0) {
    				x = 0;
    			}
    		} else if (x < 0) {
    			x += zm;
    			if (x > 0) {
    				x = 0;
    			}
    		}

    		if (y > 0) {
    			y -= zm;
    			if (y < 0) {
    				y = 0;
    			}
    		} else if (y < 0) {
    			y += zm;
    			if (y > 0) {
    				y = 0;
    			}
    		}

    		x = x / ratio;
    		y = y / ratio;
    
				var input = {'x' : x, 'y': y, 'buttons' : gp.buttons};
				input = interpolateGamepad(input);
				
	    	this.game.gamepadCount = i;
	    	this.game.parseGamepadInput(i, input);		
			}
		}

I think I was doing my ratios wrong in this interpolate function, but both ways feel wrong

Code:

interpolateGamepad = function(input) {
  var x = input.x;
  var y = input.y;

  var sum = Math.abs(x) + Math.abs(y);
  if (sum <= 0) {
    return input;
  }

  if (sum < 1.732050808) {
    return {'x' : x, 'y': y, 'buttons' : input.buttons };    
  }

  var c = (x * x) + (y * y);
  var csq = Math.sqrt(c);

  var xRatio = Math.abs(x) / csq;
  var yRatio = Math.abs(y) / csq;
  
  // var xRatio = Math.abs(x) / sum;
  // var yRatio = Math.abs(y) / sum;

  x = xRatio * x;
  y = yRatio * y;

  return {'x' : x, 'y': y, 'buttons' : input.buttons };
}

[oahda]

IIRC just did something like clamp(normalise(vec(x, y)) - deadzone, 0, 1) last time I had to deal with this. Clamping fixes issue #1 and normalisation fixes issue #2.

[quantumpotato]

IIRC just did something like clamp(normalise(vec(x, y)) - deadzone, 0, 1) last time I had to deal with this. Clamping fixes issue #1 and normalisation fixes issue #2.

Clamping = https://msdn.microsoft.com/en-us/library/hh308289(v=vs.120).aspx ?

And normalizing being

The general one-line formula to linearly rescale data values having observed min and max into a new arbitrary range min' to max' is

  newvalue= (max'-min')/(max-min)*(value-max)+max'
  or?

[oahda]

Disclaimer: I edited out the mistakes from this post, just so you know, in case the posts following this one seem confusing...

I hastily wrote that and got the mathsy details a bit wrong, sorry. Let me go through this step by step instead, both so you get what I mean and so that I don't mess up.

Clamping just means to force the value to be no more and no less than the values specified (in this case no less than 0 and no more than 1).

If you look at the amount the stick is being pushed on the x and y axes respectively, you can use these values as a directional vector, indicating the direction the stick is being pushed. Normalising a vector modifies its components (x and y) so that the length (or magnitude) of the vector is 1.

This gives us our direction. We can then multiply this vector by how hard the stick is being pushed (something I forgot to take into account in my previous post) and get the correct magnitude too (should be between 0 and 1).

So...

Step 1: get the directional vector

Put your x and y values into a vector and normalise it to get a magnitude of 1:

Code:

vec dir = normalise(vec(x, y));

Step 2: clamp the magnitude

Get the magnitude from the vector and clamp it against the threshold.

Code:

float mag = magnitude(dir);
if (mag <= threshold) mag = 0;

Step 3: produce final vector

Update to the clamped magnitude:

Code:

dir *= mag;

All in all

Code:

// Get the push direction.
vec dir = normalise(vec(x, y));

// Clamp the magnitude.
float mag = magnitude(dir);
if (mag <= threshold) mag = 0;

// Get the final value!
dir *= mag;

[quantumpotato]

max is the highest amount in a direction on that axes, right?

Thinking of this in terms of angle + magnitude makes a lot more sense, thank you.

I think the normalization you talk about is like this:

Code:

var length = x + y;
var xFactor = x / length;
var yFactor = y / length;

So xFactor + yFactor should == 1.

It turns out that gamepad controller in HTML5 does not send 1 on X and 1 on Y for diagonals, like I thought (!). This makes sense in retrospect but it does make things trickier.

Holding down right on an Xbox360, for example, can give 0.82 and 0.56 or 0.52 and 0.90 for the 2 axes.

Maybe I misunderstand

Code:

float mag = (abs(x) + abs(y)) / max;

We're not interested in negative values (this is encoded in the directional vector), just how much the stick is being pushed on each axis, so we take the absolute (non-negative) value of each first, and then divide by the max value to get a value between 0 and 1.

I'm assuming max is max an axis can go?

[oahda]

Yep, you've understood vector normalisation perfectly!

I did a big booboo when including the whole max thing, tho, sorry. I was thinking about returning an angle and a strength separately, not a vector at all. You don't need the max thing, it's already in the vector, sorry.

I'm making lots of brainos today. So all you need is this:

EDIT: moved the solution to the original post where I messed up instead

[quantumpotato]

It's working a lot better, thank you!
Here's what I've got now:

Code:

if (pads) {
			for (var i = 0; i < pads.length; i++) {
				var gp = pads[i];	
				if (!gp) {
					break;
				}
				var x = gp.axes[0];
	    	var y = gp.axes[1];

	    	var m = getm(x, y);

	    	var length = Math.abs(x) + Math.abs(y);
	    	if (length > 0) {
	    		x = x/length;
	    		y = y/length;	
	    	}
	    	
	    	var threshhold = 0.2;
	    	var r = 0;
	    	if (m < threshhold) {
	    		x = 0;
	    		y = 0;
	    		m = 0;
	    	} else {
	    		r = getr(x, y);	
	    		if (r < 0) {
	    			r += 360;
	    		}
	    	}
	    	
				var input = {'r' : r, 'm': m, 'buttons' : gp.buttons};
				
	    	this.game.gamepadCount = i;
	    	this.game.parseGamepadInput(i, input);		
			}
		}

and the supporting get rotation and get magnitude

Code:

getr = function (x, y) {
  return (Math.atan2(y, x) * 180 / Math.PI);
}

getm = function(a, b) {
  var x = a * a;
  var y = b * b;
  if (x + y == 0){
    return 0;
  }
  var res = Math.sqrt((x+y));
  if (res > 1) {
    res = 1;
  }
  return res;
}

[quantumpotato]

The only issue I'm seeing now is the movement tends to jump -- unfortunately these 360 controllers a .15 threshhold is too low (!!!) so I set it at .2 But then when I start moving, I move very quickly.

I think I need to scale the x and y somehow and divide against ~1.5 as the max magnitude, maybe.. not sure, that wouldn't work well for straight lines up or down.

[oahda]

Yeah, I was just going to say, you might have to smooth it out with a curve or something so that it doesn't jump straight from nothing to something. So instead of just setting it to zero if below the threshold, you could do something more complex.

I'm sure ThemsAllTook or someone is going to ride in on a white horse with some industry-standard solution for that.

[quantumpotato]

Yeah, I was just going to say, you might have to smooth it out with a curve or something so that it doesn't jump straight from nothing to something. So instead of just setting it to zero if below the threshold, you could do something more complex.

I'm sure ThemsAllTook or someone is going to ride in on a white horse with some industry-standard solution for that.

I did a brain recall too, and I was multiplying all my movement by 1 instead of m!

Smoothed it out to be the distance past threshhold that counts:

Code:

var threshhold = 0.3;
	    	var r = 0;
	    	if (m < threshhold) {
	    		x = 0;
	    		y = 0;
	    		m = 0;
	    	} else {
	    		m = (m - threshhold) / (1 - threshhold);
	    		r = getr(x, y);	
	    		if (r < 0) {
	    			r += 360;
	    		}
	    	}
	    	

Thank you Prinsessa!

[oahda]

There you go! Glad someone had an issue I could help with for once.