p5.js | curvePoint()函数

简介

curvePoint()函数是p5.js图形库中的一个函数，用于获取曲线上的某个点的坐标。

语法

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

参数

• a, b, c, d：曲线的控制点，分别表示曲线的起点、第一个控制点、第二个控制点和终点。
• t：一个0到1的值，用于沿着曲线从起点到终点的位置。

示例

以下示例展示了如何使用curvePoint()函数来获取曲线上的一个点的坐标：

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

function draw() {
  background(220);

  let a = createVector(100, 100);
  let b = createVector(100, 300);
  let c = createVector(300, 300);
  let d = createVector(300, 100);

  stroke(0);
  noFill();

  // 绘制曲线
  curve(a.x, a.y, b.x, b.y, c.x, c.y, d.x, d.y);

  // 获取曲线上的点坐标
  let t = mouseX / width;
  let point = curvePoint(a.x, a.y, b.x, b.y, c.x, c.y, d.x, d.y, t);

  // 在曲线上的点处绘制一个红色的圆点
  fill(255, 0, 0);
  ellipse(point.x, point.y, 10, 10);
}

解释

上述示例中，我们首先创建了一个400x400像素大小的画布。然后，我们定义了四个createVector()函数来表示曲线的起点、第一个控制点、第二个控制点和终点。接下来，在draw()函数中，我们设置了画笔的颜色为黑色，并禁用了填充。

然后，我们使用curve()函数绘制了曲线，curve()函数接受八个参数，即曲线的起点、第一个控制点、第二个控制点和终点的坐标。

接着，我们使用mouseX除以画布的宽度来计算一个0到1的值，这将作为参数t传递给curvePoint()函数。curvePoint()函数将返回曲线上的坐标，我们使用这个坐标来绘制一个红色的圆点。

总结

curvePoint()函数是p5.js中一个非常实用的函数，它允许您在曲线上获取特定位置的坐标。您可以使用这个函数来创建各种有趣的图形效果和交互式应用程序。