Easing demo in Processing.

easing.pde

PVector b0, b1, b2, b3;
PVector pos, debutPos, ciblePos;
float t_anim, t_debut, t_duree;

void setup() {
  size(400, 400);
  background(0);
  smooth();
  t_anim = t_duree = 2000.0;
  
  // Par convention, la courbe de easing va de (0,0) à (1,1)
  b0 = new PVector(0,0);
  b1 = new PVector(0.3, 2.4);
  b2 = new PVector(0.5, 0.1);
  b3 = new PVector(1,1);
  
  pos = new PVector(width/2, height/2);
  debutPos = pos.get();
  ciblePos = pos.get();
}

float ease( float t ) {
  // Tel qu'expliqué ici: http://stackoverflow.com/a/14781788/570738
  float c = 1.0 - t;
  return t * ( t * t + 3.0 * c * ( c * b1.y +  t * b2.y ) );
}

PVector lerpPVector( PVector p0, PVector p1, float t ) {
  return PVector.add( PVector.mult(p0, 1.0f - t), PVector.mult(p1, t) );
}

void drawEasingCurve( float zoom )
{
  float s = zoom * width;
  pushMatrix();
  translate(width/2, height/2);
  scale(s, -s);
  translate(-0.5, -0.5);
  
  noFill();
  stroke(60);
  strokeWeight(1.5/s);
  bezier( b0.x, b0.y, b1.x, b1.y, b2.x, b2.y, b3.x, b3.y );
  
  strokeWeight(1.0/s);
  rect(0, 0, 1, 1);
  line( b0.x, b0.y, b1.x, b1.y);
  line( b2.x, b2.y, b3.x, b3.y);
  
  noStroke();
  float diam = 7.0/s;
  fill(100, 0, 0);
  ellipse( b2.x, b2.y, diam, diam);
  ellipse( b1.x, b1.y, diam, diam);
  fill(0, 0, 100);
  ellipse( b0.x, b0.y, diam, diam);
  ellipse( b3.x, b3.y, diam, diam);
  
  popMatrix();
}

void draw() {
  background(0);
  drawEasingCurve( 0.25 );
  
  if( t_anim < t_duree ) {
    fill(255);
    pos.set( lerpPVector(debutPos, ciblePos, ease( t_anim/t_duree ) ) );
    t_anim = millis() - t_debut;
  } else {
    fill(100);
    pos.set( ciblePos );
    noLoop();
  }
  
  noStroke();
  ellipse(pos.x, pos.y, 20, 20);
}

void mousePressed() {
  t_debut = millis();
  t_anim = 0;
  debutPos.set( pos );
  ciblePos.set((float) mouseX, (float) mouseY, 0);
  loop();
}