Sign in to follow this  
belfegor

Easing equations

Recommended Posts

i recently have stumbled upon this site and want to try some of them but i dont understand one of the parameters i need to pass.

 

Example function:

Math.linearTween = function (t, b, c, d) {
	return c*t/d + b;
};

 


t: current time,

b: start value

c: change in value

d: duration

 

I understand everything except c.

Share this post


Link to post
Share on other sites

In all equations t is a local non-normalized time, so running from 0 to d as its full valid range. It is "local" because it starts from 0 (opposed to the global time T which tells you that the ease function started at T =  t0, so that t := T - t0). Each ease function on that site then normalizes t by division t / d, so this runs from 0 to 1. With this in mind, looking at the "simple linear tweening" function, you'll see the formula of a straight line with offset b and increase c. Without c (or c==1) the function would return values from b to b+1, but with c the change over t is "amplified" by c, and the result is from b to b+c.  For the other functions the use of c is the same: It is always used as an amplification of the result's change with t / d.

Edited by haegarr

Share this post


Link to post
Share on other sites

Just to make sure i got it right.

// if i have some variable speed
current_speed = 1.0f;
 
//and i want it to be 3x larger (over time)
desired_speed = 3.0f;
change = desired_speed - current_speed;
 
global_time += delta_time;
desired_duration = 1.0f; // one second
duration = global_time + desired_duration;
 
if(is_time_to_speed_up)
    current_speed = function( global_time, currentSpeed, change, duration )

Share this post


Link to post
Share on other sites
No, that doesn't seem right.
 
current_speed = Math.linearTween(global_time - time_when_speed_up_started, initial_speed, change, desired_duration);


EDIT: The function could have had much more informative parameter names, like this:
Math.linearTween = function (time_since_transition_started, initial_value, value_change, transition_duration) {
	return initial_value + value_change * (time_since_transition_started / transition_duration);
};
Since you seem to think that the final value at the end of the transition is a more natural quantity to think about than the change (and I agree), it could be
Math.linearTween = function (time_since_transition_started, initial_value, final_value, transition_duration) {
	return initial_value + (final_value - initial_value) * (time_since_transition_started / transition_duration);
};
Edited by Álvaro

Share this post


Link to post
Share on other sites
Here's another version that you might find easier to work with:

Math.change_linearly_toward_target_value = function(current_value, target_value, time_to_target, time_step) {
	var fraction_of_the_way_to_go = min(1.0, time_step / time_to_target);
	return current_value + fraction_of_the_way_to_go * (target_value - current_value);
}

Share this post


Link to post
Share on other sites

c is the distance the ball has to travel from start to its end.

 

c/d is then the velocity it's moving with. This multiplied by the current time gives you the traveled distance.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this