p5.js | quadraticVertex()函数

p5.js 中的quadraticVertex()函数用于指定用于绘制二次贝塞尔曲线的顶点坐标。每次调用此函数都会定义贝塞尔曲线的一个控制点和一个锚点的位置。

此函数只能在beginShape()和endShape()之间使用。第一次使用beginShape()调用时，必须以调用vertex()函数来设置第一个锚点。

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

句法：

quadraticVertex( cx, cy, x3, y3 )

或者

quadraticVertex( cx, cy, cz, x3, y3, z3 )

参数：此函数接受上面提到的六个参数，如下所述：

• cx：它是一个数字，指定控制点的 x 坐标。
• cy：它是一个数字，指定控制点的 y 坐标。
• x3：它是一个数字，指定锚点的 x 坐标。
• y3：它是一个数字，指定锚点的 y 坐标。
• cz：它是一个数字，指定控制点的 z 坐标。它用于 WebGL 模式。
• z3：它是一个数字，指定锚点的 z 坐标。它用于 WebGL 模式。

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

示例 1：

function setup() {
  createCanvas(500, 300);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text(
    "The bezier below is made using bezierVertex()"+
    " function in Canvas",
    10,
    20
  );
  text("Red fill color is used to denote anchor"+
       " points", 10, 40);
  text("Blue fill color is used to denote control"+
       " points", 10, 60);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: 80, y: 240 };
  
  // First Control Point
  let p2 = { x: 200, y: 100 };
  
  // Second Anchor Point
  let p3 = { x: 300, y: 200 };
  
  // Second Control Point
  let p4 = { x: 400, y: 200 };
  
  // Third Anchor Point
  let p5 = { x: 400, y: 100 };
  
  noFill();
  
  // Start the quadratic bezier
  beginShape();
  
  // Specify the first anchor point
  // using vertex()
  vertex(p1.x, p1.y);
  
  // Use the quadraticVertex() function
  // to define the rest of the points
  quadraticVertex(p2.x, p2.y, p3.x, p3.y);
  quadraticVertex(p4.x, p4.y, p5.x, p5.y);
  endShape();
  
  // Draw circles for demonstration
  fill("red");
  circle(p1.x, p1.y, 10);
  
  fill("blue");
  circle(p2.x, p2.y, 10);
  
  fill("red");
  circle(p3.x, p3.y, 10);
  
  fill("blue");
  circle(p4.x, p4.y, 10);
  
  fill("red");
  circle(p5.x, p5.y, 10);
}

输出：

示例 2：

let newFont;
  
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(500, 300, WEBGL);
  textFont(newFont, 14);
}
  
function draw() {
  translate(-width / 2, -height / 2);
  
  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: 80, y: 240, z: 10 };
  
  // First Control Point
  let p2 = { x: 250, y: 100, z: 100 };
  
  // Second Anchor Point
  let p3 = { x: 300, y: 200, z: 10 };
  
  // Second Control Point
  let p4 = { x: 300, y: 250, z: 200 };
  
  // Third Anchor Point
  let p5 = { x: 400, y: 100, z: 10 };
  
  // Start the quadratic bezier
  beginShape();
  
  // Specify the first anchor point
  // using vertex()
  vertex(p1.x, p1.y, p1.z);
  
  // Use the quadraticVertex() function
  // to define the rest of the points
  quadraticVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z);
  quadraticVertex(p4.x, p4.y, p4.z, p5.x, p5.y, p5.z);
  endShape();
}

输出：

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

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

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