3.7. Trigonometría

GAmuza Hybrid live coding / modular application
116
3.7. Trigonometría
3. Lenguaje de programación
La trigonometría es una rama de las matemáticas cuyo significado etimológico es “la medición de los
triángulos” y sirve para definir relaciones entre los lados y ángulos de los triángulos. Básicamente es
una extensión del Teorema de Pitágoras Las funciones trigonométricas y las funciones que más se
utilizan son las del seno y coseno, con ellas se generan números repetitivos que pueden ser utilizados
para dibujar ondas, círculos, arcos y espirales.
La unidad de medida angular propia de la trigonometría es el radian, en una circunferencia completa
hay 2π radianes.
Esta unidad puede traducirse a Grado sexagesimal: unidad angular que divide una circunferencia
en 360 grados; o al Grado centesimal: unidad angular que divide la circunferencia en 400 grados
centesimales.
OpenFrameworks cuenta con las siguientes constantes para trabajar con unidades radianes:
PI
TWO_PI
M_TWO_PI
FOUR_PI
HALF_PI
Para convertir grados a radianes y viceversa, pueden utilizarse las funciones de Lua math.deg() y
math.rad() y también las funciones de openFrameworks of.degToRad() y of.radTodeg().
Las funciones math.sin(x) y math.cos(x) se utilizan para determinar el valor del seno y coseno de
un ángulo en radianes. Ambas funciones requieren un parámetro, el ángulo. El siguiente gráfico orienta
los valores del seno y coseno en función de los ángulos58 .
58 Más información sobre funciones matemáticas Lua en http://lua-users.org/wiki/MathLibraryTutorial [30.07.2012]
117

GAmuza Hybrid live coding / modular application
118
Para ver cómo funcionan gráficamente, retomamos un ejemplo de Ben Fry y Casey Reas 59 , traducido al
lenguaje de programación de GAmuza, porque permite observar qué parámetros controlan la amplitud
y frecuencia de las ondas utilizando la función math.sin() en una estructura for.
/*
GAmuza 0.4.1 examples
---------------------
Math/sineWave.ga dibujo onda sinusoidal
creado por mj
*/
_angle = 0.0
pos = OUTPUT_H/2 // posicion Y
amplitud = 40.0 // altura de la onda
inc = PI/30.0 // incremento del ángulo
function draw()
ga.background(1.0,1.0)
for x = 0, OUTPUT_W, 5 do
y = pos + (math.sin(_angle) *amplitud)
of.setColor(0)
of.rect(x, y, 2, 4)
_angle = _angle + inc
end
_angle = 0.0
end
59 Casey Reas y Ben Fry, (2007) Processing, a Programming Handbook for Visual Designers and Artist and. Cambridge(MA): The
MIT Press, pág. 119-120.
3. Lenguaje de programación
Si en este ejemplo se modifican los valores asignados a las variables se puede observar los cambios
en la frecuencia de la onda. La variable pos define la coordenada Y de la onda, la variable amplitud
controla la altura de la onda, y la variable inc el incremento del ángulo.
Las siguientes imágenes muestran los cambios de frecuencia al modificar esos valores y el ángulo.
pos = 25
pos = 75
amplitud=5.0
amplitud=45.0
inc=PI/12.0
inc=PI/90.0
angle=HALF_PI
angle = PI
119

