pc.math.Lerp goes from A to B in 0,2 instead of 1

Help & Support
1 
IntroPanelScript.prototype.animateLine = function () {

    let progress = this.lineAnim.getPlaybackPosition().percent;

    console.log(`Progress: ${progress} / ${this.lineElement.width}`);

    this.lineElement.width = pc.math.lerp(this.lineElement.width, this._maxLineWidth, progress);

};

I made a script that will go from 0 to 1 in 7 seconds. With this value I am interpolating 2 number values from 0 to 675. My code works but looked a bit too fast…when I printed the alpha and the interpolated value i got this:

image
image848×1695 70.3 KB

I am not good at math but 10% of 675 can’t be 612 :rofl:

2

Hi,

I see what you are expecting but 612 is %90 with %10 remaining from the top. So I think the real percentage is %90. Does this explanation make sense? Maybe I am reading this incorrectly.

3

Try using a fixed value for the alpha. For example, change the last line to:

this.lineElement.width = pc.math.lerp(this.lineElement.width, this._maxLineWidth, 0.05);

Does this give you the expected visual result? If so, then the issue was that your alpha was increasing as your progress value was increasing, which is why it lerped too fast.

4

I changed this line to 0 and it worked just as I expected because this.lineElement.width starts with value 0. I wish to know why it worked with a zero instead of the variable

pc.math.lerp(0, this._maxLineWidth, progress);

5

Hi Murilo,
The definition of call shows that a is the from.

image
image812×248 10.6 KB

This probably explains it but not sure

6

Thank you for your reply…but it doesn’t explain why it doesn’t work with a variable in “a” parameter :thinking:

7

Hi Murilo,

I guess as I read into it I understand a bit more. I agree with you. Seems like what you are seeing is that just hard coding the number 0 makes it work as expected. But passing in variable form causes issue.

this.lineElement.width is changing the from point in your code?
this._maxLineWidth is a constant? or is it changing?

console.log(Progress: ${this.lineElement.width} / ${this._maxLineWidth});
Try this in your code.

8
  1. yes
  2. It is fixed. I get this value once on initialize function prior to this animation from a image element (I made a line on editor, get this width value then set it to zero so i can animate the line stretching)
9

The issue here is that you want a linear interpolation from value A to B.

Eg A = 0, B = 100. Every frame advances 10%

Width = 0 (pc.math.lerp(0, 100, 0);
Width = 10 (pc.math.lerp(0, 100, 0.1);
Width = 20 (pc.math.lerp(0, 100, 0.2);
Width = 30 (pc.math.lerp(0, 100, 0.3);
Width = 40 (pc.math.lerp(0, 100, 0.4);
Width = 50 (pc.math.lerp(0, 100, 0.5);
Width = 60 (pc.math.lerp(0, 100, 0.6);
Width = 70 (pc.math.lerp(0, 100, 0.7);
Width = 80 (pc.math.lerp(0, 100, 0.8);
Width = 90 (pc.math.lerp(0, 100, 0.9);
Width = 100 (pc.math.lerp(0, 100, 1);

However, in your original code, the value of A is always changing because it set it to be current width so it looks like this

this.lineElement.width = pc.math.lerp(this.lineElement.width, this._maxLineWidth, progress);

Width = 0 (pc.math.lerp(0, 100, 0);
Width = 10 (pc.math.lerp(0, 100, 0.1);
Width = 28 (pc.math.lerp(10, 100, 0.2);
Width = 42.4 (pc.math.lerp(28, 100, 0.3);
Width = 53.92 (pc.math.lerp(42.4, 100, 0.4);
Width = 63.136 (pc.math.lerp(53.92, 100, 0.5);
Width = 70.5088 (pc.math.lerp(0, 100, 0.6);

etc

TLDR, your A value wasn’t constant

You can have a variable as A, however, it should be your starting value that you are interpolating from, not one that is changing throughout the lerp if you want a linear interpolation.

2 Likes
10

Good to know! Thanks