Processing/JS

Texto

En procesing podemos trabajar con texto:

PFont, loadFont(), textFont(), text()
textSize(), textLeading(), textAlign(), textWidth()

La letras en la pantalla se crean coloreando píxeles, las primeras Fuentes de pantalla se dibujaban como un mapa de bits diferente para cada tamaño de la fuente. En 1985 cuando salio al mercado las impresoras láser, surge la tipografía Postscript que definía la línea exterior de la fuente con funciones matemáticas. Apple y Microsoft desarrollaron las fuentes TrueType, y actualmente ambas tecnologías están mezcladas en los tipos OpenType. Para mejorar el aspecto de la fuente en la pantalla del ordenador, se usaron técnicas de anti-aliasing para resolver este problema en pantallas de baja resolución.

Antes de poder trabajar con una fuente en processing es necesario convertirla a formato VLW. Se hace con la opción “Create Font” en el menu de herramientas.

Fuente

Se selecciona la fuente que queremos convertir y la fuente generada se guarda en la carpeta de trabajo. La fuente generada puede generarse con antialias o suavizado.

Una vez creada, para mostrarla en la ventana de visualización es necesario usar el tipo de dato
PFont para almacenar la fuente y la function loadFont() para leerla. La función  textFont() se usa para definer la fuente. La function text() se usa para dibujar los caracteres en la pantalla.

text(data, x, y)
text(stringdata, x, y, width, height)

los parámetros data pueden ser un String, char, int, o float. El parámetro stringdata puede ser solamente una cadenaString. Las coordenadas x e y indican la posición de la esquina superior izquierda de la fuente. Los parámetros opcionales  width y height marcan los limites. La function text() dibuja los caracteres en su tamaño original. La función fill() controla el color  y la ransparencia del texto. Al texto no le afecta stroke().

size(200, 200);
PFont font; // Declarar la variable
font = loadFont("ArialMT-48.vlw"); // Leer la fuente
textFont(font);
fill(0);
text("HOLA", 0, 40); // Escribvir en las coordenadas (0,40)
text("MUNDO", 0, 90);
text("ESD", 0, 140);