Preenchimento
O preenchimento é a cor aplicada ao interior das formas geométricas. No p5.js, ele é definido com o comando fill(), que passa a valer para todas as formas desenhadas depois dele, até que uma nova cor seja definida ou o preenchimento seja desativado.
O comando fill() aceita diferentes formas de chamada: fill(v1, v2, v3, [alpha]) para valores RGB, fill(gray, [alpha]) para um único valor de cinza, ou fill(color) para uma variável de cor criada com color(). Por padrão, o p5.js trabalha no modo RGB, com valores de 0 a 255 para cada canal.
Estrutura básica
fill(v1, v2, v3, [alpha]);
Exemplo
Para um exemplo de como utilizar esse comando, teste o Código e veja as formas preenchidas com cores diferentes.
function setup() {
createCanvas(800,600);
noStroke();
fill(255,0,0);
ellipse(150,300,150,150);
fill(0,150,80);
ellipse(400,300,150,150);
fill(30,80,200);
ellipse(650,300,150,150);
}
fill() precisa ser chamado antes da forma que ele deve colorir, já que o p5.js aplica o último valor definido no momento em que a forma é desenhada. Para remover o preenchimento e deixar apenas o contorno visível, use noFill().Transparência
Um quarto parâmetro opcional, o canal alpha, controla a transparência do preenchimento, também na faixa de 0 (totalmente transparente) a 255 (totalmente opaco). Sobrepor formas com transparência é uma forma simples de criar efeitos de mistura de cor.
function setup() {
createCanvas(800,600);
noStroke();
fill(255,0,0,150);
ellipse(350,280,300,300);
fill(0,150,80,150);
ellipse(450,280,300,300);
fill(30,80,200,150);
ellipse(400,380,300,300);
}
Experimente usar o comando colorMode() para trabalhar em HSB em vez de RGB, o que facilita criar variações de matiz mantendo saturação e brilho constantes. O preenchimento também pode receber uma variável criada com color(), o que é útil para reaproveitar a mesma cor em várias formas ou interpolar cores com lerpColor(). Mais detalhes e exemplos podem ser encontrados na referência do p5.js.