Desarrollo de Una Aplicacion Con Interfaces Tangibles

7/25/2019 Desarrollo de Una Aplicacion Con Interfaces Tangibles

1/16

1

Desarrollo de una Aplicacin con Interfaces Tangibles Autor: Emiliano Causa

[email protected], www.emiliano-causa.com.ar

Palabras claves

Interfaces Tangibles, Reconocimiento de Patrones Bitonales, ReacTiVision, Processing

Resumen

Este trabajo explica la aplicacin de herramientas de software especficas en la construccin de un

prototipo de instalacin interactiva con interfaces tangibles. El objetivo principal es mostrar la forma

en que los diferentes softwares (los de reconocimiento de patrones y los de control de sonido y video

en tiempo-real) pueden vincularse, a fin de configurar una unidad integral, en donde la interface, la

imagen y el sonido se mueven en forma conjunta.

1. Introduccin

Figur a 1: Esquema de la Instalacin Interacti va


2/16

2

En este artculo mostraremos la construccin de una instalacin interactiva con interfaces tangibles,

aplicando herramientas de software destinadas al control de sonido y video en tiempo real, as como

otras destinadas a la implementacin de pantallas sensibles al tacto. Aqu vamos a mostrar la

implementacin de un prototipo de instalacin con interfaces tangibles, que en este caso la interface

estar constituida por unos cubos en el suelo que poseen patrones bitonales en sus caras. El pblico,al mover los cubos en el suelo, genera imgenes y sonidos que responden a la ubicacin, presencia y

rotacin de estos. La idea consiste en que los cubos tengan impresos en sus caras dibujos con

patrones bitonales. Una cmara en el techo transmitir la imgenes de los patrones a un software con

la capacidad de reconocerlos, el cual, en conjunto con otros, generar las imgenes (proyectadas por

un caon de video ubicado en el techo) y sonidos.

2. Distri bucin de tareas

En la construccin de este prototipo intervienen diferentes herramientas de software.

Figura 2: Esquema de flujo de informacin entre herramientas de software

La figura 2 es un esquema que muestra como se transmite el flujo de informacin entre los diferentes

softwares que participan en la ejecucin del prototipo. Para el reconocimiento de los patrones

bitonales e implementacin de la interface tangible usamos ReacTiVision. Este software transmite

informacin de los patrones a Processing (va el protocolo OSC), que es el encargado de generar la

imagen en tiempo-real. A su vez, Processing transmite (va protocolo MIDI) informacin a MAX/MSP,

el cual se encarga de generar el sonido en tiempo-real. Este sonido vuelve, como un lazo de


3/16


4/16

4

identificacin, rotacin y otros; va el protocolo OSC (Open Sound Control). Esto permite que

cualquier otro software que reciba mensajes en OSC, pueda comunicarse con ReacTiVision e

interpretar informacin respecto del estado de cada uno de los patrones bitonales ubicados sobre la

pantalla. Debido a esto, existe en el sitio de ReacTiVision, ejemplos de conexin de este software con

lenguajes como: C++, Java, C#, Processing, Pure Data, Max/MSP, Flash y otros.

2.2. Processing y la lib rera ReacTiVision

Processing (www.processing.org) es un lenguaje de programacin diseo para artistas por Ben Fry y

Casey Reas. Es un lenguaje open source desarrollado en Java de gran potencia y facilidad de

aprendizaje. Una de las ventajas de Processing es el extenso desarrollo de libreras que extienden las

posibilidades de conexin de este lenguaje con otros formatos, protocolos o lenguajes. Como hemos

dicho en el apartado anterior, existe una librera que permite conectar, va OSC, a Processing con

ReacTiVision.

ReacTiVision tiene una aplicacin ejecutable que se conecta a la cmara y reconoce los patrones

(fiducials) que estn en la imagen, enviando por OSC los parmetros de cada patrn (en un protocolo

que los autores llamaron TUIO). Esta librera implementa un conjunto de instrucciones que permiten

leer dichos parmetros. Por ejemplo, la siguiente lnea de cdigo crea un objeto cliente de protocolo

TUIO :

Tui oCl i ent cl i ent = new Tui oCl i ent ( t hi s) ;

