Linear Interpolation.

Linear Interpolation.

Move the mouse across the screen and the symbol will follow. Between drawing each frame of the animation, the ellipse moves part of the distance (0.05) from its current position toward the cursor using the lerp() function * This is the same as the Easing under input only with lerp() instead.

float x;
float y;

void setup() {
  size(640, 360); 

void draw() { 
  // lerp() calculates a number between two numbers at a specific increment. 
  // The amt parameter is the amount to interpolate between the two values 
  // where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 
  // is half-way in between, etc.  
  // Here we are moving 5% of the way to the mouse location each frame
  x = lerp(x, mouseX, 0.05);
  y = lerp(y, mouseY, 0.05);
  ellipse(x, y, 66, 66);

Functions Used


Sets the color used to fill shapes

Learn More

Sets the color used to draw lines and borders around shapes

Learn More

Defines the dimension of the display window width and height in units of pixels

Learn More

Draws an ellipse (oval) to the screen

Learn More

The setup() function is run once, when the program starts

Learn More

Calculates a number between two numbers at a specific increment

Learn More

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More

Disables drawing the stroke (outline)

Learn More

The background() function sets the color used for the background of the Processing window

Learn More