Linear Interpolation (Lerp) - Math and JavaScript Applications

Linear interpolation (Lerp) is a very important technique I use all the time. In this video I won’t just give you the formula, but teach you how to figure it out by yourself when needed. I think you’ll remember the math better in that way. Then, once the formula is clear, I’ll show you how to use it in JavaScript. I'll teach you several different applications where we animate location, color, sound and text!

I made this video because many of my students make the mistake of not extracting lerp as its own function when they use it multiple times in an application. Then, the code has countless different implementations all over the place. This kind of spaghetti code leads to a lot of bugs.

Self-driving car videos where I use Lerp

Segment Intersection

Understanding Color

Melody Maker Tutorial

Visual Web Development Course

Beauty of Bezier Curves

Easing functions cheat sheet

Desmos calculator

#lerp #interpolation #javascript

[Radu]

Please like this video so I know if I should make more content like this :-)

[apidas]

I love you teaching math Radu. keep it up!

[_dvyne]

for anyone confused on why we are subtracting a frm b, its to get the length from b to a, this is bcos our lines(a and b) both start from the same point so we don't know the length or distance btw a and b so to do so we subtract a frm b and then we can effectively get any position in between my scaling that length down using multiplication(scales down bcos we are using a fraction)

[cryptocoinkiwi]

My cat was asleep in front of my laptop. As soon as the sound started interpolating he turned his and looked at the screen with a WTF is that look on his face!

[realsubhajitpatra]

Hi, sir how are you, Iam from india. Iam your big fan.❤❤💖💖💝💝

[kgene]

I've worked through this video twice and love it. It took me a bit to get my head wrapped up around lerp concept. Thank you, Radu! Great video and excellent tutorial as always.

[howl]

Why in your tutorials you never use some GUI like tweakpane to make more visual the explaination. Just get that as an idea pls

[simpingsyndrome]

I've done my Linear Interpolation Project using NextJS and it's improve my skill significantly

[magolo]

How you configuring your image to be like a reproduction?. A video about it?. Great topics in your channel, congrats

[sudoCss]

Can you explain how myCanvas variable works even you are not getting it from the DOM please?


thanks for the content very informative

[___dp]

Great content again!!! I love how you use programming techniques and math togethers!

[chriswinslow]

This is pretty cool. I will try and learn from this and apply it to your "Animating a Plane on a Path with JavaScript | Live Coding on a Plane!" tutorial, to fill in large gaps if the mouse is moved quickly so that the point moves smoothly.

[vikneshwaranseetharaman]

Hi Radu, Could you please explain how third of the way required dividing it 3 times. Why do we need to add the distance to A 3 times.The part where in you dervied with the formula wasn't clear to me.

[KlinovAS]

Wow. Sound in web. This is Nice bonus!

[vincentcleaver]

I finally worked on my homework again and got as far as interpolating color last night; I'll get sound tonight

[Accrt.]

Please continue teaching math using such examples. I'd love to see more of these.

[shahrukhtramboo]

Why so less views, please start teaching on udemy too and other platforms, you are amazing.

[cryptocoinkiwi]

I've actually caught myself humming the "Coding with Radu" theme song at times.

[MikkelGissel]

You should make more content like this ;-) Absolute fav coding content maker. Stay C#

[TonyAnthonyStark]

best programming channel in the world, explained it like a charm