Skip to content
Related Articles

Related Articles

p5.js | lerp() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Mar, 2020
View Discussion
Improve Article
Save Article

The lerp() function is used to find a number between two numbers. The amt parameter can be used to specify the amount to interpolate between the two values. An amount nearer to 0.1 would mean that the final value is nearer to the first value, and nearer to 0.9 means that the value is nearer to the second value. If the value is less or more than these, then the final value would be calculated on the basis of the ratio of the two numbers.

It can be used for drawing dotted lines or creating motion along a path by finding all the intermediate points in a line.

Syntax:

lerp( start, stop, amt )

Parameters: This function accept three parameters as mentioned above and described below:

  • start: It is a number which denotes the first value of the two numbers.
  • stop: It is a number which denotes the second value of the two numbers..
  • amt: It is a number which denotes the amount by which a number is to be interpolated between the two numbers.

Return Value: It returns a number with the lerped value.

Below examples illustrate the lerp() function in p5.js:

Example 1:




function setup() {
  createCanvas(600, 200);
  textSize(20);
   
  inputElemA = createInput(10);
  inputElemA.position(30, 40);
   
  inputElemB = createInput(100);
  inputElemB.position(30, 60);
   
  sliderElem = createSlider(0, 1, 0.5, 0.1);
  sliderElem.position(30, 120);
}
   
function draw() {
  clear();
  text("Enter two values between which new "
        + "number would be lerped", 20, 20);
  text("Move the slider to observe the amount"
        + " of lerping", 20, 100);
   
  // Convert the string value to a number
  // value for lerping
  inputValA = Number(inputElemA.value());
  inputValB = Number(inputElemB.value());
  sliderVal = sliderElem.value();
   
  text("The amount of lerping is: "
        + sliderVal, 20, 160);
          
  text("The lerped value is: "
        + lerp(inputValA, inputValB, 
        sliderVal), 20, 180);
}


Output:
lerp-slider

Example 2:




function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  sliderElem = createSlider(0, 1, 0.5, 0.1);
  sliderElem.position(30, 180);
  
  circleApos = 50;
  circleBpos = 500;
}
  
function draw() {
  clear();
  text("Move the slider to observe the x position "
          + "of the middle circle", 20, 160);
  
  circle(circleApos, 50, 80);
  circle(circleBpos, 50, 80);
  
  sliderVal = sliderElem.value();
  lerpedVal = lerp(circleApos, circleBpos, sliderVal);
  
  // Draw the circle at the lerped x coordinate
  circle(lerpedVal, 50, 80);
  
  text("The amount of lerping is: " + sliderVal, 20, 220);
}


Output:
circle-lerp

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/lerp


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!