GAmuza Hybrid live coding / modular application
120
En el siguiente ejemplo se utilizan valores del seno y el coseno para calcular los centros de una espiral
de círculos, haciendo una conversión de grados a radianes
/*
GAmuza 0.4.1 examples
---------------------
Trigonometria/sin_cos.ga
grados a radianes, espiral
*/
radio = 30
function setup()
end
of.enableSmoothing()
function draw()
end
ga.background(0.0, 1.0)
of.setColor(255)
radio = 30
for grado = 0, 360*4, 10 do
end
angle = math.rad(grado)
x = UTPUT_W/2+ (math.cos(angle) * radio)
y = OUTPUT_H/2+ (math.sin(angle) * radio)
of.circle(x, y, 4)
radio = radio + 1
La estructura for recorre cuatro veces los 360º de un círculo de 10 en 10 grados. El resultado de los
grados que se obtiene (10, 20, 30, 40,...) se pasa a radianes mediante la función de Lua math.rad(),
por ejemplo math.rad(180) = 3.1415926535898, es decir PI.
La espiral crece por el incremento del radio, si se comenta o quita radio=radio+1, el código dibuja
un círculo de círculos.
La repetición del valor inicial de la variable, radio = 30, en el draw() y fuera del for sirve para
detener el crecimiento en loop de su valor.
3. Lenguaje de programación
Una variación del este ejemplo nos lleva a la configuación de obra Rotating Disc (1925) de Marcel
Duchamp. En el apartado 3.10 volveremos a ella para aplicarle la rotación. De momento analizamos el
código para generar la imagen fija.
/*
GAmuza 0.4.1 examples
---------------------
Artists/duchampRotoreliefs.ga
created by n3m3da && mj
*/
radio = 15
spiralFactor = 15
numCircles = 23
function setup()
of.enableSmoothing()
of.setCircleResolution(50)
end
function update()
end
function draw()
ga.background(0.0, 1.0)
of.setColor(255)
of.noFill()
of.setLineWidth(3)
radio = 15
for i = 0, numCircles do
angulo = i*TWO_PI/((numCircles/2) +1)
x = (OUTPUT_W/2) + (math.cos(angulo) * spiralFactor)
y = (OUTPUT_H/2) + (math.sin(angulo) * spiralFactor)
of.circle(x, y, radio)
radio = radio + spiralFactor
end
end
El centro de todos los circulos está situado en el perímetro de un círculo no dibujado, cada uno de ellos
separado por 45º. La diferencia de sus radios se corresponde al valor de ese mismo circulo invisible
que distribuye la tangencia de los otros, es esa tangencia lo que produce la percepción de una espiral.
121

GAmuza Hybrid live coding / modular application
122
3.8. Archivos de imagen
Sintaxis
of.image() Clase de openFrameworks
loadImage() Método de esta clase
ga.importFile() Función de GAmuza
La clase of.image() permite incorporar fácilmente archivos de imagen a la ventana de salida de
GAmuza, estos archivos deben estar en la carpeta data situada en el ordenador junto al script.
Se vincula la clase of.image() a una variable al inicio del programa. Después en el bloque setup() se
le asignan los parámetros de localización con el método, loadImage() cuyo parámetro es una función
de GAmuza ga.importFile(“nombreArchivo.jpg”) que localiza ese archivo en la carpeta data. El
método loadImage()se vincula al nombre de la variable por medio del operador “:”. Y por último en el
bloque function draw() se vincula esa misma variable al método draw() cuyos 4 parámetros señalan
su posición x, y, y las dimensiones de ancho y alto. En el siguiente ejemplo se establece una fórmula
para ajustar el tamaño a las dimensiones de la ventana de salida:
/*
GAmuza 0.4.1 examples
---------------------
Image/loadImage.ga
creado por n3m3da | www.d3cod3.org
*/
imagen = of.image() -- variable vinculada a la clase
function setup()
imagen:loadImage(ga.importFile(“nombreArchivo.jpg”)) -- cargar la imagen
end
function draw()
ga.background(0.0, 1.0)
// para centrar y escalar la imagen ajustada a la ventana de salida
w = OUTPUT_W
h = (w/img:getWidth())*img:getHeight()
posX = 0
posY = (OUTPUT_H-h)/2
// dibuja la imagen
of.setColor(255)
img:draw(posX,posY,w,h)
end
GAmuza puede incorporar archivos de imagen del tipo .jpg, .gif, .tga, .tiff, bmp y .png
3.8.1. Efectos imagen
3. Lenguaje de programación
Además de los efectos de imagen que se pueden hacer desde en la interface del módulo Live Coding
(ver pág. 33) también se puedenn utilizar algunas clases del addon ofx de openFrameworks para
efectos de imagen o gráficos como ofx.blur()para desenfocar . Este efectos se basa en la técnica
Shader que actúa directamente en la Ram de la tarjeta gráfica por lo que el renderizado es más rápido
y no resta capacidad al procesador del ordenador. En el siguiente ejemplo el nivel de desenfoque de
la imagen está relacionado con la posición del ratón.
/*
GAmuza 0.4.1 examples
---------------------
SHADERS ejemplo - blur
created by n3m3da | www.d3cod3.org
*/
_blur = ofx.blur() -- se vinculan las variables a las clases
imag = of.image()
function setup()
imag:loadImage(“nombreArchivo.jpg”)
_blur:allocate(OUTPUT_W,OUTPUT_H)
_blur:setPasses(6)
end
function update()
blur:setRadius(ga.mouseX()/ OUTPUT_W*10) // valor variable según posición ratón
end
function draw()
ga.background(0.0,1.0)
w = OUTPUT_W
h = (w/imag:getWidth())*imag:getHeight()
posX = 0
posY = (OUTPUT_H-h)/2
end
_blur:beginFx() // inicio de funciones afectadas por el efecto
of.setColor(255) // siempre hay que definir el color para que dibuje algo
imag:draw(posX,posY,w,h) // tamaño imagen adaptada a la ventana de salida
of.circle(ga.mouseX(),ga.mouseY(),5) //círculo para aplicarle también el efecto
_blur:endFx(true) // señala el final de las funciones vinculadas al efecto
of.enableAlphaBlending()
of.setColor(255) // de nuevo para que no altere el color
_blur:draw(0,0) // aplica el efecto
of.disableAlphaBlending()
123

