p5.js | lerp()函数

lerp()函数用于查找两个数字之间的数字。 amt 参数可用于指定在两个值之间插入的量。接近 0.1 的量意味着最终值更接近第一个值，更接近 0.9 意味着该值更接近第二个值。如果该值小于或大于这些值，则将根据两个数字的比率计算最终值。

它可用于绘制虚线或通过查找直线中的所有中间点沿路径创建运动。

句法：

lerp( start, stop, amt )

参数：此函数接受三个参数，如上所述，如下所述：

• start：这是一个数字，表示两个数字的第一个值。
• stop：这是一个数字，表示两个数字的第二个值。
• amt：它是一个数字，表示在两个数字之间插入一个数字的数量。

返回值：它返回一个带有 lerped 值的数字。

以下示例说明了 p5.js 中的lerp()函数：

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

输出：

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

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/lerp