P5.js | 曲线() 函数

在p5.js中，曲线()函数用于绘制二次和三次曲线。

语法

curve(x1, y1, x2, y2, x3, y3, x4, y4)
curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

• x1 ：第一个点的x坐标
• y1 ：第一个点的y坐标
• x2 ：第二个点的x坐标
• y2 ：第二个点的y坐标
• x3 ：第三个点的x坐标
• y3 ：第三个点的y坐标
• x4 ：第四个点的x坐标
• y4 ：第四个点的y坐标
• z1 ：第一个点的z坐标（第二种语法）
• z2 ：第二个点的z坐标（第二种语法）
• z3 ：第三个点的z坐标（第二种语法）
• z4 ：第四个点的z坐标（第二种语法）

描述

曲线()函数使用四个点来绘制二次或三次曲线。

二次曲线

二次曲线由两个控制点和一个端点组成。第一个点和第三个点是控制点，第二个点是端点。第一个点用来控制Curvature（弯曲度）。

function draw() {
  curve(5, 26, 5, 26, 73, 24, 73, 61);
}

三次曲线

三次曲线由三个控制点和一个端点组成。第一个点和第四个点是端点，中间两个点是控制点。第一个点用来控制Curvature（弯曲度）。

function draw() {
  curve(5, 26, 5, 26, 73, 24, 73, 61);
  curve(5, 26, 73, 24, 73, 61, 15, 65);
}

线性插值

曲线()函数也可以用于线性插值，它可以计算出两点之间的点。使用两个点来调用曲线()函数，第一个点是起始点，第二个点是结束点。

function draw() {
  let from = color(0, 0, 255);
  let to = color(255, 0, 0);
  for (let i = 0; i <= steps; i++) {
    let pct = i / steps;
    let between = lerpColor(from, to, pct);
    fill(between);
    ellipse(i * w, height / 2, w, w);
  }
}

注意：对于曲线()函数，p5.js中默认的曲率设置是Catmull-Rom（样条）曲线。如果需要改变曲率设置，可以使用curveTightness()函数。

参考

• P5.js
• Bezier Curves