p5.js vertex() Function

0 0 2 minutes read

The vertex() function in p5.js is used to specify the coordinates of the vertices used to draw a shape. It can only be used with the beginShape() and endShape() functions to make various shapes and curves like points, lines, triangles, quads and polygons.

Syntax:

vertex( x, y )

vertex( x, y, z, [u], [v] )

Parameters: This function accepts five parameters as mentioned above and described below:

x: It is a number that specifies the x-coordinate of the vertex.
y: It is a number that specifies the y-coordinate of the vertex.
z: It is a number that specifies the z-coordinate of the vertex.
u: It is a number that specifies the u-coordinate of the texture of the vertex. It is an optional parameter.
v: It is a number that specifies the v-coordinate of the texture of the vertex. It is an optional parameter.

The examples below illustrates the vertex() function in p5.js:

Example 1:

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

Output:

Example 2:

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

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.zambiatek.com/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/vertex

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!