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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

bezierPoint-currentPoint

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

bezierPoint-maxPoints

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.