p5.js | Función Vérticecurva()

La función curveVertex() en p5.js se usa para especificar las coordenadas de los vértices que se usan para dibujar una curva. Espera 2 parámetros para curvas 2D y 3 parámetros para curvas 3D. Tanto el modo 2D como el 3D se pueden usar para dibujar en el modo WebGL. Esta función solo se puede usar entre beginShape() y endShape() .

Los vértices primero y último se utilizan para guiar el principio y el final de una curva. Se requiere un mínimo de cuatro puntos para dibujar una curva entre el segundo y el tercer punto dados. Se usarían vértices adicionales para dibujar la curva entre ellos.

Sintaxis:

curveVertex( x, y )

curveVertex( x, y, [z] )

Parámetros: esta función acepta tres 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. Es un parámetro opcional.

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

Ejemplo 1:

function setup() {
  createCanvas(500, 300);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text("The curve below is made using curveVertex() function in Canvas", 10, 20);
  
  // Define the vertex points
  let p1 = { x: 150, y: 250 };
  let p2 = { x: 100, y: 100 };
  let p3 = { x: 400, y: 100 };
  let p4 = { x: 350, y: 250 };
  
  noFill();
  
  // Start the curve
  beginShape();
  
  // Specify other points in curveVertex()
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(p3.x, p3.y);
  curveVertex(p4.x, p4.y);
  endShape();
  
  // Draw circles for demonstration
  circle(p1.x, p1.y, 10);
  circle(p2.x, p2.y, 10);
  circle(p3.x, p3.y, 10);
  circle(p4.x, p4.y, 10);
}

Producción:

curveVertex_canvas

Ejemplo 2:

let newFont;
  
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(500, 200, WEBGL);
  textFont(newFont, 14);
}
  
function draw() {
  background("green");
  fill("black");
  text("The curve below is made using curveVertex() function in WebGL", -245, -75);
  
  // Define the vertex points
  let p1 = { x: -200, y: 175, z: 0 };
  let p2 = { x: -200, y: 25, z: 0 };
  let p3 = { x: 150, y: 25, z: 0 };
  let p4 = { x: 275, y: 175, z: 0 };
  
  noFill();
  
  // Start the curve
  beginShape();
  
  // Specify the points of the vertex
  curveVertex(p1.x, p1.y, p1.z);
  curveVertex(p2.x, p2.y, p2.z);
  curveVertex(p3.x, p3.y, p3.z);
  curveVertex(p4.x, p4.y, p4.z);
  endShape();
}

Producción:

curveVertex_webgl