p5.js bezierPoint() Function

The bezierPoint() function in p5.js is used to evaluate the coordinates of a bezier curve at the given point. It takes in the coordinates of the bezier curve for a particular axis and finds the coordinate of the curve at point “t”, which can be specified as a parameter.

The complete position of a point in the bezier curve can be found out by finding using the function once on the x-coordinates and once on the y-coordinates of the curve and then using them together.

Syntax:

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

Parameters: This function accepts five parameters as mentioned above and described below:

• a: It is a number that specifies the first point of the curve.
• b: It is a number that specifies the first control point of the curve.
• c: It is a number that specifies the second control point of the curve.
• d: It is a number that specifies the second point of the curve.
• t: It is a number between 0 and 1, which is used as the position between the beginning and ending of the curve coordinates.

Return Value: It returns a number which specifies the value of the Bezier curve at the given position.

The examples below illustrates the bezierPoint() function in p5.js:

Example 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);
}

Output:

Example 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);
  }
}

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/bezierPoint