p5.js | 贝塞尔()函数

在p5.js中，bezier()函数可用于绘制贝塞尔曲线。贝塞尔曲线是一种平滑曲线，由起点、终点和两个或多个控制点组成。

语法

bezier(x1, y1, x2, y2, x3, y3, x4, y4)

其中，x1和y1为起点的坐标，x4和y4为终点的坐标，x2和y2以及x3和y3为控制点的坐标。

示例

以下是一个示例，演示了如何使用bezier()函数绘制一个简单的贝塞尔曲线。

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

function draw() {
  background(220);
  stroke(0);
  noFill();
  
  // 绘制贝塞尔曲线
  bezier(50, 100, 100, 50, 300, 300, 350, 250);
  
  // 绘制控制点
  fill(255, 0, 0);
  ellipse(50, 100, 8, 8);
  ellipse(100, 50, 8, 8);
  ellipse(300, 300, 8, 8);
  ellipse(350, 250, 8, 8);
  
  // 添加标签
  text("起点", 50, 90);
  text("终点", 350, 260);
  text("控制点1", 100, 40);
  text("控制点2", 300, 290);
}

在这个示例中，我们绘制了一条起点为（50，100），终点为（350，250），控制点1为（100，50），控制点2为（300，300）的贝塞尔曲线。

变形

bezier()函数还有一种变形，允许您使用相对坐标而不是绝对坐标：

bezier(x2, y2, x3, y3, x4, y4, x5, y5, ...)

在这种情况下，第一个参数（x1）和第二个参数（y1）将被视为0，0。第二个贝塞尔点的x和y坐标被视为绝对位置，而剩余的点均表示为相对于上一个点的偏移量。

结论

bezier()函数可以方便地画出贝塞尔曲线，使得绘制自然曲线十分容易。还可以通过使用变形来控制贝塞尔曲线的形状和大小。