p5.js beginContour()用法及代碼示例

p5.js中的beginContour()函數用於創建其他形狀的負形，即，它可以用於刪除具有給定頂點的形狀的一部分。此函數開始記錄必須去除的形狀。它與endContour()函數一起使用，該函數可停止記錄頂點。

內部形狀的頂點必須在與外部形狀相反的方向上定義。如果外部形狀具有按順時針順序定義的頂點，則內部形狀必須沿逆時針方向定義。

該函數隻能在beginShape()或endShape()函數內使用。 translate()，rotate()和scale()之類的轉換不適用於形狀和輪廓。

用法:

beginContour()

參數：此函數不接受任何參數。

以下程序說明了p5.js中的beginContour()函數：

範例1：

function setup() { 
  createCanvas(400, 300); 
  textSize(16); 
} 
  
function draw() { 
  clear(); 
  fill("black"); 
  text("The inside of the letter is cut"+ 
       " out using a countour", 10, 20); 
  fill("yellow"); 
  
  // Starting the shape using beginShape() 
  beginShape(); 
  
  // Specifying all the vertices 
  // of the exterior shape 
  vertex(50, 50); 
  vertex(200, 50); 
  vertex(200, 200); 
  vertex(50, 200); 
  
  // Starting a contour 
  beginContour(); 
  
  // Specifying all the vertices 
  // of the interior shape 
  // in counter-clockwise order 
  vertex(100, 175); 
  vertex(175, 175); 
  vertex(175, 75); 
  vertex(100, 75); 
  
  // Ending the contour 
  endContour(); 
  
  // Ending the shape 
  endShape(CLOSE); 
  
  // Draw Circles for demonstration 
  // Red ones for exterior shape 
  fill("red"); 
  circle(50, 50, 10); 
  circle(200, 50, 10); 
  circle(200, 200, 10); 
  circle(50, 200, 10); 
  
  fill("blue"); 
  // Blue ones for interior shape 
  circle(100, 175, 10); 
  circle(175, 175, 10); 
  circle(175, 75, 10); 
  circle(100, 75, 10); 
}

輸出：

beginContour-with-circles

範例2：

function setup() { 
  createCanvas(400, 300); 
  textSize(16); 
} 
  
function draw() { 
  clear(); 
  background("green"); 
  text("The inside of the letter is cut out"+ 
       " using a countour", 10, 20); 
  
  // Starting the shape using beginShape() 
  beginShape(); 
  
  // Specifying all the vertices 
  // of the exterior shape 
  vertex(50, 250); 
  vertex(50, 50); 
  vertex(175, 50); 
  vertex(175, 150); 
  vertex(90, 150); 
  vertex(90, 250); 
  
  // Starting a contour 
  beginContour(); 
  
  // Specifying all the vertices 
  // of the interior shape 
  // in counter-clockwise order 
  vertex(90, 120); 
  vertex(140, 120); 
  vertex(140, 75); 
  vertex(90, 75); 
  
  // Ending the contour 
  endContour(); 
  
  // Ending the shape 
  endShape(CLOSE); 
}

輸出：
beginContour-letter-P

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

相關用法

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