La función fill() se utiliza para rellenar el color de las formas. Esta función es compatible con todos los tipos de objetos de color. Por ejemplo, color RGB, RGBA, Hex CSS y todas las strings de color con nombre. El objeto de color también se puede configurar como string en términos de color RGB, RGBA, Hex CSS o string de color con nombre.
Sintaxis:
fill( v1, v2, v3, alpha )
o
fill( value )
o
fill( gray, alpha )
o
fill( values )
o
fill( color )
Parámetros:
- v1: se utiliza para establecer el valor de rojo o matiz en relación con el rango de color actual.
- v2: se utiliza para establecer el valor de verde o saturación en relación con el rango de color actual.
- v3: se utiliza para establecer el valor de azul o brillo en relación con el rango de color actual.
- alfa: Se utiliza para establecer la transparencia del dibujo.
- valor: se utiliza para establecer el valor de la string de color.
- gris: Se utiliza para establecer el valor de gris.
- valores: Es una array que contiene el valor rojo, verde, azul y alfa.
- color: Se utiliza para establecer el color del trazo.
Los siguientes ejemplos ilustran la función fill() en p5.js:
Ejemplo 1:
function setup() {
// Create Canvas of given size
createCanvas(400, 300);
}
function draw() {
// Set the background color
background(220);
// Use fill() function to fill color
fill('green')
// Draw a line
rect(50, 50, 150, 150);
// Use noFill() function
noFill();
// Draw a line
rect(100, 100, 150, 150);
}
Producción:
Ejemplo 2:
function setup() {
// Create Canvas of given size
createCanvas(400, 300);
}
function draw() {
// Set the background color
background(220);
// Use noFill() function
noFill();
// Draw a circle
circle(140, 100, 150);
// Use fill() function to fill color
fill('green');
// Draw a crrcle
circle(240, 100, 150);
}
Producción:
Referencia: https://p5js.org/reference/#/p5/fill