p5.js | bezierVertex()函数介绍

简介

bezierVertex()是p5.js中的一个函数，它可以用来在2D平面上绘制贝塞尔曲线。

贝塞尔曲线是一种数学曲线，由数学家Pierre Bézier在1962年发明。它通常被用来描述曲线的形状，包括描绘自由曲线的形状和数学方程不适用的任意曲线。

语法

bezierVertex(cx1, cy1, cx2, cy2, x, y)

cx1： 第一个控制点的 X 坐标。 cy1： 第一个控制点的 Y 坐标。 cx2： 第二个控制点的 X 坐标。 cy2： 第二个控制点的 Y 坐标。 x： 结束点的 X 坐标。 y： 结束点的 Y 坐标。

功能

bezierVertex()函数可以用来画出一条贝塞尔曲线。

我们可以用三个点来控制贝塞尔曲线的形状。首先，我们有起点和终点，然后我们再添加两个附加点作为“控制点”，用于控制曲线的弯曲程度。

bezierVertex()就是用来添加控制点和终点，并且在起点与上一个绘制点之间画出一条平滑的贝塞尔曲线。

示例

这里是一个简单的bezierVertex()函数的示例：

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

function draw() {
  background(220);

  noFill();
  strokeWeight(3);
  stroke(0, 0, 255);

  beginShape();
  vertex(50, 50);
  bezierVertex(50, 150, 150, 150, 150, 50);
  bezierVertex(150, -50, 250, -50, 250, 50);
  bezierVertex(250, 150, 350, 150, 350, 50);
  vertex(350, 350);
  endShape();
}

这个示例会在画布上绘制一个由贝塞尔曲线构成的封闭图形。

注意事项

如果你想使用bezierVertex()函数，需要先调用beginShape()函数开始一个新的形状。在所有的bezierVertex()调用结束后，需要使用endShape()函数来结束绘制。

此外，如果你想画出平滑的曲线，你也可以使用curveVertex()函数。curveVertex()函数提供了另一种控制平滑曲线的方法。

结论

bezierVertex()函数是p5.js的一个非常有用的函数，可以用来绘制平滑的贝塞尔曲线。只要理解了它的语法和用法，就可以轻松地使用它来创建复杂的形状和线条。