The curvePoint() function in p5.js is used to evaluate the coordinates of a curve at the given point. It takes in the coordinates of the 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 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:
curvePoint( 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 curve value at the given position.
The examples below illustrates the curvePoint() function in p5.js:
Example 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); } |
Output:
Example 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);   } } |
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/curvePoint
