Math: EaseIn EaseOut, EaseInOut and Beziér Curves

If you search for easeIn or easeOut you get many results of flash examples how to use the build-in method to accelerate and slowdown objects when you move them. Actually this was not really what you’re looking for isnt’t it? You looked for a pseudo code of how you can write this method by your self and may some explenation how it functions.

There are several methods to make a curve smooth or let objects follow a spline. I will talk a bit about:

beziér curves
velocity curves

1. Beziér Curves

   You need four coordinates for one curve, lets name them A, B, C and D, where A is the Start Point, B is the controll Point for A and C is controll point for D and D is the destination point.

   

   Pseudo Code

    
   #define pow2(x) ((x)*(x))
   #define pow3(x) ((x)*(x)*(x))
    
   Vector3 bezier (Vector3 A, Vector3 B, Vector3 C, Vector3 D)
   {
   	Vector3 OUT;
   	OUT.x = (pow3(1-t))*A.x+3*(pow2(1-t))*t*B.x+3*(1-t)*(pow2(t))*C.x+(pow3(t))*D.x;
   	OUT.y = (pow3(1-t))*A.y+3*(pow2(1-t))*t*B.y+3*(1-t)*(pow2(t))*C.y+(pow3(t))*D.y;
   	OUT.z = (pow3(1-t))*A.z+3*(pow2(1-t))*t*B.z+3*(1-t)*(pow2(t))*C.z+(pow3(t))*D.z;
   	return OUT;
   }

2. Velocity Curves

   Accelleration will control these curves. Lets say you start with a high velocity on A and slow down by a negative acceleration on D you would get a similar curve like the obove. There are three typical curves :

   

   Pseudo Code :

   #define pow2(x) ((x)*(x))
   #define pow3(x) ((x)*(x)*(x))
    
   // assuming :
   // t is a value between 0 and 1
   // b is an offset
   // c is the height
   public double easeIn (double t, double b, double c) {
     return c*pow3(t) + b;
   }
    
   public double easeOut (double t, double b, double c) {
     return c*(pow3(t-1) + 1) + b;
   }
    
   public double easeInOut (double t, double b, double c) {
   if ( (t*2) < 1)
     return c/2*pow3(t*2) + b;
   else
     return c/2*(pow3(t*2-2) + 2) + b;
   }