Animation & Shaping - Processing Library \ Easing In & Out

Tweens the circle from one coordinate to another, by way of Processing's lerp() function. The tween's position() is used as the amt parameter, which works particularly nicely since it is usually between 0 and 1.

In this example, two ellipses are being tween, one using the Tween time() method while the second uses the position() method. A Tween's time always moves linearly, whereas it's position is based on the easing shape function used. In this case, the Shaper.COSINE function. The easing in and out creates a more natural looking animation.

import megamu.shapetween.*;

Tween ani;

void setup(){
  size( 200, 200 );
  ani = new Tween(this, 2, Tween.SECONDS, Tween.REVERSE_REPEAT, Shaper.COSINE);
  ani.start();
}

void draw(){
  background( 255 );
  
  float x1 = 30;
  float x2 = 170;

  float xT = lerp( x1, x2, ani.time() );
  float xP = lerp( x1, x2, ani.position() );
  
  noStroke();
  
  fill(0);
  ellipse( xT, 60, 30, 30 );
  
  fill(0, 100, 180);
  ellipse( xP, 140, 30, 30 );
}