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:
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/
