Reducing an integer using Penner's easing equations

Question

I'm making a game where you must answer a question within a time. That time reduces as your score increases. I'm doing that using this function.

var getTime = function(score){
  var maxTime = 5000,
      minTime = 750;
  var reducedTime = maxTime * ( 1 - ( score * .1 ) );
  return Math.max( reducedTime, minTime );
}

See a fiddle here - http://jsfiddle.net/QWV82/

I want to change my function so that the reduction in time eases out. I was hoping to use one of Robert Penners easing equations.

    // t: current time, b: begInnIng value, c: change In value, d: duration
easeOutQuint: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
}

I'm not sure if it possible to apply my system to his equations. I can't figure out what I should be passing to the function.

Is this possible? An explanation on what I need to do would be fantastic.

Answer 1

You should be able to use easeOutQuint() like this (you need to have a maxScore constant, as shown):

var getTime = function(score){
  var maxTime = 5000,
      minTime = 750,
      maxScore = 100;
  return maxTime + minTime - easeOutQuint(null, score, minTime, maxTime-minTime, maxScore);
}

We subtract from the sum of minTime and MaxTime because you said you wanted the output values to slope downward. So, this way the returned value will start at maxTime and end at minTime.

The parameters to the easing functions are as follows:

• x: This is actually ignored, but required by jQuery.
• t: The current input value (usually, this is a time interval, but doesn't have to be), in the range [0..d].
• b: The beginning output value.
• c: The maximum change in output value.
• d: The maximum input value (usually, this is a time interval, but doesn't have to be).