{"id":434,"date":"2022-10-06T11:43:49","date_gmt":"2022-10-06T09:43:49","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=434"},"modified":"2022-11-18T15:15:28","modified_gmt":"2022-11-18T13:15:28","slug":"8-2-texto","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/8-2-texto\/","title":{"rendered":"8.2. Texto"},"content":{"rendered":"

Para dibujar texto en P5 disponemos del m\u00e9todo text()<\/span>. Su funcionamiento es sencillo: como primer par\u00e1metro especificamos el texto que dibujar y como segundo y tercer par\u00e1metro le indicamos las coordenadas x<\/em> e y<\/em> en las que queremos que se dibuje el texto:<\/p>\n

\/\/ text(texto, x, y);\r\ntext(\"Lorem ipsum dolor sit amet\", 100, 200);<\/pre>\n
Debemos tener en cuenta que el texto que queramos dibujar lo debemos poner siempre entre comillas. Tambi\u00e9n podemos crear una variable para almacenar el texto que queramos mostrar y pas\u00e1rsela posteriormente a text()<\/span> como par\u00e1metro:<\/p>\n
let texto = \"Lorem ipsum dolor sit amet\";\r\ntext(texto, 100, 200);<\/pre>\n
Veamos ahora un peque\u00f1o ejemplo en acci\u00f3n:<\/p>\n
\"\"
Figura 99. Dibujando texto en P5
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Podemos observar que el texto se ha dibujado a partir de la coordenada (100, 200), este es su comportamiento por defecto.<\/p>\n
\"\"
Figura 100. Coordenadas del texto respecto a su l\u00ednea base
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Atributos del texto<\/h3>\n
Para el texto, igual que para las figuras, podemos definir varios atributos. Algunos ya los conocemos, como stroke()<\/span>, strokeWeight()<\/span> y fill()<\/span>, que determinan respectivamente el color, el grosor del trazo y el color de relleno, pero para el texto tenemos nuevos atributos espec\u00edficos que nos permiten controlar su manera de dibujarse.<\/p>\n
Para controlar el tama\u00f1o con el que se dibujar\u00e1 el texto usaremos textSize()<\/span>. A este m\u00e9todo le pasaremos como par\u00e1metro el tama\u00f1o en p\u00edxeles que queremos que tenga nuestro texto.<\/p>\n
Para la alineaci\u00f3n tanto horizontal como vertical del texto contamos con el m\u00e9todo textAlign()<\/span>, al que debemos pasarle como primer par\u00e1metro el valor horizontal de alineaci\u00f3n y como segundo par\u00e1metro opcional, el valor vertical. Los valores que acepta para la alineaci\u00f3n horizontal son LEFT<\/span>, RIGHT<\/span> y CENTER<\/span>, mientras que para la alineaci\u00f3n vertical podemos usar TOP<\/span>, CENTER<\/span>, BASELINE<\/span> y BOTTOM<\/span>. 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()<\/span><\/a>.<\/p>\n
Fuentes del sistema<\/h3>\n
Si queremos utilizar una tipograf\u00eda distinta a la que P5 nos ofrece por defecto, podemos usar el m\u00e9todo textFont()<\/span>. Como par\u00e1metro 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<\/em> va a estar en la web, es posible que no todos los que accedan al sketch<\/em> tengan esa fuente en su sistema. Para evitar este problema, podemos usar alguna de las denominadas web safe fonts<\/em> (fuentes seguras para la web), un conjunto de fuentes que est\u00e1n presentes en la mayor\u00eda de los sistemas, como Arial, Verdana, Helv\u00e9tica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New o Brush Script MT.<\/p>\n
\"\"
Figura 101. Diferentes fuentes del sistema con textFont()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Para cambiar el estilo de estas fuentes del sistema podemos usar textStyle()<\/span>. El m\u00e9todo textStyle()<\/span> acepta como par\u00e1metros los siguientes estilos: NORMAL<\/span>, ITALIC<\/span>, BOLD<\/span> y BOLDITALIC<\/span>.<\/p>\n
\"\"
Figura 102. Cambiando el estilo del texto con textStyle()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Fuentes externas<\/h3>\n
Si queremos cargar una fuente que no est\u00e9 en el sistema, podemos utilizar el espacio de almacenamiento que CodeLab nos ofrece para subirla desde nuestro ordenador.<\/p>\n
Podemos descargarnos fuentes del servidor de Google Fonts<\/a> 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\u00f3n Download family<\/em>.<\/p>\n
Esto nos descargar\u00e1 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\u00eda Ubuntu-Regular (tendremos que extraerla del archivo comprimido).<\/p>\n
Una vez que tenemos seleccionada la tipograf\u00eda que usaremos, vamos a subirla al servidor de CodeLab. Para ello, clicamos en A\u00f1adir archivos<\/em> y nos aparecer\u00e1 un cuadro de di\u00e1logo como este:<\/p>\n
\"\"
Figura 103. Cuadro de di\u00e1logo para subir archivos a la Mediateca de CodeLab
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Clicamos en A\u00f1adir archivos<\/em>, buscamos el archivo Ubuntu-Regular.ttf y hacemos clic en Empezar la subida<\/em>. Despu\u00e9s, vamos a la mediateca y all\u00ed aparecer\u00e1 nuestro archivo.<\/p>\n
\"\"
Figura 104. Mediateca de CodeLab
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Haciendo un clic con el bot\u00f3n derecho del rat\u00f3n nos aparecer\u00e1 un men\u00fa:<\/p>\n
\"\"
Figura 105. Men\u00fa para obtener la URL de archivos de la Mediateca
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Seleccionamos Mostrar URL<\/em> y copiamos la URL.<\/p>\n
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\u00f3n usaremos el m\u00e9todo loadFont()<\/span> para asignar la fuente a la variable, pas\u00e1ndole como par\u00e1metro el nombre del archivo de la fuente, incluida su extensi\u00f3n.<\/p>\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\u00ednea siguiente hasta que la actual se haya terminado de ejecutar. Esto como norma general es as\u00ed, 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\u00edneas de c\u00f3digo, esto es lo que se denomina asincron\u00eda: 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\u00eda no se haya descargado del todo, lo que nos dar\u00e1 un error o directamente no se dibujar\u00e1 nada. Para solucionar este problema, podemos utilizar la funci\u00f3n de P5 preload()<\/span>, que fuerza al programa a que todos los archivos est\u00e9n cargados antes de empezar. Dentro del preload()<\/span> ser\u00e1 donde carguemos y asignemos la fuente en nuestra variable.<\/p>\n
\"\"
Figura 106. Cargando una fuente de la pesta\u00f1a Files con preload()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Para dibujar texto en P5 disponemos del m\u00e9todo . Su funcionamiento es sencillo: como primer par\u00e1metro especificamos el texto que dibujar y como segundo y tercer par\u00e1metro le indicamos las coordenadas x e y en las que queremos que se dibuje el texto: \/\/ text(texto, x, y); text(\u00abLorem ipsum dolor sit amet\u00bb, 100, 200); Debemos […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/434"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":8,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/434\/revisions"}],"predecessor-version":[{"id":992,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/434\/revisions\/992"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}