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); 
}

輸出：

quadraticVertex_2d

範例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(); 
}

輸出：

quadraticVertex_3d

在線編輯： https://editor.p5js.org/

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

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

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | quadraticVertex() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。