Easing equations

Started by
4 comments, last by JulianLoehr 9 years, 9 months ago

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.

Advertisement

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.

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 )
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);
};
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);
}

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.

Blog: http://www.julianloehr.de

Twitter: https://twitter.com/jloehr_gamedev

HID Wiimote - Windows Device Driver for Wii Remote & Wii U Pro Controller: http://julianloehr.de/educational-work/hid-wiimote/

This topic is closed to new replies.

Advertisement