p5.js | bezierPoint()函数

p5.js 中的bezierPoint()函数用于计算给定点的贝塞尔曲线坐标。它获取特定轴的贝塞尔曲线坐标，并找到曲线在点“t”处的坐标，可以将其指定为参数。

贝塞尔曲线中一个点的完整位置可以通过在曲线的 x 坐标和 y 坐标上使用函数一次查找，然后将它们一起使用来找到。

句法：

bezierPoint( a, b, c, d, t )

参数：该函数接受上面提到的五个参数，如下所述：

• a：它是一个数字，指定曲线的第一个点。
• b：它是一个数字，指定曲线的第一个控制点。
• c：它是一个数字，指定曲线的第二个控制点。
• d：它是一个数字，指定曲线的第二个点。
• t： 0到1之间的一个数字，用作曲线坐标的起点和终点之间的位置。

返回值：它返回一个数字，指定给定位置的贝塞尔曲线的值。

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

示例 1：

function setup() {
  createCanvas(600, 300);
  textSize(18);
  
  bezierPointLocationSlider = createSlider(0, 1, 0, 0.1);
  bezierPointLocationSlider.position(20, 40);
}
  
function draw() {
  background("green");
  fill("black");
  text("Move the slider to change the location of the displayed bezier point", 10, 20);
  
  // Get the required location of bezier
  bezierPointLocationValue = bezierPointLocationSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 140, y: 150 };
  let p3 = { x: 400, y: 150 };
  let p4 = { x: 500, y: 250 };
  
  noFill();
  // Draw bezier using bezier()
  bezier(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  
  // Find the X and Y coordinate using the bezierPoint() function
  let pointX = bezierPoint(p1.x, p2.x, p3.x, p4.x, bezierPointLocationValue);
  let pointY = bezierPoint(p1.y, p2.y, p3.y, p4.y, bezierPointLocationValue);
  fill("red");
  
  // Display it on the sketch
  ellipse(pointX, pointY, 10, 10);
}

输出：

示例 2：

function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  maxPointsSlider = createSlider(2, 20, 10, 1);
  maxPointsSlider.position(20, 40);
}
  
function draw() {
  background("green");
  fill("black");
  text("Move the slider to change the number of intermediate points", 10, 20);
  
  // Get the required location of bezier
  maxPoints = maxPointsSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 140, y: 150 };
  let p3 = { x: 400, y: 150 };
  let p4 = { x: 500, y: 250 };
  
  noFill();
  // Draw bezier using bezier()
  bezier(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  
  for (let i = 0; i <= maxPoints; i++) {
    let step = i / maxPoints;
  
    // Find the X and Y coordinate using the bezierPoint() function
    let pointX = bezierPoint(p1.x, p2.x, p3.x, p4.x, step);
    let pointY = bezierPoint(p1.y, p2.y, p3.y, p4.y, step);
    fill("red");
  
    // Display it on the sketch
    ellipse(pointX, pointY, 8, 8);
  }
}

输出：

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

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

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