Animation & Shaping - Processing Library \ Basic Tween

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.

This is the prototypical tween, showing how an animation can be computationally created where every frame is a linear interpolation between the two defined states (or keyframes) by a tween position which changes over time.

import megamu.shapetween.*;

Tween ani;

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

void draw(){
  background( 255 );
  
  float x1 = 20;
  float y1 = 30;
  
  float x2 = 180;
  float y2 = 190;
  
  float x = lerp( x1, x2, ani.position() );
  float y = lerp( y1, y2, ani.position() );
  
  fill(0);
  ellipse( x, y, 8, 8 );
}

void mousePressed(){
  ani.start();
}