Y las instrucciones que siguen, son funciones que se ejecutan frente a eventos provocados por los

patrones:

voi d addTui oObj ect ( i nt s_i d, i nt f _ i d, f l oat xpos , f l oat ypos , f l oat

angl e) {}

voi d r emoveTui oObj ect ( i nt s_i d, i nt f _i d ) {}

voi d updat eTui oObj ect ( i nt s_i d, i nt f _i d, f l oat xpos, f l oat ypos,

f l oat angl e, f l oat xspeed, f l oat yspeed, f l oat r speed, f l oat maccel ,

f l oat r accel ) {}

voi d addTui oCur sor ( i nt s_i d, f l oat xpos, f l oat ypos) {}

voi d r emoveTui oCur sor ( i nt s_i d) {}


5/16

5

voi d updat eTui oCur sor ( i nt s_i d, f l oat xpos, f l oat ypos, f l oat

xspeed, f l oat yspeed, f l oat maccel ) {}

Por ejemplo, TUIO distingue dos tipos de elementos: objetos y cursores. Los objetos son los patrones

bitonales, mientras que los cursores son los dedos que se apoyan sobre la pantalla (dado que el

sistema tambin es capaz de reconocer el tacto). Cada una de estas funciones, informan un evento

de un patrn o de tacto:

addTuioObject: informa la aparicin de un nuevo patrn sobre la pantalla.

removeTuioObject: informa que un patrn sali de la pantalla.

updateTuioObject: informa los cambio que sufre un patrn, ya sea de posicin como de rotacin.

addTuioCursor: informa la aparicin de un dedo sobre la pantalla.

removeTuioCursor: informa que un dedo sali de la pantalla.

updateTuioCursor: informa los cambio que sufre un dedo, un cambio de posicin.

2.3. Processing y MAX/MSP

Figura 4: MAX/MSP

MAX/MSP (www.cycling74.com) es un lenguaje de control de sonido en tiempo real, posee un

ambiente de programacin visual que funciona mediante la conexin de objetos visuales. Su lgica de

funcionamiento es a travs del envo de mensajes de un objeto a otro y gran parte de sus funciones

son para el tratamiento de mensajes MIDI, un protocolo que permite conectar instrumentos musicales


6/16

6

digitales. Debido a que Processing posee una librera llamada proMidi (www.texone.org/promidi/),

esto permite conectar Processing con MAX/MSP usando el protocolo MIDI para comunicarlos.

2.4. La librera Sonia

La librera para Processing llamada Sonia (sonia.pitaru.com) permite hacer anlisis espectral del

sonido en tiempo-real, de esta manera es posible hacer que Processing escuche el sonido generado

en MAX/MSP para que las imgenes respondan a su fluctuacin.

i mpor t pi t ar u. soni a_v2_9. *;

voi d set up( ) {

Soni a. s t ar t ( t hi s ) ;

Li veI nput . s tar t ( 16) ;}

voi d dr aw( ) {

f or ( i nt i = 0; i < Li veI nput . spect r um. l engt h; i ++) {

f l oat a = Li veI nput . spect r um[ i ] ;

}

}

Como se puede ver en las lneas de cdigo de arriba:

1- La primer lnea permite importar la librera

2- Las lneas 3 y 4 inicializan la librera Sonia y abren una entrada de sonido para ser analizada

usando un anlisis espectral. El parmetro 16 pasado en la funcin LiveInput.start(16)

declara que el anlisis tendr una precisin de 16 bandas.

3- El resultado de dicho anlisis es volcado en un arreglo llamado spectrum . En las lneas 7 y 8

se recorre el arreglo spectrum con el fin de leer cada una de las bandas del anlisis.

3. La implementacin

Veremos ahora como desde Processing se genera la imagen en tiempo-real, en respuesta a los

movimientos de los patrones bitonales. Posteriormente, abordaremos el envo de instrucciones MIDI

que permiten que MAX/MSP genere el sonido.


7/16

7

3.1. Generacin de la imagen

En Processing el flujo de ejecucin del programa transita principalmente a travs de dos funciones:

