p5.js | función quadraticVertex()

La función quadraticVertex() en p5.js se usa para especificar las coordenadas de los vértices que se usan para dibujar una curva cuadrática de Bézier. Cada llamada a esta función define la posición de un punto 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 cuatro parámetros en modo 2D y seis 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:

quadraticVertex( cx, cy, x3, y3 )

quadraticVertex( cx, cy, cz, x3, y3, z3 )

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

cx: Es un número que especifica la coordenada x del punto de control.
cy: Es un número que especifica la coordenada y del punto de control.
x3: Es un número que especifica la coordenada x del punto de anclaje.
y3: es un número que especifica la coordenada y del punto de anclaje.
cz: Es un número que especifica la coordenada z del punto de control. Se utiliza en el modo WebGL.
z3: Es un número que especifica la coordenada z del punto de anclaje. Se utiliza en el modo WebGL.

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

Ejemplo 1:

function setup() {
  createCanvas(500, 300);
  textSize(16);
}
  
function draw() {
  background("green");
  fill("black");
  text(
    "The bezier below is made using bezierVertex()"+
    " function in Canvas",
    10,
    20
  );
  text("Red fill color is used to denote anchor"+
       " points", 10, 40);
  text("Blue fill color is used to denote control"+
       " points", 10, 60);
  
  // Define the points
  // First Anchor Point
  let p1 = { x: 80, y: 240 };
  
  // First Control Point
  let p2 = { x: 200, y: 100 };
  
  // Second Anchor Point
  let p3 = { x: 300, y: 200 };
  
  // Second Control Point
  let p4 = { x: 400, y: 200 };
  
  // Third Anchor Point
  let p5 = { x: 400, y: 100 };
  
  noFill();
  
  // Start the quadratic bezier
  beginShape();
  
  // Specify the first anchor point
  // using vertex()
  vertex(p1.x, p1.y);
  
  // Use the quadraticVertex() function
  // to define the rest of the points
  quadraticVertex(p2.x, p2.y, p3.x, p3.y);
  quadraticVertex(p4.x, p4.y, p5.x, p5.y);
  endShape();
  
  // Draw circles for demonstration
  fill("red");
  circle(p1.x, p1.y, 10);
  
  fill("blue");
  circle(p2.x, p2.y, 10);
  
  fill("red");
  circle(p3.x, p3.y, 10);
  
  fill("blue");
  circle(p4.x, p4.y, 10);
  
  fill("red");
  circle(p5.x, p5.y, 10);
}

Producción:

quadraticVertex_2d

Ejemplo 2:

let newFont;
  
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(500, 300, WEBGL);
  textFont(newFont, 14);
}
  
function draw() {
  translate(-width / 2, -height / 2);
  
  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: 80, y: 240, z: 10 };
  
  // First Control Point
  let p2 = { x: 250, y: 100, z: 100 };
  
  // Second Anchor Point
  let p3 = { x: 300, y: 200, z: 10 };
  
  // Second Control Point
  let p4 = { x: 300, y: 250, z: 200 };
  
  // Third Anchor Point
  let p5 = { x: 400, y: 100, z: 10 };
  
  // Start the quadratic bezier
  beginShape();
  
  // Specify the first anchor point
  // using vertex()
  vertex(p1.x, p1.y, p1.z);
  
  // Use the quadraticVertex() function
  // to define the rest of the points
  quadraticVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z);
  quadraticVertex(p4.x, p4.y, p4.z, p5.x, p5.y, p5.z);
  endShape();
}

Producción:

quadraticVertex_3d