## Easing

Share your ZGE-development tips and techniques here!

Moderator: Moderators

Kjell
Posts: 1715
Joined: Sat Feb 23, 2008 11:15 pm

### Easing

Quick port of Robert Penner's easing equations*

*Excluding bounce, since that's not really a equation.

Code: Select all

``````// Sine

float easeInSine(float T)
{
return sin((T-1)*PI*0.5)+1;
}

float easeOutSine(float T)
{
return sin(T*PI*0.5);
}

float easeInOutSine(float T)
{
return 0.5*(1-cos(T*PI));
}

{
return T*T;
}

{
return 0-T*(T-2);
}

{
if(T < 0.5)
{
return 2*T*T;
}
else
{
return -2*T*T+4*T-1;
}
}

// Cubic

float easeInCubic(float T)
{
return T*T*T;
}

float easeOutCubic(float T)
{
float F = T-1;
return F*F*F+1;
}

float easeInOutCubic(float T)
{
if(T < 0.5)
{
return 4*T*T*T;
}
else
{
float F = 2*T-2;
return 0.5*F*F*F+1;
}
}

// Quartic

float easeInQuart(float T)
{
return T*T*T*T;
}

float easeOutQuart(float T)
{
float F = T-1;
return F*F*F*(1-T)+1;
}

float easeInOutQuart(float T)
{
if(T < 0.5)
{
return 8*T*T*T*T;
}
else
{
float F = T-1;
return -8*F*F*F*F+1;
}
}

// Quintic

float easeInQuint(float T)
{
return T*T*T*T*T;
}

float easeOutQuint(float T)
{
float F = T-1;
return F*F*F*F*F+1;
}

float easeInOutQuint(float T)
{
if(T < 0.5)
{
return 16*T*T*T*T*T;
}
else
{
float F = 2*T-2;
return  0.5*F*F*F*F*F+1;
}
}

// Exponential

float easeInExpo(float T)
{
return T ? pow(2,10*(T-1)) : T;
}

float easeOutExpo(float T)
{
return T == 1 ? T : 1-pow(2,-10*T);
}

float easeInOutExpo(float T)
{
if(T == 0 || T == 1)return T;

if(T < 0.5)
{
return 0.5*pow(2,(20*T)-10);
}
else
{
return -0.5*pow(2,(-20*T)+10)+1;
}
}

// Circular

float easeInCirc(float T)
{
return 1-sqrt(1-T*T);
}

float easeOutCirc(float T)
{
return sqrt((2-T)*T);
}

float easeInOutCirc(float T)
{
if(T < 0.5)
{
return 0.5*(1-sqrt(1-4*T*T));
}
else
{
return 0.5*(sqrt(0-(2*T-3)*(2*T-1))+1);
}
}

// Back

float easeInBack(float T)
{
return T*T*T-T*sin(T*PI);
}

float easeOutBack(float T)
{
float F = 1-T;
return 1-(F*F*F-F*sin(F*PI));
}

float easeInOutBack(float T)
{
float F;

if(T < 0.5)
{
F = 2*T;
return 0.5*(F*F*F-F*sin(F*PI));
}
else
{
F = 1-(2*T-1);
return 0.5*(1-(F*F*F-F*sin(F*PI)))+0.5;
}
}

// Elastic

float easeInElastic(float T)
{
return sin(13*PI*0.5*T)*pow(2,10*(T-1));
}

float easeOutElastic(float T)
{
return sin(-13*PI*0.5*(T+1))*pow(2,-10*T)+1;
}

float easeInOutElastic(float T)
{
if(T < 0.5)
{
return 0.5*sin(13*PI*T)*pow(2,10*(2*T-1));
}
else
{
return 0.5*(sin(-13*PI*T)*pow(2,-10*(2*T-1))+2);
}
}``````
K

y offs et
Posts: 418
Joined: Wed Apr 22, 2009 4:26 pm
Oh! I'm speechless.

That is so hugely useful!
"great expectations"

jph_wacheski
Posts: 1005
Joined: Sat Feb 16, 2008 8:10 pm
Contact:
Very nice Kjell,. this will save me some time for sure!

I had suggested these could be built in the animator component, in a little drop-down menu, quite a while back,. and I have ever since intended to build a library like this,. just never enough time.

These have many uses,. procedural animation is my first goal,. but acceleration, spawn rates, even audio mix levels,. or color cycles will all benefit from an easy to use set up like this.

Thanks a bunch.
iterationGAMES.com

airpas
Posts: 48
Joined: Wed Apr 18, 2012 11:50 am
can some one please put a small example showing how to use those formulas.

Kjell
Posts: 1715
Joined: Sat Feb 23, 2008 11:15 pm
Hi airpas,
airpas wrote:can some one please put a small example showing how to use those formulas.
In order to use the functions you need to add a ZLibrary component to App.OnLoaded and paste them into the Source property. Then simply call any of the functions from a Expression using the following syntax.

Code: Select all

``myVariable = easeInSine(myValue);``
The value that you use with any of the functions should be in the 0 to 1 range. So for example ..

Code: Select all

``myVariable = easeInOutSine(frac(App.Time));``
.. gives you a value that eases in & out using a sine curve every second.

You can use these functions for a wide variety of things ( animation, rendering, physics, filtering etc. ), but attached is a simple use case. Use your mouse & left mouse button to move the circle.

K
Attachments
GoTo.zgeproj

jph_wacheski
Posts: 1005
Joined: Sat Feb 16, 2008 8:10 pm
Contact:
ok, here is a little test thing I am using,. it just plots the curves so you can see them easily,. and moves a ball to show the motion you can get.

Simply change the easing types to see the different results.

the library just converts linear change to the curves you see.
Attachments
easing_equations_test.zip
.zgeproj