Píxels: RGB i la quadrícula
Abans de continuar… un repàs del color i els píxels amb
aquesta simulació: 
que explica la quadrícula de píxels
i Pixeldraw per veure el color
COLOR:
L’ordinador entén el color de la manera següent:
AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB
Això significa que cada un dels quatre valors de color (alfa, vermell, verd, blau), es ocupa 8 bits (1 byte) a la memòria.
Això li dóna, de cara a processing un rang de 0 a 255 per cada un dels quatre valors. El valor d’un color, doncs, s’expressa a Processing així:
color(255,0,0) per a un vermell pur, per exemple, o per a un verd amb un alfa (transparència) del 50%: color(0,255,0,127). Si no s’especifica el paràmetre alfa s’entén que el seu valor és màxim, 255, i que per tant no hi ha transparència (la opacitat és total).
Per veure aquests valors, el color picker de la mateixa interfície de Processing o el de Pixeldraw poden ser útils.
Quan un color està en l’escala de grisos (i per tant els valors R,G,B són iguals), es pot expressar amb un sol valor: color(127);
Hi ha vàries maneres d’utilitzar el color. Les que utilitzarem al principi són background(), stroke() i fill(). Dins el parèntesi hi posarem un valor de color per canviar, respectivament, el color de fons de la finestra, el traç en una forma geomètrica, i el color de la forma en si (el que l’omple).
LA QUADRÍCULA:
Hem dit anteriorment que Processing treballa píxel a píxel. És a dir, per a dibuixar amb Processing hem de trenir present que treballem en una quadrícula de píxels. Aquesta quadrícula pot ser de 100×100 –la mida per defecte a p5, la que heu vist amb els exemples de “Hello World!” –, 200×454, 1008×91… o el que es vulgui mentre la memòria RAM de la que disposem ho pugui aguantar.
Per a dibuixar-hi, per exemple, una línia, li haurem de dir de quin punt a quin punt de la quadrícula ha d’anar. Per una esfera, en quin punt comença i quines mide té, etc.
Això ens portarà a uns certs dibuixos que són molt característics d’entorns com Processing (i totalment diferents dels d’entorns com Flash, per exemple).
Si es treballa píxel a píxel, doncs, això vol dir que cada píxel té un lloc a la quadrícula, que s’expressa amb les coordenades X, Y. Cal tenir en compte que el punt 0,0 és la cantonada superior esquerra.
Per entendre-ho ràpidament, podeu mirar la següent simulació, on movent el ratolí veureu les coordenades del píxel on us trobeu.
La seva posició en PixelArray és un concepte més avançat que podeu ignorar per ara.
El que sí que és interessant és utilitzar les tecles ‘n’ i ‘m’ per a veure diferents simulacions de resolució i com creix exponencialment el nombre de píxels a la quadrícula a mesura que aquesta augmenta.
També podeu utilitzar el click del ratolí per intentar dibuixar formes geomètriques amb les diferents resolucions simulades.