Aproximaciones a la Tipografía con Processing
- Trabajando el gesto de escritura. Ejemplo: la pantalla reacciona al trazo con animaciones, sonidos, efectos, etc. a la hora de dibujar la letra.
- Trabajando con la forma. Ejemplo: aplicar código y efectos a formas que siguen la estructura y convenciones de la tipografía. Es decir, dibujar con código.
- Trabajando la tipografía: Ejemplo: a una tipografía instalada en nuestro ordenador ir modificando sus valores con animaciones, efectos visuales y reacciones interactivas.
- Trabajando con datos externos: Ejemplo: la forma es modificada de acuerdo a ciertos parámetros de información como pueden ser los hastags de Twitter o en base a una imagen capturada por webcam.
Un ejercicio rápido
Te voy a enseñar un ejercicio para que veas las posibilididades que tiene Processing. Se trata de modificar la tipografía según la posición del ratón en la imagen.
Lo primero es descargar e instalar el programa. Es gratuíto pero te sugerirá una donación. Una vez descargado y ejecutado el archivo te saldrá una ventana de trabajo más o menos así. En mac es más o menos igual.
Para el trabajo con tipografía deberás instalar la librería Geomerative. Esto se hace a traves de menú superior Sketch> Import library> Add library. Si no te sale como en el menú de la imagen superior, haz clic en Add library, tecleas Geomerative en el buscador y la añades.
Captura de pantalla que nos muestra cómo los círculos van aumentando en número y tamaño según acercamos el ratón al centro de la imagen.
Una vez activado vete a menú superior File>Save. Esto te creará una carpeta de trabajo con dos archivos 1) el archivo de edición de Processing con el nombre que le hayas dado y 2) sketch (ignóralo). En esta carpeta de trabajo deberás añadir una carpeta nueva que se llame «data» sin comillas. Allí tienes que copiar y pegar el archivo de la fuente que quieres modificar.
Importante:
- el formato de la fuente debe de ser TrueType (.ttf) o podría darte error.
- el nombre de la carpeta padre y del archivo .pde deben de ser iguales.
Árbol con la jerarquía de carpetas y archivos en Processing.
El código creativo
Ahora sólo tienes que copiar y pegar el siguiente código:
import geomerative.*;
RFont font;
String SampleText = "David Carson";
RPoint [] pnts;
void setup () {
size (1200, 500);
RG.init (this);
font = new RFont("PonAquiNombreFuente.ttf", 150, RFont.CENTER);
RCommand.setSegmentLength (10);
RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
if (SampleText.length () > 0) {
RGroup grp;
grp = font.toGroup(SampleText);
pnts = grp.getPoints ();
}
}
void draw () {
background(255);
translate(width/2, 300);
for (int i=0; i<pnts.length; i++) { noStroke ();
fill (0, 80);
ellipse(pnts[i].x, pnts[i].y, mouseX, mouseX);
}
}
Importante: antes de darle a play recuerda que tienes que sustituir el nombre completo de tu fuente truetype. Busca la siguiente línea en el código anterior:
font = new RFont("PonAquiNombreFuente.tff", 150, RFont.CENTER);
Ahora dale al play. Si lo has hecho todo bien, al acercar y alejar el ratón por la ventana debería salir tu texto con unos círculos que se hacen más grandes conforme te acercas al centro y más pequeños conforme te alejas. Ten paciencia a veces tarda en cargar. Si lo ves todo negro prueba a mover el ratón a cualquier esquina de la ventana.
Guardar imagen
Añade este código después del último corchete y cada vez que presiones la tecla «s» te guardará una copia de tu imagen en jpg.
void keyPressed() {
if (key == 's') {
saveFrame("miTipografia-###.jpg");
}
}
Añade movimiento
Por último prueba este juego que añadirá un efecto de movimiento a la composición.
Busca donde pone
fill (0, 80);
y sustitúyelo por esto otro
fill (0, random(80));
Tipografía con efecto de transparencia aleatorio que crea el efecto de movimiento.
Lo que acabamos de hacer es decirle que creer de forma aleatoría el relleno de los círculos. Esto hace que se cree un efecto de movimiento bastante divertido.
Aprender más Processing
Los primeros pasos son sencillos y podrás hacer ejercicios y juegos que te resultarán sorprendentes. Sin embargo y auque lo han simplificado, aprender Processing y aplicarlo a la tipografía requiere de esfuerzo, estudio y dedicación. Más aún si partimos de un concepto que queremos desarrollar.
Mi consejo es que descargues el programa y vayas estudiando ejemplos, hay miles en Internet. Este acercamiento a la inversa, te hará ver si hay código que puedes aplicar y personalizar para tu proyecto.
¿Tienes comentarios o dudas? ánimo, envíame un DM en Twitter y te respondo.