5. Condicionals

5.7. Bucles i condicionals

Passem ara a combinar les dues estructures de control que hem après en aquest tema i a l’anterior: la iteració i les estructures condicionals.

Igual que vam fer en el tema passat amb l’ús de l’aleatorietat per fer que els nostres patrons fossin més orgànics, amb l’ús de les estructures condicionals obrim un món de noves possibilitats que poden fer els nostres dissenys molt més interessants.

Partirem d’un exemple senzill i implementarem els nous coneixements que hem adquirit:

En aquest exemple estem creant un patró de cercles mitjançant bucles for imbricats. La novetat la tenim en el fet que dins del bucle hem inclòs una estructura condicional que només dibuixa el cercle que toca quan es compleix que random() (recordem que si no li passem cap paràmetre, retorna valors decimals entre 0 i 1) sigui més gran que la variable prob, a la qual al principi de l’sketch hem assignat el valor 0,5. És com si cada vegada que toqués dibuixar un cercle tiréssim una moneda a l’aire: si surt cara dibuixem el cercle, si surt creu no el dibuixem.

Podríem canviar el valor de la variable prob perquè la probabilitat de dibuixar o no el cercle canviï; vegem com queda el dibuix amb diferents valors:

Ara mateix tenim posat un noLoop() que impedeix que el patró es redibuixi a cada frame, però podríem posar un temporitzador perquè el patró es redibuixi quan transcorri un segon:

Hem encapsulat tot el codi que dibuixa el patró en la funció drawPattern() i l’estem invocant únicament quan frameCount % 60 == 0, és a dir, cada vegada que passi un segon. Ja podem eliminar el noLoop() i el nostre patró es redibuixarà cada vegada que transcorri un segon.

Podríem fer també que la probabilitat canviés cada vegada que el patró es dibuixi. Per a això, li podem passar un valor aleatori entre 0 i 1 a la funció drawPattern() i utilitzar aquest paràmetre dins de la funció:

Veiem ara que, com que a la definició de la funció drawPattern() li hem afegit el paràmetre prob, que dins de la funció utilitzem en el condicional per comparar-ho amb el valor de coin, quan invoquem la funció cada segon, li passem a prob un valor aleatori entre 0 i 1. D’aquesta manera, cada segon la probabilitat de dibuixar els cercles canvia i tenim patrons de diferent densitat.

El pas següent que podem dur a terme és dibuixar una figura diferent quan no es dibuixi un cercle. D’aquesta manera, podem donar més riquesa al nostre patró. Per a això, podem afegir un else al nostre if perquè quan no entri al if dibuixi la figura nova. En canviar la probabilitat cada segon, tindrem més o menys prevalença d’una o altra figura.

S’ha afegit a continuació del if, al else, el dibujo de una línea en diagonael dibuix d’una línia en diagonal creuant el punt (i, j). Per conservar l’aparença dels cercles, també hem mogut el noStroke() amb la finalitat que afecti únicament el dibuix dels cercles.

Ara ja tenim un sistema generatiu que ens crea patrons aleatoris amb combinacions pràcticament infinites (amb un patró de 20 × 20 figures són un total de 2⁴⁰⁰ combinacions, o el que és el mateix:

255822500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 combinaciones posibles).

Finalment, ens podria resultar útil tenir una manera d’anar desant aquestes diferents combinacions. Podrien ser, per exemple, variacions d’un disseny per a diferents aplicacions: cartell imprès, full de mà, publicació en xarxes socials, bàner web, etc.

Per poder desar el resultat dels nostres sketches de P5 podem usar el mètode save(), que ens permet emmagatzemar el nostre canvas com una imatge PNG o JPG de la manera següent:

if (frameCount % 60 == 0){
    drawPattern(random());
    save(“myPattern.png”);
}

D’aquesta manera, cada vegada que dibuixem el patró estarem desant-lo en el nostre disc dur. És probable que el navegador web mostri un advertiment dient que el lloc web està intentant desar molts fitxers. En aquest cas, com que els desem cada segon no hauria de resultar un problema, però hem d’anar amb compte quan usem el mètode save(), ja que, si ho posem directament en el draw(), estarem intentant desar 60 imatges per segon des del navegador i és molt probable que es bloquegi.