2. Primeros pasos: formas y colores

2.9. Color

Hasta ahora, todas las formas que hemos dibujado tienen un relleno de color blanco y un trazo negro. En P5 podemos cambiar los colores tanto del relleno como del trazo usando los métodos fill() y stroke(). Disponemos de múltiples maneras para especificar los colores y usaremos una u otra dependiendo de nuestras necesidades.

Escala de grises

Para definir un color en escala de grises, establecemos su valor dentro de fill() o stroke() con un número entre 0 y 255. El 0 equivale a negro y el 255 a blanco; todos los valores intermedios son los grises que podemos conseguir (un total de 256 valores, lo que equivale a un modo de color de 8 bits 2⁸ = 256).

En los anteriores ejemplos ya hemos visto un caso en el que hemos utilizado este modo de color. El método background() espera dentro de sus paréntesis un valor para pintar el fondo de nuestro sketch. En los ejemplos hemos usado un valor de background(200), un gris claro.

Color RGB

Si en lugar de pasar un único valor a fill() o stroke() le pasamos tres, estaremos consiguiendo colores en modo RGB. El primer valor será la cantidad de rojo (R), el segundo la cantidad de verde (G) y el tercero la cantidad de azul (B). Estos valores también van de 0 a 255.

Además del modo de color RGB, P5 nos ofrece otros modos de definir los colores en nuestros sketches. Visitad la referencia de colorMode() para aprender, por ejemplo, a utilizar el modo HSB (tono, saturación, brillo).

Transparencia

P5 también nos permite aplicar transparencia a nuestros colores; si agregamos un parámetro adicional tanto a fill() como a stroke(), estaremos definiendo el nivel de transparencia del color que estemos utilizando. El valor de transparencia también es de 8 bits, por lo que podremos introducir valores de 0 a 255, donde 0 es completamente transparente y 255, completamente opaco.

Tened en cuenta que al ejecutarse el draw() de manera indefinida, si utilizamos un color con transparencia, esta se irá acumulando al dibujarse encima de sí misma continuamente. Para evitarlo, podemos poner el dibujo de nuestro background() al principio del draw() en lugar de en el setup(). De esta manera, en cada bucle del draw() estaremos «limpiando» el fondo y evitando que la transparencia de los colores se acumule.