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.

Not sure if this is helpful, but http://easings.net/ has nice diagrams displaying how the easing works. — Pete, Apr 15 '14 at 19:30

cybersam · Accepted Answer · 2014-04-15T20:01:49.340

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).

edited Apr 15 '14 at 20:01

answered Apr 15 '14 at 19:44

cybersam

63,203
6
53
76

@Finnnn I think you want to use a different easing algorithm as this one will increase the time as the user's score increases. – Pete Apr 15 '14 at 19:54
@mister_rampage: Good point. I will make a simple change to my answer. – cybersam Apr 15 '14 at 19:58
Great answer. thanks v much. Your explanation is really helpful. Here's the game I've used it in - http://fionnbharra.github.io/biggersmaller/ – Finnnn Apr 16 '14 at 06:34

Reducing an integer using Penner's easing equations

1 Answers1