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

輸出：

curveVertex_canvas

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

輸出：

curveVertex_webgl

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

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

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

相關用法

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