p5.js | curve() function

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 )

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:

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:

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/p5-js-soundfile-object-installation-and-methods/

My Personal Notes

Recommended Posts: