p5.js curve() function Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report The curve() function is used to draws a curved line between two points given in the middle four parameters on the screen. The first two and last two parameters are used as a control point. Syntax: curve( x1, y1, x2, y2, x3, y3, x4, y4 ) or curve( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 ) Parameters: Value Description x1 It is used to hold the x-coordinate of beginning control point. y1 It is used to hold the y-coordinate of beginning control point. z1 It is used to hold the z-coordinate of beginning control point. x2 It is used to hold the x-coordinate of first point. y2 It is used to hold the y-coordinate of first point. z2 It is used to hold the z-coordinate of first point. x3 It is used to hold the x-coordinate for second point. y3 It is used to hold the y-coordinate for second point. z3 It is used to hold the z-coordinate for second point. x4 It is used to hold the x-coordinate of ending control point. y4 It is used to hold the y-coordinate of ending control point. z4 It is used to hold the z-coordinate of ending control point. Below examples illustrate the curve() function in CSS: Example 1: html function setup() { // Create canvas of given size createCanvas(500, 300); // Set the background of canvas background('green'); } function draw() { // Use noFill() function to not fill the color noFill(); // Set the stroke color stroke('white'); // Use curve() function to create curve curve(50, 50, 400, 50, 50, 250, 50, 50); // Set the stroke color stroke('blue'); // Use curve() function to create curve curve(400, 50, 50, 250, 50, 50, 50, 50); } Output: Example 2: html function setup() { // Create canvas of given size createCanvas(500, 300); // Set the background of canvas background('green'); } function draw() { // Use noFill() function to not fill the color noFill(); // Set the stroke color stroke('white'); // Use curve() function to create curve curve(50, 50, 50, 200, 50, 10, 50, 250, 150, 50, 50, 50); // Set the stroke color stroke('blue'); // Use curve() function to create curve curve(50, 200, 450, 50, 250, 100, 350, 250, 250, 450, 450, 400); } Output: Online editor: https://editor.p5js.org/ Environment Setup: https://www.geeksforgeeks.org/javascript/p5-js-soundfile-object-installation-and-methods/ Comment More infoAdvertise with us Next Article p5.js curveVertex() Function J jit_t Follow Improve Article Tags : JavaScript Web Technologies JavaScript-p5.js Similar Reads p5.js curvePoint() Function 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 curv 3 min read p5.js circle() Function The circle() function is used to draw the circle on the screen. A circle is the closed shape. A circle can be created by using the center and radius of the circle. Syntax: circle(x, y, d) Parameters: x: It is used to set the x-coordinate of the center of the circle. y: It is used to set the y-coordi 1 min read p5.js cursor() Function The cursor() function in p5.js is used to set the cursor to a predefined symbol or an image or it makes visible if already hidden. To set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. The values for parameters x and y must be less than the dimensions of the image. Syntax: cu 1 min read p5.js curveVertex() Function The curveVertex() function in p5.js is used to specify the vertex coordinates used to draw a curve. It expects 2 parameters for 2D curves and 3 parameters for 3D curves. Both the 2D and 3D modes can be used for drawing in the WebGL mode. This function can only be used between the beginShape() and en 3 min read p5.js curveDetail() Function The curveDetail() function is used to set the resolution at which the curve will display. This function is useful when using the WEBGL renderer as the default canvas renderer does not use this information. Syntax: curveDetail( resolution ) Parameters: This function accepts single parameter resolutio 1 min read p5.js erase() Function The erase() function in p5.js is used to subtract all the drawings that would be done after the use of this function. The subtracted drawing area would reveal the webpage below the canvas. The effect of this function can be canceled by using the noErase() function. It does not affect the drawings do 2 min read Like