0 Favourites

Lerp: The good, the bad, and the average

This forum is currently in read-only mode.
  • From the Wiki:

    [quote:11n3qrvm]Lerp(a, b, x)

    Linear interpolation: Calculates a + x(b - a), or linearly interpolates a to b by x%. Eg. lerp(a, b, 0.25) gives the value 25% of the way from a to b

    Basically this is a lot like the game "pick a number between 1 and 10".

    Except for here we are using a percent, so our x, or number we are picking must be expressed as a float. IE 50% would be 0.5, and 25% would be 0.25. In which case our return value would be 5.5, and 7.75.

    In case you were wondering that would be written as lerp(10, 1, 0.5).

    Ok maybe not to terribly useful for that little game, but suppose you had two numbers say something like x coordinates for two different sprites. Then suppose you wanted a third sprite to move somewhere in between the first two sprites, lets say half way.

    With lerp all we have to do to find the point that's in the middle of the two is use the expression like this:

    lerp(sprite1.x, sprite2.x, 0.5)[/code:11n3qrvm]
    Of course you might want to find a y value as well:
    [code:11n3qrvm]lerp(sprite1.y, sprite2.y, 0.5)[/code:11n3qrvm]
    Ok in this example half the way was shown with 0.5, so if we wanted to go 1/4 of the way we would use 0.25, and if we wanted to go 75% of the way we would use 0.75 etc.
    Now lets put that together. We have 3 sprites, sprite1, sprite 2, and sprite3. Sprite one is on the left side of the layout, and sprite 2 is on the right side. Then sprite 3 you can place [i]anywhere[/i].
    With a simple trigger the event might look something like this:
    [code:11n3qrvm]MouseKeyboard:  On Left Clicked on Sprite3

    Sprite3Set position to lerp(Sprite1.X, Sprite2 .X,0.5), lerp(Sprite1.Y, Sprite2.Y,0.5)[/code:11n3qrvm]

    Alright now for the next example lets say we want a smooth transition when sprite 3 moves. We can use lerp for this as well. Note since this would be a continuous action you will need some kind of always event, along with the trigger. I'll use mouse is down.

    MouseKeyboard: Left mouse button is down

    Sprite3Set position to lerp(Sprite3.X, lerp(Sprite1.X, Sprite2.X, 0.5),1 - 0.05^TimeDelta), lerp(Sprite3.y, lerp(Sprite.y, Sprite2.y, 0.5),1 - 0.05^TimeDelta)[/code:11n3qrvm]

    Wait... wut?

    To simplify this we have a lerp within a lerp with the first lerp's numbers, or a, and b are our current x,y, and target x,y, then the x could be thought of a step. We use timedelta to make sure there is no frame skip.

    The current x,y is expressed as sprite3.x, and sprite3.y since the sprite is always moving while the mouse is down. Then the target x,y, our second lerp, is written like our original example lerp(Sprite1.X, Sprite2.X, 0.5). Finally the step is expressed as 1 - 0.05^TimeDelta. Basically we are moving a tiny percent of the way each tick.

    More coming soon.

  • Thanks for the great tutorial newt! Very easy to understand.

  • Thanks Newt, it makes sense now.

    Maybe you could upload a .cap as well?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Ok here's an example cap with a little something extra.

    See if you can figure out how it works.


  • Thank you for posting this, I hope more people use lerp now .

  • Question: how fast is lerp compared to custom expressions?

    Say lerp(x1,x2,0.5) compared to (x1+x2)/2

  • Question: how fast is lerp compared to custom expressions?

    Say lerp(x1,x2,0.5) compared to (x1+x2)/2

    the standard equation for linear interpolation I'm assuming they are using would be


    or in this example


    I would say the speed difference, if any, would be negligible since consumer grade cpu speeds now days are measured in billions of floating operations per second. it's worth the time you would save, using such a logical and easy to understand expression, and it makes it that much easier when you're ready to graduate to qerp, and cubic

  • Question: how fast is lerp compared to custom expressions?

    Say lerp(x1,x2,0.5) compared to (x1+x2)/2

    Both probably execute so quickly as to be unmeasurable. That's like weighing a mountain and worrying about the effect of adding a grain of sand. Expressions typically execute extremely quickly. Worry about the rendering speed instead. See the 'optimisation tips' article for info on that.

  • Yeah, well, in my case the CPU is a bottleneck; I tend to go overboard on "the cogs" so to speak.

  • Yeah, well, in my case the CPU is a bottleneck

    Heh, my game also. With really small resolutions, games tend to bottleneck at the CPU, since everything is being rendered so fast. Some events have considerable overhead, namely overlapping at offset.

  • ordinary arithmetic operations should be ultraquick, though, and adding an extra addition or division sign in an equation shouldn't make any difference

    I could be wrong, but I think you should probably run into your cpu bottlenecking because of the event system much sooner than because of math in most cases

  • <img src="http://files.getdropbox.com/u/888303/LERP.png">

  • http://en.wikipedia.org/wiki/B�zier_curve

    wikipedia has a great article explaining beziers for anyone whos interested, it covers basic linear interpolation aswell.

    using Qarp(a,b,c,t) and Cubic(a,b,c,d,t) will respectively do quadratic and cubic bezier curves

  • Ah nice find Quasi.

    <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Bezier_2_big.gif">

    Where P, P1, P2, and T would be a, b, c, and t.


    Here's an example in use.


  • That was a really good way to use it newt! It was awsome that you could move it in realtime too!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)