2. Primers passos: formes i colors

2.9. Color

Fins ara, totes les formes que hem dibuixat tenen un farciment de color blanc i un traç negre. En P5 podem canviar els colors tant del farciment com del traç usant els mètodes fill() i stroke(). Disposem de múltiples maneres per especificar els colors i usarem l’una o l’altra depenent de les nostres necessitats.

Escala de grisos

Per definir un color en escala de grisos, establim el seu valor dins de fill() o stroke() amb un nombre entre 0 i 255. El 0 equival a negre i el 255 a blanc; tots els valors intermedis són els grisos que podem aconseguir (un total de 256 valors, la qual cosa equival a un moda de color de 8 bits 2⁸ = 256).

En els exemples anteriors ja hem vist un cas en el qual hem utilitzat aquest mode de color. El mètode background() espera dins dels seus parèntesis un valor per pintar el fons del nostre sketch. En els exemples hem usat un valor de background(200), un gris clar.

Color RGB

Si en lloc de passar un únic valor a fill() o stroke() n’hi passem tres, estarem aconseguint colors en mode RGB. El primer valor serà la quantitat de vermell (R), el segon la quantitat de verd (G) i el tercer la quantitat de blau (B). Aquests valors també van de 0 a 255.

A més del mode de color RGB, P5 ens ofereix altres maneres de definir els colors als nostres sketches. Visiteu la refèrencia de colorMode() per aprendre, per exemple, a utilitzar el mode HSB (to, saturació, brillantor).

Transparència

P5 també ens permet aplicar transparència als nostres colors; si agreguem un paràmetre addicional tant a fill() com a stroke(), estarem definint el nivell de transparència del color que estiguem utilitzant. El valor de transparència també és de 8 bits, per la qual cosa podrem introduir valors de 0 a 255, on 0 és completament transparent i 255, completament opac.

Tingueu en compte que en executar-se el draw() de manera indefinida, si utilitzem un color amb transparència, aquesta s’anirà acumulant en dibuixar-se per sobre de si mateixa contínuament. Per evitar-ho, podem posar el dibuix del nostre background() al principi del draw() en lloc d’en el setup(). D’aquesta manera, a cada bucle del draw() estarem «netejant» el fons i evitant que la transparència dels colors s’acumuli.