PDF de programación - 5. Trabajar con archivos: texto, imagen, video y audio

5. Trabajar con archivos: texto, imagen, video y audio
5.1. Textos y tipografía

Entre los tipos de datos que almacena y con los que opera el software, están también los textos, no
como datos o nombres de variables sino como caracteres (char), y/o cadena de caracteres (string),
palabras, textos que se pueden incorporar como imagen, pues las fuentes de texto (tipografías) se
convierten en texturas que se dibujan en la pantalla.
Para ello se pueden utilizar la clase de openFrameworks ofTrueTypeFont() para ASCII extendido, o
el addon ofxTrueTypeFontUC() que contempla todos los caracteres Unicode. En ambos casos es
necesario cargar el archivo del tipo de fuente previamente en la carpeta data del archivo del script. La
estructura de código básico para trabajar con textos se inicia asociando una variable global a la clase
de openFrameworks o de ofx.

nombreVariable = ofTrueTypeFont()
nombreVariable = ofxTrueTypeFontUC()

Cuando se trabaja con ofTrueTypeFont(), en el bloque del setup() se asocia esa misma variable al
método loadFont(). Los métodos se vinculan a las variables con el operador ":", y sus parámetros
son como mínimo los dos primeros, pueden ser 4 y en casos especiales hasta 6.

nombreVariable:loadFont(string,int,bool,bool)

Estos parámetros corresponden a:

• string: Tipo de fuente, el archivo debe estar guardado en la carpeta data y para cargarlo se

utiliza la función gaImportFile("nombre archivo fuente")

• int: Tamaño
• bool: Si tiene anti-aliasing (true o false)
• bool: Si la fuente contiene el conjunto completo de caracteres o un subconjunto,
ofTrueTypeFont() solo incluye ASCII extendido, ofxTrueTypeFontUC() incluye Unicode
que contempla los acentos, también booleano (true o false)

El contenido del texto se dibuja en el bloque draw() con el método drawString() que tiene 3
parámetros: el texto entre comillas y las coordenadas que definen la posición de inicio del texto.

nombreVariable: drawString("texto entrecomillado", x, y)

Si se va a modificar el tamaño mientras el programa está activo, el método loadFont() se pone en el
bloque update() o draw() y el valor del tamaño vinculado a una variable que se actualiza en el bloque
update().

El mundo de la programación es anglosajón, por lo que para trabajar con acentos, ñ..., hay que utilizar
la clase ofxTrueTypeFontUC() para texto Unicode.

113





/*
GAmuza 043 E-5-1
--------------------------------
Font Unicode Random
creado por n3m3da | www.d3cod3.org

*/


texto = ofxTrueTypeFontUC()
t = 30 // tamaño fuente

tx = "Randonée" // contenido texto



function update()


t = ofRandom(30, 100) // actualiza el valor del tamaño aleatoriamente


end



function draw()


gaBackground(1.0,0.5) // fondo blanco 50% transparencia
ofSetColor(0, 255, 0) // color verde



posX = ofRandom(50,OUTPUT_W-50) // variable local

posY = ofRandom(50, OUTPUT_H-50)


texto:loadFont(gaImportFile("Anonymous_Pro_B.ttf"), t, true, true)
texto:setLetterSpacing(t/50) // kerning vinculado a tamaño



texto:drawString(tx, posX ,posY)
end



// tamaño variable



Además de los métodos loadFont() y drawString(), en el ejemplo se ha utilizado
setLetterSpacing(), que regula el kerning (espaciado entre letras). Otros métodos posibles son53:
setLineHeight() que regula la altura de la línea de texto, o setEspaceSize() que
el
espacio entre palabras.

ajusta



Existen también otras clases vinculadas a textos y tipografía como ofxArcText()54 para textos con
posiciones curvas.

El siguiente ejemplo utiliza la clase ofxArcText(), con funciones de traslación, rotación, y control del
tiempo usando ofGetElapsedTimef() que devuelve el tiempo transcurrido desde que se activa el
código en valores float, siendo esa la velocidad de giro en el parámetro de la función ofRotateZ().

