8. Multimèdia

8.2. Text

Per dibuixar text en P5 disposem del mètode text(). El funcionament és senzill: com a primer paràmetre especifiquem el text que s’ha de dibuixar i com a segon i tercer paràmetres li indiquem les coordenades x i y en les quals volem que es dibuixi el text:

// text(texto, x, y);
text("Lorem ipsum dolor sit amet", 100, 200);

Hem de tenir en compte que el text que vulguem dibuixar l’hem de posar sempre entre cometes. També podem crear una variable per emmagatzemar el text que vulguem mostrar i passar-la posteriorment a text() com a paràmetre:

let texto = "Lorem ipsum dolor sit amet";
text(texto, 100, 200);

Vegem-ne ara un petit exemple en acció:

Podem observar que el text s’ha dibuixat a partir de la coordenada (100, 200), aquest és el seu comportament per defecte.

Atributs del text

Per al text, igual que per a les figures, podem definir diversos atributs. Alguns ja els coneixem, com stroke(), strokeWeight() i fill(), que determinen respectivament el color, el gruix del traç i el color del farciment, però per al text tenim atributs específics nous que ens permeten controlar la seva manera de dibuixar-se.

Per controlar la mida amb la qual es dibuixarà el text usarem textSize(). A aquest mètode li passarem com a paràmetre la mida en píxels que volem que tingui el nostre text.

Per a l’alineació tant horitzontal com vertical del text comptem amb el mètode textAlign(), al qual li hem de passar com a primer paràmetre el valor horitzontal d’alineació i com a segon paràmetre opcional, el valor vertical. Els valors que accepta per a l’alineació horitzontal són LEFT, RIGHT i CENTER, mentre que per a l’alineació vertical podem usar TOP, CENTER, BASELINE i BOTTOM. El resultat obtingut amb cadascuna de les alineacions és bastant intuïtiu, però podem comparar l’efecte de cadascun dels valors visitant la referència de textAlign().

Fonts del sistema

Si volem utilitzar una tipografia diferent de la que P5 ens ofereix per defecte, podem usar el mètode textFont(). Com a paràmetre li hem d’indicar el nom de la font que vulguem usar. Podem utilitzar qualsevol de les fonts que tinguem en el sistema, encara que hem de tenir en compte que, si el nostre sketch és al web, és possible que no tots els que accedeixin a l’sketch tinguin aquesta font en el seu sistema. Per evitar aquest problema, podem usar alguna de les denominades web safe fonts (fonts segures per al web), un conjunt de fonts que hi ha a la majoria dels sistemes, com Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New o Brush Script MT.

Per canviar l’estil d’aquestes fonts del sistema podem usar textStyle(). El mètode textStyle() accepta com a paràmetres els estils següents: NORMAL, ITALIC, BOLD i BOLDITALIC.

Fonts externes

Si volem carregar una font que no estigui al sistema, podem utilitzar l’espai d’emmagatzematge que CodeLab ens ofereix per pujar-la des del nostre ordinador.

Ens podem descarregar fonts del servidor de Google Fonts o d’altres serveis. A Google Fonts només hem de seleccionar la font que ens agradi, clicar-la i prémer el botó Download family.

Això ens descarregarà un fitxer .zip amb tots els fitxers .ttf que tingui la família. En aquest exemple ens descarregarem la família Ubuntu (ens descarrega un fitxer .zip amb tota la família) i usarem la tipografia Ubuntu-Regular (l’haurem d’extreure de l’fitxer comprimit).

Una vegada que tenim seleccionada la tipografia que usarem, la pujarem al servidor de CodeLab. Per a això, cliquem Afegir fitxers i ens apareixerà un quadre de diàleg com aquest:

Cliquem Afegir fitxers, busquem el fitxer Ubuntu-Regular.ttf i fem clic a Començar la pujada. Després, anem a la mediateca i allà hi haurà el nostre fitxer.

Fent un clic amb el botó dret del ratolí ens apareixerà un menú:

Seleccionem Mostrar URL i copiem la URL.

Un cop que hem pujat el fitxer de la font i la seva URL, per carregar la font des del nostre programa crearem una variable per emmagatzemar la font i a continuació usarem el mètode loadFont() per assignar la font a la variable, passant-li com a paràmetre el nom del fitxer de la font, inclosa l’extensió.

Quan carreguem fitxers externs, com és el cas del fitxer de la font, ens podem trobar amb el problema següent: fins ara assumim que els nostres programes s’executen en l’ordre de dalt a baix, i no s’executa la línia següent fins que l’actual s’hagi acabat d’executar. Això com a norma general és així, però en alguns casos, com és el de descarregar fitxers externs, el nostre navegador comença a descarregar el fitxer, però immediatament continua executant les línies de codi següents, això és el que es denomina asincronia: el programa pot estar executant diverses tasques en paral·lel. El procés de descarregar el fitxer de la font pot trigar una mica, prou perquè quan vulguem dibuixar text amb aquesta encara no s’hagi descarregat del tot, la qual cosa ens donarà un error o directament no es dibuixarà res. Per solucionar aquest problema, podem utilitzar la funció de P5 preload(), que força el programa al fet que tots els fitxers estiguin carregats abans de començar. Dins del preload() serà on carregarem i assignarem la font a la nostra variable.