Easing

Share your ZGE-development tips and techniques here!

Moderator: Moderators

Post Reply
User avatar
Kjell
Posts: 1715
Joined: Sat Feb 23, 2008 11:15 pm

Easing

Post by Kjell » Mon Dec 09, 2013 4:44 pm

8)

Quick port of Robert Penner's easing equations*

Image

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

// Quadratic

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

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

float easeInOutQuad(float T)
{
  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

User avatar
y offs et
Posts: 418
Joined: Wed Apr 22, 2009 4:26 pm
Location: BC, Canada

Post by y offs et » Mon Dec 09, 2013 5:42 pm

Oh! I'm speechless.

That is so hugely useful!
"great expectations"

User avatar
jph_wacheski
Posts: 1005
Joined: Sat Feb 16, 2008 8:10 pm
Location: Canada
Contact:

Post by jph_wacheski » Tue Dec 10, 2013 5:51 pm

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

Post by airpas » Thu Dec 12, 2013 2:46 pm

can some one please put a small example showing how to use those formulas.

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

Post by Kjell » Thu Dec 12, 2013 3:22 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
(3.62 KiB) Downloaded 626 times

User avatar
jph_wacheski
Posts: 1005
Joined: Sat Feb 16, 2008 8:10 pm
Location: Canada
Contact:

Post by jph_wacheski » Thu Dec 12, 2013 3:58 pm

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
(2.19 KiB) Downloaded 397 times
iterationGAMES.com

airpas
Posts: 48
Joined: Wed Apr 18, 2012 11:50 am

Post by airpas » Thu Dec 12, 2013 6:51 pm

this is really helpful:) , many thanks Kjell .

thanks jph for the useful example

Post Reply