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