p5.js | función cuádruple()

La función quad() es una función incorporada en p5.js que se usa para dibujar un cuadrilátero. Un cuadrilátero es un polígono de cuatro lados. Su función crea una forma similar a un rectángulo, pero los ángulos entre dos bordes no están restringidos a 90 grados.

Sintaxis:

quad(x1, y1, x2, y2, x3, y3, x4, y4)

o

quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Parámetros: Esta función acepta doce 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.
• x3: Este parámetro toma la coordenada x del tercer punto.
• y3: Este parámetro toma la coordenada y del tercer punto.
• z3: Este parámetro toma la coordenada z del tercer punto.
• x4: Este parámetro toma la coordenada z del cuarto punto.
• y4: Este parámetro toma la coordenada z del cuarto punto.
• z4: Este parámetro toma la coordenada z del cuarto punto.

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

Ejemplo 1: Este ejemplo usa la función quad() para crear un polígono sin usar la coordenada z.

function setup() {
      
    // Create canvas of given size
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    noStroke();
      
    // Set the fill color
    fill('green');
      
    // x1, y1 = 38, 31; x2, y2 = 300, 20;
    // x3, y3 = 100, 63; x4, y4 = 130, 250
    quad(38, 31, 300, 20, 100, 63, 130, 250); 
}

Producción:

Ejemplo 2: Este ejemplo usa la función quad() para crear un polígono con la coordenada z.

function setup() {
      
    // Create canvas of given size
    createCanvas(400, 400);
}
   
function draw() {
  
    // Set the background color
    background(99);
      
    noStroke();
      
    // Set the filled color
    fill('pink');
      
    // x1, y1, z1 = 38, 131, 100;
    // x2, y2, z2 = 320, 100, 63; 
    // x3, y3, z3 = 130, 150, 134; 
    // x4, y4, z4 = 155, 66, 88;
    quad(38, 131, 100, 320, 100, 63,
        130, 150, 134, 155, 66, 88); 
}

Producción:

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