p5.js | bezierVertex() Función

La función bezierVertex() en p5.js se usa para especificar las coordenadas de vértice que se usan para dibujar una curva bezier. Cada llamada a esta función define la posición de dos puntos de control y un punto de anclaje de la curva Bezier. Esta función solo se puede usar entre beginShape() y endShape() . Debe ir precedido de una llamada a la función vertex() para establecer el primer punto de anclaje, cuando se llama con beginShape() por primera vez.

La función espera 6 parámetros en modo 2D y 9 parámetros (que incluyen las coordenadas z) en modo 3D. Tanto el modo 2D como el 3D se pueden usar para dibujar en el modo WebGL.

Sintaxis:

bezierVertex( x2, y2, x3, y3, x4, y4 )

bezierVertex( x2, y2, z2, x3, y3, z3, x4, y4, z4 )

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

x2: Es un número que especifica la coordenada x del primer punto de control.
y2: Es un número que especifica la coordenada y del primer punto de control.
x3: Es un número que especifica la coordenada x del segundo punto de control.
y3: Es un número que especifica la coordenada y del segundo punto de control.
x4: Es un número que especifica la coordenada x del punto de anclaje.
y4: Es un número que especifica la coordenada y del punto de anclaje.
z2: Es un número que especifica la coordenada z del primer punto de control. Se utiliza para el modo WebGL.
z3: Es un número que especifica la coordenada z del segundo punto de control. Se utiliza para el modo WebGL.
z4: Es un número que especifica la coordenada z del punto de anclaje. Se utiliza para el modo WebGL.

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

Ejemplo 1:

function setup() {
  createCanvas(500, 200);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text("The bezier below is made using bezierVertex() function in Canvas", 10, 20);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: 50, y: 150 };
  
  // First Control Point
  let p2 = { x: 140, y: 50 };
  
  // Second Control Point
  let p3 = { x: 400, y: 50 };
  
  // Anchor Point
  let p4 = { x: 400, y: 150 };
  
  noFill();
    
  // Start the bezier
  beginShape();
  
  // Specify the first anchor point
  vertex(p1.x, p1.y);
  
  // Specify the other points for bezierVertex()
  bezierVertex(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  endShape();
}

Producción:

bezierVertex_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 bezier below is made using bezierVertex() function in WebGL", -245, -75);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: -200, y: -75, z: 0 };
  
  // First Control Point
  let p2 = { x: 200, y: 150, z: 10 };
  
  // Second Control Point
  let p3 = { x: 100, y: -10, z: 10 };
  
  // Anchor Point
  let p4 = { x: -175, y: 75, z: 10 };
  
  noFill();
  
  // Start the bezier
  beginShape();
  
  // Specify the first anchor point
  vertex(p1.x, p1.y, p1.z);
  
  // Specify the other points for bezierVertex()
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p4.x, p4.y, p4.z);
  endShape();
}

Producción:

bezierVertex_webgl