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:
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:
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!
Related Source Code Examples
-- Lerp Vertex (Morphing Cube to Sphere)
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:
PlayBASIC Code:
Lerp(V1#, V2#, Scale#)
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:
PlayBASIC Code:
Scale# = (50 + Cos(Angle#) * 50) / 100
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!
PlayBASIC Code:
; 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#
Related Source Code Examples
-- Lerp Vertex (Morphing Cube to Sphere)
