Easing demo

easingDemo.pde

void setup() {
  // tip FX2D looks really smooth on retina displays
  // some things won't work in this mode, but most things do
  size(640,320,FX2D);
}

void draw() {
  
  background(196);
   
  float durationInMs = 4000;
  
  float normalizedTime = millis()%durationInMs/durationInMs;
  
  float normalizedMouse = mouseX/(float)width;
  
  float normalizedValue = normalizedTime;
  
  if(mousePressed) normalizedValue = normalizedMouse;
  //println(normalizedTime);
  fill(0);
  text(normalizedValue,10,20);
  
  float ellipseRadius = 50;
  float ellipseDiameter = ellipseRadius/2;
  
  float ellipseOneX = ellipseDiameter + normalizedValue * (width - ellipseRadius);
  fill(255,255,0);
  ellipse(ellipseOneX,100,ellipseRadius,ellipseRadius);
  
  // ellipse with ease
  float easedValue = easeInOutCubic(normalizedValue,0.0,1.0,1.0);
  float ellipseTwoX = ellipseDiameter + easedValue * (width - ellipseRadius);
  fill(0,255,255);
  ellipse(ellipseTwoX,100+ellipseRadius+10,ellipseRadius,ellipseRadius);
  
}


// t is time, in this case just 0.0 - 1.0
// b is the start, we just use 0.0
// c is the change, we use normalized so also 1.0
// d is the duration, because we use normalised it's 1.0

// Find functions in here:
// https://github.com/jesusgollonet/processing-penner-easing/tree/master/src
// See them already visualised over here:
// http://easings.net

float easeInOutCubic (float t,float b , float c, float d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
  }