p5.js curvePoint() Function

Last Updated : 15 Jul, 2025

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:

javascript

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: curvePoint-currentPoint

Example 2:

javascript

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