TUTORIAL DE PROCESSING || Secció 2: Funcions gràfiques

1. "Hello World!" gràfic
2. La quadrícula de píxels
3. Color
4. Funcions gràfiques I
5. Funcions gràfiques II

1.- "Hello World!" gràfic

Per començar a veure de què va tot això, i ja que Processing és un entorn escencialment gràfic, faremn un altre tipus de "hello world!" fent el primer dibuix. Per començar, una línia:

Ara sí que on cal mirar és a la finestra gris. Si cambiem el codi pel que aquest

i comparem els resultats, podem començar a fer hipòtesis sobre com està responent el programa a les nostres instruccions en cada cas.

2.-La quadrícula

Processing, i java, traballen píxel a píxel. El que es coneix com a imatge bitmap (o mapa de bits). És a dir, per dibuixar amb Processing cal tenir en compte sempre que treballem sobre una quadrícula de píxels, que pot ser de 100x100 –la mida per defecte que hem vist en els exemples del “Hello World!”– , 200×454, 1008×91… o el que es vulgui mentre la memòria RAM de la màquina on treballem 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).

Cada píxel, doncs, té el seu lloc a la quadrícula. Aquest lloc, aquesta posició, s'expressa mitjançant les 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.

El fet que l'ordinador intenti dibuixar línies rectes sobre una quadrícula és el que produeix, en alguns casos, el que es coneix com a efecte Moiré:

3.-Color

Cuando traballem amb Processing, l’ordinador entén el color de la manera següent:

AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

tot i que nosaltres, en realitat, hi treballarem així:

RRRRRRRRGGGGGGGGBBBBBBBBAAAAAAAA

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 (és a dir, com a paràmetres) hi posarem un valor de color (en forma d'un, dos, tres o quatre números de 0 a 255), per canviar, respectivament, el color de fons de la finestra, el traç en una forma geomètrica, o el color d'emplenament.

Per exemple:

4.-Funcions de dibuix I

Tornem al “hello world” gràfic:

Escribiu

a la interfície de Processing i cliqueu Run.

Veureu una línia negra a la finestra gris que Processing ha obert: Una línia que va del punt 20,20, al 80,80 en una quadrícula de 100×100 píxels.

Si escriviu

veureu, efectivament, que es crea un rectangule (cuadrat, de fet, en aquest cas) a partir del punt 20,20 i de 60 píxels d'alt i 60 d'ample.

I aixi successivament amb les formes geomètriques següents:

line() p.e.: line(30, 20, 85, 75);

rect() p.e.: rect(30, 20, 55, 55);

ellipse() p.e.: ellipse(56, 46, 55, 55);

triangle() p.e.: triangle(30, 75, 58, 20, 86, 75);

Recordeu: EN JAVA, CAL ACABAR CADA LÍNIA DE CODI AMB UN PUNT I COMA. Això vol dir que cal “;” al final de cada instrucció, no necessàriament de cada lína tal i com l’escribim a la interfície de Processing. Però cal tenir això en compte sempre ja que és un error molt comú oblidar-se’n algun.

Per a combinar això amb les funcions de color, cal invocar la funció ABANS de dibuixar. És fàcil entrendre-ho com si es tractés d'agafar un llapis de tal color o tal altre. Primer l'agafes, i tot allò que dibuixis a partir d'aquell moment, si no canvies de llapis, serà d'aquell color. Així, aquest codi

dibuixarà un rectangle verd amb el contorn vermell. Aquest colors es mantindran a la paleta fins que invoquem de nou les funcions FILL i STROKE. BACKGROUND, per la seva banda, omplirà tota la finestrs del color especificat (com a color sòlid ja que no admet matisos d'opacitat). Per tant caldrà sempre invocar aquesta darrera funció abans de dibuixar res més.

5.- Funcions de dibuix II

size();

Canvia la mida de la finestra, que per defecte és de 100×100.

size() admet dos o tres paràmetres, tot i que per ara ens interessen els dos primers. Aquests es referiran a la mida de la finestra en píxels. (El tercer, que per ara podeu ignorar, es refereix al motor de “rendering”, de dibuix).

Per exemple:

És important saber que size() s'ha d'invocar sempre al principi de tot, abans de començar a dibuixar (o, pels iniciats, just a l'inici del setup()). Un cop processing s'està executant, la mida de la finestra no es pot canviar. Invocar size() de nou farà que s'aturi el programa o, si més no, generarà problemes amb el codi i el dibuix.

background();

Un altre comandament útil pels dibuixos, i sempre, és background(), que li diu a Processing quin ha de ser el color de fons d’una finestra.

Aquesta instrucció l’haurem de situar just darrere de size() o, en tot cas, abans de fer cap dibuix ja que de fet el que fa és tapar tot el que hi ha a la finestra amb el color especificat. Per defecte, el gris que hem vist en els primers exemples.

fill();

Com el seu nom indica, aquesta instrucció especifica el color amb el que s’omplirà una forma geomètrica tancada. Els paràmetres (valors entre parèntesi) especifiquen el color i poden ser un, dos, tres o quatre.

Fill afectarà tots els dibuixos que vinguin DESPRÉS en l’ordre del codi, no només el següent, i no afecta als anteriors.

stroke();

El mateix que fill() però afecta el contorn, el traç de les formes tancades i les línies.

Stroke afectarà tots els dibuixos que vinguin DESPRÉS en l’ordre del codi, no només el següent, i no afecta als anteriors.

strokeWeight();

Rep un sol paràmetre. Especifica el gruix del traç en píxels. Per defecte és 1.

noFill();

Especifica que a partir d'aquest punt no s'emplenin les formes geomètriques que es dibuixin.
No admet paràmetres. És a dir, no cap posar res entre els parèntesis. Només s'invoca la funció.

noStroke();

Especifica que a partir d'aquest punt no es dibuixi el traç de les formes geomètriques que es dibuixin.
No admet paràmetres. És a dir, no cap posar res entre els parèntesis. Només s'invoca la funció.

6.- Exemples de codi de dibuix

Vist tot això, ja tenim elements per fer un codi una mica més complex. Copieu els exemples següents a la interfícies de Processing i intenteu seguir la lògica del codi i preveure què passarà abans de clicar RUN.

Ejemplo 1:

Ejemplo 2:

Ejemplo 3:

---------------------------------------------------------------------------------------