Introduction to LERP()

This was one of a weekly series I did on technical topics. This 5-minute introduction to linear interpolation was meant to show how code could feel natural.

Transcript

1. Hack of
   the Week
   

   View Slide

2. View Slide

3. LINEAR INTERPOLATION
   

   View Slide

4. LINEAR INTERPOLATION
   

   View Slide

5. LERP()
   

   View Slide

6. 0.0 1.0
   50% = 0.5
   30% = 0.3
   75% = 0.75
   

   View Slide

7. 146.2 1701.68
   50% = ???
   30% = ???
   75% = ???
   

   View Slide

8. LERP(start, stop, amount)
   

   View Slide

9. 146.2 1701.68
   lerp(146.2, 1702.68, 0.5) = 924.44
   LERP(start, stop, amount)
   lerp(146.2, 1702.68, 0.3) = 613.144
   lerp(146.2, 1702.68, 0.75) = 1313.56
   

   View Slide

10. View Slide

11. 0.0 1000.0
    lerp( 0.0, 1000.0, random() )
    random()
    returns random number between 0.0 and 1.0
    

    View Slide

12. 0.0 1000.0
    lerp( 0.0, 1000.0, Math.sin() )
    Math.sin()
    given radians, returns sine value (between 0.0 and 1.0)
    

    View Slide

13. View Slide

14. 0.0 1000.0
    lerp( 0.0, 1000.0, Math.sin(???) )
    Math.sin()
    given radians, returns sine value
    

    View Slide

15. 0.0 1000.0
    lerp( 0.0, 1000.0, Math.sin(time) )
    Math.sin()
    given radians, returns sine value
    

    View Slide

16. 0.0 1000.0
    lerp( 0.0, 1000.0, Math.sin(time) )
    Math.sin()
    given radians, returns sine value
    *note - Math.sin(time) formula simplified for effect
    

    View Slide

17. Want to learn more about LERP() and
    how to code animations?
    https://thebookofshaders.com https://www.youtube.com/user/shiffman
    

    View Slide