p5.js | curveVertex()函数

p5.js 中的curveVertex()函数用于指定用于绘制曲线的顶点坐标。它需要 2D 曲线的 2 个参数和 3D 曲线的 3 个参数。 2D 和 3D 模式都可用于在 WebGL 模式下进行绘图。此函数只能在beginShape()和endShape()之间使用。

第一个和最后一个顶点用于引导曲线的开始和结束。在给定的第二点和第三点之间绘制一条曲线至少需要四个点。额外的顶点将用于绘制它们之间的曲线。

句法：

curveVertex( x, y )

或者

curveVertex( x, y, [z] )

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

• x：它是一个数字，指定顶点的 x 坐标。
• y：它是一个数字，指定顶点的 y 坐标。
• z：它是一个数字，指定顶点的 z 坐标。它是一个可选参数。

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

示例 1：

function setup() {
  createCanvas(500, 300);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text("The curve below is made using curveVertex() function in Canvas", 10, 20);
  
  // Define the vertex points
  let p1 = { x: 150, y: 250 };
  let p2 = { x: 100, y: 100 };
  let p3 = { x: 400, y: 100 };
  let p4 = { x: 350, y: 250 };
  
  noFill();
  
  // Start the curve
  beginShape();
  
  // Specify other points in curveVertex()
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(p3.x, p3.y);
  curveVertex(p4.x, p4.y);
  endShape();
  
  // Draw circles for demonstration
  circle(p1.x, p1.y, 10);
  circle(p2.x, p2.y, 10);
  circle(p3.x, p3.y, 10);
  circle(p4.x, p4.y, 10);
}

输出：

示例 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 curve below is made using curveVertex() function in WebGL", -245, -75);
  
  // Define the vertex points
  let p1 = { x: -200, y: 175, z: 0 };
  let p2 = { x: -200, y: 25, z: 0 };
  let p3 = { x: 150, y: 25, z: 0 };
  let p4 = { x: 275, y: 175, z: 0 };
  
  noFill();
  
  // Start the curve
  beginShape();
  
  // Specify the points of the vertex
  curveVertex(p1.x, p1.y, p1.z);
  curveVertex(p2.x, p2.y, p2.z);
  curveVertex(p3.x, p3.y, p3.z);
  curveVertex(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/curveVertex