6.6. Patró interactiu
Posem ara en pràctica tot el que hem après fins ara i integrem l’ús de variables, funcions, bucles for, aleatorietat, estructures condicionals i interacció en un mateix sketch. Vegem alguns dels possibles resultats del nostre codi:
Font: elaboració pròpia.
Els nostres programes comencen a tenir un nivell de complexitat que fan aconsellable que, a l’hora de plantejar-los, dividim l’objectiu al qual volem arribar en parts més petites que siguem capaços de controlar sense problema per després integrar aquestes parts en un tot. Per a la creació d’un patró com el de la figura anterior necessitarem el següent:
- Creació d’un patró de figures mitjançant bucles imbricats.
- Càlcul de la mida de cada figura mitjançant la distància de la figura al ratolí.
- Canvi entre cercles o quadrats mitjançant interacció amb el teclat.
- Canvi de color aleatori de fons mitjançant interacció amb el teclat.
En principi, res al que no ens hàgim enfrontat anteriorment, però farem bé d’anar pas a pas assegurant-nos que el codi s’executa sense errors i que fa el que volem en lloc de mirar d’escriure d’una sola vegada tot el codi per després trobar-nos amb errors que ens costarà identificar.
En el codi que hi ha a continuació s’ha destacat amb diferents colors els blocs principals que configuren el patró interactiu:
Font: elaboració pròpia.
De color vermell, tenim el codi que mitjançant bucles for imbricats crea l’estructura del patró. Creem un bucle per a les columnes i un altre per a les files, totes dues desplaçant-se pel canvas a raó d’una separació de 50 px que hem definit amb la variable set.
De color taronja, el càlcul que es fa de la mida de les figures depenent de la seva distància al ratolí. Per a això, primer utilitzem el mètode dist() per calcular la distància entre les coordenades x i y del ratolí (mouseX i mouseY) i cada punt del nostre patró (i i j). A continuació, utilitzem el mètode map() per delimitar aquesta distància a un rang (entre 0 i maxSize) més útil a l’hora de dibuixar les figures.
De color verd, tenim el codi responsable de canviar el dibuix de cercles per quadrats. S’utilitza una variable booleana drawCircle, que inverteix el seu valor en prémer una tecla (quan keyPressed() s’invoca) i mitjançant una estructura condicional dins dels bucles imbricats es comprova si dibuixem cercles o quadrats.
Finalment, de color morat, tenim el codi que canvia el color de fons de manera aleatòria. Per a això, en lloc d’utilitzar tres variables diferents per canviar aleatòriament els valors RGB del color, hem utilitzat un tipus de variable especial que emmagatzema informació de color i que és pròpia de P5: color. La declarem al principi del codi com a bgColor, en el setup() li donem un valor inicial i, cada vegada que premem una tecla, canviem el seu valor aleatòriament utilitzant random().