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

let currMode; 
  
function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  let shapeModes = [LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS]; 
  let index = 0; 
  currMode = shapeModes[index]; 
  
  let helpText = createP("Click on the button to change the beginShape() mode"); 
  helpText.position(20, 0); 
  
  let closeBtn = createButton("Change mode"); 
  closeBtn.position(20, 40); 
  closeBtn.mouseClicked(() => { 
    if (index < shapeModes.length) index++; 
    else index = 0; 
    currMode = shapeModes[index]; 
  }); 
} 
  
function draw() { 
  clear(); 
  
  // Starting the shape using beginShape() 
  beginShape(currMode); 
  
  // Specifying all the vertices 
  vertex(45, 245); 
  vertex(100, 75); 
  vertex(245, 245); 
  vertex(15, 150); 
  vertex(250, 125); 
  
  // Ending the shape using endShape() 
  endShape(); 
  
  // Points for demonstration 
  circle(45, 245, 10); 
  circle(100, 75, 10); 
  circle(245, 245, 10); 
  circle(15, 150, 10); 
  circle(250, 125, 10); 
}

let vertices = []; 
  
function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  text("Click anywhere to place a vertice at that point", 10, 20); 
} 
  
function mouseClicked() { 
  // Update the vertices array with 
  // current mouse position 
  vertices.push({ x:mouseX, y:mouseY }); 
  
  clear(); 
  text("Click anywhere to place a vertice at that point", 10, 20); 
  
  // Start the shape using beginShape() 
  beginShape(); 
  
  // Use the vertices in the array 
  // with the vertex() function 
  for (let i = 0; i < vertices.length; i++) 
    vertex(vertices[i].x, vertices[i].y); 
  
  // End the shape using endShape() 
  endShape(); 
  
  // Draw a circle at the last drawn vertice 
  // for demonstration 
  circle(mouseX, mouseY, 15); 
}