La función rect() es una función incorporada en p5.js que se usa para dibujar el rectángulo en la pantalla. Un rectángulo contiene cuatro lados y cuatro ángulos. Cada ángulo del rectángulo es de 90 grados. La longitud de los lados opuestos de los rectángulos son iguales.
Sintaxis:
rect( x, y, w, h, tl, tr, br, bl )
o
rect( x, y, w, h, detailX, detailY )
Parámetros: esta función acepta muchos parámetros, como se mencionó anteriormente y se describe a continuación:
- x: se utiliza para establecer la coordenada x del rectángulo.
- y: se utiliza para establecer la coordenada y del rectángulo.
- w: Se utiliza para establecer el ancho del rectángulo.
- h: Se utiliza para establecer la altura del rectángulo.
- tl: es un parámetro opcional y se usa para establecer el radio de la esquina superior izquierda.
- tr: es un parámetro opcional y se usa para establecer el radio de la esquina superior derecha.
- br: es un parámetro opcional y se utiliza para establecer el radio de la esquina inferior derecha.
- bl: es un parámetro opcional y se usa para establecer el radio de la esquina inferior izquierda.
- detailX: Se utiliza para establecer el número de segmento en la dirección x.
- detailY: Se utiliza para establecer el número de segmento en la dirección y.
Ejemplo 1:
javascript
function setup() {
// Create Canvas of given size
createCanvas(400, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a rectangle
rect(50, 50, 300, 200);
}
Producción:
Ejemplo 2:
javascript
function setup() {
// Create Canvas of given size
createCanvas(400, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a rectangle
rect(50, 50, 300, 200, 30);
}
Producción:
Ejemplo 3:
javascript
function setup() {
// Create Canvas of given size
createCanvas(400, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a rectangle
rect(50, 50, 300, 200, 10, 20, 30, 40);
}
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/
Referencia: https://p5js.org/ referencia/#/p5/rect