setup( ) y draw( ) . A su vez existen un conjunto de eventos que ejecutan otras funciones, como

mousePressed( ), keyPressed( ) , etc. Como vimos en el apartado de Processing y la libreraReacTiVision, esta librera agrega funciones que responden a nuevos eventos relacionados con los

cambios producidos en los fiducials.

La imagen del prototipo esta conformada por unas cintas que se despliegan en un espacio 3D virtual

y que conforman una especie de racimo puesto en forma de flor.

Figura 5: Racimo en forma de flor

Dichas formas estn creadas con un objeto (una clase) llamada Flor :

Fl or f l or 1;

voi d set up( ) {

f l or 1 = new Fl or ( . . . ) ;

}


8/16

8

voi d dr aw( ) {

f l or 1. act ual i zar ( ) ;

f l or 1. di buj ar ( . . . ) ;

}(Los puntos suspensivos indican cdigo que ha sido omitido.)

Este tipo de objeto responde a las siguientes instrucciones:

1- En la lnea 1 se puede ver la declaracin de un objeto tipo Flor , que en este caso

llamamos flor1 .

2- En la lnea 3 est la ejecucin del constructor de la clase, el cual inicializa el objeto.

3- En la lnea 5 se ejecuta el comportamiento actualizar() , el cual, como bien dice su

nombre, actualiza las variables internas del objeto, las cuales despliegan las cintas.

4- En la lnea 6 esta el comportamiento que dibuja el objeto.

No profundizaremos en las instrucciones que implementan estas funciones, ya que las mismas no

constituyen el objetivo central de este trabajo, sino una excusa que nos permite ejemplificar una

implementacin con interfaces tangibles. Pero volviendo a estos comportamientos y para analizar el

modo en que se relacionan con los movimientos de los patrones en el escenario, podemos establecer

el siguiente esquema:

1- Al iniciar la aplicacin hay que declarar el objeto

2- El mismo debe inicializarse cada vez que el patrn entra en escena

3- Mientras el patrn est en escena, el objeto debe actualizarse y dibujarse

Siguiendo esta lgica, analizaremos las siguientes lneas de cdigo:

i mport t ui o. *;

Fl or f l or 1 , f l or 2; / / l i nea 2

Tui oCl i ent t ui oCl i ent ; / / l i nea 3

. . .

voi d set up( ) {

. . .

t ui oCl i ent = new Tui oCl i ent ( t hi s) ; / / l i nea 7

. . .

}

voi d dr aw( ) {

. . .


9/16

9

Tui oObj ect [ ] t ui oObj ect Li st =t ui oCl i ent . get Tui oObj ect s( ) ; / / l i nea 12

f or ( i nt i =0; i


10/16

10

f l or2 = new Fl or( . . . ) ;

}

. . .

}En la lnea 2 se declararon dos objetos de tipo Flor , llamados flor1 y flor2 . A su vez en la lnea 3 se

declara el objeto TuioClient que es el encargado de conectar a Processing con ReacTiVision.

La inicializacin de los objetos se realiza en la funcin que se dispara ante el evento de aparicin de

un nuevo patrn en escena. La funcin, que est en la lnea 36, pasa como parmetro un objeto de

tipo TuioObject llamado tobj Dado que esta funcin se ejecuta frente a la aparicin de cualquier

patrn, es necesario identificar cul es el patrn que dispar el evento. En la lnea 38 se ejecuta el

comportamiento getFiducialID() , el cual devuelve el nmero de identificacin del patrn

(ReacTiVision viene con un archivo formato PDF que tiene cientos de patrones para ser impreso,cada uno con su correspondiente nmero de identificacin). Si el nmero de identificacin coincide

con el buscado, entonces en la siguiente lnea se inicializa el objeto de tipo Flor .

La funcin draw() se ejecuta en loop y es la encargada de ejecutar el flujo de refresco de la pantalla

de la aplicacin (es decir de dibujar la pantalla). Es aqu en donde hay que actualizar y dibujar los

objetos Flor . Pero esta accin debe estar condicionada por la presencia del patrn correspondiente,

dado que ante la ausencia no deben realizarse. Por eso, en la lnea 12 se carga en un arreglo de tipo

