Usted está aquí

Tipografía creativa con código: Introducción a Processing

Como has podido imaginar la actual era digital es capaz de llevar el diseño de parámetros a niveles creativos extraordinarios. Por eso he querido hacer una mención especial a Processing un código y programa abierto y gratuíto que surgió en 2001 con el fin de facilitar a artistas, creativos y diseñadores la tarea de programar su creatividad.
 
 
 
Con una interfaz minimalista y un manejo de código simplificado, Processing saca la programación del mundo informático y lo acerca a investigadores de la visualización de datos, el arte o el diseño multimedia.
 

Aproximaciones a la Tipografía con Processing

Las animaciones y efectos gráficos que permite Processing también pueden ser aplicados a la tipografía. Habiendo diferentes aproximaciones a la tipografía desde el código:
 
  • 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.
 
Los resultados pueden ser guardados como imagen estática o funcionar como gráficos o instalaciones que en directo reaccionan, se modifican y generan de una manera concreta. Las posibilidades son muchísimas.
 

Un ejercicio rápido

Si eres alumno del Taller de Tipografía Experimental puedes descargar el archivo de trabajo con dos ejercicios y el código comentado. Descargar el archivo de trabajo.

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.

 

ventana de trabajo con Processing

añadir libreria en Proccesing

 

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.

 

david carson ejercicio con processing

Lo que te permite Geomerative es convertir el borde la tipografía en puntos clave con los que poder trabajar. En el ejemplo se le han añadido círculos con un 80% de transparencia al borde de la tipografía Futura.

 

tipografía futura modificada con Processing

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.

 

arbol carpetas processing

 

Á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));

 

texto con movimiento aleatorio de relleno

 

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, te respondo en los comentarios.