Unidad 13
Tipografía: Visualización
Elementos que se introducen en esta Unidad:
PFont, loadFont(), textFont(), text()
textSize(), textLeading(), textAlign(), textWidth()
Las letras en una pantalla son creadas por establecer el color de los píxeles en una determinada ubicación.
Por lo tanto, la calidad de la tipografía se ve limitada por la resolución de la pantalla. Como las pantallas
tienen una resolución baja en comparación con el papel, se han desarrollado técnicas para mejorar la
apariencia del texto en la misma. Las fuentes de las primeras computadoras de Apple Macintosh estaban
compuestas por pequeñas imágenes de mapa de bits, creadas específicamente en tamaños como de 10, 12,
y 24 puntos. Utilizando esta tecnología, una variación de cada fuente fue diseñada para cada tamaño de un
tipo de letra en particular. Por ejemplo, el carácter de un tipo de letra en el San Francisco, utiliza una imagen
diferente para mostrar el carácter en un tamaño de 12 y 18. Por otra parte, cuando la impresora LaserWriter
se introdujo en 1985, la tecnología Postscript definió fuentes con una descripción matemática del esquema de
cada carácter. Este tipo permitió, en la pantalla, una escala de tamaños grandes. Apple y Microsoft
desarrollaron, más tarde, el TrueType, otro formato de fuente. Recientemente, estas tecnologías se fusionaron
en el formato OpenType. Mientras tanto, el método para suavizar texto de pantalla en blanco-y-negro se
introdujo. Estas técnicas del tipo anti-aliasing utilizan píxeles grises en el borde de los caracteres para
compensar la baja resolución de pantalla.
-Cargando Fuentes y Dibujando Texto
Antes que las letras sean mostradas en la ventana de Processing, es necesario cargar la fuente y para esto
debemos convertir el archivo en uno de formato VLW. Para esto, Processing nos ofrece una sencilla
herramienta. En el menú “Tools” (herramientas) seleccionar la opción “Create Font” (Crear Fuente). Un
ventana se abrirá y le mostrará las fuentes que tiene actualmente instaladas en su equipo y que pueden ser
convertidas al formato específico. Seleccione la fuente deseada de la lista y, a continuación, haga click en
“OK”. La fuente se copiará y convertirá al formato VLW. Luego, automáticamente, será movida a la carpeta
“Data” de su Sketch (de forma similar a como se carga una imagen).
Como en las primeras computadoras de Apple Macintosh, el formato VLW permite cargar el alfabeto de una
fuente como una serie de simples imágenes. En la ventana del “Create Font” también se encuentra una
opción que permite seleccionar el tamaño al exportar al fuente en un formato VLW. Esto es útil, ya que fuentes
muy grandes requieren mayor cantidad de memoria. Si se va a utilizar una fuente no mas grande que 12,
exportarla en tamaño 96 será totalmente innecesario.
Después que la fuente es creada, antes de que el programa la pueda utilizar es necesario cargarla en el
mismo. Processing posee un tipo de dato llamado PFont, en el que deben cargarse las fuentes. Se crea una
nueva variable tipo PFont y se utiliza las función loadFont() para cargarla. La función de textFont() se
utiliza para seleccionar la fuente que se quiere utilizar. Por último, el texto es escrito con la función text().
text(datos, x, y)
text(stringdatos, x, y, ancho, alto)
El parámetro datos puede ser un String, char, int o float. El parámetro stringdatos es un parámetro
que solo acepta datos tipo String. Los parámetros x e y cambian la posición horizontal y vertical del texto
(como en cualquier figura o imagen). Existen los parámetros opcionales ancho y alto, los cuales modifican el
tamaño del texto. La función fill() controla el color del texto y la transparencia, así como también afecta a
figuras como ellipse() o rect(). El texto no es afectado por stroke().
Los siguientes ejemplos utilizan una fuente llamada Aressence, para que pueda ver su texto asegúrese de
cargar su propia fuente y cargarla correctamente (con la extensión) en la función loadFont().
Ignacio Buioli | Jaime Pérez Marín 65
PFont font; // Declare the variable
font = loadFont("Aressence-32.vlw"); //Carga la fuente
textFont(font); //Selecciona la fuente actual
fill(0);
text("LAX", 0, 40); //Escribe "LAX" en la posición (0,40)
text("AMS", 0, 70); //Escribe "AMS" en la posición (0,70)
text("FRA", 0, 100); //Escribe "FRA" en la posición (0,100)
PFont font;
font = loadFont("Aressence-32.vlw");
textFont(font);
fill(0);
text(19, 0, 36); //Escribe 19 en la posición (0,36)
text(72, 0, 70); //Escribe 72 en la posición (0,70)
text('R', 62, 70); //Escribe 'R' en la posición (62,70)
PFont font;
font = loadFont("Aressence-12.vlw");
textFont(font);
fill(0);
String s = "Processing está escribiendo Texto";
text(s, 10, 20, 80, 50);
PFont font;
font = loadFont("Aressence-32.vlw");
textFont(font);
fill(255); //Blanco
text("DAY", 0, 40);
fill(0); //Negro
text("CVG", 0, 70);
fill(102); //Gris
text("ATL", 0, 100);
PFont font;
font = loadFont("Aressence-72.vlw");
textFont(font);
fill(0, 160); //Negro con baja Opacidad
text("1", 0, 80);
text("2", 15, 80);
text("3", 30, 80);
text("4", 45, 80);
text("5", 60, 80);
También pueden utilizarse dos fuentes distintas en el mismo programa, pero deberán crearse dos variables
tipo PFont que las almacenen:
PFont font1, font2;
font1 = loadFont("Aressence-32.vlw");
font2 = loadFont("Arhermann-32.vlw");
fill(0);
textFont(font1);
text("GNU", 6, 45);
textFont(font2);
text("GNU", 6, 80);
-Atributos de Texto
Processing incluye funciones para controlar la forma en la que el texto se muestra (por ejemplo, alterando su
tamaño o alineación). Processing, además, puede calcular el ancho de algún carácter o grupo de caracteres y
Ignacio Buioli | Jaime Pérez Marín 66
ponerlo en función de alguna figura o forma.
Las fuentes en Processing son tomadas como imágenes, y no como vectores. Por eso si la fuente que
cargamos está en 12 de tamaño, y luego la agrandamos a 96, se verá desenfocada. La función correcta para
cambiar el tamaño de la fuente es la de textSize().
textSize(tamaño)
El parámetro tamaño define la dimensión que ocuparán las letras en unidades de píxeles.
//Reducción del tamaño de la letra
PFont font;
font = loadFont("Aressence-32.vlw");
textFont(font);
fill(0);
text("LNZ", 0, 40); //Grande
textSize(18);
text("STN", 0, 75); //Mediano
textSize(12);
text("BOS", 0, 100); //Pequeño
//Agrandar tamaño de letra
PFont font;
font = loadFont("Aressence-12.vlw");
textFont(font);
textSize(32);
fill(0);
text("LNZ", 0, 40); //Grande
textSize(18);
text("STN", 0, 75); //Mediano
textSize(12);
text("BOS", 0, 100); //Pequeño
La función textLeading() permite alterar el espacio entre lineas:
textLeading(dist)
La propiedad dist define la distancia del espacio en unidad de pixeles.
PFont font;
font = loadFont("Aressence-12.vlw");
textFont(font);
String lines = "L1 L2 L3";
textLeading(10);
fill(0);
text(lines, 5, 15, 30, 100);
textLeading(20);
text(lines, 36, 15, 30, 100);
textLeading(30);
text(lines, 68, 15, 30, 100);
Además, el texto puede ser marginado al centro, a la izquierda o a la derecha utilizando la función
textAlign():
textAlign(MODO)
En este caso, el modo es una constante que puede ser CENTER (centro), RIGHT (derecha) y LEFT
Ignacio Buioli | Jaime Pérez Marín 67
(izquierda), y se refiere simplemente a la alineación que tendrá el texto mostrado en pantalla.
PFont font;
font = loadFont("Aressence-12.vlw");
textFont(font);
line(50, 0, 50, 100);
fill(0);
textAlign(LEFT);
text("Izquierda", 50, 20);
textAlign(RIGHT);
text("Derecha", 50, 40);
textAlign(CENTER);
text("Centro", 50, 80);
La función textWidth() calcula y regresa el ancho de pixel de un carácter o texto. El calculo se realiza
dependiendo de las propiedades de textFont() y textSize(). Ya que cada carácter posee un ancho
diferente entre sí, es imposible saber la medida exacta de una cadena de caracteres. Para esos casos donde
necesitamos una medida específica, o conocer el tamaño de nuestra cadena, se utiliza esta función.
PFont font;
font = loadFont("Aressence-32.vlw");
textFont(font);
fill(0);
char c = 'U';
float cw = textWidth(c);
text(c, 22, 40);
rect(22, 42, cw, 5);
String s = "UC";
float sw = textWidth(s);
text(s, 22, 76);
rect(22, 78, sw, 5);
Ignacio Buioli | Jaime Pérez Marín 68
Unidad 32
Tipografía: Movimiento
A pesar del potencial para el tipo de cinética en el cine, la tipografía animada no comenzó hasta la década de
1950, con el título de la película del trabajo de Saul Bass, Binder Maurice, y Pablo Ferro. Estos diseñadores y
sus compañeros, lograron efectos de calidad muy alta con sus secuencias de títulos cinéticos en películas
como North by Northwest (1959), Dr. No (1962), y Bullitt (1968). Entonces, se exploró el poder evocador de la
cinética en forma de las letras para establecer un estado de ánimo y expresar niveles adicionales de
significado en relación con el lenguaje escrito. En los años siguientes el diseño de títulos de película ha
madurado y ha sido aumentado por la tipografía experimental para la televisión y el Internet.
-Palabras en Movimiento
Para que la tipografía se mueva, es necesario que el programa se ejecute continuamente. Por lo tanto, es
necesario utilizar una estructura draw().Usar la tipografía con draw() requiere tres pasos. Primero, la
variable PFont debe ser declarada fuera de los bloques setup() y draw(). Luego, la fuente debe ser
cargada y establecida en el bloque setup(). Finalmente, la fuente puede ser usada en el bloque draw() a
través de la función text().
El siguiente ejemplo utiliza una fuente llamada KaiTi. Para probar dicho ejemplo es necesario crear tu propia
fuente con la herramienta “Create Font” y luego cambiar el nombre del parámetro de loadFont() por el
indicado:
PFont font;
String s = "Pea";
void setup() {
size(100, 100);
font = loadFont("KaiTi-48.vlw");
textFont(font);
fill(0);
}
void draw() {
background(204);
text(s, 22, 60);
}
Para ponerla en movimiento, simplemente dibujaremos un cambio de posición en cada cuadro. Las palabras
pueden moverse en un orden en un orden regular si sus valores son cambiados en cada cuadro, y también
puede moverse sin un orden aparente por recibir valores aleatorios.
PFont font;
float x1 = 0;
float x2 = 100;
void setup() {
size(100, 100);
font = loadFont("KaiTi-48.vlw");
textFont(font);
fill(0);
}
void draw() {
background(204);
text("Derecha", x1, 50);
text("Izquierda", x2, 100);
x1 += 1.0;
if (x1 > 150) {
x1 = -200;
Ignacio Buioli | Jaime Pérez Marín 168
}
x2 -= 0.8;
if (x2 < -200) {
x2 = 150;
}
}
PFont font;
void setup() {
size(100, 100);
font = loadFont("KaiTi-48.vlw");
textFont(font);
noStroke();
}
void draw() {
fill(204, 24);
rect(0, 0, width, height);
fill(0);
text("processing", random(-100, 100), random(-20, 120));
}
La tipografía no necesita moverse en orden para cambiar en el tiempo. Muchos de los parámetros de
transformaciones, como la opacidad, puede utilizarse en el texto. Es posible cambiando el valor de una
variable en el draw().
PFont font;
int opacidad = 0;
int direccion = 1;
void setup() {
size(100, 100);
font = loadFont("KaiTi-28.vlw");
textFont(font);
}
void draw() {
background(204);
opacidad += 2 * direccion;
if (( opacidad < 0) || ( opacidad > 255)) {
direccion = -direccion;
}
fill(0, opacidad);
text("fundido", 4, 60);
}
Al aplicar las funciones de translate(), rotate() y scale() también pueden producirse movimientos:
PFont font;
String s = "VERTIGO";
float angulo = 0.0;
void setup() {
size(100, 100);
font = loadFont("KaiTi-48.vlw");
textFont(font, 24);
fill(0);
}
void draw() {
background(204);
angulo += 0.02;
pushMatrix();
Ignacio Buioli | Jaime Pérez Marín 169
translate(33, 50);
scale((cos(angulo/4.0) + 1.2) * 2.0);
rotate(angulo);
text(s, 0, 0);
popMatrix();
}
Otra técnica de representación, llamada presentación rápida de visualización serial (RSVP), muestra palabras
en la ventana de forma secuencial y provee distintas formas de pensar como leerlo.
PFont font;
String[] palabras = { "Tres", "golpes", "y", "estas",
"fuera", " "};
int cualPalabra = 0;
void setup() {
size(100, 100);
font = loadFont("KaiTi-28.vlw");
textFont(font);
textAlign(CENTER);
frameRate(4);
}
void draw() {
background(204);
cualPalabra++;
if (cualPalabra == palabras.length) {
cualPalabra = 0;
}
text(palabras[cualPalabra], width/2, 55);
}
-Letras en Movimiento
Individualmente, las letras ofrecen mayor flexibilidad a la hora de animar que las palabras. Construir palabras
letra por letra, y darle un movimiento individual a cada una de ellas, puede convertirse en una tarea muy
ardua. Trabajar de esta manera requiere más paciencia y dedicación que programas de otras características,
pero los resultados son altamente satisfactorios.
//El tamaño de cada letra oscila su tamaño
//de izquierda a derecha
PFont font;
String s = "AREA";
float angulo = 0.0;
void setup() {
size(100, 100);
font = loadFont("KaiTi-48.vlw");
textFont(font);
fill(0);
}
void draw() {
background(204);
angulo += 0.1;
for (int i = 0; i < s.length(); i++) {
float c = sin( angulo + i/PI);
textSize((c + 1.0) * 32 + 10);
text(s.charAt(i), i*26, 60);
}
}
Ignacio Buioli | Jaime Pérez Marín 170
//Cada letra entra desde abajo en secuencia
//y se detiene cuando la acción es concluída
PFont font;
String palabra = "hola";
char[] letras;
float[] y; //Coordenada-Y para cada letra
int letraActual = 0; //Letra actual en movimiento
void setup() {
size(100, 100);
font = loadFont("KaiTi-20.vlw");
textFont(font);
letras = palabra.toCharArray();
y = new float[letras.length];
for (int i = 0; i < letras.length; i++) {
y[i] = 130; //Posición fuera de la pantalla
}
fill(0);
}
void draw() {
background(204);
if (y[letraActual] > 35) {
y[letraActual] -= 3; //Mueve la letra actual
} //hacia arriba
else {
if (letraActual < letras.length-1) {
letraActual++; //Cambia a la siguiente letra
}
}
//Calcula el valor de x para centrar el texto
float x = (width - textWidth(palabra)) / 2;
for (int i = 0; i < letras.length; i++) {
text(letras[i], x, y[i]);
x += textWidth(letras[i]);
}
}
Ignacio Buioli | Jaime Pérez Marín 171
Unidad 33
Tipografía: Respuesta
Muchas personas pasan horas al día escribiendo cartas en las computadoras, pero esta acción se ve muy
limitada. ¿Qué características se podría agregar a un editor de texto para que sea más sensible a la
mecanógrafa? Por ejemplo, la velocidad de la escritura podría disminuir el tamaño de las letras, o una larga
pausa en la escritura podría añadir muchos espacios, imitando así una pausa de una persona mientras habla.
¿Qué pasa si el teclado puede registrar la dificultad con que una persona escribe (la forma de quien toca una
nota suave del piano, cuando se pulsa una tecla con suavidad) y automáticamente puede asignar atributos
como la cursiva para las expresar suavidad y negrita para expresas fuerza? Estas analogías se sugieren
cómo conservadoras del software actual que trata a la tipografía y mecanografía.
-Palabras responsivas
A los elementos tipográficos se le pueden asignar los comportamientos que definen una personalidad en
relación con el mouse o el teclado. Una palabra puede expresar la agresión moviéndose rápidamente hacia el
cursor, o uno que se aleja poco a poco puede expresar timidez.
//La palabra "evitar" se aleja del mouse porque su
//posición se establece como la inversa del cursor
PFont f;
void setup() {
size(100, 100);
f = loadFont("KaiTi-20.vlw");
textFont(f);
textAlign(CENTER);
fill(0);
}
void draw() {
background(204);
text("evitar", width-mouseX, height-mouseY);
}
//La palabra "risa" vibra cuando el cursor se le pone encima
PFont f;
float x = 33; //Coordenada-X del texto
float y = 60; //Coordenada-Y del texto
void setup() {
size(100, 100);
f = loadFont("KaiTi-20.vlw");
textFont(f);
noStroke();
}
void draw() {
fill(204, 120);
rect(0, 0, width, height);
fill(0);
//Si el cursor está sobre el texto, cambia su posición
if ((mouseX >= x) && (mouseX <= x+55) &&
(mouseY >= y-24) && (mouseY <= y)) {
x += random(-5, 5);
y += random(-5, 5);
}
text("risa", x, y);
}
Ignacio Buioli | Jaime Pérez Marín 172
-Letras responsivas
Separar una palabra en las letras que lo componen crea más opciones para determinar su respuesta a la del
mouse o el teclado. Las letras independientes tienen la capacidad de responder de una manera diferente y
contribuyen a la respuesta total de la palabra. Los dos ejemplos siguientes muestran esta técnica. El método
toCharArray() se utiliza para extraer los caracteres individuales de una variable String. El método
charAt() es una forma alternativa para aislar las letras individuales dentro de un String.
//La posición horizontal del mouse determina la rotación
//del ángulo. El ángulo aumenta con cada letra, lo que
//permite hacer una curva tipográfica.
String palabra = "Flexibilidad";
PFont f;
char[] letras;
void setup() {
size(100, 100);
f = loadFont("KaiTi-16.vlw");
textFont(f);
letras = palabra.toCharArray();
fill(0);
}
void draw() {
background(204);
pushMatrix();
translate(0, 33);
for (int i = 0; i < letras.length; i++) {
float angulo = map(mouseX, 0, width, 0, PI/8);
rotate(angulo);
text(letras[i], 0, 0);
//Compensación por el ancho de la letra actual
translate(textWidth(letras[i]), 0);
}
popMatrix();
}
//Calcula el tamaño de cada letra basada en la
//posición del cursor. Las letras son mas grandes
//Cuando el cursor está cerca.
String palabra = "BULTO";
char[] letras;
float totalOffset = 0;
PFont font;
void setup() {
size(100, 100);
font = loadFont("KaiTi-20.vlw");
textFont(font);
letras = palabra.toCharArray();
textAlign(CENTER);
fill(0);
}
void draw() {
background(204);
translate((width - totalOffset) / 2, 0);
totalOffset = 0;
float primerAncho = (width / letras.length) / 4.0;
translate(primerAncho, 0);
for (int i = 0; i < letras.length; i++) {
float distancia = abs(totalOffset - mouseX);
distancia = constrain(distancia, 24, 60);
Ignacio Buioli | Jaime Pérez Marín 173
textSize(84 - distancia);
text(letras[i], 0, height - 2);
float letrasAncho = textWidth(letras[i]);
if (i != letras.length-1) {
totalOffset = totalOffset + letrasAncho;
translate(letrasAncho, 0);
}
}
}
Ignacio Buioli | Jaime Pérez Marín 174