TuioObject la lista de objetos TUIO presentes en escena. Luego, en la lnea 14, se recorre con un

ciclo for a dicho arreglo, tomando en la lnea 15, cada uno de los objetos y cargndolo en un objeto

llamado tobj . En la lnea 17, nuevamente se verifica si la identificacin del patrn coincide con el

buscado, en cuyo caso se actualiza y dibuja el objeto. Previamente, en la lnea 18, se revisa si el

objeto Flor no es nulo ( null ) esto podra suceder si el objeto no fue debidamente inicializado (ya sea

por que no se dispar el evento addTuioObject , o por que la identificacin fue erronea).

En los objetos de tipo TuioObject se encuentran almacenados los parmetros de los patrones: la

ubicacin (mediante los parmetros getScreenX( ) y getScreenY( ) ) y el ngulo de rotacin con

getAngle( ).

3.2. Envo de los mensajes MIDI

De la misma manera en que la imagen aparece, se modifica y desaparece en funcin del

comportamiento de los patrones, asociando una imagen a cada patrn, existe un sonido asociado a

cada uno de los patrones. La ejecucin al unsono de la imagen y el sonido frente al

comportamiento del patrn, une a estos fenmenos en un evento integral. La ejecucin del sonido,

como ya dijimos, la realiza MAX/MSP, y lo hace respondiendo a los mensajes MIDI que le enva

Processing. Cuando MAX/MSP recibe un mensaje de note on , se enciende el sonido asociado al

nmero de nota en cuestin, mientras que el mismo se detiene cuando recibe un mensaje note off . A


11/16

11

su vez, para ir variando caractersticas del sonido, Processing enva a MAX/MSP mensajes de

controlador. Tanto las imgenes as como el sonido varan cuando los patrones rotan en su posicin.

En el cdigo presentado a continuacin, veremos como son ejecutados los mensajes MIDI. Es

importante destacar que ni en este, ni en el anterior cdigo fuente, se encuentra el programa

completo. Ambos son recortes del programa definitivo que buscan hacer foco sobre ciertas partes del

mismo:

i mpor t pr omi di . *; / / l i nea 1

Mi di I O mi di I O;

Mi di Out mi di Out ;

. . .

voi d set up( ) {

. . .

mi di I O = Mi di I O. get I nst ance( t hi s) ; / / l i nea 7

mi di I O. pr i nt Devi ces( ) ;

mi di Out = mi di I O. get Mi di Out ( 0, 2) ;

. . .

}

voi d addTui oObj ect ( Tui oObj ect t obj ) { / / l i nea 12

i f ( t obj . get Fi duci al I D( ) == pat r on1 ) {

Not e not e = new Not e( 60, 127, 2000000) ;

mi di Out . sendNot e( not e) ;

}

el se i f ( t obj . get Fi duci al I D( ) == pat r on2 ) {



}

}

voi d r emoveTui oObj ect ( Tui oObj ect t obj ) {/ / l i nea 22





12/16

12

}



mi di Out . sendNot e( not e) ;}

}

voi d updat eTui oObj ect ( Tui oObj ect t obj ) {/ / l i nea 32


i nt val or = i nt ( map( t obj . get Angl e( ) , 0 , TWO_PI , 0 , 127 ) ) ;

mi di Out . sendCont r ol l er ( new Cont r ol l er ( 5, val or ) ) ;

}


i nt val or = i nt ( map( t obj . get Angl e( ) , 0 , TWO_PI , 0 , 127 ) ) ;

mi di Out . sendCont r ol l er ( new Cont r ol l er ( 6, val or ) ) ;

}

}

Los mensajes MIDI son enviados cuando acontecen eventos de los patrones. En las lneas 1, 2 y 3 seinvoca la librera y declaran los objetos para el envo de MIDI, los que son inicializados en las lneas

7, 8 y 9. En la lnea 9 se declara el nmero de puerto y canal MIDI que se utilizar. De la lnea 12 a la

21 se puede ver como se disparan los mensajes note on cuando aparece un nuevo patrn. Como ya

vimos en los ejemplos anteriores, dentro de la funcin que dispara el evento se ejecuta un condicional

