La función square() es una función incorporada en p5.js que se usa para dibujar el cuadrado en la pantalla. Un cuadrado contiene cuatro lados iguales y cuatro ángulos de 90 grados cada uno. Es el caso especial de un rectángulo donde el ancho y la altura son iguales.
Sintaxis:
square( x, y, s, tl, tr, br, bl )
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 cuadrado.
- y: Se utiliza para establecer la coordenada y del cuadrado.
- s: Se utiliza para establecer el tamaño del lado del cuadrado.
- 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.
Ejemplo 1:
function setup() {
// Create Canvas of given size
createCanvas(300, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a square
square(50, 50, 200);
}
Producción:
Ejemplo 2:
function setup() {
// Create Canvas of given size
createCanvas(300, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a square
square(50, 50, 200, 20);
}
Producción:
Ejemplo 3:
function setup() {
// Create Canvas of given size
createCanvas(300, 300);
}
function draw() {
background(220);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a square
square(50, 50, 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/reference/#/p5/square