p5.js | función de line()

La función line() es una función incorporada en p5.js que se usa para dibujar una línea. Para cambiar el color de la línea se usa la función stroke() y para cambiar el ancho de la línea se usa la función strokeWeight().

Sintaxis:

line(x1, y1, x2, y2)

o

line(x1, y1, z1, x2, y2, z2)

Parámetros: esta función acepta seis parámetros, como se mencionó anteriormente y se describe a continuación:

• x1: Este parámetro toma la coordenada x del primer punto.
• y1: Este parámetro toma la coordenada y del primer punto.
• z1: este parámetro toma la coordenada z del primer punto.
• x2: Este parámetro toma la coordenada x del segundo punto.
• y2: este parámetro toma la coordenada y del segundo punto.
• z2: este parámetro toma la coordenada z del segundo punto.

Los siguientes programas ilustran la función line() en P5.js:

Ejemplo 1: Este ejemplo usa la función line() para dibujar una línea sin usar la coordenada z.

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1 = 38, 31; x2, y2 = 300, 20;
    // Use line() function to draw line
    line(38, 31, 30, 200); 
}

Producción:

Ejemplo 2: Este ejemplo usa la función line() para dibujar la línea usando la coordenada z.

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1, z1 = 38, 31, 34; 
    // x2, y2, z2 = 300, 200, 45;
    // Use line() function to draw line
    line(38, 31, 34, 300, 200, 45); 
}

Producción:

Referencia: https://p5js.org/reference/#/p5/line