8. Multimèdia

8.3. Imatges

Una vegada que ja sabem com bregar amb fitxers externs en P5, treballar amb imatges ens resultarà molt senzill. Igual que succeïa amb les tipografies externes, podem enllaçar al nostre sketch imatges que tinguem al nostre propi sistema.

Per carregar imatges des del nostre propi sistema, hem de seguir el mateix procés que en carregar fonts. P5 accepta diferents formats, entre els quals trobem els habituals JPG, PNG, GIF i fins i tot SVG. En el cas de les imatges en PNG, GIF o SVG, també podrem usar imatges que tinguin transparència.

El primer que hem de fer és obtenir la URL de la imatge que vulguem utilitzar, de la mateixa manera que ho vam fer amb la tipografia. Una vegada que la tinguem, la usarem dins del mètode loadImage() per carregar-la al nostre sketch i posteriorment utilitzarem image() per dibuixar-la en el canvas. Amb les imatges ens enfrontem al mateix problema que amb les tipografies o amb qualsevol altre fitxer extern: com que han de ser descarregades pel navegador, hem de posar el codi que les descarrega dins de la funció preload() perquè el programa no s’executi fins que la imatge s’hagi descarregat per complet.

let img;

function preload() {
  img = loadImage("/filemanager/source_repo/ccasadom/croissant.jpg");
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(200);
  image(img, 0, 0);
}

Els paràmetres que passem a image() són, en primer lloc, la imatge que hàgim carregat amb loadImage() i, a continuació, les coordenades x i y on vulguem dibuixar la imatge. Aquesta coordenada serà la cantonada superior esquerra de la imatge. Per defecte, la mida de la imatge serà la seva mida original.

Si volem redimensionar la imatge, ho podem fer afegint uns altres dos paràmetres per establir l’amplària i l’alçària amb la qual volem que es mostri la imatge. Hem de tenir en compte que, d’aquesta manera, podem alterar la ràtio d’aspecte de la imatge, estrenyent-la o allargant-la. Per evitar-ho, podem fer ús de les propietats width i height, que podem extreure de qualsevol imatge per conèixer-ne l’amplària i l’alçària, i després multiplicar aquests valors per un únic valor per assegurar-nos que mantenim les seves proporcions originals.

Atributs de les imatges

Per canviar el mode com es mostren les imatges, podem utilitzar diversos atributs. Podem, com també es pot fer amb cercles, arcs i rectangles, canviar el punt des del qual dibuixem la imatge usant imageMode(), que accepta els paràmetres CORNER (el mode per defecte), CORNERS i CENTER.

També podem canviar el «tint» de la imatge amb el mètode tint(), al qual passem com a paràmetre el color amb el qual volem tintar la imatge. Aquest color pot tenir transparència, per la qual cosa si volem que la nostra imatge tingui transparència, podem usar un tint() amb blanc i l’alpha que vulguem. Per tornar als valors per defecte, podem utilitzar noTint().

Filtres

P5 també ens ofereix una sèrie de filtres que podem aplicar al nostre canvas mitjançant el mètode filter(), que accepta com a primer paràmetre el filtre que volem aplicar i, en funció de quin triem, hi podrem afegir un segon paràmetre per controlar l’efecte. Les opcions de filtres que tenim són: THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE i DILATE. A la referència de filter() es pot trobar què fa cadascun dels filtres i si té un paràmetre opcional per controlar-lo. Alguns d’aquests filtres suposen una considerable càrrega de computació per executar-se en temps real, per la qual cosa és aconsellable que els usem amb moderació. En moltes ocasions, podrem processar la imatge en algun programari de retoc fotogràfic abans de pujar-la al nostre sketch per aconseguir el resultat desitjat. També hem de tenir en compte que aquests filtres s’apliquen a tot el canvas, no només a la imatge en si.

Maneres de fusió

En P5 també trobem diferents maneres de fusió per al nostre canvas, que funcionen de manera molt similar a les maneres de fusió que podem aplicar a les capes de programaris com Photoshop o Gimp. Per canviar la manera de fusió utilitzarem el mètode blendMode(), que accepta com a paràmetre les opcions següents: BLEND (per defecte), ADD, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, REPLACE, REMOVE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN i SUBTRACT. Tots funcionen de la mateixa manera que els seus homònims en altres programaris. De la mateixa manera que els filtres, s’apliquen a tot el canvas.

Informació de color

Les imatges que carreguem als nostres sketches ens poden servir per a altres propòsits diferents al de simplement dibuixar-les en el nostre canvas. També ens poden servir per extreure la informació de color i utilitzar-la de manera creativa. El mètode get() aplicat a qualsevol imatge ens permet establir quin color té la imatge a les coordenades (x, y) que li passem com a paràmetre.

A la figura 112 carreguem una imatge i al draw() utilitzem get() per extreure la informació de color d’aquesta en la posició actual del ratolí, amb la finalitat d’utilitzar-la com a farciment d’un cercle que dibuixarem al centre de la pantalla.

No cal que dibuixem la imatge, n’hi ha prou que la carreguem a l’sketch. Vegem-ne un parell d’exemples en els quals fem ús d’aquesta informació de manera creativa incorporant conceptes que ja hem vist anteriorment a l’assignatura: bucles for, aleatorietat i interacció.

Utilitzant bucles podríem crear el nostre propi efecte per «pixelar» una imatge. Primer, haurem de crear un parell de bucles imbricats que recorrin el canvas en horitzontal i vertical. A continuació, a cada pas del bucle extraiem la informació de color del punt concret en el qual ens trobem i, finalment, utilitzem aquesta informació de color per dibuixar un quadrat farcit del color que hi ha en aquesta coordenada.

A l’exemple de la figura 113 també s’hi ha afegit un element interactiu: el desplaçament en x i y a cada pas del bucle i la mida del quadrat que dibuixem ve determinat per la posició a l’eix x del ratolí. D’aquesta manera, creem un efecte interactiu en el qual els píxels seran més gran o més petits segons la posició del nostre ratolí.

Vegem un altre exemple de l’ús de la informació de color, però aquesta vegada usant l’aleatorietat.

En aquest exemple hem carregat una imatge i a cada frame estem triant un punt a l’atzar de la imatge per extreure la informació de color i dibuixar un cercle en aquesta posició amb la finalitat de crear un efecte puntillista. Per donar-li més organicitat al procés de dibuixar, s’ha establert una mida aleatòria de cada cercle. Segons vagi passant el temps i es vagin acumulant els cercles, la imatge s’anirà conformant.

Seguint en la línia de l’efecte puntillista, podríem crear un «pinzell» que ens permetés anar revelant la imatge segons el moviment del ratolí:

En aquesta ocasió, el que fem és que a cada frame creem, a través d’un bucle for, cinc cercles en posicions aleatòries pròximes a la posició del nostre ratolí (utilitzant mouseX i mouseY als quals sumem un valor aleatori que, en aquest cas, té un rang que va de –20 a 20). A continuació, extraiem la informació de color d’aquests cinc punts i dibuixem cercles de mides aleatòries en aquestes coordenades.