p5.js | bezierPoint()函数

介绍

在 p5.js 中，bezierPoint() 函数用于计算贝塞尔曲线上某一点的坐标。贝塞尔曲线是一种平滑曲线，由起始点、控制点和结束点定义。bezierPoint() 函数可用于确定曲线上特定位置的点的坐标。

语法

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

参数

• a, b, c, d：控制点的坐标。如果是二次贝塞尔曲线，则只需提供 a、b、c，如果是三次贝塞尔曲线，则需要提供 a、b、c、d。
• t：一个介于 0 到 1 之间的浮点数，表示贝塞尔曲线上的位置。0 表示起始点，1 表示结束点。

返回值

贝塞尔曲线上特定位置的点的坐标。

示例

以下示例演示了如何使用 bezierPoint() 函数计算贝塞尔曲线上的点的坐标：

let x1 = 100;
let y1 = 100;
let x2 = 300;
let y2 = 300;
let x3 = 500;
let y3 = 200;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220);

  stroke(0);
  strokeWeight(2);
  noFill();

  // 绘制贝塞尔曲线
  bezier(x1, y1, x2, y2, x3, y3, mouseX, mouseY);

  // 计算贝塞尔曲线上特定位置的点的坐标
  let t = mouseY / height;
  let bx = bezierPoint(x1, x2, x3, mouseX / width, 0.5);
  let by = bezierPoint(y1, y2, y3, mouseY / height, 0.5);

  // 绘制贝塞尔曲线上的点
  fill(255, 0, 0);
  ellipse(bx, by, 10, 10);
}

这段代码创建了一个画布，并在画布上绘制了一个贝塞尔曲线。根据鼠标的位置，使用 bezierPoint() 函数计算出曲线上的特定点，并在该点处绘制一个红色的圆圈。

总结

bezierPoint() 函数是 p5.js 中用于计算贝塞尔曲线上特定位置的点坐标的函数。它可以帮助程序员在绘制贝塞尔曲线时确定并操作曲线上的特定点。