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

let currMode; 
  
function setup() { 
  createCanvas(400, 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 shape drawing mode. 
    The red circles represent the vertices of the shape` 
  ); 
  helpText.position(20, 0); 
  
  let closeBtn = createButton("Change mode"); 
  closeBtn.position(20, 60); 
  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(145, 245); 
  vertex(50, 105); 
  vertex(25, 235); 
  vertex(115, 120); 
  vertex(250, 125); 
  
  // Ending the shape using endShape() 
  endShape(); 
  
  // Points for demonstration 
  fill("red"); 
  circle(145, 245, 10); 
  circle(50, 105, 10); 
  circle(25, 235, 10); 
  circle(115, 120, 10); 
  circle(250, 125, 10); 
  noFill(); 
}

let vertices = []; 
  
function setup() { 
  createCanvas(400, 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(); 
  fill("black"); 
  text("Click anywhere to place a vertice "+ 
       "at that point", 10, 20); 
  
  noFill(); 
  
  // Draw shape using the current vertices array 
  beginShape(); 
  for (let i = 0; i < vertices.length; i++) 
    vertex(vertices[i].x, vertices[i].y); 
  endShape(CLOSE); 
  
  fill("red"); 
  // Draw a circle at all the vertices 
  for (let i = 0; i < vertices.length; i++) 
    circle(vertices[i].x, vertices[i].y, 15); 
}