p5.js | Función bezierPoint()

La función bezierPoint() en p5.js se usa para evaluar las coordenadas de una curva bezier en el punto dado. Toma las coordenadas de la curva de Bezier para un eje particular y encuentra la coordenada de la curva en el punto «t», que se puede especificar como un parámetro.

La posición completa de un punto en la curva de Bézier se puede encontrar usando la función una vez en las coordenadas x y una vez en las coordenadas y de la curva y luego usándolas juntas.

Sintaxis:

bezierPoint( a, b, c, d, t )

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

a: Es un número que especifica el primer punto de la curva.
b: Es un número que especifica el primer punto de control de la curva.
c: Es un número que especifica el segundo punto de control de la curva.
d: Es un número que especifica el segundo punto de la curva.
t: Es un número entre 0 y 1, que se utiliza como posición entre el inicio y el final de las coordenadas de la curva.

Valor devuelto: Devuelve un número que especifica el valor de la curva Bezier en la posición dada.

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

Ejemplo 1:

function setup() {
  createCanvas(600, 300);
  textSize(18);
  
  bezierPointLocationSlider = createSlider(0, 1, 0, 0.1);
  bezierPointLocationSlider.position(20, 40);
}
  
function draw() {
  background("green");
  fill("black");
  text("Move the slider to change the location of the displayed bezier point", 10, 20);
  
  // Get the required location of bezier
  bezierPointLocationValue = bezierPointLocationSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 140, y: 150 };
  let p3 = { x: 400, y: 150 };
  let p4 = { x: 500, y: 250 };
  
  noFill();
  // Draw bezier using bezier()
  bezier(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  
  // Find the X and Y coordinate using the bezierPoint() function
  let pointX = bezierPoint(p1.x, p2.x, p3.x, p4.x, bezierPointLocationValue);
  let pointY = bezierPoint(p1.y, p2.y, p3.y, p4.y, bezierPointLocationValue);
  fill("red");
  
  // Display it on the sketch
  ellipse(pointX, pointY, 10, 10);
}

Producción:

bezierPoint-currentPoint

Ejemplo 2:

function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  maxPointsSlider = createSlider(2, 20, 10, 1);
  maxPointsSlider.position(20, 40);
}
  
function draw() {
  background("green");
  fill("black");
  text("Move the slider to change the number of intermediate points", 10, 20);
  
  // Get the required location of bezier
  maxPoints = maxPointsSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 140, y: 150 };
  let p3 = { x: 400, y: 150 };
  let p4 = { x: 500, y: 250 };
  
  noFill();
  // Draw bezier using bezier()
  bezier(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  
  for (let i = 0; i <= maxPoints; i++) {
    let step = i / maxPoints;
  
    // Find the X and Y coordinate using the bezierPoint() function
    let pointX = bezierPoint(p1.x, p2.x, p3.x, p4.x, step);
    let pointY = bezierPoint(p1.y, p2.y, p3.y, p4.y, step);
    fill("red");
  
    // Display it on the sketch
    ellipse(pointX, pointY, 8, 8);
  }
}

Producción:

bezierPoint-maxPoints