GAmuza Hybrid live coding / modular application
Además de vincular la clase of.image() a una variable global, se declara otra para la clase ofx.
blur().
En el bloque setup() se le aplican los métodos con el operador “:”. Los parámetros del método
allocated() especifican anchura y altura de la textura a aplicar en el FBO, setRadius() describe
el radio del kernel de desenfoque, cuanto mayor sea el radio, más tiempo de computación se necesita,
shape() describe la circularidad o cuadratura del kernel, para un núcleo más circular se utilizan valores
más pequeños, como 0,2, y para un kernel más cuadrado se usan valores más amplios, como 10.
Finalmente, utilizando los parámetros setPasses() y Downsample(), se puede ejecutar el filtro de
desenfoque múltiple veces a diferentes escalas y ofx.blur() combina los resultados,creando un
efecto similar a la niebla. 60
En el bloque draw()se acota el efecto señalando al inicio nombreVariable:beginFX() y al final
nombreVariable:endFX() esto es necesario cuando se trabaja con texturas FBO y shaders.
Las funciones of.enableAlphaBlending() y of.disableAlphaBlending(), activan y desactivan el
alpha blending de OpenGL, que está desactivado por defecto porque consume más recursos del
ordenador. Por ello se activan los comandos de OpenGL que permiten este tipo particular de blending
necesario para aplicar el desenfoque y después se desactivan.
60 ofxBlur [12.08.2012]
124
3.9. Archivos de video
Sintaxis
of.videoPlayer() Clase de openFrameworks
loadMovie() Método de esta clase
ga.importFile() Función de GAmuza
3. Lenguaje de programación
La clase of.videoPlayer() permite incorporar fácilmente archivos de vídeo a la ventana de salida de
GAmuza, estos archivos deben estar en la carpeta data situada en el ordenador junto al script.
Se vincula la clase of.videoPlayer() a una variable al inicio del programa. Después, al igual que con los
archivos de imagen, en el bloque setup() se le asignan los parámetros de localización con el método,
loadMovie() cuyo parámetro es una función de GAmuza ga.importFile(“nombreArchivo.jpg”)
que localiza ese archivo en la carpeta data, y según las características de reproducción que se deseen,
en loop, una sola vez, o que se repita en loop invertido, se utiliza el método setLoopState() cuyo
parámetro puede ser: OF_LOOP_NONE, para una sola reproducción, OF_LOOP_NORMAL, para reproducción
en loop y OF_LOOP_PALINDROME para reproducción en ida y vuelta.
En el bloque function update() se actualiza cada frame la información del video, ya que es un
objeto en movimento, mediante el método update(). En el bloque function draw() se vincula esa
misma variable al método draw() cuyos 4 parámetros señalan su posición x, y, y las dimensiones de
ancho y alto. En el siguiente ejemplo se establece una fórmula para ajustar el tamaño a las dimensiones
de la ventana de salida, utilizando los métodos getWidth() y getHeight() para obtener el ancho y
alto del video original. También se utiliza el método setPaused() en los bloques mousePressed() y
mouseReleased(), con el parámetro (tue) para detener la reproducción del video, o (false) para
continuar.
/*
GAmuza 0.4.1 examples
---------------------
Video/videoPlayer.ga
creado por n3m3da | www.d3cod3.org
*/
myVideo = of.videoPlayer()
function setup()
myVideo:loadMovie(ga.importFile(“video.mov”))
myVideo:play()
myVideo:setLoopState(OF_LOOP_PALINDROME) // reproducción de ida y vuelta
end
125

GAmuza Hybrid live coding / modular application
126
function update()
myVideo:update()
end
function draw()
ga.background(0.0,1.0)
of.setColor(255)
scaleH = (OUTPUT_W/myVideo:getWidth())*myVideo:getHeight()
myVideo:draw(0,OUTPUT_H/2 - scaleH/2,OUTPUT_W,scaleH)
end
function mousePressed()
myVideo:setPaused(true) // detiene la reproducción
end
function mouseReleased()
myVideo:setPaused(false) // reanuda la reproducción
end
3. Lenguaje de programación
127