p5.js | función puntocurva()

La función curvePoint() en p5.js se usa para evaluar las coordenadas de una curva en el punto dado. Toma las coordenadas de la curva 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 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:

curvePoint( 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 en la posición dada.

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

Ejemplo 1:

function setup() {
  createCanvas(600, 300);
  textSize(18);
  
  curvePointLocationSlider = createSlider(0, 1, 0, 0.1);
  curvePointLocationSlider.position(20, 40);
}
  
function draw() {
  background("green");
  fill("black");
  text(
    "Move the slider to change the location of the displayed curve point",
    10, 20
  );
  
  // Get the required location of curve
  curvePointLocationValue = curvePointLocationSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 140, y: 150 };
  let p3 = { x: 400, y: 150 };
  let p4 = { x: 350, y: 250 };
  
  // Draw curve using curveVertex()
  beginShape();
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(p3.x, p3.y);
  curveVertex(p4.x, p4.y);
  endShape();
  
  // Find the X and Y coordinate using the curvePoint() function
  let pointX = curvePoint(p1.x, p2.x, p3.x, p4.x, curvePointLocationValue);
  let pointY = curvePoint(p1.y, p2.y, p3.y, p4.y, curvePointLocationValue);
  fill("orange");
  
  // Display a circle at that point
  circle(pointX, pointY, 10);
}

Producción:

curvePoint-currentPoint

Ejemplo 2:

function setup() {
  createCanvas(600, 300);
  textSize(18);
  
  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 curve
  maxPoints = maxPointsSlider.value();
  
  let p1 = { x: 50, y: 250 };
  let p2 = { x: 100, y: 150 };
  let p3 = { x: 500, y: 150 };
  let p4 = { x: 350, y: 250 };
  
  // Draw curve using curveVertex()
  beginShape();
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(p3.x, p3.y);
  curveVertex(p4.x, p4.y);
  endShape();
  
  for (let i = 0; i <= maxPoints; i++) {
    // Calculate step using the maximum number of points
    let step = i / maxPoints;
  
    // Find the X and Y coordinate using the curvePoint() function
    let pointX = curvePoint(p1.x, p2.x, p3.x, p4.x, step);
    let pointY = curvePoint(p1.y, p2.y, p3.y, p4.y, step);
    fill("orange");
  
    // Display a circle at that point
    circle(pointX, pointY, 10);
  }
}

Producción:

curvePoint-maxPoints