La función curve() se usa para dibujar una línea curva entre dos puntos dados en los cuatro parámetros del medio en la pantalla. Los dos primeros y los dos últimos parámetros se utilizan como punto de control.
Sintaxis:
curve( x1, y1, x2, y2, x3, y3, x4, y4 )
o
curve( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 )
Parámetros:
| Valor | Descripción |
|---|---|
| x1 | Se utiliza para mantener la coordenada x del punto de control inicial. |
| y1 | Se utiliza para mantener la coordenada y del punto de control inicial. |
| z1 | Se utiliza para mantener la coordenada z del punto de control inicial. |
| x2 | Se utiliza para contener la coordenada x del primer punto. |
| y2 | Se utiliza para contener la coordenada y del primer punto. |
| z2 | Se utiliza para mantener la coordenada z del primer punto. |
| x3 | Se utiliza para mantener la coordenada x del segundo punto. |
| y3 | Se utiliza para mantener la coordenada y del segundo punto. |
| z3 | Se utiliza para mantener la coordenada z del segundo punto. |
| x4 | Se utiliza para mantener la coordenada x del punto de control final. |
| y4 | Se utiliza para mantener la coordenada y del punto de control final. |
| z4 | Se utiliza para mantener la coordenada z del punto de control final. |
Los siguientes ejemplos ilustran la función curve() en CSS:
Ejemplo 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);
}
Producción:
Ejemplo 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);
}
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/