Lerp() not working as expected in animation between array position values

p5.js Coding Questions
4

To have an easing effect, you need to lerp the current position with the desired final position.

The idea is to every time do a fraction of the remaining distance (that’s the easing factor) so you need everytime to consider to new position of your object.

The code below should help you understand how it works. At each mouse click, you move on frame into the movement. With the default value for easing at 0.25, the ball move, for every frame, a quarter of the remaining distance.

var startX, currentX, finalX, easing;

function setup() {
  createCanvas(500, 200);
  
  startX = 0;
  finalX = 500;
  easing = 0.25;
  
  // The intial position of the ball is at start X
  currentX = startX;
}

function draw() {
  background(20);
  
  // Draw ball at its current position
  fill(230);
  noStroke();
  circle(currentX, 100, 50, 50);
}

function mouseClicked() {
  // Get the remaining distance
  var remaining = finalX - currentX;
  
  // Get the new X position by moving of a fraction of the remaining
  var newX = currentX + easing * remaining;
  
  // Set the position of the circle to the new position
  currentX = newX;
}

The lerp function is just there to help you reduce the length of the code and it does basically what’s inside the mouseClicked() function. And actually, you can replace the mouse function by the following code anbd will will behave exactly the same:

function mouseClicked() {
  currentX = lerp(currentX, finalX, easing);
}

Hope it helps you understand better the easing effect.

2 Likes