p5.js | función vértice() – Barcelona Geeks

La función vertex() en p5.js se usa para especificar las coordenadas de los vértices usados para dibujar una forma. Solo se puede usar con las funciones beginShape() y endShape() para crear varias formas y curvas como puntos, líneas, triángulos, cuadrantes y polígonos.

Sintaxis:

vertex( x, y )

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

Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación:

x: Es un número que especifica la coordenada x del vértice.
y: Es un número que especifica la coordenada y del vértice.
z: Es un número que especifica la coordenada z del vértice.
u: Es un número que especifica la coordenada u de la textura del vértice. Es un parámetro opcional.
v: Es un número que especifica la coordenada v de la textura del vértice. Es un parámetro opcional.

Los siguientes ejemplos ilustran la función vertex() en p5.js:

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

Producción:

vertex-changeModes

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

Producción:

vertex-placePoint