p5.js | bezierVertex()函数

p5.js 中的bezierVertex()函数用于指定用于绘制贝塞尔曲线的顶点坐标。每次调用此函数都会定义贝塞尔曲线的两个控制点和一个锚点的位置。此函数只能在beginShape()和endShape()之间使用。当第一次使用beginShape()调用时，必须以调用vertex()函数来设置第一个锚点。

该函数在 2D 模式下需要 6 个参数，在 3D 模式下需要 9 个参数（包括 z 坐标）。 2D 和 3D 模式都可用于在 WebGL 模式下进行绘图。

句法：

bezierVertex( x2, y2, x3, y3, x4, y4 )

或者

bezierVertex( x2, y2, z2, x3, y3, z3, x4, y4, z4 )

参数：此函数接受上述九个参数，如下所述：

• x2：它是一个数字，指定第一个控制点的 x 坐标。
• y2：它是一个数字，指定第一个控制点的 y 坐标。
• x3：它是一个数字，指定第二个控制点的 x 坐标。
• y3：它是一个数字，指定第二个控制点的 y 坐标。
• x4：它是一个数字，指定锚点的 x 坐标。
• y4：它是一个数字，指定锚点的 y 坐标。
• z2：它是一个数字，指定第一个控制点的 z 坐标。它用于 WebGL 模式。
• z3：它是一个数字，指定第二个控制点的 z 坐标。它用于 WebGL 模式。
• z4：它是一个数字，指定锚点的 z 坐标。它用于 WebGL 模式。

以下示例说明了 p5.js 中的bezierVertex()函数：

示例 1：

function setup() {
  createCanvas(500, 200);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text("The bezier below is made using bezierVertex() function in Canvas", 10, 20);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: 50, y: 150 };
  
  // First Control Point
  let p2 = { x: 140, y: 50 };
  
  // Second Control Point
  let p3 = { x: 400, y: 50 };
  
  // Anchor Point
  let p4 = { x: 400, y: 150 };
  
  noFill();
    
  // Start the bezier
  beginShape();
  
  // Specify the first anchor point
  vertex(p1.x, p1.y);
  
  // Specify the other points for bezierVertex()
  bezierVertex(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  endShape();
}

输出：

示例 2：

let newFont;
  
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(500, 200, WEBGL);
  textFont(newFont, 14);
}
  
function draw() {
  background("green");
  fill("black");
  text("The bezier below is made using bezierVertex() function in WebGL", -245, -75);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: -200, y: -75, z: 0 };
  
  // First Control Point
  let p2 = { x: 200, y: 150, z: 10 };
  
  // Second Control Point
  let p3 = { x: 100, y: -10, z: 10 };
  
  // Anchor Point
  let p4 = { x: -175, y: 75, z: 10 };
  
  noFill();
  
  // Start the bezier
  beginShape();
  
  // Specify the first anchor point
  vertex(p1.x, p1.y, p1.z);
  
  // Specify the other points for bezierVertex()
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p4.x, p4.y, p4.z);
  endShape();
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/bezierVertex