p5.js | Función lerp() – Barcelona Geeks

La función lerp() se usa para encontrar un número entre dos números. El parámetro amt se puede usar para especificar la cantidad a interpolar entre los dos valores. Una cantidad más cercana a 0,1 significaría que el valor final está más cerca del primer valor, y más cerca de 0,9 significa que el valor está más cerca del segundo valor. Si el valor es menor o mayor que estos, entonces el valor final se calcularía sobre la base de la relación de los dos números.

Se puede usar para dibujar líneas de puntos o crear movimiento a lo largo de una ruta encontrando todos los puntos intermedios en una línea.

Sintaxis:

lerp( start, stop, amt )

Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:

comienzo: Es un número que denota el primer valor de los dos números.
parada: Es un número que denota el segundo valor de los dos números..
amt: Es un número que denota la cantidad por la cual un número debe ser interpolado entre los dos números.

Valor de Retorno: Devuelve un número con el valor lerpeado.

Los siguientes ejemplos ilustran la función lerp() en p5.js:

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

Producción:
lerp-slider

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

Producción:
circle-lerp