8. Multimedia

8.2. Texto

Para dibujar texto en P5 disponemos del método text(). Su funcionamiento es sencillo: como primer parámetro especificamos el texto que dibujar y como segundo y tercer parámetro le indicamos las coordenadas x e y en las que queremos que se dibuje el texto:

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

Debemos tener en cuenta que el texto que queramos dibujar lo debemos poner siempre entre comillas. También podemos crear una variable para almacenar el texto que queramos mostrar y pasársela posteriormente a text() como parámetro:

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

Veamos ahora un pequeño ejemplo en acción:

Podemos observar que el texto se ha dibujado a partir de la coordenada (100, 200), este es su comportamiento por defecto.

Atributos del texto

Para el texto, igual que para las figuras, podemos definir varios atributos. Algunos ya los conocemos, como stroke(), strokeWeight() y fill(), que determinan respectivamente el color, el grosor del trazo y el color de relleno, pero para el texto tenemos nuevos atributos específicos que nos permiten controlar su manera de dibujarse.

Para controlar el tamaño con el que se dibujará el texto usaremos textSize(). A este método le pasaremos como parámetro el tamaño en píxeles que queremos que tenga nuestro texto.

Para la alineación tanto horizontal como vertical del texto contamos con el método textAlign(), al que debemos pasarle como primer parámetro el valor horizontal de alineación y como segundo parámetro opcional, el valor vertical. Los valores que acepta para la alineación horizontal son LEFT, RIGHT y CENTER, mientras que para la alineación vertical podemos usar TOP, CENTER, BASELINE y BOTTOM. El resultado obtenido con cada una de las alineaciones es bastante intuitivo, pero podemos comparar el efecto de cada uno de los valores visitando la referencia de textAlign().

Fuentes del sistema

Si queremos utilizar una tipografía distinta a la que P5 nos ofrece por defecto, podemos usar el método textFont(). Como parámetro le debemos indicar el nombre de la fuente que queramos usar. Podemos utilizar cualquiera de las fuentes que tengamos en el sistema, aunque debemos tener en cuenta que si nuestro sketch va a estar en la web, es posible que no todos los que accedan al sketch tengan esa fuente en su sistema. Para evitar este problema, podemos usar alguna de las denominadas web safe fonts (fuentes seguras para la web), un conjunto de fuentes que están presentes en la mayoría de los sistemas, como Arial, Verdana, Helvética, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New o Brush Script MT.

Para cambiar el estilo de estas fuentes del sistema podemos usar textStyle(). El método textStyle() acepta como parámetros los siguientes estilos: NORMAL, ITALIC, BOLD y BOLDITALIC.

Fuentes externas

Si queremos cargar una fuente que no esté en el sistema, podemos utilizar el espacio de almacenamiento que CodeLab nos ofrece para subirla desde nuestro ordenador.

Podemos descargarnos fuentes del servidor de Google Fonts o de otros servicios. En Google Fonts tan solo tenemos que seleccionar la fuente que nos guste, hacer un clic encima de esta y apretar el botón Download family.

Esto nos descargará un archivo .zip con todos los archivos .ttf que tenga la familia. En este ejemplo vamos a descargarnos la familia Ubuntu (nos descarga un archivo .zip con toda la familia) y usaremos la tipografía Ubuntu-Regular (tendremos que extraerla del archivo comprimido).

Una vez que tenemos seleccionada la tipografía que usaremos, vamos a subirla al servidor de CodeLab. Para ello, clicamos en Añadir archivos y nos aparecerá un cuadro de diálogo como este:

Clicamos en Añadir archivos, buscamos el archivo Ubuntu-Regular.ttf y hacemos clic en Empezar la subida. Después, vamos a la mediateca y allí aparecerá nuestro archivo.

Haciendo un clic con el botón derecho del ratón nos aparecerá un menú:

Seleccionamos Mostrar URL y copiamos la URL.

Una vez que tenemos subido el archivo de la fuente y su URL, para cargar la fuente desde nuestro programa crearemos una variable para almacenar la fuente y a continuación usaremos el método loadFont() para asignar la fuente a la variable, pasándole como parámetro el nombre del archivo de la fuente, incluida su extensión.

Cuando cargamos archivos externos, como es el caso del archivo de la fuente, nos podemos encontrar con el siguiente problema: hasta ahora asumimos que nuestros programas se ejecutan en orden de arriba abajo, y no se ejecuta la línea siguiente hasta que la actual se haya terminado de ejecutar. Esto como norma general es así, pero en algunos casos, como es el de descargar archivos externos, nuestro navegador empieza a descargar el archivo, pero inmediatamente sigue ejecutando las siguientes líneas de código, esto es lo que se denomina asincronía: el programa puede estar ejecutando varias tareas en paralelo. El proceso de descargar el archivo de la fuente puede tardar un poco, lo suficiente para que cuando queramos dibujar texto con esta todavía no se haya descargado del todo, lo que nos dará un error o directamente no se dibujará nada. Para solucionar este problema, podemos utilizar la función de P5 preload(), que fuerza al programa a que todos los archivos estén cargados antes de empezar. Dentro del preload() será donde carguemos y asignemos la fuente en nuestra variable.