que verifica la identificacin del patrn que lo origin. De la lnea 22 a la 31 se ve la situacin opuesta,

cuando se quita un patrn de la escena, se ejecuta el mensaje note off del sonido correspondiente.

De la lnea 32 hasta el final, se envan mensajes de controlador como respuesta al cambio de

posicin en los patrones. Los mensajes de controlador son utilizados para enviar una valor gradual

que vara de 0 a 127 en funcin del ngulo de rotacin del patrn. La funcin map( ) se encarga de

reescalar el valor del controlador de 0 a 127, cuando el ngulo vara de 0 a 2 PI .

3.3. El cont rol de sonido desde MAX/MSP

Como hemos dicho en el apartado Processing y MAX/MSP, este lenguaje funciona mediante el

envo de mensajes entre objetos. La informacin que enva Processing va MIDI, es recibida por dos

objetos: notein y ctlin :


13/16

13

Figur a 6: Detalle del pro grama de MAX/MSP

Como se ve en la figura 6, estos objetos reciben mensajes MIDI, los cuales son filtrados por los

condicionales ( ifthen ). Por ejemplo, si los mensajes de controlador corresponden a un nmero decontrolador 5, entonces el valor del controlador es enviado a un objeto send (el que est etiquetada

s eq1 ) que dirige el mensaje a un ecualizador, si es controlador 6 el mensaje se dirigir a otro

ecualizador, con el controlador 7 va a una reverberancia y con el controlador 8 a un control de

velocidad.

El objeto notein se conecta a otra serie de objetos condiciones que filtran 4 tipos de mensajes: 1)

nota nmero 60 con velocity mayor que cero, el cual enciende el loop 1, 2) nota 60 con velocity igual

a cero, lo cual apaga el loop 1 , y lo mismo para la nota 72, que enciende y apaga el loop 2 .

Los mensajes MIDI pueden llegar de Processing a MAX/MSP gracias a un puerto MIDI virtual, en estecaso usamos el software MIDIYOKE (www.midiox.com), el cual simula ser un dispositivo de hardware


14/16


15/16

15

Soni a. s t ar t ( t hi s ) ; / / l i nea 4

Li veI nput . s t ar t ( 16) ; / / l i nea 5

. . .

}voi d dr aw( ) {

. . .

f l oat gr aves = 0; / / l i nea 11

f l oat agudos = 0;

Li veI nput . get Spect r um( ) ;

f or ( i nt i = 0; i < Li veI nput . spect r um. l engt h; i ++) { / / l i nea 15

i f ( i < 2 ) { / / l i nea 16

gr aves += Li veI nput . spect r um[ i ] ; / / l i nea 17

}

el se i f ( i >=3 && i


16/16

16

componentes entre los graves y los agudos se debe conformacin logartmica de la grfica espectral

(en donde los graves son las primeras bandas y los medios y agudos ocupan cada vez mayor

espectro). Los valores de estas variables son transformados (en las lneas 22 a la 26) en las variables

modifAlfa y modiBeta , las cuales son enviadas como parmetros al comportamiento que dibuja la

flor, esto permite que el sonido modifique el ngulo (en 3D) con el que se muestra la flor.

4. Conclusin

El prototipo recin descrito muestra como es posible vincular varias herramientas de software para la

creacin de una aplicacin de interfaces tangibles. Es importante destacar que, a excepcin de

MAX/MSP, todo el software utilizado es open-source. MAX/MSP, sin embargo, puede ser fcilmente

reemplazado por su versin open source, llamada Pure Data. La posibilidad de trabajar con software

netamente open-source, habla del bajo costo que implica el desarrollo de este tipo de interfaces, lo

que contrasta con el alto nivel de innovacin y la potencialidad que la misma muestra.

5. Referencias bibl iogrficas

[1] www.processing.org

[2] mtg.upf.es/reactable/

[3] www.cycling74.com

[4] www.midiox.com

[5] sonia.pitaru.com

Emiliano Causa

Desarrollo de Una Aplicacion Con Interfaces Tangibles

Documents

Transcript of Desarrollo de Una Aplicacion Con Interfaces Tangibles