p5.js | vertex() Function - GeeksforGeeks

31 May, 2020
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 )
OR
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.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/vertex
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?