Search code examples
javascriptuser-inputexponentiation

How to write a function to exponentially increase a number to its max


I have a variable called turnRadius that comes from user input and can be between -1 and 1, 0 being default.

I then have to convert this number into its equivalent in a range of 275 and 0 and store in variable spriteHorizontalPosition.

The problem is, for reasons I cant expect the user to set turnRadius all the way to -1 or 1, so I want that when turnRadius reaches 0.65 or -0.65, to increase exponentially to its max/min so that user doesnt have to reach the full number with input.

I think I get the idea but I don't know how to write the function, can I have some help?

Below is what I had, but I'm aware is not exponential and when it reaches 0.65 the spriteHorizontalPosition is suddenly yanked to its max and looks awkward.

let turnRadius = user.input;

if (turnRadius <= -0.65) {
  turnRadius = -1;
} else if (turnRadius >= 0.65 ) {
  turnRadius = 1;
}

spriteHorizontalPosition = ((turnRadius * -1) + 1) * 137.5;

if ( spriteHorizontalPosition >= 275 ) {
  spriteHorizontalPosition = 275;
}

else if ( spriteHorizontalPosition <= 0 ) {
  spriteHorizontalPosition = 0;
}

playerSprite.transform.x = spriteHorizontalPosition;

Solution

  • How about a nice cubic curve to map between the realistically possible user input (-0.65..0.65) and the desired (/ virtual) user range (-1..1)?

    The smooth curve cubicMap can be given as:

    const A = 0.65;
    const C = 1/A - A*A;
    const cubicMap = (x) => {
      if (x >  0.65) return 1;
      if (x < -0.65) return -1;
      return C*x + x*x*x;
    }
    

    As seen in this graph: Desmos Link, it maps user input between -0.65 and 0.65 smoothly to between -1 and 1.

    Your code could look like this:

    const turnRadius = cubicMap(user.input);
    const spriteHorizontalPosition = 275 * (1 + turnRadius) / 2;
    playerSprite.transform.x = spriteHorizontalPosition;
    

    There's no need for the extra if statements, the value is already clamped by cubicMap.