53 Más información "ofTrueFont" [texto on-line] <http://www.openframeworks.cc/documentation/graphics/ofTrueTypeFont.html>

[03.08.2012]

54 Addon source <https://github.com/companje/ofxArcText> [01.09.2012]

114

Live Creative Coding. introduCCión a La programaCión Creativa Con gamuza



/*

GAmuza 043
E-5-2

----------------------------------

Font curveText


texto curvo con ofxArcText()
creado por n3m3da | www.d3cod3.org


*/



font = ofxArcText()



text = "GAmuza - Hybrid Live Coding"



function setup()


ofSetCircleResolution(50)


font:loadFont(gaImportFile("D3Litebitmapism.ttf"),58)

font:setLetterSpacing(1.3)


end



function draw()


gaBackground(1.0,1.0)



ofSetColor(0)



ofPushMatrix()


ofTranslate(OUTPUT_W/2,OUTPUT_H/2,0)
ofRotateZ(ofGetElapsedTimef())

font:drawString(text,0,0,OUTPUT_H/2)

ofPopMatrix()
end



El siguiente ejemplo dibuja el texto como si los caracteres fueran formas, con el método
drawStringAsShapes() de la clase ofTrueTypeFont(), por ello el método loadFont() tiene
un parámetro más de los vistos inicialmente que corresponde a la construcción de los contornos
(makeContours bool) y además utiliza las siguientes clases, métodos y funciones:

• La clase de openFrameworks ofPath()55, crea uno o múltiples path a través de puntos,
generando un vector. Está vinculada con los métodos clear() que borra los puntos y
setFilled() cuyos parámetros, true o false, establecen si el path es wireframe o relleno.
• Como se vio anteriormente, la función de Lua string.byte(), devuelve el código numérico

interno del carácter que se ponga como parámetro.

• El método getCharacterAsPoints(), obtiene los puntos que definen el carácter y que serán

usados por ofPath() para el trazado.

55 ofPath Reference <http://www.openframeworks.cc/documentation/graphics/ofPath.html> [01.09.2012]

115

5. Trabajar con archivos: TexTo, imagen, video, audio y daTos



/*
GAmuza 043 E-5-3
--------------------------------
Font: texto como formas

creado por n3m3da | www.d3cod3.org
*/


font1 = ofTrueTypeFont()
font2 = ofTrueTypeFont()
character = ofPath()

letter = string.byte('&')



function setup()


font1:loadFont(gaImportFile("Anonymous_Pro_B.ttf"),160,true,true,true)

font2:loadFont(gaImportFile("D3Litebitmapism.ttf"),52,true,true,true)


character = font1:getCharacterAsPoints(letter)



end



function draw()


gaBackground(1.0,1.0)


// dibuja el texto como bitmap
ofSetColor(255,0,100)
font2:drawString("hello - I am a bitmap",50,400)

// dibuja el carácter como bitmap
font1:drawString("&", 50, 250)
// dibuja carácter como forma rellena
character:setFilled(true)

character:draw(200,250)

character:setFilled(false)
// o solo el contorno sin relleno


character:draw(350,250)


character:clear()

// dibuja el texto como forma rellena
ofFill()


font2:drawStringAsShapes("Hello - I am a vector",50,480)

// o solo el contorno sin relleno
ofNoFill()

font2:drawStringAsShapes("Hello - I am a vector",50,550)
end



También puede aparecer texto en la pantalla de salida sin cargar fuentes para visualizar datos de
la programación o simplemente caracteres. Para ello se utiliza la función ofDrawBitmapString().
Ejemplos de código.



text = "texto a dibujar"
ofDrawBitmapString(text, x, y) // dibuja en la ventana de salida el contenido

text = string.format("Position X: %f", gaMouseX())
ofDrawBitmapString(text, x, y) // dibuja en la ventana de salida el texto
// "Position X:" más el valor X del ratón


// y lo coloca en la coordenada x,y


// de text en la posición x,y



116

Live Creative Cod