p5.js | lerp() Function

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
}

chevron_right


Output:
lerp-slider

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
}

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.