UnderwareDESIGN

How the Lerp Vertex Example Works (Explained for New Programmers)

This PlayBASIC program demonstrates how to create a smooth animation by **interpolating** between two shapes using a function called **LERP**, which stands for *Linear Interpolation*.

🧱 The Basic Idea

The program shows a square (made of four lines) that slowly morphs into a jumble of random lines, and then back again—over and over. This transformation is done **smoothly**, thanks to LERP, which blends between two values step by step.





🛠� Key Concepts and How It Works

  1. **Two Shapes to Interpolate Between**

    The program defines two shapes:

      `Shape1()` – a simple square made of 4 connected lines.
      `Shape2()` – a version of the square where all the points are randomized.

    Each shape is stored as an array of `tLine`, which is a custom type made of two points (`p1` and `p2`). Each point has an `x` and `y` position on the screen.


  2. The LERP Function

    The LERP function takes three values:

[pbcode]
    Lerp(V1#, V2#, Scale#)
[/pbcode]


It blends from `V1#` to `V2#`, depending on the `Scale#`.

* When `Scale# = 0`, the result is `V1#` (the starting point).
* When `Scale# = 1`, the result is `V2#` (the ending point).
* Values in between give you a smooth blend between the two.

3. Animation Using Cosine

  In the main loop, the variable `Scale#` is calculated like this:

[pbcode]
Scale# = (50 + Cos(Angle#) * 50) / 100
[/pbcode]


This creates a smooth back-and-forth motion (from 0 to 1 to 0), making the square morph into the random shape and then return again.

4. **Drawing the Shapes**

Three versions of the shapes are drawn on screen:

  * The **original shape** in one color.
  * The **random shape** in a second color.
  * The **animated (interpolated) shape** in white, which moves between the two using LERP.

  This is done in the `DrawLerpedBox()` function, which blends each corner of the lines from Shape1 to Shape2.



🖱� Interactive Controls

The program reacts to your mouse:

* Left-click anywhere to create a new square at that position.
* Right-click to generate a new set of random lines for the second shape.


💡 Why This Is Useful

This type of smooth transformation is great for creating animations, UI transitions, or morphing effects in games. Learning how to use LERP gives you the power to blend anything—positions, colors, sizes, and more!







[pbcode]

; PROJECT : Lerp Vertex Example
; AUTHOR  : PlayBASIC Tutor - https://PlayBASIC.com
; CREATED : 3/05/2025
; EDITED  : 4/05/2025
; ---------------------------------------------------------------------


    openscreen 1280,720,32,true

    Type tVertex2D
            x#,y#
    EndType

    Type tLine
                p1 as tVertex2D       
                p2 as tVertex2D       
    Endtype

    Edges = 4
    Dim Shape1(Edges) as tLine
    Dim Shape2(Edges) as tLine

    InitBox(Shape1(),300,300,400,400)           
    InitRandomBox(Shape2())
   
    setfps 60

    do
        cls $334455
       
        // Draw Starting Shape
        ink $00ff
        DrawLerpedBox(Shape1(),Shape2(), 0)
       
        // Draw End Shape
        ink $ff00FF
        DrawLerpedBox(Shape1(),Shape2(), 1)
               
        Scale#=(50+cos(Angle#)*50)/100
        ink $ffffff
        DrawLerpedBox(Shape1(),Shape2(),Scale# )

        Angle#=wrapangle(angle#,1)
           
        if mousebutton()=1
                x=mousex()
                y=mousey()
                angle#=180
                Size=RndRange(100,200)
                InitBox(Shape1(),x,y,x+Size,y+Size)           
        endif           

        if mousebutton()=2
            InitRandomBox(Shape2())
            angle#=0
        endif           

       
        sync
    loop spacekey()




Function DrawLerpedBox(ThisShape1().tLine,ThisShape2().tLine, Scale#)

    Scale# = cliprange#(Scale#,0,1)   
    for lp =0 to 3

            x1#= lerp(ThisShape1(lp).p1.x,ThisShape2(lp).p1.x,Scale#)
            y1#= lerp(ThisShape1(lp).p1.y,ThisShape2(lp).p1.y,Scale#)

            x2#= lerp(ThisShape1(lp).p2.x,ThisShape2(lp).p2.x,Scale#)
            y2#= lerp(ThisShape1(lp).p2.y,ThisShape2(lp).p2.y,Scale#)
            line x1#,y1#,x2#,y2#
    next


EndFunction   







    //  Make a box shape

Function InitBox(ThisShape().tLine,X1,Y1,X2,Y2)       


    i=0
    ThisShape(i).p1.x = x1
    ThisShape(i).p1.y = y1
    ThisShape(i).p2.x = x2
    ThisShape(i).p2.y = y1

    i++
    ThisShape(i).p1.x = x2
    ThisShape(i).p1.y = y1
    ThisShape(i).p2.x = x2
    ThisShape(i).p2.y = y2

    i++
    ThisShape(i).p1.x = x2
    ThisShape(i).p1.y = y2
    ThisShape(i).p2.x = x1
    ThisShape(i).p2.y = y2


    i++
    ThisShape(i).p1.x = x1
    ThisShape(i).p1.y = y2
    ThisShape(i).p2.x = x1
    ThisShape(i).p2.y = y1

EndFunction   



Function InitRandomBox(ThisShape().tLine)       

    sw=getscreenwidth()
    sh=getscreenheight()
   
    for lp =0 to 3
        ThisShape(lp).p1.x = rnd(sw)
        ThisShape(lp).p1.y = rnd(sh)
        ThisShape(lp).p2.x = rnd(sw)
        ThisShape(lp).p2.y = rnd(sh)
    next

EndFunction   



   







Function  Lerp(V1#,V2#,Scale#)
        Result#= V1#+((V2#-V1#)*Scale#    )
EndFunction Result#


[/pbcode]


  Related Source Code Examples

    --  Lerp Vertex (https://www.underwaredesign.com/forums/index.php?topic=3033.msg20250#msg20250)  (Morphing Cube to Sphere)