# Lerp() not working as expected in animation between array position values
**URL:** https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670
**Category:** Coding Questions
**Created:** [July 16, 2020, 8:09pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670 "2020-07-16T20:09:06Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@fpalla](https://discourse.processing.org/u/fpalla)
#### Post date: [July 16, 2020, 8:09pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/1 "2020-07-16T20:09:06Z")
Hello forum/guys/people who understand js better than me,
feels like kind of a noob question but I don’t think my knowledge at this point is sufficeint to figure out on my own. Either this or I’m blind to something. Really thankful if someone will spare the time to help, or point me in the right direction. \<3
–
Basically I’m trying to lerp() between an array of values, that gets updated ( via push() method) when a certain condition verifies (using the mousePressed() as a simulation here).
The lerp() should happen between the .length - 2 and the last pushed value. The following code works to the extent of moving, but the interpolation does not happen, and I can’t figure out why.
Here’s the code: (and [here web editor link](https://editor.p5js.org/fvalla/sketches/QtWfF-WLR) just in case).
```auto
var x, y, easing, prevX, nextX;
var xPos = [1,10,20];
function setup() {
createCanvas(400, 400);
easing = 0.05;
y = 50;
}
function draw() {
background(220);
prevX = xPos[xPos.length - 2];
nextX = xPos[xPos.length - 1];
x = lerp(prevX, nextX, easing);
circle(x, y, 50, 50);
}
function mousePressed() {
xPos.push(xPos[xPos.length - 1] + 50);
console.log(xPos);
}
```
I tried googling lots of variants, but I don’t think I’m using the correct words. I’ve also tried without arrays but without much success, and still this seems the cleaner version.
Many thanks for your time!
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [July 16, 2020, 8:18pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/2 "2020-07-16T20:18:38Z")
Hello @fpalla,
Could you explain a bit more what is the desired effect? I have a hard time understanding what you want to interpolate or to ease. Is it the movement of the ball?
---
### Author:  [@fpalla](https://discourse.processing.org/u/fpalla)
#### Post date: [July 16, 2020, 8:48pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/3 "2020-07-16T20:48:52Z")
The movement of the ball.
Basically everytime the mouse gets clicked, the ball moves by an X amount with an easing effect, instead of just “jumping” from point A to point B.
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [July 16, 2020, 9:06pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/4 "2020-07-16T21:06:01Z")
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.
```auto
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:
```auto
function mouseClicked() {
currentX = lerp(currentX, finalX, easing);
}
```
Hope it helps you understand better the easing effect.
---
### Author:  [@fpalla](https://discourse.processing.org/u/fpalla)
#### Post date: [July 16, 2020, 9:29pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/5 "2020-07-16T21:29:27Z")
Oh, now I get it. Also understood my issue. **I wasn’t keeping the current position anywhere.**
[This is what I was after.](https://editor.p5js.org/fvalla/sketches/QtWfF-WLR)
Thank you so much!
```auto
var x, y, easing, prevX, nextX;
var xPos = [1];
function setup() {
createCanvas(400, 400);
easing = 0.05;
y = 50;
x = 50;
}
function draw() {
background(220);
nextX = xPos[xPos.length - 1];
// Previously was prevX instead of x as the first argument, so basically kept resetting
x = lerp(x, nextX, easing);
circle(x, y, 50, 50);
}
function mousePressed() {
xPos.push(xPos[xPos.length - 1] + 50);
console.log(xPos);
}
```
@ [jb4x](https://discourse.processing.org/u/jb4x) Can I ask you if my question was clear? And if not, what could have been done better? I’m trying to get better at forums.
Thanks again anyway!
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [July 16, 2020, 9:43pm UTC](https://discourse.processing.org/t/lerp-not-working-as-expected-in-animation-between-array-position-values/22670/6 "2020-07-16T21:43:47Z")
Happy to see you manage to solve your issue 🙂
Regarding your question it was not really clear at first because you never really explained what was the expected result. That’s what is the most important because your code logic can be completely wrong so explaining your code won’t help people understand what you want to do even though it is as important.
Generally speaking, start by explaining what you want to do, then expose and explain what you have tried and where you think it is bugging. Also use an [MCVE](https://stackoverflow.com/help/minimal-reproducible-example) so the problem is easier to explain and people can focus on the issue.