1

Interfaces Tangibles para la Composicin de Msica

Francesconi, Juan Ignacio (67718)
Director: Castro, Silvia
Co-Director: Larrea, Martn

2

3

Departamento de Ciencias e Ingeniera de la Computacin
Universidad Nacional del Sur



Proyecto Final de Carrera de Ingeniera en Sistemas de Computacin
INTERFACES TANGIBLES PARA LA COMPOSICIN DE MSICA


Autor: Francesconi, Juan Ignacio (67718)
Director: Castro, Silvia
Co-Director: Larrea, Martn
Baha Blanca, Ao 2012

4










Dedicado a mi madre, Mercedes Raquel Hait.
Y a mi padre, Jos Daniel Francesconi. Quien me enseo a nunca bajar los brazos.

5

Agradecimientos
Me gustara brindar mis ms sinceros agradecimientos a las siguientes personas:
A mi padre, Jos Daniel Francesconi. Por nunca dejar de creer en m y brindarme su apoyo
incondicional durante toda mi carrera, sobre todo en los momentos ms difciles.
A Sergio Martig que fue mi director hasta el da de su fallecimiento. Desde el comienzo de mi
carrera me trat con respeto y siempre tuvo una increble buena predisposicin para responder
todas mis dudas, desde las ms bsicas como ingresante, hasta las ms filosficas relacionadas
con cmo dirigir mi futura profesin.
A Silvia Castro que acepto dirigir mi Proyecto Final luego del fallecimiento de Sergio. Pero sobre
todo, agradecerle la oportunidad de participar en el mbito acadmico mediante su invitacin para
formar parta de la Comisin Curricular de Ingeniera, lo que luego me motivara a postularme y
formar parte del Consejo Departamental del DCIC. Dos experiencias que me enriquecieron
notablemente, que me permitieron conocer, vivenciar y comprender parte de lo que es el mundo
acadmico.
A mi codirector Martin Larrea, que me guio y motivo sabiamente durante todo el proceso de
creacin de este trabajo, respondiendo a todas mis inquietudes por ms bsicas que fueran.
A mi compaero y amigo Octavio Portaluppi por su invalorable colaboracin en el desarrollo del
primer prototipo funcional del sistema.
A mi amigo Julio Bellabarba quien me asisti con el diseo y fabricacin del tablero encastrable
mediante su mquina de grabado y cortado lser.
Al Departamento de Ciencias e Ingeniera de la Computacin junto a cada uno de sus profesores,
asistentes, ayudantes y personal no docente que me ayudaron, guiaron, ensearon y formaron
durante mi paso por la Universidad, no solo acadmicamente, sino como ser humano en su
conjunto.
Gracias a todos!

6

Resumen
Se dise e implement una interfaz tangible de bajo costo para la creacin de msica, dicho
desarrollo se bas en el estudio previo de las interfaces tangibles, la interaccin humano
computadora y los antecedentes relacionados a la composicin de msica utilizando estos medios.
El sistema se implement mediante tecnologa de visin por computadora con herramientas y
elementos de fcil acceso. La interfaz permite la creacin de msica de forma intuitiva,
incremental y colaborativa, con una curva de aprendizaje empinada.
El sistema desarrollado es un secuenciador musical tangible de mesa. El mismo identifica, en
tiempo real, mediante visin por computadora, patrones preestablecidos impresos en fichas que
son colocadas sobre un tablero, para luego asociarlos a notas musicales o instrumentos,
dependiendo el caso, permitiendo de esta forma generar msica. Se desarrollaron dos prototipos
de dicho sistema. El segundo prototipo presenta, adicionalmente, un tablero con fichas
encastrables, el cual brinda importantes ventajas.

Abstract
A low-cost tangible interface for music creation was designed and implemented; this development
was based on the previous study of tangible interfaces, human computer interaction and
background related to the composition of music using these means. The system was implemented
using computer vision technology, and accessible tools and elements. The interface allows the
creation of music in an intuitive, incremental and collaborative manner, with a steep learning
curve.
The developed system is a tangible table music sequencer. It identifies, in real time, through
computer vision, specific patterns printed on tokens which are placed on a board, and then
associates them with musical notes and instruments, depending on the case, thus allowing the
user to generate music. Two prototypes of the system were developed. The second prototype has,
additionally, a board with sockets for the tokens, which offers significant advantages.


7

Tabla de Contenidos
Tabla de Contenidos ........................................................................................................................ 7
PARTE I - INTRODUCCIN .................................................................................................................. 10
1. Motivacin................................................................................................................................. 11
2. Objetivos ................................................................................................................................... 12
3. Estructura del trabajo ................................................................................................................ 13
PARTE II - MARCO TEORICO .............................................................................................................. 17
1. Conceptos bsicos ..................................................................................................................... 18
1.1. Interfaces Tangibles de Usuario ......................................................................................... 18
2. Interaccin Humano Computadora ........................................................................................... 19
2.1. Definicin ........................................................................................................................... 19
2.2. Componentes de IHC .......................................................................................................... 21
2.3. Disciplinas que contribuyen a la IHC .................................................................................. 29
2.4. Historia ............................................................................................................................... 31
3. Orgenes de las Interfaces Tangibles ......................................................................................... 34
3.1. Graspable User Interfaces .................................................................................................. 35
3.2. Bits Tangibles ...................................................................................................................... 36
3.3. Precursores de las Interfaces Tangibles ............................................................................. 38
4. Dominios de Aplicacin de las Interfaces Tangibles ................................................................. 41
4.1. TUIs para el aprendizaje ..................................................................................................... 41
4.2. Resolucin de problemas y planificacin ........................................................................... 42
4.3. Visualizacin de informacin ............................................................................................. 44
4.4. Programacin Tangible....................................................................................................... 45
4.5. Entretenimiento, juego y entretenimiento educativo ....................................................... 46
4.6. Comunicacin social ........................................................................................................... 50
4.7. Msica y performance multimedia .................................................................................... 52
4.8. TUI de mesa para msica ................................................................................................... 56
4.9. Secuenciadores Tangibles .................................................................................................. 59
5. Frameworks y Taxonomas de las Interfaces Tangibles ............................................................ 65
5.1. Propiedades de las Gaspables User Interfaces .................................................................. 65
5.2. Conceptualizacin de las TUIs y el modelo de interaccin MCRit ..................................... 66
5.3. Clasificacin de las TUIs ...................................................................................................... 67
8

5.4. Token And Constraint ......................................................................................................... 67
5.5. Fortalezas del enfoque Token + Constraint ........................................................................ 69
6. Tecnologas de implementacin para TUIs ............................................................................... 71
6.1. RFID .................................................................................................................................... 71
6.2. Micro-controladores, sensores y actuadores ..................................................................... 72
6.3. Visin por Computadora .................................................................................................... 74
6.4. Toolkits y libreras para implementar Interfaces Tangibles ............................................... 79
7. Fortalezas y limitaciones de las TUIs ......................................................................................... 82
7.1. Fortalezas ........................................................................................................................... 82
7.2. Limitaciones........................................................................................................................ 87
PARTE III - DESARROLLO EXPERIMENTAL .......................................................................................... 91
1. Introduccin .............................................................................................................................. 92
2. Primer Prototipo ........................................................................................................................ 93
2.1. Diseo ................................................................................................................................. 93
2.2. Implementacin - Introduccin .......................................................................................... 97
2.3. Elementos y herramientas utilizadas ................................................................................. 98
2.4. Diseo de clases e implementacin del cdigo ............................................................... 103
2.5. Anlisis de los resultados ................................................................................................. 111
3. Segundo Prototipo .................................................................................................................. 114
3.1. Diseo ............................................................................................................................... 114
3.2. Elementos y herramientas utilizadas ............................................................................... 116
3.3. La Maquina: grabadora y cortadora laser ........................................................................ 116
3.4. Implementacin del tablero ............................................................................................. 119
3.5. Calibracin del software ................................................................................................... 123
3.6. Anlisis de los resultados ................................................................................................. 123
PARTE IV - CONCLUSIONES .............................................................................................................. 125
1. Resumen .................................................................................................................................. 126
2. Limitaciones, problemas y cuestiones pendientes ................................................................. 126
3. Trabajo futuro ......................................................................................................................... 127
3.1. Mejoras ............................................................................................................................ 127
3.2. Extensiones ...................................................................................................................... 128
3.3. Pruebas de usabilidad ...................................................................................................... 129
9

PARTE V - ELEMENTOS FINALES ...................................................................................................... 130
Bibliografa .................................................................................................................................. 131
Anexo .......................................................................................................................................... 140
Cdigo...................................................................................................................................... 140


10








PARTE I - INTRODUCCIN

Pues resulta que una vez el violinista Schuppanzigh se quej por lo difcil que le resultaba tocar el
N 7, y Beethoven le contest: Cree que Pienso en sus miserables cuerdas cuando el espritu me
habla? Beethoven




1. Motivacin 11
2. Objetivos 12
3. Estructura del trabajo .. 13




11

1. Motivacin
Con el rpido desarrollo de las tecnologas de computacin, la mayora de los contenidos
multimedia, como audio, msica, video, grficos generados por computadora, estn disponibles
en formato digital, pudiendo ser creados, accedidos y manipulados a travs de las computadoras.
Por lo tanto, el uso de contenidos multimedia ha aumentado notablemente y juega, hoy en da, un
papel clave en el rea del entretenimiento, la msica y el arte. Sin embargo, mucha gente,
incluyendo a los msicos, todava tiene dificultades para interactuar con estos medios digitales,
inclusive a travs de las Interfaces Graficas de Usuario (GUI), las cuales mitigan el problema hasta
cierto punto. A fin de superar estos inconvenientes, la interfaz tangible de usuario se ha propuesto
como un nuevo tipo de interfaz que permita a los usuarios controlar intuitivamente la informacin
digital mediante el uso de objetos fsicos.
Con el rpido desarrollo de las computadoras durante las dos ltimas dcadas, han surgido en el
mercado una gran cantidad de mtodos de generacin de sonido. Las herramientas de
composicin tambin han evolucionado radicalmente con el uso de secuenciadores y sistemas de
grabacin multi-pista. A pesar de esto, las interfaces no han evolucionado mucho. Todava se
basan en los modelos de perillas y deslizadores, y en los modelos de los instrumentos clsicos,
sobre todo el del teclado. Sin embargo, existe una necesidad real de nuevas interfaces musicales.
Hoy se requieren nuevas interfaces musicales capaces de interpretar la msica actual, con nuevas
capacidades gestuales y funcionales, pero con el mismo nivel de expresividad que se encuentra en
los instrumentos musicales tradicionales.
El software musical puede ofrecer la mayor parte de la funcionalidad que ofrece un estudio
musical completo en una sola computadora por una fraccin pequea? del costo. Pero gran parte
de la ventaja se pierde cuando la interfaz fsica desaparece y se sustituye por una rplica grfica. El
mouse y el teclado son dispositivos de entrada genricos, y aunque son eficaces para el
procesamiento de textos y las tareas orientadas al diseo grfico, no son adecuadas para la
edicin y composicin musical.
Los aos noventa presenciaron el surgimiento de un nuevo paradigma de interpretacin musical.
Los msicos electrnicos, sentados detrs de los monitores de sus computadoras porttiles,
podan tocar su msica ante el pblico sin traer un cargamento gigante de sintetizadores y cables
de conexin. Sin embargo, la transicin a la performance basada en las computadoras porttiles
cre una grieta entre el artista y el pblico ya que no haba casi ninguna presencia en el escenario
con la cual el espectador se poda relacionar. Por otra parte, los artistas perdieron gran parte de la
fuerza expresiva de los instrumentos tradicionales analgicos. Sus improvisaciones en vivo se
basaban en el uso de los teclados de sus computadoras porttiles y por lo tanto carecan de
matices, sutileza, y capacidad de improvisacin.
Las interfaces ms extendidas para resolver estas falencias han sido los controladores MIDI basado
en perillas o deslizadores. Estos dispositivos, disponibles comercialmente, son tiles debido a su
modularidad y a su similitud con las mesas de mezcla de audio analgico. Desafortunadamente,
tienen desventajas obvias. Las perillas y deslizadores son demasiado modulares: los msicos
12

pasan ms tiempo recordando lo que hace cada perilla en lugar de centrarse en la interpretacin o
performance en s. Adems, estas interfaces carecen de carcter expresivo, y es difcil controlar
varios parmetros a la vez.
El investigador y msico experimental John Bowers ha utilizado el trmino ecologa de la
performance para describir la zona de actividad creada por un msico en su entorno inmediato. En
sus estudios resalta la importancia de la disposicin espacial de los dispositivos de control y los
instrumentos, no slo para permitir que el msico pueda ser ms eficaz en su performance, sino
tambin para facilitar la comunicacin de sus intenciones con los compaeros de interpretacin y
la audiencia [1].
El objetivo de este trabajo es investigar, disear y desarrollar un tipo de interfaz que aproveche las
ventajas del software actual y las nuevas tecnologas para realizar un sistema que permita mejorar
la usabilidad y la experiencia de la manipulacin de msica digital.
Muchos ejemplos interesantes de interfaces tangibles de usuario se encuentran en el dominio de
la creacin e interpretacin musical tales como Audiopad [2], BlockJam [3], y ReacTable [4]. Esto
no es sorprendente, ya que estas modalidades alternativas de interaccin a menudo pueden ser
ms tiles, intuitivas y agradables para un msico que el teclado y el mouse tradicional, que son
ms adecuados para el procesamiento de textos y las tareas de diseo grfico, pero no tanto para
el trabajo con audio. Jord [5] identifica varias propiedades de las interfaces tangibles y de las
mesas multi-tctiles que las sitan como un enfoque prometedor para la interpretacin musical: el
soporte para la colaboracin y el intercambio de control entre usuarios, la interaccin continua y
en tiempo real con datos multidimensionales, y el soporte para interacciones complejas,
especializadas, expresivas, y exploratorias.
2. Objetivos
A continuacin se enuncian los objetivos planteados en el presente proyecto. Primero se describe
el objetivo principal o general del trabajo, y luego el mismo se desglosa en objetivos especficos.
Tambin se incluyen algunos objetivos secundarios que tambin se tendrn en cuenta.
Objetivo general
Realizar un estudio bibliogrfico del campo de las interfaces tangibles de usuario y su
aplicabilidad en el rea de composicin musical para luego utilizar los conocimientos
adquiridos en el diseo, implementacin, testeo y anlisis de un prototipo funcional de
interfaz tangible para la creacin de msica.
Objetivos especficos
Realizar un estudio bibliogrfico del campo de las interfaces tangibles, investigando sus
motivaciones, dominios de aplicacin, taxonomas, tecnologas de implementacin y sus
fortalezas y debilidades, teniendo siempre como objetivo la utilizacin de este
conocimiento para el desarrollo de una interfaz tangible de usuario para la creacin de
msica.
13

Disear e implementar el sistema basado en los conocimientos adquiridos en la
investigacin previa.
Disear e implementar el sistema con herramientas y materiales de fcil acceso y bajo
costo.
Disear el sistema de forma tal que cuente con una curva de aprendizaje elevada, de
manera que permita ser rpidamente comprendido y operado.
3. Estructura del trabajo
El presente trabajo se desarrolla en el marco del Proyecto Final de Carrera de Ingeniera de
Sistemas de Computacin, carrera perteneciente al Departamento de Ciencias e Ingeniera de la
Computacin (DCIC) de la Universidad Nacional del Sur de Baha Blanca, Argentina. El mismo
tambin se encuadra dentro del proyecto de investigacin dirigido por el Lic. Sergio Martig,
"Interfaces No Convencionales. Su Impacto en las Interacciones (PGI SeCyT-UNS. Cdigo:
24/ZN19.)
El trabajo se basa, inicialmente, en la investigacin bibliogrfica del campo de las interfaces
tangibles de usuario, centrndose en aqullas relacionadas con la msica. Dicha investigacin
sienta las bases para el anlisis, diseo y desarrollo de un prototipo que posea una interfaz
tangible de usuario para la creacin de msica que aproveche todo el conocimiento adquirido en
la investigacin previa.
El trabajo se separa en cuatro partes: Introduccin, Marco Terico, Desarrollo Experimental y
Conclusiones. Adicionalmente hay una quinta parte llamada Elementos Finales que incluye las
fuentes bibliogrficas y el anexo.
La primera parte, la Introduccin, presenta los elementos introductorios del trabajo, con el
objetivo de presentar el proyecto y ubicar al lector en el mismo, dndole un pantallazo de lo que
va a encontrar. Se presentan las motivaciones que llevaron al autor a desarrollar el trabajo, as
como los objetivos buscados con el desarrollo del mismo. Finalmente se detalla la estructura del
trabajo presentando y describiendo brevemente cada seccin, de forma tal de ofrecer al lector un
pantallazo de cada seccin, permitindole entender la relacin de cada parte del trabajo y el por
qu de la mismas.
En la segunda parte del trabajo, el Marco Terico, se sientan las bases conceptuales para el
posterior desarrollo del prototipo, de forma tal que el mismo aproveche todo el conocimiento
detallado en esta seccin. La investigacin est pensada teniendo en cuenta el desarrollo de un
prototipo de interfaz tangible de usuario para la creacin de msica, por lo que es esto lo que
sienta la gua principal de investigacin.
Inicialmente se introducen algunos conceptos bsicos, una definicin inicial de interfaz tangible de
usuario para que el lector tenga un conocimiento mnimo que le permita ir avanzando por el
trabajo a medida que se va formando un concepto ms completo y global del tema
14

Las interfaces tangibles de usuario se encuentran enmarcadas dentro de un rea mucho ms
amplia, denominada Interaccin Humano-Computadora, por lo que inicialmente se da una
introduccin al tema, as como una breve descripcin de su historia y evolucin.
Posteriormente se abordan los orgenes de las interfaces tangibles as como las distintas
definiciones y su evolucin. Adicionalmente se describen algunos sistemas que fueron los
precursores de dicho tipo de interfaz.
En la siguiente seccin se analizan los distintos dominios de aplicacin de las interfaces tangibles,
describiendo y analizando los ejemplos ms relevantes de cada rea de aplicacin, as como sus
fortalezas y aquellos aspectos que los destacan. Se le da especial atencin al dominio de aplicacin
referido a la msica y performance?, ya que es el rea en la cual se encuadra el caso de estudio a
desarrollar. Luego se analizan casos especficos de interfaces tangibles de mesa para msica y
casos especficos de secuenciadores tangibles. Estas dos ltimas secciones se explicitan
detalladamente ya que se desea desarrollar un secuenciador tangible que tambin aproveche los
beneficios de las interfaces de mesa.
Luego se brinda un marco terico para las interfaces tangibles, esto es, se desarrollan las
propiedades que debe tener una interfaz tangible para poder ser definida como tal, y se formaliza
su definicin. El objetivo de esta seccin es formalizar el conocimiento adquirido en el rea. Luego
se presenta uno de los modelos de interaccin tangible ms populares, MCRit, contrastndolo con
el ampliamente conocido modelo MVC, con el objetivo de comprender ms formalmente cmo se
desarrolla la interaccin tangible. Luego se presenta una taxonoma de las interfaces tangibles.
Finalmente se presenta y analiza el paradigma Token And Constraint.
En esta seccin se analizan las distintas alternativas de implementacin que existen para el
desarrollo de interfaces tangibles. Se citan distintos ejemplos implementados con cada una de
estas tecnologas, as como las principales ventajas y limitaciones de cada una de ellas. Se hace
especial hincapi en las tecnologas de implementacin basadas en visin por computadora. Entre
ellas se destaca la librera de visin por computadora OpenCV, la cual se investiga en mayor
profundidad dado que ser utilizada en el desarrollo del prototipo.
Finalmente se abordan las principales fortalezas y limitaciones de las interfaces tangibles, de
forma tal que en el proceso de desarrollo del caso de estudio se puedan maximizar las primeras y
reducir las segundas. Cabe destacar que Shaer y Hornecker [6] brindan una excelente y completa
monografa sobre el trabajo existente en el campo de las interfaces tangibles de usuario, el cual
ser utilizado como fuente principal de consulta.
Adicionalmente la estructura del trabajo se basa en dos fuentes bibliogrficas [7] [8] que brindan
ciertas pautas de cmo desarrollar un escrito de esta ndole.
La tercera parte del trabajo corresponde al Caso de Estudio y consiste en el desarrollo
experimental de un sistema tangible. En sta se describe cmo se aplicaron los conocimientos
adquiridos durante la investigacin en el diseo e implementacin de un prototipo de interfaz
15

tangible para la creacin de msica. Esta tercera parte del trabajo cuenta con tres secciones
principales: una introduccin que describe brevemente, y en trminos generales, el prototipo
desarrollado; una segunda seccin que describe el primer prototipo y una tercera y ltima seccin
que describe el segundo prototipo, presentando las mejoras con respecto al primero.
La seccin principal correspondiente al desarrollo experimental, Primer Prototipo, cuenta con
cinco sub secciones. En la primera sub seccin, Diseo, se presenta la propuesta, se introduce la
idea conceptual del sistema junto a su modo de interaccin. En las mismas se describe de forma
abstracta, independiente de la implementacin, el concepto y la forma de interactuar con el
sistema. Adicionalmente se presenta un caso de uso para facilitar la comprensin de cmo utilizar
el sistema.
La siguiente sub seccin, Implementacin Introduccin, describe en trminos generales cmo
fue implementada tcnicamente la propuesta presentada en la sub seccin anterior y justifica la
eleccin de visin por computadora como tecnologa de implementacin. El objetivo de esta sub
seccin es presentar al lector una idea general de la implementacin antes de proseguir en
profundidad, de forma que el mismo tenga una idea general de lo que se va a describir a
continuacin y no se pierda en los detalles.
La prxima sub seccin, Elementos y herramientas utilizadas, describe los elementos de Hardware
y Software utilizados para la implementacin del prototipo y justifica la eleccin de los mismos.
En la siguiente sub seccin, Diseo de clases e implementacin del cdigo, se describe el
modelado UML realizado y se explican las principales clases del sistema, incluyendo sus
responsabilidades y obligaciones. En esta sub seccin se describe en detalle todo lo relacionado al
mtodo de visin por computadora utilizado. Finalmente se describe la GUI implementada para el
prototipo y se indica la direccin web de donde se puede descargar el cdigo completo del mismo.
En la ltima sub seccin perteneciente a Primer Prototipo se describen los resultados obtenidos a
partir del desarrollo del sistema y de las pruebas informales realizadas sobre el mismo. En esta sub
seccin de detallan los principales desafos encontrados a lo largo del desarrollo del prototipo y las
soluciones utilizadas para superarlos. Finalmente se describen los principales problemas y
limitaciones de esta primera versin del sistema.
La parte de Desarrollo Experimental cuenta con una segunda y ultima seccin titulada Segundo
Prototipo. En la misma se presenta un tablero con fichas encastrables que apunta a superar las
limitaciones ms importantes que tiene el sistema diseado e implementado anteriormente, la
robustez del reconocimiento de imgenes. En esta seccin se disea e implementa dicho tablero,
de forma tal que aproveche las ventajas del paradigma de interfaces tangibles denominado Tokens
+ Constraints. Se describen los elementos utilizados para implementar dicho tablero encastrable y
luego se explica el mtodo utilizado para implementarlo mediante el uso de una mquina de corte
y grabado lser. Finalmente se analizan los resultados obtenidos y se enuncian las ventajas
brindadas por este nuevo sistema de tablero y fichas.
16

En la cuarta parte se presentan las conclusiones del trabajo. Adicionalmente se describen las
principales limitaciones del prototipo y se presentan posibles mejoras apuntadas a solucionar
dichas falencias. Se sugieren posibles extensiones pensadas para implementar en un trabajo
futuro. Finalmente, se hace hincapi en la importancia de realizar un trabajo apuntado a analizar
la usabilidad del prototipo mediante pruebas formales.
Finalmente, en la quinta y ltima parte del trabajo, denominada Elementos Finales, se incluyen las
referencias y fuentes bibliogrficas utilizadas y el anexo, el cual incluye el cdigo completo del
sistema.
17






PARTE II - MARCO TERICO

"...queremos ser capaces de hacer con nuestros instrumentos todo lo que podamos imaginar: una
voz, una guitarra, un teclado, la idea es expresar, proyectar a travs de tu instrumento lo que
quiera que tengas en tu mente... - Jordan Rudess - Dream Theater




1. Conceptos bsicos.. 18
2. Interaccin Humano-Computadora... 19
3. Orgenes de las Interfaces Tangibles.. 34
4. Dominios de Aplicacin de las Interfaces Tangibles 41
5. Frameworks y Taxonomas de las Interfaces Tangibles 65
6. Tecnologas de implementacin para TUIs... 71
7. Fortalezas y limitaciones de las TUIs . 82






18

1. Conceptos bsicos
En esta seccin se presenta una breve definicin de interfaz tangible de usuario (TUI por su sigla
en ingls proveniente del trmino Tangible User Interface) con el objetivo de introducir al lector en
el tema, y permitirle tener una pequea nocin del concepto que le permita avanzar, sin
dificultad, por las distintas secciones del trabajo, a medida que se asimila el concepto de interfaz
tangible y todo su contexto.
1.1. Interfaces Tangibles de Usuario
Una interfaz tangible es, bsicamente, una interfaz de usuario que permite que una persona
interacte con un sistema digital a travs de un medio fsico. Una caracterstica central es la
perfecta capacidad de integracin entre los conceptos de representacin y control, con objetos
fsicos o tangibles actuando simultneamente como representacin de informacin y control fsico
para la manipulacin directa de las asociaciones subyacentes. [9]
Esta "integracin de la representacin y el control" significa que los objetos fsicos o tangibles
encarnan tanto a los medios de representacin como a los medios de manipulacin de los datos
digitales. Hay cuatro caractersticas claves que ayudan a definir a las TUIs:
1. Los objetos tangibles se acoplan, a travs de funcionalidades computacionales, con datos
digitales (acoplamiento computarizado).
2. Los objetos tangibles representan los medios de control interactivo. El movimiento y la
manipulacin de objetos fsicos es la forma dominante de control.
3. Los objetos tangibles estn perceptivamente ligados con representaciones producidas
digitalmente (por ejemplo, audio y visuales, proyecciones).
4. El estado de los objetos tangibles representa aspectos centrales del estado del sistema (el
sistema es, al menos, parcialmente legible si se corta la energa).
La exploracin y la manipulacin de objetos fsicos son los componentes clave del aprendizaje,
como es el caso particular del aprendizaje musical. El poder educativo de la tecnologa digital ha
sido tpicamente limitado por el hecho que los usuarios exploran y manipulan representaciones
abstractas basadas en el monitor de dos dimensiones, y no enverdaderos objetos fsicos. Embeber
interactividad en objetos fsicos, por lo tanto, permite el "mejor de ambos mundos, soporte del
juego exploratorio tradicional con objetos fsicos que pueden ser ampliados y realzados por el
poder interactivo de la tecnologa digital.

19

2. Interaccin Humano-Computadora
La Interaccin Humano-Computadora (IHC) es un rea de investigacin y prctica que surgi en la
dcada de 1980, inicialmente como un rea de especialidad en Ciencias de la Computacin. La IHC
se ha expandido rpidamente y de manera constante durante las tres ltimas dcadas, atrayendo
a profesionales de otras disciplinas e incorporando diversos conceptos y enfoques. En gran
medida, la IHC es ahora una coleccin de agregados provenientes de distintos campos de
investigacin y prcticas relacionadas a la informtica centrada en el humano.
2.1. Definicin
Actualmente no hay acuerdo sobre la definicin de la gama de temas que integran el rea de
interaccin humano-computadora. Sin embargo, es necesaria una caracterizacin del campo si se
quiere obtener y desarrollar conocimiento y material para la misma. Por lo tanto, la ACM ofrece
una definicin de trabajo que nos permite desarrollar el tema:
La Interaccin humano-computadora es una disciplina que estudia el diseo, evaluacin e
implementacin de sistemas informticos interactivos para uso humano y el estudio de los
fenmenos ms importantes que los rodean. [10]
Desde la perspectiva de la informtica, la atencin se centra en la interaccin y, especficamente,
en la interaccin entre uno o ms seres humanos y uno o varios equipos de cmputo. La situacin
clsica es una persona que usa un programa de grficos interactivos en una PC de escritorio. Pero
est claro que la variacin de lo que se entiende por la interaccin, el humano, y la mquina
genera un rico espacio de posibles temas de estudio, algunos de los cuales, se identificarn como
temas centrales y otros perifricos a la IHC.
Tmese la idea de la computadora. En lugar de ser estaciones de trabajo, los equipos pueden ser
sistemas embebidos, tales como partes de cabinas de naves espaciales y hornos de microondas.
Debido a que las tcnicas para el diseo de estas interfaces tienen tanto en comn con las tcnicas
para diseo de interfaces de estaciones de trabajo, ambas pueden ser provechosamente tratadas
de forma conjunta. Pero si se debilita aun ms la restriccin sobre los aspectos computacionales y
la interaccin y se trata el diseo de mquinas mecnicas y pasivas, tales como el diseo de un
martillo, se estar claramente en los mrgenes de la actividad, por lo que en general las relaciones
entre los seres humanos y los martillos no se consideran parte del campo de la interaccin
humano-computadora. Este tipo de relaciones sera claramente parte del campo de Factores
Humanos en general, que estudia los aspectos humanos de todos los dispositivos diseados, pero
no los mecanismos de estos dispositivos. La Interaccin humano-computadora, por el contrario,
estudia tanto el lado del mecanismo como el lado humano, pero de una clase restringida de
dispositivos.
Qu es lo que se entiende por la nocin de ser humano? Si se permite que el humano sea un
grupo de seres humanos o una organizacin, se pueden considerar interfaces para sistemas
distribuidos, sistemas de comunicacin entre humanos, o la naturaleza del trabajo que se realiza
20

de forma cooperativa por medio de un sistema. Todos estos temas son considerados como
centrales en el mbito de los estudios de interaccin humano-computadora.
Hay otros puntos de vista de la disciplina, que hacen foco en IHC de forma diferente al que se hace
desde las Ciencias de la Computacin. IHC es en general un rea interdisciplinaria. Se est
convirtiendo en un tema de especialidad dentro de varias disciplinas, cada una con diferente
nfasis: Ciencias de la Computacin (diseo de la aplicacin e ingeniera de las interfaces
humanas), Psicologa (aplicacin de las teoras de los procesos cognitivos y anlisis emprico del
comportamiento del usuario), Sociologa y Antropologa (interacciones entre la tecnologa, el
trabajo y la organizacin), y Diseo Industrial (productos interactivos). Desde la perspectiva de las
Ciencias de la Computacin, otras disciplinas sirven como disciplinas de apoyo, tanto como la
Fsica sirve como disciplina de apoyo para la Ingeniera Civil, la Ingeniera Mecnica sirve como
apoyo para la Robtica. Una leccin aprendida por disciplinas de Ingeniera es que los problemas
de diseo tienen un contexto, y que la optimizacin excesivamente estrecha de una parte de un
diseo puede ser anulada por el contexto ms amplio del problema. Incluso desde una perspectiva
directa de Ciencias de la Computacin, es ventajoso enmarcar el problema de la Interaccin
Humano-Computadora de manera suficientemente amplia para ayudar a los estudiantes,
investigadores y profesionales a evitar la trampa clsica del diseo divorciado del contexto donde
se ubica el problema.
Para brindar una caracterizacin ms aproximada de Interaccin Humano-Computadora como un
campo de investigacin, se enumeran algunos de sus intereses especficos:
IHC se refiere a la actuacin conjunta de humanos y mquinas para resolver tareas,
la estructura de comunicacin entre humanos y mquinas;
las capacidades humanas para utilizar las mquinas (incluyendo la capacidad y facilidad de
aprendizaje de las interfaces),
los algoritmos y la programacin de la interfaz en s misma,
los desafos ingenieriles que se plantean al disear y construir las interfaces,
el proceso de especificacin, diseo e implementacin de las interfaces, as como su
comparacin y evaluacin.
Por lo tanto IHC involucra tanto ciencia, ingeniera como tambin aspectos de diseo.
Independientemente de la definicin elegida de IHC, es claro que debe incluirse como parte de las
Ciencias de la Computacin y forma tanto parte de esta ciencia como de cualquier otra de las
disciplinas involucradas. Si, por ejemplo, se adopta la definicin clsica de Ciencias de la
Computacin que la define como "el estudio de las computadoras y los principales fenmenos
que los rodean"[11], entonces la interaccin de las personas y las computadoras y el uso de la
mismas son sin duda partes de estos fenmenos. Si, por el contrario, tomamos la definicin de la
ACM que sostiene que es "el estudio sistemtico de procesos algortmicos que describen y
transforman informacin: su teora, anlisis, diseo, eficiencia, implementacin y aplicacin "[12],
entonces los procesos algortmicos claramente incluyen la interaccin con los usuarios de la misma
21

manera que incluyen la interaccin con otras computadoras a travs de las redes. Los algoritmos
de computacin grfica, por ejemplo, son algoritmos que dan ciertas experiencias perceptivas al
aparato sensorial del ser humano. El diseo de muchas aplicaciones informticas modernas
requiere ineludiblemente del diseo de algn componente del sistema que interacte con el
usuario. Adems, este componente suele representar ms de la mitad de las lneas de cdigo del
sistema. Es fundamental comprender cmo decidir sobre qu funcionalidad tendr un sistema,
cmo llevar esto al usuario, la forma de construir el mismo y la forma de probarlo.
Debido a que IHC estudia la comunicacin e interaccin entre el ser humano y la computadora, se
basa en el conocimiento tanto de la computadora como del ser humano. Por el lado de la
computadora son relevantes las tcnicas de grficos por computadora, los sistemas operativos, los
lenguajes de programacin y los entornos de desarrollo, entre otros; por el lado humano son
relevantes la teora de la comunicacin, las disciplinas de diseo grfico e industrial, la lingstica,
las ciencias sociales, la psicologa cognitiva, entre otros. Y, por supuesto, son tambin relevantes
los mtodos de ingeniera y diseo.
2.2. Componentes de IHC
El siguiente listado de temas abarca los tpicos representativos en relacin con todos los aspectos
de diseo y de anlisis de sistemas involucrados en el campo de Interaccin Humano-
Computadora. Los temas se derivan de la consideracin de los siguientes cinco (No sern cuatro?)
aspectos interrelacionados de IHC:
1. El uso y contexto del sistema (U)
2. El usuario humano (H)
3. La computadora (C)
4. El proceso de desarrollo del sistema (D)
Las letras entre parntesis permiten referenciar cada uno de los aspectos en la Figura 1 -
Componentes de la IHC [10].
22


Figura 1 - Componentes de la IHC [10]
2.2.1. El uso y contexto del sistema (U)
Los usos de las computadoras se describen como aplicaciones en el mundo de la informtica.
Estos usos y el grado en que la interfaz (y la lgica de la aplicacin en el resto del sistema) se
adapta a ellos pueden tener un profundo impacto en cada parte de la interfaz y su xito. Por otra
parte, el contexto social, de trabajo, y de negocios tambin puede ser importante. Adems de los
requisitos tcnicos, una interfaz puede tener que satisfacer normas laborales de algn sindicato o
cumplir con restricciones legales sobre el look-and-feel" o inclusive ayudar a posicionar la imagen
de una empresa en un determinado mercado. Los siguientes temas tienen que ver con los
problemas generales de adaptar y combinar entre s las computadoras, los usos determinados y
los contextos establecidos.
U1. Organizacin social y trabajo
Este epgrafe se refiere al ser humano como un ser social que interacta. Se ocupa de la naturaleza
del trabajo, y de la idea de que los sistemas humanos y los sistemas informticos se deben adaptar
mutuamente el uno al otro siendo considerados como un todo.
Puntos de vista (por ejemplo, ingeniera industrial, Investigacin de Operaciones [13],
Ingeniera Cognitiva de Rasmussen [14], enfoque de Diseo Participativo de Aarhus [15],
Sistemas Abiertos de Hewitt [16])
23

Modelos de la actividad humana (por ejemplo, la planificacin oportunista, los
procedimientos abiertos)
Modelos de pequeos grupos, y modelos de organizaciones
Modelos de trabajo, flujo de trabajo, actividad cooperativa, trabajo de oficina
Sistemas socio-tcnicos, organizaciones humanas como sistemas abiertos adaptativos,
impacto mutuo de los sistemas informticos en el trabajo y viceversa, sistemas
informticos para tareas grupales, casos de estudio
Calidad de la vida laboral y satisfaccin en el trabajo
U2. reas de aplicacin
Esta seccin trata sobre las clases de dominios de aplicacin y las reas de aplicacin especficas
donde se han desarrollado interfaces especficas.
Caracterizacin de las reas de aplicacin (por ejemplo, el individuo frente al grupo)
Interfaces orientadas a documentos: edicin de texto, formato de documentos, hojas de
clculo, ilustradores, hipertexto
Interfaces orientadas a las comunicaciones: correo electrnico, conferencias por
computadora, telfono y sistemas de mensajera de voz
Entornos de diseo: los entornos de programacin, CAD/CAM
Sistemas de ayuda on-line
Puestos de informacin multimedia
Sistemas de control continuo: sistemas de control de procesos, sistemas de realidad
virtual, simuladores, juegos de video.
Los sistemas embebidos: controles de fotocopiadora, controles de ascensores, aparatos
electrnicos y controladores de electrodomsticos (por ejemplo, televisores,
videocaseteras, hornos de microondas, etc.)
Sistemas para la creacin y performance de msica en vivo. Instrumentos musicales
digitales.
U3. Ajuste y adaptacin hombre-mquina
Parte de la finalidad del diseo es la de establecer una adecuacin entre el objeto diseado y su
uso. Hay varias dimensiones para esta adecuacin y los ajustes se pueden realizar en varios
lugares:
1. En tiempo de diseo o en el momento de uso.
2. Cambiando al sistema o al usuario.
3. Los cambios pueden ser realizados por los usuarios o, a veces, por el propio sistema.
Los temas de este epgrafe se refieren a modificar algunos de los componentes de un sistema
socio-tcnico con el fin de mejorar su ajuste.
Tcnicas alternativas para lograr el ajuste
24

Naturaleza de los sistemas adaptativos, adaptaciones de los sistemas humanos que anulan
las mejoras de confiabilidad, la naturaleza del error en los sistemas adaptativos
redundantes, hallazgos empricos sobre la improvisacin del usuario en sistemas
rutinarios, factores determinantes de la introduccin exitosa de sistemas
Seleccin del sistema: teoras de adopcin de sistemas
Adaptacin del sistema: tcnicas de personalizacin
Seleccin del usuario: compatibilidades de las caractersticas del usuario y el sistema
Adaptacin del usuario: facilidad de aprendizaje, mtodos de entrenamiento (por ejemplo,
tutoriales on-line), relacin con el diseo del sistema
Orientacin del usuario: tcnicas de ayuda, documentacin, tcnicas de manejo de errores
2.2.2. Caractersticas humanas (H)
Es importante entender algunas caractersticas del procesamiento humano de informacin, cmo
se estructura la accin humana, la naturaleza de la comunicacin humana y las necesidades
humanas fsicas y fisiolgicas.
H1. Procesamiento humano de la informacin
Caractersticas del humano como procesador de informacin.
Modelos de la arquitectura cognitiva: sistema de smbolos, modelos conexionistas,
modelos de ingeniera
Fenmenos y teoras de la memoria
Fenmenos y teoras de la percepcin
Fenmenos y teoras de las habilidades motoras
Fenmenos y teoras de la atencin y la vigilancia
Fenmenos y teoras de la resolucin de problemas
Fenmenos y teoras del aprendizaje y la adquisicin de habilidades
Fenmenos y teoras de la motivacin
Modelos conceptuales de los usuarios
Modelos de la accin humana
Diversidad humana, incluyendo la poblacin con discapacidad
H2. Lenguaje, comunicacin e interaccin
El lenguaje como medio de comunicacin e interfaz. Los fenmenos de la comunicacin.
Aspectos del lenguaje: sintaxis, semntica, pragmtica
Modelos formales de la lengua
Fenmenos pragmticos de la interaccin conversacional (por ejemplo, tomar turnos)
Fenmenos del lenguaje
Lenguajes especializados (por ejemplo, la interaccin grfica, consulta, comando, los
sistemas de produccin)
Reutilizacin de la interaccin (por ejemplo, listas de historial)
Lenguaje y comunicacin tangible.
25

H3. Ergonoma
Las caractersticas antropomtricas y fisiolgicas de las personas y su relacin con los parmetros
de espacio de trabajo y medio ambiente.
Antropometra humana en relacin con el diseo del rea de trabajo
Disposicin de las pantallas y los perifricos de control
Limites cognitivos y sensoriales del humano
Efectos sensoriales y de percepcin de las distintas tecnologas de visualizacin,
legilibilidad, diseo de la pantalla o dispositivo
Control de diseo
Fatiga y problemas de salud
Diseo de muebles e iluminacin
Problemas de temperatura y ruido ambiental
Diseo de entornos estresantes o peligrosos
Diseo para personas con discapacidades
Diseo de nuevos instrumentos musicales.
2.2.3. Sistema informtico y arquitectura de la interfaz (C)
Las mquinas tienen componentes especializados para interactuar con los seres humanos. Algunos
de estos componentes son bsicamente transductores para mover la informacin fsica entre el
hombre y la mquina. Otros componentes tienen que ver con la estructura de control y la
representacin de los aspectos de la interaccin. Estos componentes especializados estn
cubiertos en los siguientes temas.
C1. Dispositivos de entrada y salida
La construccin tcnica de los dispositivos para mediar entre humanos y mquinas.
Dispositivos de entrada: encuesta, mecnica de un dispositivo particular, caractersticas
de rendimiento (humano y sistema), dispositivos para personas con discapacidades,
dispositivos de escritura, de gestos, de entrada de voz, seguimiento de ojos, dispositivos
exticos (por ejemplo, electroencefalografa y otras seales biolgicas)
Dispositivos de salida: encuesta, mecnica de los dispositivos, dispositivos vectoriales,
dispositivos de rasterizado, tarjetas graficas, manejo de eventos, caractersticas de
rendimiento, dispositivos de salida para personas con discapacidad, sonido y el habla,
pantallas 3D, movimiento (por ejemplo, simuladores de vuelo) , dispositivos exticos
Caractersticas de los dispositivos de entrada/salida (por ejemplo, peso, portabilidad,
ancho de banda)
Dispositivos virtuales
Diseo, construccin e implementacin mediante soluciones tecnolgicas de interfaces
tangibles de usuario.
C2. Tcnicas de dilogo
La arquitectura de software y las tcnicas bsicas para interactuar con seres humanos.
26

Dilogos de entrada:
Tipos de propsitos de la entrada (por ejemplo, seleccin, especificacin de parmetros
discretos, control continuo)
Tcnicas de entrada: tcnicas de teclado (por ejemplo, comandos, mens), tcnicas de
mouse (por ejemplo, drag-and-drop), tcnicas basadas en el lpiz (por ejemplo,
reconocimiento de caracteres, de gestos), tcnicas basadas en la voz
Dilogos de salida:
Tipos de propsitos de la salida (por ejemplo, transmitir informacin precisa, informacin
de resumen, crear visualizaciones de informacin)
Tcnicas de salida (por ejemplo, scrolling de la pantalla, ventanas, animacin)
Cuestiones de diseo de pantalla (por ejemplo, el enfoque, el desorden, la lgica visual)
Tcnicas de interaccin de dilogo:
Tipo y tcnicas de dilogo (por ejemplo, tcnicas alfanumricas, rellenado de formularios,
seleccin de menes, conos y manipulacin directa, funciones genricas, lenguaje
natural)
Navegacin y orientacin en los dilogos, gestin de errores
Dilogos multimedia y no grficos: entrada de voz, salida de voz, correo de voz, correos de
video, documentos activos, DVDs
Agentes y tcnicas de Inteligencia Artificial
Dilogos multi-persona
Tcnicas de dilogo o interaccin tangible. (Ej: Token + Constraints )
Cuestiones relativas al dialogo:
Cuestiones relacionadas con las respuestas en tiempo real
Teora de control manual
Control supervisado, sistemas automticos, sistemas embebidos
Normas y estndares
Propiedad intelectual del Look-and-Feel
Tcnicas de colaboracin y trabajo en equipo.
C3. Tipos de dilogo
Los usos conceptuales que se llevan a cabo mediante la aplicacin de los medios tcnicos. Dichos
conceptos surgen en cualquier disciplina relacionada con los medios de comunicacin (por
ejemplo, el cine, el diseo grfico, etc.)
Metforas de interaccin (por ejemplo, la metfora de herramientas, la metfora del
agente)
27

Metforas de contenido (por ejemplo, la metfora del escritorio, la metfora del
documento en papel)
Persona, personalidad, punto de vista
Modelos de espacio de trabajo
Gestin de la transicin (por ejemplo, desvanecimiento, barrido de cmara)
Tcnicas relevantes de otros medios (por ejemplo, cine, teatro, diseo grfico)
Estilo y esttica
C4. Computacin Grfica
Conceptos bsicos de grficos por computadora que son especialmente tiles para IHC.
Geometra 2D y 3D del espacio, transformaciones lineales
Primitivas grficas y atributos: representaciones de mapas de bits y voxels, operaciones de
rasterizado, Quadtrees y Octrees, imgenes independientes del dispositivo, lenguajes de
descripcin de pginas
Modelado de slidos, splines, modelado de superficies, eliminacin de superficies ocultas,
animacin, algoritmos de renderizado, modelos de iluminacin
Representacin de color, mapas de color, gamas de colores de los dispositivos
C5. Arquitectura de dilogo
Arquitecturas de software y estndares para interfaces de usuario.
Modelo de capas de la arquitectura de los dilogos y los sistemas de ventanas, modelos de
referencia de sistemas de dilogo
Modelos de imgenes de pantalla (por ejemplo, RasterOp, PostScript, QuickDraw)
Modelos de gestin de ventanas (por ejemplo, la direccin compartida del espacio,
cliente-servidor), anlisis de los sistemas de ventanas ms importantes (por ejemplo, X,
New Wave, Windows, Open Look, Presentation Manager, Macintosh)
Modelos de conexin de dilogo a aplicacin
Modelos para la especificacin de dilogos
Arquitecturas de interfaz multi-usuario
Estandarizacin e interoperabilidad
2.2.4. Proceso de desarrollo (D)
La construccin de interfaces humano-computadora es tanto una cuestin de diseo como de
ingeniera. Estos temas tienen que ver con metodologas y prcticas de diseo de interfaces. Otros
aspectos del proceso de desarrollo incluyen la relacin del desarrollo de la interfaz con la
ingeniera (software y hardware) del resto del sistema.
D1. Enfoques de diseo
El proceso de diseo. Temas relevantes de otras disciplinas de diseo.
Conceptos bsicos de diseo grfico (por ejemplo, lenguajes de diseo, tipografas, uso del
color, organizacin espacial en 2D y 3D, secuencia temporal, etc.)
28

Procesos alternativos de desarrollo de sistemas (por ejemplo, modelo de cascada, diseo
participativo), modelo de ciclo de vida, diseo interactivo, eleccin del mtodo bajo
limitaciones de tiempo / recursos
Tcnicas de anlisis de tareas (por ejemplo, estudios de campo, mtodos analticos),
asignacin de tareas, anlisis de mercado
Tcnicas de especificacin de diseo
Tcnicas de anlisis de diseo
Conceptos bsicos de diseo industrial
Casos de estudio de diseo y anlisis empricos de diseos
D2. Tcnicas y herramientas de implementacin
Tcticas y herramientas para implementacin.
Relaciones entre el diseo, la evaluacin y la implementacin
Portabilidad y reutilizacin, portabilidad de la aplicacin, portabilidad del dispositivo
Tcnicas de creacin de prototipos (por ejemplo, guiones grficos, video, "El Mago de Oz",
HyperCard, implementaciones rpidas de prototipos)
Toolkits para creacin de dilogos (por ejemplo, MacApp, NextStep, SAIU, HyperCard)
Mtodos orientados a objetos
Representacin de datos y algoritmos
Tcnicas, libreras, toolkits y hardware disponible para el desarrollo de interfaces
tangibles.
D3. Tcnicas de evaluacin
Filosofa y mtodos especficos para las evaluaciones.
Productividad
Figuras de mrito (por ejemplo, el tiempo, los errores, facilidad de aprendizaje, diseo
para adivinar, preferencias, etc.)
Tcnicas de testeo de usabilidad, vinculacin del testeo con las especificaciones
Tcnicas de evaluacin formativas y sumativas??? para la evaluacin emprica, incluyendo,
mtodos de observacin de campo, observacin de participantes, tcnicas de entrevista,
diseo de cuestionarios, mtodos psicomtricos, protocolos de video, registros del
sistema, diseo de experimentos (por ejemplo, preocupacin por el sesgo de la muestra,
etc.), mtodos psicolgicos y sociolgicos de evaluacin, tica del trabajo con
participantes
D4. Sistemas de ejemplos y casos de estudio
Diseos clsicos que sirven como ejemplos de diseo de interfaces humano-computadora.
Orientado a comandos:
OS/360 JCL (sistema de comandos por lote, punto de partida para ver futuras mejoras)
PC-DOS (interfaz de lnea de comando aprendida por millones de personas)
29

Sistema de check-in de aerolneas (restricciones de tiempo, entradas ambiguas, sistemas
distribuidos)
Orientado a grficos:
Xerox Star (interfaz de ventanas e conos, comandos genricos)
Apple Macintosh (interfaz similar a lo largo de todas las aplicaciones)
MacPaint (programa grfico ampliamente conocido y disponible)
Combinaciones definidas por el usuario:
Sistema operativo Unix (fuerte arquitectura combinatoria emparejada con una dbil
consideracin de factores humanos)
Emacs (orientado al lenguaje, amplio conjunto combinatorio de comandos)
Visicalc (aplicacin hogarea con un fuerte modelo conceptual que tuvo xito a pesar de
su poca consideracin sobre los factores humanos)
DBASEIII (simple, pero exitosa, generadora de aplicaciones de usuario)
Interfaces para usuarios no entrenados, para usuarios al paso
Olympic Message System (uso prctico de pruebas de usuario bajo restricciones de
tiempo)
Nintendo Super Mario Bros (puede ser aprendido y comprendido sin un manual por nios
de escuela primaria)
2.3. Disciplinas que contribuyen a la IHC
En esta seccin se enumeran las disciplinas ms influyentes que abarcan el campo de Interaccin
Humano-Computadora, as como sus principales contribuciones al mismo. stas son:
Figura 2 - Disciplinas relacionadas con la usabilidad, la cual incluye las disciplinas que contribuyen a la IHC. [127]
30

Ciencias de la Computacin:
Algoritmos, estructuras de datos, ingeniera de software.
Psicologa Cognitiva:
Capacidades y limitaciones del usuario.
Interaccin grupal (distributed cognition).
Apoyo a la toma de decisiones.
Psicologa Organizacional
Estructura y funciones de la organizacin.
Ergonoma y factores humanos
31

Diseo de hardware y software que no daen al usuario.
Desempeo y eficiencia.
Lingstica:
Dilogos (speech acts).
Inteligencia Artificial:
Hacer que la computadora haga lo ms conveniente, en el momento adecuado, de
acuerdo al usuario correspondiente.
Antropologa:
Aspectos culturales del usuario y su grupo.
Diseo:
Diseo Grfico,
Diseo de informacin.
Ingeniera:
Desarrollo de tecnologas para dar soporte a nuevos tipos de interfaces e interacciones.
2.4. Historia
A continuacin se describen los orgenes del campo de Interaccin Humano-Computadora, as
como su evolucin histrica, con el objetivo de dar un pantallazo al lector, ubicarlo en el contexto
histrico de forma que comprenda los motivos de su surgimiento y de su evolucin.
2.4.1. Orgenes
Hasta finales de 1970, los nicos seres humanos que interactuaban con computadoras eran los
profesionales de la tecnologa de la informacin y los aficionados dedicados. Esto cambi con la
aparicin de la computacin personal en torno a 1980. La computadora personal, que incluye
tanto el software personal (aplicaciones de productividad, tales como editores de texto y hojas de
clculo, y juegos de computadora) como la plataforma de computadora personal (sistemas
operativos, lenguajes de programacin y hardware), hizo de todos en el mundo desarrollado un
usuario potencial, y claramente puso de manifiesto las deficiencias de los equipos con respecto a
la facilidad de uso para aqullos que queran utilizar las computadoras como herramientas.
El reto creado por la computacin personal se puso de manifiesto en el momento oportuno. El
amplio proyecto de Ciencia Cognitiva
1
, que incorpor a la Psicologa Cognitiva, a la Inteligencia

1
Se denomina ciencia cognitiva al estudio interdisciplinario de cmo la informacin es representada y
transformada en la mente/cerebro. Es el conjunto de disciplinas que surgen de la convergencia
interdisciplinaria de investigaciones cientficas y tecnolgicas, en torno a los fenmenos funcionales y
32

Artificial, a la Lingstica, a la Antropologa Cognitiva y a la Filosofa de la Mente, se haba formado
a finales de la dcada de 1970. Parte del programa de la Ciencia Cognitiva fue desarrollar
aplicaciones sistemticas basadas en conocimiento cientfico que se conoce como "Ingeniera
Cognitiva". Por lo tanto, justo en el momento en que la computacin personal present la
necesidad prctica de IHC, la Ciencia Cognitiva present las personas, los conceptos, las
habilidades, y la visin para hacer frente a esas necesidades. La IHC fue uno de los primeros
ejemplos de la Ingeniera Cognitiva.
Otros acontecimientos histricos fortuitos contribuyeron al establecimiento de la IHC. La
Ingeniera de Software, inmersa en el anlisis de la complejidad del software de dcada de 1970,
estaba empezando a centrarse en los requisitos no funcionales, incluyendo la facilidad de uso y el
mantenimiento, as como tambin de los procesos no lineales de desarrollo de software que
dependan en gran medida del testing. Los grficos por computadora y la recuperacin de
informacin haban surgido en la dcada de 1970, y rpidamente se reconoci que los sistemas
interactivos eran clave para progresar ms all de estos primeros logros. Todos estos temas de
desarrollo en Ciencias de la Computacin apuntaban hacia la misma conclusin: El camino a seguir
de la computacin requera del estudio y entendimiento de los usuarios, as como tambin de
facilitarlos de mejor y mayor control. [17] NO SE entiende esta ltima oracin. REESCRIBIT
Finalmente, la Ingeniera de Factores Humanos, que haba desarrollado muchas tcnicas para el
anlisis emprico de las interacciones humano-sistema en los llamados dominios de control, como
la aviacin y la fabricacin, vio a la IHC como un dominio valioso y prometedor en el que los
operadores humanos ejercen regularmente un mayor rol en la resolucin de problemas. Estas
necesidades y oportunidades convergieron en torno a 1980, concentrando una cantidad de
energa humana generada previamente, y creando un proyecto interdisciplinario de alta
visibilidad.
2.4.2. De una pequea rea de especialidad a la comunidad
El enfoque tcnico original y permanente de la IHC es la usabilidad. Este concepto, inicialmente,
fue articulado en el lema "fcil de aprender, fcil de usar". La simplicidad contundente de esta
conceptualizacin dio a la IHC una identidad vanguardista y prominente en la informtica. Sirvi
para mantener el campo de investigacin unido, y para ayudarlo a influir en el desarrollo de las
ciencias de la computacin y la tecnologa de manera ms amplia y efectiva. Sin embargo, dentro
de IHC el concepto de usabilidad ha sido reconstruido continuamente, y se ha convertido en un
concepto cada vez ms rico y con problemticas ms intrigantes (seguro que intrigantes?). El
concepto de usabilidad hoy en da incluye cualidades como diversin, bienestar, eficacia colectiva,
tensin esttica, potencializacin de la creatividad, soporte al desarrollo humano, y muchos otras
ms. Una visin ms dinmica del concepto de usabilidad es el de un objetivo programtico que
debe continuar desarrollndose a medida que la comprensin del mismo mejora.

emergentes, dados a partir de las actividades neurofisiolgicas del encfalo y del sistema nervioso,
incorporados, y que tpicamente se les denomina como mente y comportamiento.
33

Aunque el origen acadmico de la IHC fueron las Ciencias de la Computacin, y su foco original
estaba en aplicaciones personales de productividad, sobre todo de edicin de texto y hojas de
clculo, el campo no ha dejado de diversificarse y ha superado todos los lmites. Rpidamente se
expandi para abarcar visualizacin, sistemas de informacin, sistemas de colaboracin, procesos
de desarrollo de sistemas, y muchas reas de diseo. La IHC se ensea ahora en muchos
departamentos y facultades que tienen relacin con la tecnologa de la informacin, incluyendo
Psicologa, Diseo, Estudios de Comunicacin, Ciencia Cognitiva, Ciencias de la Informacin,
ciencia y estudios de la tecnologa, Ciencias Geogrficas, Sistemas de Gestin de la Informacin,
Ingeniera Industrial e Ingeniera en Sistemas. La investigacin de la IHC y su prctica se basan e
integran todas estas perspectivas.
Un resultado de este crecimiento es que la IHC est menos singularmente enfocado en lo que
respecta a los conceptos bsicos y los mtodos, reas problemticas y suposiciones acerca de las
infraestructuras, aplicaciones y tipos de usuarios. De hecho, ya no tiene sentido considerar a la IHC
como una especialidad de Ciencias de la Computacin, la IHC ha crecido hasta ser ms amplia, ms
grande y mucho ms diversa que la informtica. Se expandi a partir del comportamiento del
usuario individual y genrico para incluir la informtica social y de organizacin, la creatividad y la
accesibilidad para las personas de edad avanzada, capacidades diferentes, y para todas las
personas. Se expandi desde las aplicaciones de escritorio de oficina para incluir juegos, e-
learning, comercio electrnico, sistemas militares, y control de procesos. Se expandi desde las
primeras interfaces grficas de usuario para incluir multitud de tcnicas de interaccin y
dispositivos, como las interacciones multimodales y las nuevas interacciones ubicuas, de mano y
conscientes del contexto.
En la dcada de 1980, la IHC era un rea de especialidad pequea y enfocada. Fue un pequeo
grupo tratando de establecer lo que entonces era una visin hertica de la informtica. Hoy en da,
en gran parte debido al xito de ese empeo, la IHC es una comunidad amplia y multifactica,
dbilmente ligada por la evolucin del concepto de usabilidad, y el compromiso integrador de
darle la mayor importancia y valor a los factores o problemticas humanas como consideracin
primordial en la creacin de sistemas interactivos.


34

3. Orgenes de las Interfaces Tangibles
El desarrollo de la nocin de una "interfaz tangible" est estrechamente ligado a la motivacin
inicial de Realidad Aumentada y Computacin Ubicua. En 1993, un nmero especial de la revista
Communications of the ACM titulado "Back to the Real World" [18] argumentaba que los
equipos de escritorio y la realidad virtual alejaban a los seres humanos de su entorno natural. El
artculo sugera que en lugar de forzar a los usuarios a entrar en un mundo virtual, se debera
aumentar y enriquecer el mundo real con funcionalidad digital. Este enfoque fue motivado por el
deseo de conservar la riqueza y la dependencia del contexto (situatedness
2
) de la interaccin
fsica, y por el intento de integrar la informtica en los entornos existentes y las prcticas humanas
de forma tal de permitir una transicin fluida entre "lo digital" y "lo real".
Mientras que las ideas que subyacen a las interfaces tangibles se haban discutido en la edicin
especial de la revista "Back to the Real World" [falta referencia], pasaran algunos aos hasta que
stas evolucionaran hacia un estilo de interaccin en su propio derecho. En 1995, Fitzmaurice,
Ishii, y Buxton [19] introdujeron la nocin de Graspable Interface donde se utilizan manijas
fsicas para manipular objetos digitales. Ishii y sus estudiantes [9] presentaron una visin ms
completa de Bits Tangibles en 1997. Su visin se centraba en convertir el mundo fsico en una
interfaz mediante la conexin de objetos fsicos y superficies con datos digitales. Basndose en
este trabajo, la interfaz tangible ha emergido como un nuevo tipo de interfaz y estilo de
interaccin propio.

Figura 3 - Un objeto graspable es una combinacin de un objeto fsico o manija y un objeto virtual.
Mientras que Ishii y sus estudiantes desarrollaron una rica agenda de investigacin para ampliar y
perfeccionar su visin de Bits Tangibles, otros grupos de investigacin se centraron en dominios de
aplicacin especficos y en el soporte de prcticas de trabajo establecidas a travs del aumento
digital de los medios y herramientas de trabajo utilizados. Tales esfuerzos a menudo resultaron en
sistemas que tambin pueden ser clasificados como interfaces tangibles. Particularmente notable

2
Por situatedness se entiende que cuando un usuario se mueve a travs de una interaccin, sus otras
acciones no estn completamente predeterminadas, sino que los elementos de la situacin o del contexto
se utilizan para determinar dichas acciones.
35

es la obra de Wendy Mackay sobre el uso de tarjetas de progreso de vuelo en el control de trfico
areo y sobre el papel aumentado para el desarrollo de storyboards para productores de video
[20]. Ideas similares se desarrollaron de forma simultnea en todo el mundo, indicando la
necesidad de un movimiento contrario a los cada vez ms crecientes conceptos de digitalizacin y
virtualizacin.

Figura 4 Izq.: Interactuando con Video Mosaic (Unix) con los botones de papel, la cmara y el video embebido. Der.
Arriba: La tarjeta de storyboard de la versin para Macintosh. Der. Abajo: Versin para Macintosh con cdigos de
barras y el video proyectado.
Durante la mayor parte de la dcada siguiente a la proposicin de las TUIs como un nuevo estilo
de interfaz, la investigacin se centr en el desarrollo de sistemas que exploran las posibilidades
tcnicas. En los ltimos aos, esta fase de prueba de concepto ha llevado a una etapa ms madura
de investigacin con un mayor nfasis en el diseo conceptual, las pruebas de usuarios y las de
campo, la reflexin crtica, la teora y la construccin de conocimientos de diseo. Las conexiones
con desarrollos relacionados a las disciplinas de diseo se hicieron ms fuertes, sobre todo desde
que una amplia gama de herramientas se han vuelto disponibles reduciendo considerablemente la
complejidad para el desarrollo de TUIs.
3.1. Graspable User Interfaces
En 1995, Fitzmaurice et al. [19] introdujeron el concepto de Graspable Interface, (podra ser
traducida al espaol como Interfaz Agarrable) mediante el uso de bloques de madera como
manijas fciles de agarrar y manejar para manipular objetos digitales. Su objetivo era aumentar el
carcter directo y la manipulabilidad
3
de las interfaces grficas de usuario. Un bloque queda
anclado a un objeto grfico en el monitor mediante su colocacin sobre el mismo. Mover y rotar el

3
Cualidad de ser controlable por los movimientos especializados de las manos.
36

bloque produce que el objeto grfico se mueva en sincrona. La colocacin de dos bloques en dos
esquinas de un objeto grfico activa el zoom mientras que se arrastran las dos esquinas con los
bloques. Esto permiti los tipos de interacciones de dos manos o dos dedos que hoy en da
conocemos a travs de las superficies multi tctiles.

Figura 5 - Para estirar el cuadrado se pueden utilizar dos ladrillos fsicos. Un ladrillo acta como un ancla, mientras el
segundo bloque se desplaza.
Las manijas fsicas en combinacin con herramientas de entradas dedicadas a la funcionalidad del
sistema se utilizaron para argumentar la distribucin de las entradas en el espacio en lugar de en
el tiempo, la des-secuenciacin de la interaccin, el soporte de la accin bi-manual y la reduccin
de la mediacin entre los dispositivos de entrada y los objetos de interaccin.
3.2. Bits Tangibles
Slo unos pocos aos ms tarde, Hiroshi Ishii y sus estudiantes introdujeron el concepto de Bits
Tangibles, que pronto dio lugar a la proposicin de una interfaz de usuario tangible [9]. El objetivo
era hacer que los bits sfueran directamente accesibles y manipulables, usando el mundo real como
una pantalla y como medio para la manipulacin: el mundo entero podra convertirse en una
interfaz. Los datos podran estar conectados con los artefactos fsicos y las superficies
arquitectnicas, haciendo los bits tangibles.
El cambio de terminologa de graspable (agarrable) a tangible parece deliberado. Mientras que el
trmino graspable, subraya la capacidad de manipular objetos de forma manual, el sentido de
"tangible" abarca "realidad/certeza", pudiendo ser tocado, as como la accin de tocar, lo cual
incluye percepcin multi-sensorial:
Las interfaces grficas de usuario no alcanzan a aprovechar la riqueza de los sentidos
humanos y las habilidades que las personas han desarrollado a travs de toda una
vida de interaccin con el mundo fsico. Nuestra intencin es cambiar los bits pintados
en la pantalla por 'bits tangibles, aprovechando los mltiples sentidos y la multi-
modalidad de las interacciones humanas con el mundo real. Creemos que el uso de
objetos fciles de manipular y de un ambiente interactivo nos llevar a una
experiencia mucho ms rica y multi-sensorial de la informacin digital [9]
El trabajo de Ishii se centr en el uso de objetos tangibles tanto para manipular como para
representar los contenidos digitales. Uno de los primeros prototipos de TUI fue Tangible
Geospace, un mapa interactivo del campus del MIT en una mesa de proyeccin. Colocando conos
37

fsicos sobre la mesa, por ejemplo, un modelo de plexigls de la cpula del MIT, se permita que el
mapa se reposicionase de manera que el modelo quedara colocado sobre el edificio respectivo en
el mapa. Agregar otro modelo tangible produca que el mapa cambiara de tamao y girara de
forma que el mismo coincida con los modelos tangibles de los edificios. Pequeos monitores
mviles servan como lupas mgicas que mostraban una representacin 3D de la superficie
subyacente. Estas interfaces se construyeron basadas en el principio de interaccin de
manipulacin bi-manual directa de las Graspable Interfaces, pero se reemplazaron los bloques
abstractos y genricos con sustitutos icnicos y simblicos.

Figura 6 - GeoSpace
Los primeros prototipos de TUI fueron fuertemente influenciados por las metforas de las GUI.
Posteriormente, proyectos como Urp [21] apuntaban intencionadamente a diverger de la
interacciones similares a las GUI, centrndose en tokens fsicos que sirviesen tanto para la
manipulacin como para la representacin de los datos. Urp brinda soporte a los procesos de
planificacin urbana. Permite a los usuarios interactuar con el flujo del viento y las simulaciones de
la luz solar a travs de la colocacin de modelos fsicos de edificios y herramientas sobre una
superficie. Los modelos tangibles generan sombras digitales que se proyectan sobre la superficie.
El flujo de viento simulado se proyecta como lneas sobre la superficie. Varias herramientas
tangibles permiten a los usuarios controlar y alterar el modelo urbano. Por ejemplo, los usuarios
pueden probar la velocidad del viento o las distancias, modificar las propiedades de los materiales
de los edificios (de vidrio o de paredes de piedra), y cambiar la hora del da. Estos cambios afectan
a las sombras digitales que se proyectan y a la simulacin del viento.
38


Figura 7 Izq.: Las sombras virtuales proyectadas por cada estructura tangible. Der.: Incidencia del flujo de viento
sobre cada estructura tangible.
3.3. Precursores de las Interfaces Tangibles
Varios trabajos previos a los de Ishii y sus estudiantes influenciaron el desarrollo de lo que luego
sera el campo de las interfaces tangibles. Las ideas introducidas por los dos sistemas descriptos a
continuacin inspiraron ms tarde a los investigadores de HCI en su bsqueda de desarrollo de
nuevas interfaces y conceptos de interaccin.
3.3.1. La Mquina Tragamonedas (The Slot Machine)
Probablemente, el primer sistema que se puede clasificar como interfaz tangible fue la Mquina
Tragamonedas de Perlman [22]. La misma utiliza tarjetas fsicas para representar las
construcciones del lenguaje Logo que se utilizan para programar la Tortuga Logo [23] . Las
investigaciones de Seymour Papert
4
han demostrado que mientras que la tortuga fsica robot
ayudaba a los nios a entender cmo se crean en el espacio las formas geomtricas, escribir los
programas era difcil para los nios ms pequeos e imposible para los preescolares que ni
siquiera saban escribir con teclado. Perlman cree que estas dificultades son resultado no slo de
la sintaxis del lenguaje, sino tambin de la interfaz de usuario. Su primer prototipo consista en
una caja con un conjunto de botones que permita la elaboracin de programas simples a travs
de acciones y nmeros. La caja luego se utiliz como control remoto para la tortuga. Este
dispositivo tambin puede grabar y reproducir el movimiento de la tortuga, proporcionando un
modo de programacin por demostracin. Su prototipo final fue la Mquina Tragamonedas, la que
permita las llamadas a procedimientos y la modificacin de los programas.

4
Seymour Papert (Pretoria, Sudfrica, 29 de febrero de 1928) es un pionero de la inteligencia artificial,
inventor del lenguaje de programacin Logo. Es considerado como destacado cientfico computacional,
matemtico y educador. Trabaj con el psiclogo educativo Jean Piaget en la Universidad de Ginebra desde
1959 hasta 1963. En 1963 fund junto a Marvin Minsky el Instituto de Inteligencia Artificial del MIT.
39


Figura 8 Las tres filas de ranuras (una de cada color) de la Mquina Tragamonedas.
En la Mquina Tragamonedas, cada construccin del lenguaje de programacin (una
accin, un nmero, variable o condicin) est representada por una tarjeta de plstico. Para
especificar un programa, una secuencia de tarjetas se inserta en una de las tres filas de ranuras de
diferente color de la mquina. A la izquierda de la ranura se encuentra el botn "Do It", que hace
que la tortuga ejecute los comandos de izquierda a derecha. Colocando una tarjeta especial de
color en alguna de las ranuras de una de las tres filas se invoca una llamada al procedimiento de la
fila de ranuras del respectivo color que, cuando termina su ejecucin vuelve, y contina
ejecutando el resto de las tarjetas insertadas en la fila de ranuras que hizo la llamada. Este
mecanismo implementa las llamadas de funcin, as como la recursin simple.
3.3.2. The Marble Answering Machine
Otra de las implementaciones precursoras en este campo fue The Marble Answering Machine [3],
creada en 1992 por el diseador de productos Durrell Bishop. La misma instanciaba los
mensajes de voz que llegaban mediante bolitas (canicas) para luego escucharlos. A tal efecto,
el usuario seleccionaba una de ellas y la depositaba en un agujero especial para su
reproduccin en la mquina. Para devolver la llamada a la persona que haba dejado el
mensaje, el usuario seleccionaba la bolita correspondiente y la depositaba en un agujero
destinado a tal fin. El mensaje poda ser eliminado e incluso almacenado para categorizarlo
y mantener organizados los mensajes recibidos.
40


Figura 9 Marble Answering Machine. El mensaje de voz es mapeado a una de las bolillas. Luego, al insertar la bolilla
en el lugar establecido, el mensaje es reproducido.
Los diseos de Bishop se basan en affordance
5
fsico y en el conocimiento de los usuarios de cmo
comunicar funcionalidad e interactuar a travs de su experiencia previa, propia de sus actividades
habituales del da a da [24] . Estas ideas eran muy diferentes a las dominantes en la escuela de
diseo de productos de la dcada de 1990, que empleaba la semntica de productos
principalmente para influir en las emociones de los usuarios y sus asociaciones. Lo ms
sorprendente es cmo Bishop asignaba nuevos significados a los objetos (mapeo de objetos),
convirtindolos en punteros a otras cosas, en contenedores de datos y en referencias a otros
objetos en una red. Muchos de sus diseos adems emplearon mapeos espaciales, derivando el
significado de la accin desde el contexto (por ejemplo, su lugar). Los diseos de Bishop utilizaban
objetos conocidos como referencias legibles en el diseo esttico de los nuevos proyectos
electrnicos, sin embargo, estas referencias se restringan a simples metforas literales.
Recombinando significados y acciones, los diseos de Bishop han seguido siendo un desafo y una
fuente de inspiracin para los diseadores e investigadores del campo de IHC.


5
Affordance es una cualidad de un objeto que transmite las posibilidades de accin que brinda el mismo que
son inmediatamente percibidas por el usuario. Una definicin ms actual y glamorosa de affordance, sera la
capacidad de un objeto para invitar al usuario a utilizarlo. Se podra traducir al espaol como "comprensin
intuitiva".
41

4. Dominios de Aplicacin de las Interfaces Tangibles
Las reas dominantes de aplicacin de las TUIs parecen ser el aprendizaje, el soporte para la
planificacin y resolucin de problemas, las herramientas de programacin y simulacin, el
soporte para visualizacin y exploracin de informacin, el entretenimiento y juego, la
comunicacin social, la msica y la performance multimedia.
Los dominios que se discuten aqu no son mutuamente excluyentes, es decir, un sistema TUI
puede pertenecer a ms de un dominio o rea de aplicacin.
4.1. TUIs para el aprendizaje
Un gran nmero de TUIs se pueden clasificar como herramientas o entornos asistidos por
computadora orientados al aprendizaje. Hay varias razones de fondo para ello. En primer lugar, los
investigadores de reas del aprendizaje y diseadores de juguetes han seguido siempre la
estrategia de aumentar los juguetes para aumentar su funcionalidad y su atractivo. En segundo
lugar, los entornos fsicos de aprendizaje estimulan todos los sentidos y de ese modo contribuyen
al desarrollo integral del nio. Con referencia a Bruner
6
y Piaget
7
, la investigacin y la teora sobre
el aprendizaje hace hincapi en el papel de la realizacin, el movimiento fsico, y la interaccin
multimodal [25] . Por otra parte, los estudios sobre gestos han demostrado que los gestos ayudan
al proceso de pensamiento y aprendizaje [26].
Una gama de sistemas de aprendizaje pertenecen tambin a las categoras de resolucin de
problemas, planificacin y sistemas de simulacin que se describen en detalle ms adelante. stos
incluyen, por ejemplo, Tinkersheets, que facilita el aprendizaje sobre logstica [27] , Illuminating
Light [28], un entorno de aprendizaje de holografa y ptica. Muchos sistemas con interfaces
tangibles tambin combinan el aprendizaje con el entretenimiento, como es el caso de los
juguetes educativos o instalaciones de museo. Se mencionaran aqu algunos sistemas relacionados
al aprendizaje que tambin pertenecen a otras categoras, pero se dejaran las interfaces de
usuario tangibles relacionadas con programacin tangible para una seccin aparte.
Digital Manipulatives [29] son interfaces tangibles que se basan en los juguetes educativos
tradicionales, tales como kits de construccin, bloques de construccin, y materiales de
Montessori. Son versiones computacionalmente realzadas de objetos fsicos que permiten a los
nios explorar conceptos, que implican procesos temporales y de computacin. Uno de los ms
conocidos y comercializados es el Lego MINDSTORMS, que es un kit de construccin robtica
Lego/Logo que fue desarrollado inicialmente por el grupo del MIT Media Lab Kindergarten [30].

6
Jerome Bruner es un reconocido psiclogo estadounidense. En 1960 fund el Centro de Estudios Cognitivos
de la Universidad de Harvard y, aunque no es el inventor, fue quien impuls la psicologa cognitiva. Su teora
cognitiva del descubrimiento, desarrolla, entre otras, la idea de andamiaje, la cual retoma de la Teora Socio-
histrica de Lev Vygotski.

7
Jean William Fritz Piaget fue un epistemlogo, psiclogo y bilogo suizo, creador de la epistemologa
gentica y famoso por sus aportes en el campo de la psicologa gentica, por sus estudios sobre la infancia y
por su teora del desarrollo cognitivo.
42


Figura 10 Lego MINDSTORM
Un excelente y detallado resumen sobre las razones para el aprendizaje con elementos tangibles y
sobre las fuentes de literatura de investigacin disponible al ao 2004 se presenta en el informe
de Futurelab sobre Tangibles y aprendizaje [31] .
4.2. Resolucin de problemas y planificacin
Tres aspectos de las TUIs han demostrado ser eficaces para el soporte de resolucin de problemas:
1. Las acciones epistmicas,
2. Las restricciones fsicas,
3. Las representaciones tangibles del problema.
Las acciones epistmicas son las manipulaciones no pragmticas de artefactos para lograr una
mejor comprensin del contexto de una tarea. Tales acciones han demostrado facilitar el trabajo
mental [32]. Las TUI dan soporte a una amplia gama de acciones epistmicas desde girar objetos
fsicos en el espacio hasta organizarlos sobre una superficie. Las restricciones fsicas pueden hacer
uso de affordance fsico para comunicar la sintaxis de la interaccin y para limitar el espacio de
soluciones. Por lo tanto, las restricciones fsicas pueden disminuir la necesidad de aprender reglas
explcitas y reducen la complejidad de uso de un sistema computacional para una tarea
determinada [33]. Por ltimo, la representacin tangible es ms convincente en los dominios de
aplicacin espacial o geomtrica, tales como la planificacin urbana y arquitectnica donde la
disposicin fsica y la manipulacin de los objetos tienen una correspondencia directa con el
problema que representa. Se ha descubierto que el uso de TUIs soporta la cognicin espacial de
los diseadores, reduce la carga cognitiva, y permite una inmersin ms creativa en el problema
[34]. Varios estudios tambin han demostrado los beneficios de la interaccin tangible para
resolver tareas que involucran la manipulacin de informacin abstracta [35].
Urp [21] es una TUI para la planificacin urbana que permite a los usuarios manipular de forma
colaborativa una serie de modelos fsicos de edificaciones y herramientas sobre una superficie,
con el fin de realizar un anlisis de sombras, proximidades, reflexiones, viento y espacio visual.
Mientras que los usuarios colocan y manipulan modelos de edificios sobre la superficie, la interfaz
superpone informacin digital sobre la superficie, activando y actualizando mltiples simulaciones.
Adems de la construccin de modelos fsicos, Urp tambin ofrece una coleccin de herramientas
fsicas para la manipulacin de las condiciones ambientales tales como la hora del da y la
direccin del viento. Al permitir a los usuarios interactuar de forma colaborativa con los objetos
43

fsicos, Urp proporciona una forma intuitiva de interactuar con complejas simulaciones
computacionales.
Ms all de la arquitectura y la planificacin urbana, varios sistemas TUI fueron desarrollados para
ayudar en la resolucin de problemas y simulacin en dominios de aplicacin de naturaleza
topolgica. Los ejemplos incluyen Iluminating Light [36],un entorno de aprendizaje de holografa y
ptica, donde los objetos de plstico sustituyen a los elementos reales (y caros) de laboratorio. Los
rayos de luz se proyectan desde arriba segn la configuracin de objetos de plstico, simulando
haces de luz emitidos desde una fuente de luz y desviados por los espejos y prismas. Adems, los
ngulos, distancias, y la longitud del camino se proyectan en la simulacin.

Figura 11 Iluminating Light
Existen pocos ejemplos de interfaces tangibles que exploren el uso de la interaccin tangible en
una gama ms amplia de tareas abstractas de manejo de informacin. TinkerSheet [37] es un
entorno de simulacin para la logstica de almacenes utilizados en la formacin profesional.
Combina modelos tangibles de la estantera con los formularios de papel, donde el usuario puede
ajustar los parmetros de la simulacin mediante la colocacin de pequeos imanes en el
formulario.
44


Figura 12 - TinkerSheet
4.3. Visualizacin de informacin
Al ofrecer una representacin rica y multimodal que permite la entrada y manejo de datos
mediante el uso de ambas manos, las interfaces tangibles tienen el potencial para mejorar la
interaccin con visualizaciones de informacin. Varios sistemas ilustran el uso de tcnicas de
interaccin tangible para explorar y manipular visualizaciones de informacin.
La Props-Based Interface for 3D Neurosurgical Visualization [38] es una TUI para visualizacin de
imgenes 3D de neurociruga que se basa en la manipulacin fsica utilizando ambas manos para
controlar herramientas de mando en el espacio. La representacin tangible de los datos
manipulados consiste en una herramienta de visualizacin que es una cabeza de mueca, una
herramienta que es un plano de corte, y una herramienta lpiz las cuales ayudan al cirujano a
controlar fcilmente la posicin y el ngulo de corte de la rebanada que desea visualizar
simplemente manteniendo la placa de plstico cerca de la cabeza de la mueca para demostrar la
seccin de corte transversal que desea visualizar. El sistema fue evaluado de manera informal con
ms de cincuenta neurocirujanos. Esta evaluacin ha demostrado que con una introduccin breve,
los cirujanos pueden comprender y utilizar la interfaz aproximadamente dentro del minuto de
entrar en contacto con las herramientas.
45


Figura 13 - Props-Based Interface for 3D Neurosurgical Visualization: el usuario seleccionado un corte transversal para
visualizar.
GeoTUI [39] es una TUI para geofsicos que proporciona soporte fsico para la definicin de planos
de corte en un mapa geogrfico que se proyecta sobre una superficie. El sistema permite a los
geofsicos seleccionar un plano de corte mediante la manipulacin de una regla o controladores de
seleccin sobre el mapa proyectado. El sistema se evalu con geofsicos en su lugar de trabajo. La
evaluacin mostr que los usuarios de la TUI obtienen mejores resultados que los usuarios de una
GUI estndar para una tarea de seleccin de lnea de corte en un mapa geogrfico del subsuelo.

Figura 14 GeoTUI. Izq.: Montaje del dispositivo, con la cmara y el proyector sobre el escritorio. Centro.: El mapa
proyectado sobre la superficie. Der.: La regla siendo utilizada de forma natural con dos manos.
4.4. Programacin Tangible
El concepto de programacin tangible, el uso de tcnicas de interaccin tangibles para la
construccin de programas de computadora, ha estado alrededor hace casi tres dcadas desde la
aparicin de The Slot Machine de Radia Perlman [22] <- ESTA ORACIN est un poco confusa.La
misma fue desarrollada para permitir a los nios pequeos crear programas fsicos de Logo. Suzuki
y Kato utilizaron el trmino de programacin tangible en 1993 para describir su sistema de
AlgoBlocks [40] . McNerney [41] proporciona una excelente visin histrica de los juguetes
electrnicos desarrollados principalmente en el MIT que estn dirigidos a ayudar a los nios a
46

desarrollar habilidades avanzadas de resolucin de problemas y programacin. Edge y Blackwell
[42] analizan cmo las propiedades fsicas de los lenguajes de programacin tangibles influyen en
la facilidad de manipulacin de las estructuras de datos creadas por un lenguaje en particular.
AlgoBlocks [40] ayuda a los nios en el proceso de aprendizaje de programacin utilizando una
actividad de video juego. Grandes bloques representan las construcciones de programacin del
lenguaje educativo Logo. Estos pueden ser conectados entre s formando un programa ejecutable,
con el fin de dirigir un submarino a travs de un laberinto subacutico. Durante la ejecucin, un
LED ubicado en cada bloque se ilumina en el momento que se ejecuta ese comando. El tamao de
los bloques y el movimiento fsico de la manipulacin de los mismos se argument que mejoraba
la coordinacin y la atencin en experiencias de aprendizaje colaborativo.

Figura 15 Un grupo de nios programando de forma colaborativa el submarino en pantalla utilizando los Algoblocks.
4.5. Entretenimiento, juego y entretenimiento educativo
Las interfaces de usuario tangibles relacionadas con juguetes, entretenimiento y entretenimiento
educativo son areas de aplicacin que se superponen. La Nintendo Wii es probablemente el
mejor ejemplo de un dispositivo tangible para entretenimiento, y su xito comercial demuestra el
potencial de mercado de los sistemas relacionados a las interfaces tangibles. Sin embargo, no
debemos pasar por alto otros ejemplos que se ajustan ms estrechamente a la definicin de
interfaz de usuario tangible. Muchos juguetes educativos modernos emplean los principios de la
entrada fsica, la representacin tangible, y el aumento con contenido digital.
Se pueden encontrar muchos tipos diferentes de ejemplos y estudios sobre el tema. En los
siguientes ejemplos se presentan interfaces tangibles que se parecen a los juguetes tradicionales,
pero a las que se les ha dado un nuevo contenido que los hacen interactivos.
47

El Neurosmith Music Blocks [43] presenta cinco bloques multicolores para que los nios jueguen y
los usen para formar sus propias creaciones musicales. Los bloques encastran en una fila y son
sostenidos de forma segura mediante imanes. Cuando los nios hacen presin sobre los bloques,
cada bloque emitir un sonido musical. Cada lado de cada bloque emitir un sonido musical
diferente, y los nios son motivados a girar los bloques tanto para or los diferentes sonidos como
as tambin para ver las diferentes formas visuales que contiene cada lado.

Figura 16 - Neurosmith Music Blocks
Una vez que ellos han decidido qu sonido musical les gusta para cada bloque y los han colocado
en sus lugares, pueden pulsar el botn rojo de play, y los bloques reproducirn el sonido uno tras
otro de izquierda a derecha creando una nueva composicin musical. Los nios pueden seguir la
reproduccin de cada sonido a lo largo de la fila observando cada bloque que se ilumina, y pueden
reajustar los bloques en tiempo real para crear nuevas composiciones.
El Spelling Bee [44] es un juego que ofrece un novedoso mtodo para que los nios aprendan
ortografa. El juego es similar al juego clsico de cubos ABC y el objetivo del mismo tambin es
similar: se pretende que los nios formen palabras intentando diferentes combinaciones con los
bloques.

Figura 17 Spelling Bee
Lo novedoso en Spelling Bee, comparado con la versin tradicional, es la respuesta multimodal
inmediata (luz y sonido) que los nios recibirn por su rendimiento. Por ejemplo, si la respuesta es
dada con luces, la luz verde representa una palabra correcta y la luz roja no representa una
palabra. La posibilidad de recibir una respuesta inmediata hace el aprendizaje ms eficaz y
divertido.
48

Jabberstamp [45] , del Laboratorio de Medios del MIT (2007), es un sistema que los nios pueden
usar para embeber sus voces y sonidos ambiente en sus dibujos o trabajos artsticos. Jabberstamp
puede ser usado con dibujos de nios, collages o pinturas hechas en papel regular. Los papeles son
marcados con un sello de goma especial que es presionado sobre el papel para registrar sonidos
sobre el mismo. Despus de grabar los sonidos, los nios pueden tocar las marcas hechas por el
sello con una pequea trompeta y oirn los sonidos grabados. Estos sonidos pueden ser de
diferentes tipos, como voces humanas o (slo lleva acento cuando va entre nmeros) efectos
sonoros ambientales.

Figura 18 - Jabberstamp
Jabberstamp permite a los nios trabajar de forma colaborativa y hace posible compartir sus
ideas e historias con otros aunque ellos todava no sean capaces de leer y escribir. Jubberstamp
est pensado para nios de ms de 4 aos.
El Magic Story Cube [46] , creado por Mixed Reality Lab (2004), permite narrar cuentos de un
nuevo modo aprovechando los beneficios de la tecnologa de realidad aumentada. El libro
tradicional es sustituido por un cubo plegable. El desarmar el cubo sustituye el pasar de pgina de
los libros tradicionales. Cuando un nio va desplegando o desarmando el cubo, las diferentes
partes de la historia van apareciendo en 3D mediante un soporte multimedia, con voces humanas,
sonidos y msica.
49


Figura 19 Magic Story Cube
El uso del Magic Story Cube requiere del uso de un Head Mounted Display (HMD) y de una cmara,
que es montada en el frente del mismo. stos son conectados a una computadora que ejecuta un
software que reconoce, mediante la imagen que captura la cmara, qu parte de la historia ser
narrada y mostrada. La manipulacin de la historia se produce mediante la utilizacin de ambas
manos sobre el cubo.
El aumento digital de los juguetes y la interaccin con los mismos ha sido durante mucho tiempo
un importante foco de investigacin del rea de las interfaces tangibles. Una aplicacin directa de
la idea de interfaz tangible es aumentar digitalmente los juegos tradicionales de mesa, como es el
caso del proyecto de Philips Entertaible [47] y los dems ejemplos descriptos a continuacin . Estos
preservan el ambiente social de los juegos de mesa al mismo tiempo que permiten nuevas
experiencias de juego.

Figura 20 - Philips Entertaible
Magerkurth et al. [48] introducen la plataforma STARS, que integra dispositivos mviles
personales (PDAs) con una mesa de juego y piezas de juego tangibles. Los jugadores pueden
acceder y gestionar la informacin privada en su PDA, sirviendo como un canal secundario y
privado. El motor del juego alivia a los usuarios de las tareas tediosas como contar el dinero o la
50

creacin inicial de la partida y, adems, puede alterar dinmicamente el tablero en respuesta a la
accin del juego.

Figura 21 Plataforma STARS. Izq.: manipulando el objeto de forma pblica. Der.: manipulando el objeto de forma
privada a travs del PDA.
Leitner et al. [49] presentan un juego de realidad mixta, que combina piezas de juego reales y
virtuales. Los objetos reales son seguidos por una cmara de profundidad y pueden convertirse en
obstculos o rampas en una carrera virtual de autos o fichas de domin, virtuales y reales, que
estn conectadas de forma que unas pueden voltear a las otras.
4.6. Comunicacin social
Desde sus primeros das, las interfaces de usuario tangibles fueron empleadas como herramientas
de soporte para la comunicacin. Los objetos tangibles parecen adecuados para representar a los
usuarios remotos y se pueden colocar en la periferia de la atencin para brindar conciencia
ambiental. Uno de las varias alternativas de interfaces para Somewire, un espacio de
comunicacin cuyo nico medio es el audio, utiliza figuras tangibles que pueden ser colocadas en
un estante para determinar la audibilidad y la direccionalidad del sonido [50] . Esta interfaz de
usuario tangible se evalu como la ms adecuada para la tarea, comparada con dos prototipos
basados en interfaz grfica de usuario. Greenberg y Kuzuoka [51] emplean figuras fsicas como
sustitutos fsicos, controlados digitalmente, de miembros remotos del equipo para un sistema de
videoconferencia. El sustituto Peek-a-Boo, por ejemplo, gira y mira hacia la pared, dando la
espalda, cuando la persona remota no est disponible, y gira mirando hacia el usuario, cuando se
detecta actividad en el escritorio de la persona remota. En consecuencia, se puede detectar la
disponibilidad del otro en cualquier momento, echando un rpido vistazo a la orientacin del
sustituto: cuanto ms directa o frontalmente mira al usuario, ms probable es que la otra persona
se halle efectivamente presente.
51


Figura 22 Sustituto Peek-a-boo
Una serie de proyectos recientes se centran en la concientizacin remota dentro de las redes
sociales, como en el caso de Connectibles [52] . Edge y Blackwell [53] emplean tangibles para la
gestin de tareas en el trabajo de oficina, y ponen de manifiesto su potencial para la comunicacin
social simblica, como la entrega de un smbolo puede representar la transmisin de la
responsabilidad de una tarea o un documento.
Una gama de prototipos aborda la intimidad remota, o la intimidad a distancia. En este contexto,
los investigadores suelen experimentar con diferentes modalidades sensoriales. Por ejemplo,
Strong y Gaver [54] presentan Feather, Scent and Shaker" (pluma, aroma y agitador). El apretar
un pequeo dispositivo cuando uno piensa en la otra persona produce que en el dispositivo
remoto caigan plumas por un tubo, activando un aroma; agitar el dispositivo genera que el
dispositivo remoto vibre. LumiTouch [55] comunica la accin de tocar un marco fotogrfico a su
compaero remoto mediante la iluminacin del marco remoto. Las parejas pueden establecer un
vocabulario simple de toques, o tocar puede transmitir una forma abstracta de "Pienso en ti".
52


Figura 23 Cuando el usuario toca el marco de la foto del sistema Lumitouch, un mensaje es transmitido hacia el
marco remoto en forma de una luz que se enciende.
4.7. Msica y performance multimedia
Las aplicaciones musicales son una de las areas ms antiguas y populares de las interfaces
tangibles, volvindose omnipresente a partir del ao 2000 con proyectos como Audiopad [2],
BlockJam [3], Squeezables [56], o la instalacin musical SmallFish [57]. Jord [5] identifica varias
propiedades de las interfaces tangibles y de las mesas multi-tctiles que las sitan como un
enfoque prometedor para la interpretacin musical: el soporte para la colaboracin y el
intercambio de control entre usuarios, la interaccin continua y en tiempo real con datos
multidimensionales, y el soporte para interacciones complejas, especializadas, expresivas, y
exploratorias. Una visin general de los sistemas existentes se proporciona en la pgina web de
Martin Kaltenbrunner [58] .En general, podemos distinguir entre cuatro enfoques de alto nivel
para las aplicaciones tangibles para msica: instrumentos tales como el Reactable [59] [4] ( Ver
4.8.2. The ReacTable ), que son generadores de sonido o sintetizadores totalmente controlables,
secuenciadores tangibles que permiten mezclar y reproducir muestras de audio, juguetes sonoros
con un control de usuario limitado, y los controladores que manejan de forma remota un
sintetizador arbitrario.
53


Figura 24 - reacTable
Las interfaces tangibles para Msica pueden disearse para principiantes y se presenta un juguete
intuitivo y de fcil acceso, o pueden tener como objetivo al profesional de la msica que valora la
expresividad fsica, la legibilidad y la visibilidad al realizar la msica electrnica en frente de una
audiencia. Adems de ser un rea de aplicacin interesante para los proyectos de investigacin,
muchas de las interfaces tangibles para msica son desarrolladas por profesionales de la msica,
tales como artistas de msica electrnica. La serie de conferencias NIME (Nuevos Instrumentos
para la Expresin Musical, New Instruments for Music Expression) [60] es la ms importante en
esta rea. El desarrollo de nuevos instrumentos hbridos que hacen uso de entradas fsicas y de
materiales de estilo antiguo que permitan a los usuarios experimentar con el sonido ha sido el
objetivo, desde hace varias dcadas, de renombrados grupos de investigacin y artistas, como el
grupo HyperInstruments del MIT, o STEIM, un estudio independiente de arte interdisciplinario
ubicado en Amsterdam.

Figura 25 Izq.: AudioCubes. Der.: BlockJam
Las interfaces tangibles para msica se han vuelto visibles en los primeros planos de la
investigaciones de interfaces tangibles gracias al reacTable [59] [4], un sistema de mesa que le ha
dado una nueva interfaz a la programacin de sntesis modular y se convirti en uno de los videos
54

favoritos de YouTube despus de que la cantante y compositora islandesa Bjrk
8
comprase uno
para su tour mundial de 2007. Cada token fsico en el reacTable tiene una funcin especfica, por
ejemplo, la generacin de sonido, el filtrado de audio, o el control de parmetros de sonido. La
programacin visual se hace ms fcil gracias al sistema de dynamic patching, donde cada token
tiene una serie conectores de entrada y salida; el token buscar otros tokens cercanos por
conectores compatibles y disponibles y se conectar automticamente segn su proximidad.
Segn sus creadores, el objetivo principal fue disear un instrumento atractivo, intuitivo y no
intimidatorio para mltiples usuarios para la interpretacin de msica electrnica, que sea
atractivo desde el primer momento, pero que tambin sea complejo (que sea complejo o que
tenga funcionalidad compleja???), sutil y permita crear infinitas variaciones. Otro sistema
comercialmente disponible es AudioCubes [61]. Se compone de un puado de cubos que detectan
los cubos vecinos y se comunican entre s. Cada cubo enva y recibe audio a travs de sus caras.
Los cubos tambin actan como parlantes y se iluminan con colores de acuerdo a su
configuracin. Block Jam [3] es un secuenciador dinmico poli rtmico construido a partir de cubos
que se conectan unos con otros.

Figura 26 Izq.: AudioPad Der.: Squeezables
El sistema Audiopad [2] ( Ver 4.8.1. Audiopad ) permite a los usuarios manipular y mezclar
muestras de sonido colocando tokens tangibles sobre una superficie aumentada digitalmente.
Nuevas muestras de sonido pueden ser arrastradas a la superficie desde un men en el borde de
la mesa. mixiTUI [62] <-(???)es un secuenciador tangible de muestras de sonido y msica
editada, que permite agregar loops, controles y efectos a los sonidos. Utiliza los mecanismos de
interaccin (en particular Dynamic Patching) de la Reactable.
Kaltenbrunner [58] en su resumen de interfaces tangibles para msica de su sitio web distingue
entre las siguientes categoras:

8
Bjrk Gumundsdttir es una cantante y compositora islandesa. Ha vendido ms de 15 millones de
lbumes, adems de ser nominada al Oscar a la mejor cancin por la pelcula Dancer in the Dark, 13
nominaciones al Grammy, y en el 2010, fue galardonada con el Polar Music Prize, prestigioso premio que
concede la Real Academia de Msica de Suecia.
55

Los artefactos tangibles musicales tienen msica "contenida" dentro de un objeto
sensorizado, y diferentes interacciones, como frotar, apretar o agitar activan una
reproduccin de sonido diferente (por ejemplo, los Squeezables [56] ).
Los bloques de construccin musical (por ejemplo, [3] ) consisten en bloques que
continuamente generan o manipulan sonido y se pueden apilar, conectar, o simplemente
colocar cerca de s. Con algunos sistemas, los bloques trabajan independientemente uno
de otros, en otros sistemas la disposicin espacial de los mismos modifica el sonido, que
se transmite y se procesa de forma secuencial a travs de los bloques.
En los secuenciadores basados en tokens una superficie es constantemente escaneada y
cada sector explorado genera sonido; la posicin del token, u otros atributos como el color
del mismo, determina la nota o el ritmo que se toca.
Las mesas musicales tctiles y las mesas musicales tangibles (por ejemplo, Audiopad [2],
reacTable [59] [4]), interpretan las interacciones de los tokens tangibles sobre la superficie
interactiva de la mesa.
Por ltimo, hay una serie de juguetes musicales tangibles comerciales como Neurosmith
MusicBlocks [43] y Fisher-Price Play Zone Music Table [63] . Estos por lo general permiten
la seleccin y colocacin de objetos tangibles en ciertas ranuras, activando sonidos
asociados modificados por la posicin, orden y configuracin general de los mismos.
Otra rea de aplicacin emergente para las TUIs relacionadas con la msica es la de la
interpretacin o performance en vivo. Por ejemplo, Media Crate [64] brinda soporte para VJ-ing,
permitiendo la presentacin en vivo de medios audiovisuales en mltiples pantallas tomando
datos de entradas desde diversas fuentes. El sistema tiene una interfaz de mesa muy similar a la
reacTable. A travs de la manipulacin de objetos tangibles, llamados media cues (indicadores de
medios), apoyados sobre la mesa, el VJ puede ordenar y pre preparar los clips de videos para el
espectculo, editar sus propiedades, reproducir los clips en una determinada salida, etc. Sheridan
y Bryan Kinns[222] experimentaron con el uPoi, un instrumento que est basado en el tradicional
juego de malabar llamado Carioca, que consistente en una pelota unida a un hilo. El juego consiste
en hacer girar la pelota de diferentes maneras para conseguir diferentes efectos visuales los cuales
son muy agradables a la vista. Al balancear la pelota, los datos de aceleracin se convierten en
audio y sonido de salida. De presentarse en festivales al aire libre y atraer a la audiencia a
participar y jugar con el uPoi, se derivan los requisitos de diseo para la interaccin tangible en
vivo: uso intuitivo, diseo sencillo y discreto, atractivo (visibilidad de la interaccin y fcil de
comenzar a utilizar), portable, robusto y fcil de configurar.
56


Figura 27 Media Crate. 1. Lista de indicadores de medios. 2 Controles tangibles sin usar. 3. Herramienta de edicin
de propiedades 4. Perilla de control sobre una propiedad 5. Salida nmero 1 mostrando un indicador de medios (un
clip de video) 6. Vista previa nmero dos de un video 7. Lista de videos plegada 8. Coleccin de archivos de video.
4.8. TUI de mesa para msica
4.8.1. Audiopad
Audiopad [2] es una interfaz para la interpretacin musical que tiene como objetivo combinar la
modularidad de controles basados en perillas con el carcter expresivo de las interfaces de mesa.
La manipulacin de discos fsicos sobre una mesa por parte del artista controla un proceso de
sntesis en tiempo real. Los discos contienen etiquetas RFID LC que se utilizan para seguir su
posicin en dos dimensiones mediante el uso de una serie de antenas. El sistema proyecta
informacin grfica sobre y alrededor de los discos brindando al artista o intrprete un control
sofisticado del proceso de sntesis.
AudioPad es ms expresiva que una interfaz grfica, cuando se refiere a la creacin de msica
electrnica. En trminos del estilo de interpretacin o ejecucin musical que fomenta, es ms fcil
improvisar un estilo ms expresivo de interpretacin musical. Debido a que la interaccin es fsica,
tambin hay una dinmica que involucra a la audiencia, que puede ver realmente lo que el
intrprete est haciendo.
57

El Audiopad se proyecta sobre una mesa especial equipada con sensores de radio que realizan un
seguimiento de la posicin y el movimiento de media docena de discos de plstico.
La mayora de los discos controlan una serie de pistas de audio pre-programadas, el ritmo, la lnea
de graves, la meloda y dems.
Un disco circular grande cambia el volumen de cada pista cuando se mueve ms cerca o ms lejos,
lo que permite que diferentes pistas sean resaltadas en diferentes momentos.
Otro disco, con forma de estrella, permite que el msico modifique las pistas bsicas pre
programadas de varias maneras. Si el disco en forma de estrella se mueve hacia uno de los discos
con pistas pre programadas, una seleccin de diferentes acciones se proyecta junto al mismo. Las
acciones "brotan" del tablero de la mesa, y cada una se selecciona moviendo el disco estrella
encima.
Los controles se proyectan sobre la mesa mediante un video proyector montado en el techo o en
la misma mesa utilizando un espejo. Una PC con Linux controla el sistema. Debian o Knoppix para
ser especfico. La mayora del cdigo est escrito en Python, a excepcin del cdigo de bajo nivel
de seguimiento de los discos, que est en C y C + +. Se utiliza el optimizador Pysco para acelerar
Python. Se utiliza OpenGL para los grficos, y la comunicacin con el sintetizador es mediante
MIDI.
En la primera demostracin pblica de importancia, en el festival Snar del ao 2003 (Festival
Internacional de Msica Avanzada y New Media Art) en Barcelona, Espaa, los DJs fueron capaces
de entender los controles casi de inmediato.
El Audiopad se basa en los principios de Sensetable-Patten, una interfaz de mesa diseada para
ayudar a resolver problemas espaciales como la simulacin de negocios, la planificacin de la red
de transporte, y el diseo de chips; en general, es adecuada para ayudar a resolver cualquier tipo
de problema en el que hay un componente espacial.
4.8.2. The ReacTable
The ReacTable [5] [59] [4] es un instrumento musical electrnico con una interfaz de usuario
tangible de mesa que se ha sido desarrollado dentro del Grupo de Tecnologa Musical de la
Universitat Pompeu Fabra en Barcelona, por Sergi Jord, Marcos Alonso, Martin Kaltenbrunner y
Gnter Geiger.
El ReacTable es una mesa redonda traslcida, que se utiliza en una habitacin oscura, y aparece
como una pantalla retro iluminada. Al colocar bloques tangibles sobre la mesa, e interactuar con la
pantalla a travs de los elementos tangibles o los dedos, un sintetizador modular virtual es
operado, creando msica o efectos de sonido.
Hay varios tipos de elementos tangibles que representan diferentes mdulos de un sintetizador
analgico. Alguno de los elementos tangibles de uso general disponibles son VCOs (Osciladores
controlados por tensin), LFOs (Osciladores de baja frecuencia) y FCRs (Registros de control de
58

frecuencia) de frecuencia de audio, y secuenciadores. Tambin hay tangibles que afectan a otros
mdulos: uno llamado radar, que es un disparador peridico, y otro llamado tonalizer que limita al
VCO a las notas de una escala musical dada.
La misma mesa es la pantalla. Cuando un tangible se coloca sobre la mesa, varios smbolos
animados aparecen, como formas de onda, crculos, rejillas circulares, o lneas de barrido. Algunos
smbolos se limitan a mostrar lo que ese tangible particular est haciendo, otros pueden ser
utilizados por los dedos para controlar el mdulo respectivo.
Si un VCO tangible se coloca sobre la mesa, un mdulo de VCO se aade al sintetizador virtual. En
la pantalla, una forma de onda aparece entre el tangible y la "salida" (un punto brillante en el
centro de la mesa), y aparece un crculo alrededor del tangible que permite un control preciso de
la amplitud de la onda. Adems, en este ejemplo, el tangible puede girarse a mano para cambiar
su frecuencia.
Colocar un filtro tangible entre el VCO y la salida causa que la forma de onda del VCO se conecte al
filtro, y la forma de onda del filtro se conecte a la salida. Si una tangible LFO se coloca cerca del
VCO, una forma de onda aparecer conectando los dos, y el LFO modular al VCO.
La interfaz de usuario principal de la ReacTable consta de una mesa traslcida. Debajo de la mesa
hay una cmara de video, apuntada hacia la parte inferior del tablero de la mesa que enva video a
una computadora personal. Hay tambin un proyector de video debajo de la mesa, tambin
conectado a la computadora, proyectando video en la parte inferior del tablero de la mesa que
puede ser visto desde el lado superior. El motor de audio del sistema est basado en Pure Data y
SuperCollider.
Colocados sobre la mesa estn los tangibles que tienen fiducials (marcadores) unidos a su parte
inferior, siendo vistos a travs de la mesa por la cmara. Los fiducials son imgenes impresas en
blanco y negro, que consisten en crculos y puntos formando diferentes patrones, optimizados
para ser usados por reacTIVision. Luego, reacTIVision utiliza los fiducials para entender la funcin
que representa un determinado tangible.
La mayora de los tangibles son planos, con un fiducial en la parte inferior. Otros tangibles son
cubos, con fiducials adjuntados a varios de sus lados, permitiendo a esos tangibles ofrecer
mltiples funciones.
En la actualidad, hay dos versiones de la ReacTable, Reactable Live! y The Reactable Experience.
Reactable Live! es una versin ms pequea y ms porttil diseada para profesionales de la
msica, se han producido slo 20 (en la actualidad su precio es de 9700). The Reactable
Experience es ms parecida a la Reactable original, y est pensada para ser utilizada en
instalaciones en espacios pblicos.
El video capturado por la cmara de video digital es procesado por el software de cdigo abierto
de visin por computadora llamado reacTIVision [65], originalmente desarrollado por Martin
Kaltenbrunner y Ross Bencina para el proyecto Reactable. reacTIVision detecta la posicin
59

cartesiana y la rotacional de los fiducials sobre la superficie de la mesa, a continuacin, enva la
informacin mediante el protocolo de comunicacin especialmente diseado y basado en Open
Sound Control llamado TUIO, que se comunica con el sintetizador real y el software de
visualizacin que muestra los resultados a travs del proyector de video. reacTIVision tambin es
capaz del seguimiento multi-tctil de los dedos sobre la superficie.
4.9. Secuenciadores Tangibles
4.9.1. The BeatBearing
BeatBearing [66] es un novedoso instrumento musical que permite a los usuarios manipular
patrones rtmicos a travs de la colocacin de bolitas metlicas en una cuadrcula. El BeatBearing
se ha desarrollado como un caso de diseo exploratorio de cmo la teora de embodied
interaction
9
puede contribuir al diseo de nuevos instrumentos musicales digitales.

Figura 28 La interface de BeatBearing
BeatBearing ha sido diseado para funcionar como un medio tangible de programacin de
secuencias rtmicas, lo que permite la manipulacin manual del ritmo. BeatBearing contina en la
lnea tradicional de los instrumentos musicales de mesa basados en interfaces tangibles de
Usuario, como Audiopad [2] y Reactable [4]. Pero BeatBearing difiere de stos en la simplicidad de

9
Termino de difcil traduccin, lo que prima aqu es el nexo entre la accin y la presencia del usuario en el
mundo fsico. Por lo tanto involucra a la computacin fsica o tangible, junto con la computacin social. Es
una cualidad relacionada con cmo la interaccin del usuario con el sistema se ve afectada por el entorno
fsico donde se encuentra. Se puede pensar como interaccin personificada o encarnada. El autor se siente
ms atrado por el trmino interaccin corprea.
60

su diseo, en el uso de puntos discretos en lugar de puntos continuos de interaccin, y el uso de
restricciones fsicas construidas sobre la superficie de trabajo.
BeatBearing ha sido deliberadamente diseado para ser de bajo costo, simple, robusto y
fcilmente reconfigurable. Como tal, el BeatBearing original fue diseado en torno al uso de un
monitor de computadora CRT de pantalla plana que se coloc horizontalmente de modo que su
pantalla actuara como mesa. El uso de una pantalla CRT que se puede conseguir de forma
econmica (o incluso gratis ya que estn siendo reemplazados por los monitores LCD) contrasta
con el uso predominante de proyectores en la construccin de interfaces de usuario tangibles. En
consecuencia con el uso de la pantalla CRT, se utiliz un conveniente mtodo de entrada de bajo
costo, simple y robusto que consiste en el cierre de un circuito interruptor mediante la colocacin
de una bolita metlica.

Figura 29 - Las arandelas metlicas dividas por la mitad colocadas y cableadas sobre el sustrato transparente de
policarbonato
El BeatBearing utiliza una placa Arduino [67] para interactuar con la computadora. Esto permite
brindar soporte multi-plataforma, facilitando el desarrollo del sistema. La aplicacin de
BeatBearing est escrita en parte en Processing (efectos visuales) y en parte en MaxMSP
(secuenciacin). Esto permite un desarrollo multiplataforma de alto nivel, as como el prototipado
rpido. La aplicacin MaxMSP enva datos MIDI que se pueden utilizar para reproducir muestras
de sonido o bien en otro programa, como por ejemplo, Ableton Live, o incluso en un sintetizador o
sampler fsico externo.
Se han utilizado dos mtodos diferentes para crear el interruptor que se cierra mediante la
colocacin de una bolita de metal. El prototipo inicial utilizaba dos barras de alambre grueso como
contactos. La segunda versin utilizaba arandelas metlicas que se haban dividido por la mitad.
Aunque esto funciona satisfactoriamente, las arandelas obstruan gran parte del espacio de la
pantalla, y tambin se requera de un mayor esfuerzo para fabricar y disear. La solucin actual es
61

la de grabar pistas de cobre sobre un sustrato transparente de policarbonato para crear un tablero
de circuito impreso transparente. Este enfoque proporciona flexibilidad de diseo y es
relativamente fcil y barato de fabricar.

Figura 30 El sistema completo, el tablero sobre la pantalla CRT, conectado a la placa Arduino, que a su vez est
conectada a la computadora.
Al activar el BeatBearing, una lnea roja barre la pantalla de izquierda a derecha, desapareciendo
por la parte derecha y apareciendo de nuevo por la izquierda. Cuando no hay bolitas colocadas en
la cuadrcula, el sistema no genera ningn sonido. Un crculo de color gris oscuro se muestra en la
pantalla directamente debajo de cada orificio, lo que refuerza que ste es un sitio de interaccin.
Cuando un usuario pone una bolita en la cuadrcula, el crculo de color gris oscuro justo debajo de
la bolita se vuelve blanco, lo que indica que la bolita est ahora activada. A medida que la lnea
roja barre a travs de la bolita, un crculo de color ms grande se pinta alrededor de la bolita. Cada
fila tiene un color diferente, lo que indica un sonido diferente: bombo, redoblante, hi-hat, y
cencerro.
Indicaciones precisas de cmo construir el sistema se pueden encontrar en
http://makeprojects.com/Project/The-BeatBearing-Tangible-Rhythm-Sequencer/1237/1
4.9.2. The Bubblegum Sequencer
El Bubblegum Sequencer [68] es una interfaz fsica para la creacin y performance de msica
electrnica de percusin. Se trata de una herramienta de colaboracin para componer, visualizar,
y ensear msica a travs de una interaccin sencilla y acogedora.
62

Los secuenciadores que aparecen en los instrumentos electrnicos han sido una herramienta
popular para la composicin de msica electrnica desde la dcada de 1980. Ya sea implementado
en software o hardware, un secuenciador consiste tpicamente en una fila de 16 posiciones que
codifican las colocaciones de una muestra de sonido en el tiempo. Las muestras de sonido se
colocan mediante la activacin de la cuadrcula correspondiente, por lo general haciendo clic o
pulsando un botn. El secuenciador crea un bucle de percusin reproduciendo repetidamente el
patrn construido. Los secuenciadores tpicos pueden ser herramientas poderosas para la
composicin, pero tambin son difciles de aprender, y no son ideales para la performance en vivo,
ya que los artistas son propensos a terminar encorvados sobre una pantalla en lugar de dedicarse
a su pblico.

Figura 31 La interfaz tangible con las bolitas de chicle de distintos colores colocados en los distintos agujeros. Cada
color representa un sonido de percusin diferente.
El Bubblegum Sequencer constituye una interfaz atractiva y poco intimidante que mitiga estos
obstculos relacionados con la performance. Muestras de sonido se asignan a objetos, bolitas de
chicles, en lugar de asignarse a pistas de audio, creando una interaccin ms intuitiva y divertida.
El jugador que desee un bombo en el tercer comps del bucle de percusin slo necesita agarrar y
colocar la bolita de chicle apropiada.
Informacin visual adicional enriquece la interaccin, proporcionando una manera fcil de
examinar el patrn activo en tiempo real. El uso de bolitas de chicles de colores brillantes como los
dispositivos de entrada crea una interfaz divertida y fcil de aprender, facilitando la colaboracin y
la experimentacin entre los usuarios.
El Bubblegum Sequencer en el mapeo de a objetos fsicos. Sin embargo, la calidad de los objetos y
la naturaleza de la interaccin combinan la facilidad de aprendizaje del The Marble Answering
63

Machine con los aspectos de composicin colaborativa de Reactable y Audiopad. Considerando
que los dos ltimos ejemplos requieren algn tipo de preparacin de las muestras de sonido que
se van a utilizar y algn conocimiento de msica electrnica, el Bubblegum Sequencer funciona
con el software estndar MIDI integrado en la mayora de los sistemas operativos, utilizando un
objeto familiar y ldico, la bolita de chicle. Mientras que el Bubblegum Sequencer soporta el uso
con software MIDI ms avanzado, no es necesario ningn conocimiento de msica electrnica o
MIDI para usarlo.
La interfaz consta de una matriz de 4 x 16 de agujeros perforados en una superficie de una mesa, y
bolitas de chicles de cinco colores diferentes que se colocan en esos agujeros. Cada una de las 16
columnas en la cuadrcula representa una semicorchea en trminos de medidas musicales. Las
filas, a diferencia de las pistas en los secuenciadores tradicionales, no estn asignadas a un
atributo particular de msica, sino que simplemente permiten la colocacin de varios chicles en
cualquiera de las 16 semicorcheas.
A medida que los usuarios colocan bolitas de chicle en la cuadrcula, las muestras de sonido
asignadas a cada color se reproducen en el momento oportuno. Mientras que se ejecuta el bucle,
LEDs debajo de la primera, quinta, novena y dcimo tercera columna se iluminan en secuencia
para indicar las notas que se reproducen. Esta informacin visual ayuda a los usuarios comprender
sus composiciones y proporcionan una indicacin constante del ritmo.
Informacin grfica adicional se presenta en forma de una visualizacin proyectada que hace
estallar las bolitas de goma, la misma puede ser proyectada en una pared, o directamente sobre la
superficie de juego. Cuando se proyecta en la pared, el patrn de estallidos imita la superficie de
juego. Cuando se proyecta sobre la superficie en s, cada chicle parece explotar cuando se
reproduce su sonido.
Un rea sensible a la presin al costado de la superficie de juego permite a los usuarios ajustar el
tempo de la reproduccin en tiempo real.
El modo de reproduccin predeterminado de Bubblegum Sequencer es con sonidos de percusin.
Sin embargo, en el modo nota, las bolitas de chicles se pueden organizar en patrones para tocar
notas utilizando muestras de sonidos de un instrumento dado. Cada columna codifica una nota
segn como se coloquen las bolitas de chicle en la misma.
64


Figura 32 Procesamiento de imagen capturada por el sistema. Arriba la imagen original capturada por la cmara,
abajo el resultado obtenido luego del procesamiento mediante ImageJ.
Los colores de las bolitas de chicle en la cuadrcula se detectan mediante una cmara web
montada debajo de la superficie y el software de procesamiento escrito en Java utilizando la
librera de procesamiento de imgenes ImageJ. Una cuadrcula superpuesta sobre la captura de
video de la cmara se alinea con las bolitas de chicle. Cada interseccin de la cuadrcula
corresponde a la ubicacin de un agujero en la superficie de juego. En cada agujero, se toma una
muestra de 5 x 5 pxeles, se calcula el color promedio, se calcula el valor cuantificado y se mapea a
la nota correspondiente.
Un hilo separado en el software lee los valores de la matriz para controlar la salida del programa.
Para cada valor distinto de cero, la nota MIDI apropiada se enva al controlador MIDI del sistema, y
la imagen del estallido del color correspondiente se muestra en la visualizacin.
65

5. Frameworks y Taxonomas de las Interfaces Tangibles
A medida que el campo madura, los investigadores han desarrollado frameworks (marcos de
trabajo en castellano) y taxonomas que tienen como objetivo proporcionar a los desarrolladores
de TUIs de poder explicativo, permitindoles analizar y comparar las distintas instancias de TUIs, y
aplicar las lecciones aprendidas del desarrollo de casos anteriores a sus esfuerzos futuros. Algunos
frameworks pueden tener un papel generador, sugiriendo nuevas direcciones para explorar y
descubrir oportunidades abiertas en el espacio de diseo de TUIs. Los frameworks pueden ser
caracterizados para proporcionar una estructura conceptual para pensar y analizar un problema o
aplicacin. De este modo, los frameworks pueden informar y orientar el diseo y el anlisis. Las
taxonomas son un tipo especfico de estructuras que clasifican las entidades en funcin de sus
propiedades, en lo posible sin ambigedades.
5.1. Propiedades de las Gaspables User Interfaces
Fitzmaurice [69] define una interfaz de usuario graspable como aqulla que proporciona un
"identificador fsico a una funcin virtual, donde la manija fsica sirve como un manipulador
funcional dedicado". Los usuarios tienen "acceso simultneo a mltiples dispositivos de entrada
especializados que pueden servir como herramientas fsicas dedicadas de interfaz" permitiendo la
manipulacin fsica y la disposicin espacial.
Una propiedad fundamental de las interfaces de usuario graspables [69] [19] es el multiplexado
espacial, que es un concepto muy poderoso. Cuando slo un dispositivo de entrada est
disponible, el mismo es multiplexado en el tiempo: el usuario tiene que seleccionar y des-
seleccionar repetidamente objetos y funciones de forma secuencial. Una interfaz de usuario
graspable, por otro lado, ofrece varios dispositivos de entrada de modo que la entrada y la salida
estn distribuidas en el espacio, permitiendo al usuario seleccionar un objeto o una funcin con
slo un movimiento al alcanzarlo mediante su manija fsica o tangible. Esto permite la seleccin
simultnea, pero independiente y potencialmente persistente de los distintos objetos.
La velocidad y la exactitud de la manipulacin de objetos grficos de esta manera ha sido probada
en experimentos empricos [70]. stos revelaron que el multiplexado espacial es efectivo al reducir
el "costo de conmutacin", aprovechando las habilidades motoras innatas, y la coordinacin ojo-
mano. Tambin reduce la carga de la percepcin visual. Fitzmaurice [69] describe cinco
propiedades bsicas de las interfaces graspables, con las ltimas cuatro permitidas (pero no
necesitada) por la primera:
1. Multiplexado espacial.
2. Acceso y manipulacin concurrente (a menudo a travs de interacciones con dos manos).
3. El uso de dispositivos especficos para la tarea (en lugar de genricos y no-icnicos).
4. Percepcin espacial de los dispositivos.
5. Reconfiguracin espacial.
66

Analizar estas propiedades sirve para ayudar a comprender las propiedades y limitaciones de los
diferentes sistemas, pero no debe utilizarse como una lista para decidir o descartar una interfaz
como graspable o tangible.
5.2. Conceptualizacin de las TUIs y el modelo de interaccin MCRit
En 2001, Ullmer e Ishii presentan los primeros pasos hacia la identificacin de las interfaces
tangibles de usuario como una corriente clara y coherente de investigacin [71] . Resaltan las
caractersticas clave y presentan un modelo de interaccin de las interfaces de usuario tangibles.
Ullmer e Ishii definen las interfaces de usuario tangibles como los sistemas que dan forma fsica a
la informacin digital, empleando artefactos fsicos, tanto para la representacin como para el
control de los medios computacionales. Esta definicin sera ms tarde ampliada por frameworks
emergentes, tal como [72].
Inspirado en el modelo de interaccin GUI denominado MVC (Modelo, Vista, Control), Ullmer e
Ishii proponen un modelo de interaccin llamada MCRit, una abreviatura para Modelo-Control-
Representacin (intangible y tangible). Mientras que el modelo MVC hace hincapi en la
separacin entre la representacin grfica (es decir, la vista) y el control (mediada por los
dispositivos de entrada como un mouse y un teclado), el modelo MCRit destaca la integracin de
la representacin fsica y el control en las interfaces de usuario tangibles, que bsicamente elimina
la distincin entre los dispositivos de entrada y de salida.

Figura 33 Izq.: modelo de interaccin GUI. Der.: modelo de interaccin MCRit.
Esta "integracin de la representacin y el control" significa que los objetos tangibles encarnan
tanto a los medios de representacin como a los medios de manipulacin de los datos digitales. El
modelo MCRit ilustra tres relaciones centrales, que se traducen en propiedades de la TUIs. Una
cuarta propiedad resulta de integrar las tres primeras:
5. Los objetos tangibles se acoplan, a travs de funcionalidades computacionales, con datos
digitales (acoplamiento computarizado).
6. Los objetos tangibles representan los medios de control interactivo. El movimiento y la
manipulacin de objetos es la forma dominante de control.
7. Los objetos tangibles estn perceptivamente ligados con representaciones producidas
digitalmente (por ejemplo, de audio y visuales, proyecciones).
67

8. El estado de los objetos tangibles representa aspectos centrales del estado del sistema (el
sistema es, al menos, parcialmente legible si se corta la energa).
5.3. Clasificacin de las TUIs
Ullmer et al. [73] identifican varios tipos dominantes de TUIs:
Superficies interactivas. Con frecuencia, los objetos tangibles se colocan y manipulan
sobre superficies planas. O bien la disposicin espacial de los objetos y/o sus relaciones
(por ejemplo, el orden de colocacin) son interpretadas por el sistema. Un ejemplo tpico
de superficie interactiva es Urp[21].
Ensamblaje constructivo. Elementos modulares y conectable estn unidos el uno al otro
de manera similar a los modelos de kits de construccin fsica. Tanto la organizacin
espacial como el orden de las acciones podrn ser interpretadas por el sistema. Un
ejemplo tpico de este tipo de TUI es BlockJam[3].
Token + constraint (restricciones) combina dos tipos de objetos fsico-digitales. Las
restricciones proporcionan la estructura (pilas, ranuras, huecos) que limitan el
posicionamiento y el movimiento de fichas mecnicas y asisten al usuario al proporcionar
una gua tctil. Las restricciones pueden expresar y hacer cumplir la sintaxis de interaccin.
Ejemplos tpicos son The Marble Answering Machine y The Slot Machine [22].

Figura 34 Izq.: Superficie Interactiva. Cent.: Token + restricciones. Der.: Ensamblaje constructivo
Muchos sistemas pueden pertenecer a varias de estas categoras, por ejemplo, pueden tener
restricciones impuestas sobre una superficie interactiva.
5.4. Token And Constraint
El paradigma TAC [74] (Token And Constraint) se refiere a la identificacin de los elementos
bsicos de una TUI. El paradigma TAC presenta un conjunto compacto de construcciones que es
suficiente para describir la estructura y la funcionalidad de un gran subconjunto de TUIs. Este
conjunto de construcciones tiene como objetivo permitir a los desarrolladores de TUI especificar y
comparar diseos alternativos teniendo en cuenta cuestiones tales como la forma, la sintaxis
fsica, el marco de referencia, y la interaccin en paralelo.
Basndose en el enfoque de Token + Constraint de Ullmer [73], Shaer et al. [74] describen la
estructura de una TUI como un conjunto de relaciones entre objetos fsicos e informacin digital.
68

Se identifican cuatro componentes bsicos que en conjunto pueden ser combinados para describir
la estructura y funcionalidad de una TUI. Estos incluyen: Pyfo, Token, restriccin, y TAC.

Figura 35 Ilustracin de las dos fases de interaccin de token + constraint. Primero la asociacin del token con la
respectiva restriccin, y luego la manipulacin del token en funcin de esa restriccin..
Un pyfo es un objeto fsico que forma parte de una TUI (por ejemplo, una superficie, un modelo de
construccin, un bloque). Un pyfo puede realzar sus propiedades fsicas con propiedades digitales,
tales como grficos proyectados y sonido. Hay dos tipos de pyfos: tokens y restricciones. Cada pyfo
puede ser un token, una restriccin, o ambos.
Un token es una pyfo tangible que est mapeado a informacin digital o una funcin
computacional. El usuario interacta con el token con el fin de acceder a o manipular informacin
digital. Las propiedades fsicas de un token pueden reflejar la naturaleza de la informacin o la
funcin que representa. Asimismo, las propiedades fsicas del token pueden dar una idea de cmo
debe ser manipulado.
Una restriccin es un pyfo que limita el comportamiento del token con el que est asociado. Una
restriccin limita el comportamiento de un token en las siguientes tres maneras:
1. Las propiedades fsicas de la restriccin sugieren al usuario la forma de manipular (y cmo
no debe manipular) al token asociado.
2. La restriccin limita el espacio fsico de interaccin del token.
3. La restriccin sirve como un marco de referencia para la interpretacin del token y la
composicin de restricciones.
Finalmente, un TAC (Token And Constraints) es una relacin entre un token y una o ms
restricciones. La relacin TAC a menudo expresa a los usuarios algo acerca de los tipos de
interacciones que se pueden llevar a cabo con una interfaz. Las relaciones TAC son definidas por el
desarrollador de la TUI y se crean cuando un token est fsicamente asociado con una restriccin.
Interactuar con un TAC implica la manipulacin de un token fsico (de una forma discreta o
continua) con respecto a sus restricciones. Esta interaccin tiene interpretacin computacional. La
manipulacin de un token con respecto a sus restricciones resulta en la modificacin tanto del
estado fsico como digital del sistema.
69


Figura 36 Tres ejemplos de relaciones TAC entre tokens y restricciones. Presencia, presencia + traslacin, presencia +
rotacin.
Para especificar una TUI utilizando el paradigma TAC, el desarrollador de la TUI define las posibles
relaciones TAC de la TUI. Esto define una gramtica de las formas en que los objetos se pueden
combinar entre s para formar expresiones significativas, las expresiones que pueden ser
interpretadas tanto por los usuarios como por los sistemas computacionales subyacentes.
5.5. Fortalezas del enfoque Token + Constraint
Cuando se compara el enfoque Token + Constraint con las superficies interactivas, el uso de
restricciones fsicas ofrece una serie de beneficios [73], incluyendo:
1. Aumento de la respuesta tctil pasiva.
2. Mayores posibilidades de retroalimentacin con fuerza activa.
3. Disminucin de la demanda de atencin visual.
4. Mayor conciencia kinestsica
10
.
5. Mayores posibilidades para uso embebido.
6. Mayor flexibilidad y accesibilidad para las tecnologas de sensado e implementacin.
Muchos de estos beneficios se derivan del estilo de las formas fsicas empleadas por el enfoque de
Token + Constraint. Especficamente, el uso de formas fsicas limitadas por restricciones mecnicas
ayuda a expresar:
El conjunto de elementos fsicos que pueden tomar parte dentro de una dada restriccin.
La estructura mecnica de las restricciones puede ayudar a expresar compatibilidades
fsicas/digitales con subconjuntos de tokens codificados como propiedades fsicas tales
como tamao y forma.
El conjunto de configuraciones fsicas que los tokens pueden asumir. Los token son a
menudo mecnicamente restringidos a configuraciones que tienen interpretaciones
computacionales bien definidas.
La delimitacin entre regiones de interaccin con diferentes interpretaciones
computacionales. Los lmites bien definidos de las restricciones son una ayuda para
combinar e integrar mltiples restricciones, cada una, potencialmente, con diferentes
comportamientos.

10
Percepcin del equilibrio y de la posicin de las partes del cuerpo.
70


Figura 37 Restricciones mltiples o anidadas.
Visto desde una perspectiva algo diferente, el uso de restricciones fsicas tiene otras
ramificaciones positivas desde el punto de vista de uso e implementacin. stas incluyen:
Percepcin humana. Las restricciones utilizan propiedades fsicas para codificar
perceptualmente la sintaxis digital. Entre otras cosas, trasladan la carga cognitiva a las
representaciones externas y facilitan el agrupamiento perceptivo de agregados de objetos.
Manipulacin humana. Las restricciones proporcionan a los usuarios una mayor sensacin
de realimentacin kinestsica, derivado de la realimentacin tctil pasiva proporcionada
por la relacin de encaje entre los tokens y las restricciones. Las restricciones tambin
facilitan la manipulacin de los agregados formados por mltiples objetos fsicos. Esto se
realiza tanto a travs de la manipulacin completa de las estructuras de restriccin (por
ejemplo, mover una rejilla que contiene fichas o tokens), o por medio de acciones como
barrer una serie de fichas mltiples que estn conjuntamente agrupadas.
Deteccin por la computadora. Las restricciones pueden simplificar significativamente la
deteccin del estado fsico de la Interfaz Tangible. Esto puede facilitar la implementacin,
aumentar la escalabilidad, y aumentar la flexibilidad de las formas fsicas que las interfaces
tangibles pueden asumir.
Interpretacin por la computadora. Las restricciones pueden simplificar la interpretacin
computacional subyacente de los objetos fsicos que componen una Interfaz Tangible, al
limitar fsicamente a un espacio ms pequeo los estados relativamente bien definidos.
Esto es una ayuda para la implementacin, y puede ayudar a minimizar las condiciones de
error.

71

6. Tecnologas de implementacin para TUIs
Hasta la fecha, no existen dispositivos de entrada o salida estndar para TUIs. Los desarrolladores
de TUIs emplean una amplia gama de tecnologas que detectan objetos y gestos, y sensan y crean
cambios en el mundo fsico. Las estrategias empleadas a lo largo de la corta historia de las TUIs
abarcan desde el uso de dispositivos electrnicos hechos a medida y hardware industrial estndar
hasta el desarmare y re utilizacin de los dispositivos electrnicos de algunos juguetes.
Las dificultades para la construccin de TUIs funcionales en los primeros das son difciles de
imaginar hoy en da. Tuvieron que utilizarse, microprocesadores industriales estndar lo que
requera de programacin de bajo nivel. Sin embargo, hoy en da un mejor conjunto de
herramientas y soporte de hardware estn disponibles, facilitando el desarrollo a travs de
lenguajes de programacin de alto nivel y placas de propsito especfico.
La amplia gama de tecnologas, dispositivos y tcnicas que se utilizan para la creacin de
prototipos e implementacin de TUIs puede ser desconcertante. Por lo tanto, se utilizara un
nmero de propiedades organizativas para analizar y comparar las tecnologas ms comunes de
implementacin de TUIs. A continuacin se describen tres tecnologas de aplicacin que se utilizan
a menudo en el desarrollo de TUIs: RFID, visin por computadora, y micro controladores.
Finalmente, se describen las nuevas herramientas y toolkits que facilitan la implementacin y
creacin de prototipos de interfaces de usuario tangibles, y se basan en estas tecnologas bsicas.
6.1. RFID
La Identificacin por radiofrecuencia (RFID) es una tecnologa inalmbrica basada en seales de
radio que permite detectar la presencia y la identidad de un objeto etiquetado cuando est dentro
del rango de un lector de etiquetas (una antena). En general hay dos tipos de etiquetas RFID:
etiquetas RFID activas, que contienen una batera y por lo tanto puede transmitir una seal de
forma autnoma, y las etiquetas RFID pasivas, que no tienen batera y requieren una fuente
externa para iniciar la transmisin de la seal. En general, las etiquetas RFID contienen un
transpondedor (transductor?) que est compuesto por un circuito integrado que almacena y
procesa informacin, y de una antena para recibir y transmitir una seal. La mayora de las TUIs
basadas en RFID emplean etiquetas RFID pasivas de bajo costo y por lo tanto, constan de dos
partes: un lector de etiquetas que se fija a un dispositivo de cmputo y un conjunto de objetos
etiquetados. La comunicacin entre una etiqueta y un lector slo se produce cuando ambas estn
prximas. La distancia de deteccin vara en funcin del tamao de la antena, de la etiqueta RFID y
de la fuerza de su campo electromagntico. Debido al costo de antenas grandes, el uso de RFID
est generalmente limitado a la deteccin a corta distancia, requiriendo a los objetos ser
colocados directamente en o pasarlos sobre el lector. Algunos lectores de etiquetas son capaces
de detectar varias etiquetas al mismo tiempo, o de escribir pequeas cantidades de datos a las
etiquetas individuales. Otros lectores de etiquetas son slo de lectura o slo son capaces de
detectar una etiqueta a la vez. Cuando una etiqueta es detectada, el lector de etiquetas pasa un
ID, cadena ASCII, a la computadora. La aplicacin TUI puede interpretar la cadena de entrada de
identificacin, determinar su contexto de aplicacin, y proporcionar una respuesta.
72

Mltiples TUIs se implementan utilizando tecnologa RFID. Los ejemplos incluyen una serie de
prototipos que ilustran el potencial de uso de etiquetas RFID para conectar el mundo fsico y el
digital presentados en 1999 por los investigadores de Xerox PARC. Estos prototipos incluyen libros
y documentos aumentados, as como un cubo de fotos y un reloj de pulsera. Un ejemplo muy
conocido implementado con esta tecnologa es mediaBlocks [75], una TUI que consiste en un
conjunto de bloques de madera, marcados con etiquetas RFID, que sirven como iconos fsicos
("phicons") para la contencin, el transporte y la manipulacin de medios digitales.
6.2. Micro-controladores, sensores y actuadores
Los microcontroladores actan como una pasarela entre el mundo fsico y el mundo digital [76].
Son equipos pequeos y baratos que se pueden embeber en un objeto fsico o en el entorno fsico.
El microcontrolador recibe informacin del mundo fsico a travs de sensores, y afecta el mundo
fsico a travs de actuadores. Los microcontroladores se pueden utilizar de forma independiente o
se pueden comunicar con una computadora. Existe una amplia variedad de sensores y actuadores
disponibles para ser utilizados en sistemas embebidos. La tecnologa de sensores pueden captar
una amplia gama de propiedades fsicas, entre ellas la intensidad de la luz, la reflexin, el nivel de
ruido, el movimiento, la aceleracin, la ubicacin, la proximidad, la posicin, el contacto, la altitud,
la direccin, la temperatura, la concentracin de gas, y la radiacin. Schmidt y Laerhoven [77] dan
una visin breve pero detallada de los tipos de sensores existentes. Los actuadores afectan el
mundo real mediante la produccin de luz, sonido, movimiento, o realimentacin tctil. Los
microcontroladores tambin pueden estar conectados a lectores RFID. Los actuadores de uso ms
frecuente son los LEDs, altavoces, motores y electroimanes.
Muchos sistemas TUI se construyen utilizando micro-controladores integrados. Los ejemplos
incluyen Posey [78], un kit de construccin de piezas encastrables para modelar, jugar y aprender,
y Senspectra [79] un conjunto de herramientas de modelado fsico para la deteccin y visualizacin
de tensin estructural. Estos sistemas TUI utilizan una amplia gama de microcontroladores y
sensores para permitir interacciones ricas y variadas. Sin embargo, todos ellos proporcionan una
realimentacin fsica mnima mediante el uso de LEDs, mientras que se comunican con una
computadora para proporcionar una respuesta digital multimedial.
Si bien numerosos TUIs se implementan utilizando microcontroladores, relativamente pocos TUIs
demuestran el uso de una rica realimentacin hptica, tal como movimiento, atraccin
repulsin. Navigational Blocks [80] es una TUI para la navegacin y la recuperacin de informacin
histrica que ilustra el uso de la retroalimentacin fsica tctil. El sistema consta de un conjunto de
bloques, cada uno con un microcontrolador. Cada cara de un bloque representa un parmetro de
consulta. Cada bloque es capaz de detectar su propia orientacin as como la orientacin de un
bloque adyacente. Cuando se conectan dos bloques, electroimanes en cada bloque se utilizan para
generar atraccin magntica, o repulsin. Esta realimentacin hptica refleja la relacin entre los
parmetros de la consulta actual. Pico [81] es una TUI formada por una superficie interactiva que
utiliza accionamiento para mover elementos fsicos sobre la superficie. Se pueden utilizar
restricciones mecnicas para limitar el movimiento de las fichas. El movimiento de las fichas se
genera mediante una matriz de 512 electroimanes.
73

Aunque algunos de los microcontroladores utilizados para el desarrollo de TUI requieren de
conocimientos de programacin de bajo nivel, varias plataformas fciles de utilizar para la
creacin de prototipos estn actualmente disponibles para propsitos educativos, as como para
los desarrolladores de TUIs sin conocimientos tcnicos. Estas plataformas de prototipado de alto
nivel facilitan el desarrollo iterativo reducimiento substancialmente el umbral de creacin de
prototipos de TUIs. A continuacin, se discuten algunos ejemplos de tales plataformas de
prototipado de alto nivel.
Arduino [67] es una plataforma fsica de computacin de cdigo abierto basada en una simple
placa de entrada/salida y un entorno de desarrollo. Arduino puede ser utilizado para implementar
dispositivos autnomos interactivos o puede ser conectado a software que se ejecuta en una
computadora. El entorno de desarrollo de Arduino es una aplicacin de JAVA multi-plataforma que
proporciona un editor de cdigo y un compilador, y es capaz de transferir de forma serial el
firmware a la placa. ste se basa en Processing, un entorno de desarrollo dirigido a las
comunidades de arte electrnicas y diseo visual. El lenguaje de programacin de Arduino est
relacionado con Wiring, un lenguaje parecido a C.
El Handy Board y el Handy Cricket [82] son microcontroladores baratos y fciles de usar dirigidos
principalmente a usos educativos y de aficionados. Diseados originalmente como controladores
para robtica, se utilizaron en el desarrollo de mltiples TUIs, as como en varios cursos de
laboratorio [83]. El Handy Board est programado en C interactivo, un subconjunto del lenguaje de
programacin C, el Handy Cricket se programa mediante Cricket Logo. Los entornos de desarrollo
de ambos microcontroladores son multiplataforma. Ellos proporcionan un editor y un compilador,
y permiten la transferencia del firmware hacia los controladores a travs de una conexin USB.
O'Sullivan y Igoe [76] ofrecen un excelente resumen de los sensores y actuadores que se pueden
usar con una variedad de microcontroladores incluyendo Arduino, Handy Board, y Handy Cricket.
Lego Mindstorms NXT [84] es un kit de robtica programable, que sustituye a la primera
generacin de Lego Mindstorm. El kit tiene capacidades sofisticadas, incluyendo controladores de
servo motor y una variedad de sensores, tales como un sonar de distancia y un sensor de sonido, y
puede ser utilizado para la creacin de prototipos de TUIs. Lego ha lanzado el firmware para el
ladrillo NXT Intelligent Brick como Open Source; por lo tanto, varios kits de desarrollo estn
disponibles para este sistema. Por ltimo, el kit PicoCricket [85] es similar al kit de robtica Lego
Mindstorms. Sin embargo, Lego Mindstorms est diseado especialmente para la robtica,
mientras que el Kit de PicoCricket est diseado para desarrollar creaciones artsticas que incluyen
luces, sonido, msica y movimiento. Este ltimo sistema, aunque es especialmente atractivo para
un pblico joven, tambin puede utilizarse para desarrollar rpidamente prototipos funcionales de
TUIs.
74

6.3. Visin por Computadora
6.3.1. Qu es la Visin por Computadora?
La visin por computadora es la transformacin de los datos de una cmara de fotos o de video en
una decisin o una nueva representacin. Todas estas transformaciones se llevan a cabo para
lograr algn objetivo particular. Los datos de entrada pueden incluir alguna informacin
contextual, como "la cmara est montada en un auto" o "el sensor lser indica un objeto a 1
metro de distancia". La decisin podra ser: "hay una persona en esta escena" o "hay 14 clulas
tumorales en esta diapositiva". Una nueva representacin puede significar convertir una imagen
color en una imagen de escala de grises o la eliminacin del movimiento de la cmara de una
secuencia de imgenes.
Debido a que los humanos son criaturas visuales, es fcil que se dejen engaar en pensar que las
tareas de visin por computadora son fciles. Qu tan difcil puede ser encontrar, por ejemplo,
un auto cuando se lo est mirando en una imagen? Sus intuiciones iniciales pueden ser algo
engaosas. El cerebro humano divide la seal visual en muchos canales que transmiten diferente
informacin al cerebro. El cerebro tiene un sistema de atencin que identifica, de una manera
dependiente de la tarea, partes de una imagen que considera importantes para realizar una tarea
en tanto que suprime otras. Hay una respuesta masiva al flujo de informacin visual que es, hasta
ahora, poco comprendida. Hay un amplio conjunto de entradas asociativas proveniente de los
sensores de control de los msculos y de todos los otros sentidos que permiten que el cerebro se
base en asociaciones cruzadas adquiridas a lo largo de aos de experiencia. Los ciclos de
realimentacin en el cerebro se remontan a todas las etapas de procesamiento, incluyendo a los
sensores de hardware en s (los ojos), que mecnicamente controlan la iluminacin a travs del iris
y ajustan la recepcin sobre la superficie de la retina.
En un sistema de visin artificial, sin embargo, una computadora recibe una grilla o matriz de
nmeros desde la cmara o desde el disco, y eso es todo. En su mayor parte, no hay
reconocimiento de patrones integrado, ni control automtico de enfoque o de apertura, ni
asociaciones cruzadas basadas en aos de experiencia. En su mayor parte, los sistemas de visin
son todava bastante primitivos. La Figura 38 muestra una fotografa de un automvil. En ese
cuadro se ve el espejo lateral del lado del conductor del vehculo. Lo que la computadora "ve" es
slo una grilla de nmeros. Cualquier nmero dado dentro de esa grilla, tiene un componente de
ruido bastante grande y por lo tanto por s misma, brinda poca informacin, pero esta grilla de
nmeros es todo lo que la computadora "ve". La tarea, por lo tanto, es convertir esta grilla ruidosa
de nmeros en la percepcin del "espejo retrovisor".
75


Figura 38 Para una computadora, el espejo del auto es solo una grilla o matriz de nmeros.
De hecho, resolver el problema, como se lo ha planteado hasta ahora, es extremadamente
complejo y adems, probablemente, no se encuentre una buena solucin (o an, tal vez no se
encuentre una solucin). Dada una vista bidimensional (2D) de un mundo 3D, no hay una nica
forma de reconstruir la seal 3D. Formalmente, un problema tan mal planteado no tiene solucin
nica ni buena. La misma imagen 2D podra representar cualquiera de una infinita combinacin de
escenas 3D, incluso si los datos son perfectos. Sin embargo, como ya se mencion, los datos estn
afectados por el ruido y las distorsiones. Esta corrupcin se debe a las variaciones en el mundo (el
clima, la iluminacin, los reflejos, los movimientos), las imperfecciones en la lente y la
configuracin mecnica, el tiempo finito de integracin del sensor ptico (desenfoque por
movimiento), el ruido elctrico en el sensor y los mtodos de compresin utilizados despus de
capturar la imagen. En vista de estos enormes desafos, cmo se pude lograr algn progreso?
En el diseo de un sistema prctico, el conocimiento adicional del contexto a menudo se puede
utilizar para evitar las limitaciones impuestas por los sensores visuales. Considrese el ejemplo de
un robot mvil que debe encontrar y recoger abrochadoras en un edificio de oficinas. El robot
puede usar el hecho de que un escritorio es un objeto que se encuentra dentro de las oficinas y las
abrochadoras se encuentran en la mayora de los casos sobre los escritorios. Esto da una
referencia implcita de tamao ya que las abrochadoras deben caber sobre los escritorios.
Tambin ayuda a eliminar falsos "reconocimientos" de abrochadoras en lugares imposibles (por
ejemplo, en el techo o en una ventana). El robot puede ignorar un dirigible publicitario de 200
metros con forma de abrochadora, porque el dirigible no cumple con el requisito de que el fondo
76

sea de madera como el de un escritorio. Por el contrario, en tareas tales como recuperacin de
imgenes, todas las imgenes de abrochadoras en una base de datos pueden ser de abrochadoras
reales por lo que tamaos grandes y otras configuraciones inusuales pueden haber sido
implcitamente excluidas por los que tomaron las fotografas. Esto es, el fotgrafo,
probablemente, tom fotografas slo de abrochadoras reales, de tamao normal. Las personas
tambin tienden a centrar los objetos cuando toman fotografas y tienden a ponerlos en
orientaciones caractersticas. Por lo tanto, a menudo hay informacin implcita no intencional en
las fotos tomadas por humanos.
La informacin contextual tambin puede ser modelada de forma explcita mediante tcnicas de
aprendizaje automtico. Variables ocultas tales como el tamao, la orientacin en direccin de la
fuerza de gravedad, y dems, pueden ser luego correlacionadas con sus valores a partir del uso de
conjunto de datos de entrenamiento. Alternativamente, se puede tratar de medir variables ocultas
de sesgo mediante el uso de sensores adicionales. El uso de un telmetro lser para medir
profundidad, por ejemplo, nos permite medir con precisin el tamao de un objeto.
El siguiente problema de visin por computadora es el ruido. Por lo general se lidia con el ruido
mediante el uso de mtodos estadsticos. Por ejemplo, puede ser imposible detectar un borde en
una imagen simplemente mediante la comparacin de un punto con sus vecinos inmediatos. Sin
embargo, si se observan las estadsticas de una regin local, la deteccin de bordes se hace mucho
ms fcil. Tambin es posible compensar el ruido tomando estadsticas a lo largo del tiempo.
Existen otras tcnicas para lidiar con el ruido o la distorsin mediante la construccin de modelos
explcitos aprendidos directamente de los datos disponibles. Por ejemplo, debido a que las
distorsiones de las lente son bien comprendidas, slo es necesario conocer los parmetros de un
modelo polinomial sencillo con el fin de describir y por lo tanto corregir tales distorsiones casi por
completo.
Las acciones o decisiones que la visin por computadora intenta tomar, basada en datos
provenientes de la cmara, se realizan en el contexto de una tarea o propsito especfico. Es
posible que se desee eliminar el ruido de una imagen para que nuestro sistema de seguridad emita
una alerta si alguien trata de escalar una pared o porque necesitamos un sistema de monitoreo
que cuente cunta gente cruza por una zona en un parque de diversiones. El software de visin
para robots que deambulan por edificios de oficinas emplear diferentes estrategias que el
software de visin del sistema de cmaras de seguridad fijas, porque los dos sistemas tienen
contextos y objetivos muy diferentes. Como regla general: cuanto ms restringido es el contexto
de visin por computadora, ms se puede confiar en esas restricciones para simplificar el
problema y ms confiable ser la solucin final.
6.3.2. Visin por computadora aplicada a las TUIs
En el contexto de las TUIs, la visin por computadora es usada frecuentemente en aplicaciones
espaciales y de superficie interactivas, ya que esta tecnologa es capaz de detectar la posicin de
varios objetos en una superficie 2D en tiempo real, adems de proveer informacin adicional,
77

como orientacin, color, tamao, forma, etc. Los sistemas de visin por computadora pueden ser
caracterizados en dos tipos:
Los que utilizan tcnicas de inteligencia artificial, empleando algoritmos sofisticados para
interpretar automticamente una imagen,
Los que usan etiquetas, donde el sistema sigue marcadores de referencia especficamente
definidos que estn unidos a los objetos fsicos.
Las etiquetas o marcadores permiten la identificacin unvoca de cada marcador, as como un
clculo preciso de su posicin y su ngulo de rotacin sobre una superficie 2D. Dado que los
marcadores de referencia son reconocidos y seguidos por un algoritmo de visin por computadora
que est optimizado para un diseo de marcadores especfico, el sistema tiende a ser ms
robusto, ms preciso, y computacionalmente ms barato que los sistemas basados en inteligencia
artificial. Por lo tanto, la tecnologa de visin por computadora basada en etiquetas es
frecuentemente usada en el desarrollo de TUIs. Los sistemas TUIs basados en visin por
computador TUI normalmente requieren al menos tres componentes: una cmara de alta calidad,
un proyector LCD para proporcionar una salida o respuesta grfica en tiempo real, y un paquete de
software de visin por computadora.
Una gran variedad de TUIs se implementan con visin por computadora basada en etiquetas o
marcadores. Algunos ejemplos incluyen Urp [21], una interfaz de usuario tangible para la
planificacin urbana y ReacTable [4] . La tcnica de EventTable [86] se basa en eventos en lugar de
centrarse en el seguimiento de objetos. Usando esta tcnica, los marcadores de referencia se
parten y distribuyen entre los objetos, de modo que slo cuando los objetos etiquetados estn
conectados fsicamente forman una etiqueta completa que se detecta.
Ejemplos de TUIs basados en visin por computadora que no utilizan marcadores de referencia o
etiquetas, incluyen Designers Outpost [87], una TUI para el diseo de sitios web que se
implementa por medio de una amplia librera de visin por computadora y algoritmos de
procesamiento de imgenes, y el ColorTable [88], un sistema para el diseo urbano, el cual utiliza
el color y la forma para distinguir objetos.
El rendimiento, la fiabilidad y la robustez de los sistemas basados en visin por computadora son
susceptibles a las variaciones en la iluminacin y al desenfoque por movimiento. El uso del color
para identificar los objetos puede ser relativamente robusto, pero se debe limitar el
reconocimiento a un pequeo nmero de colores de alto contraste. Una forma de mejorar la
robustez y velocidad de deteccin es pintar las fichas de modo que reflejen la luz infrarroja y
emplear un filtro para la cmara. Esto har que la cmara slo detecte los objetos pintados, pero
reduce la capacidad de los sistemas para distinguir objetos diferentes.
Varias libreras brindan soporte para el desarrollo de TUIs basadas en visin por computadora. Las
librerias ARToolKit [89] [90] y reacTIVision [65], dan soporte para el seguimiento de marcadores de
referencia. Papier Mch [91] [92] es un conjunto de herramientas para la creacin de TUI
utilizando visin por computadora, etiquetas electrnicas, y cdigos de barra. La misma introduce
78

un modelo de alto nivel de eventos para trabajar con visin por computadora, RFID y cdigos de
barra, lo que facilita la portabilidad de la tecnologa. El uso de una librera o toolkit de visin por
computador para el desarrollo de una TUI reduce sustancialmente la complejidad y el tiempo
requerido para el desarrollo de la misma.
6.3.3. OpenCV
A continuacin se detalla una librera de visin por computadora. La misma es la elegida para
implementar parte del prototipo por lo que se hace una descripcin ms detallada de la misma.
OpenCV [93] es una librera de cdigo abierto de visin por computadora disponible en
http://SourceForge.net/projects/opencvlibrary. La librera est escrita en C y C++ y corre bajo
Linux, Windows y Mac OS X. Existen desarrollos activos de interfaces para C#, Java, Python, Ruby,
Matlab y otros lenguajes.
OpenCV ha sido diseada pensando en la eficiencia computacional y con un fuerte enfoque en las
aplicaciones de tiempo real. OpenCV est escrita en C optimizado y puede aprovechar las ventajas
de los procesadores multincleo.
Uno de los objetivos de OpenCV es proporcionar una infraestructura de visin por computadora
fcil de usar, que ayude a las personas a construir rpidamente aplicaciones de visin bastante
complejas. La librera OpenCV contiene ms de 500 funciones que cubren muchas reas de
aplicacin del campo de visin por computadora, incluyendo la inspeccin de productos en
fbricas, imgenes mdicas, seguridad, interfaces de usuario, calibracin de cmaras, visin
estreo, y robtica. Debido a que la visin por computadora y el aprendizaje automtico a
menudo van de la mano, OpenCV tambin contiene una librera completa de aprendizaje
automtico de propsito general (MLL). Esta ltima se centra en el reconocimiento estadstico de
patrones y algoritmos de agrupamiento.
OpenCV est dirigida a proporcionar las herramientas bsicas necesarias para resolver problemas
de visin por computadora. En algunos casos, las funcionalidades de alto nivel de la librera sern
suficientes para resolver los problemas ms complejos de visin por computadora. An cuando
ste no sea el caso, los componentes bsicos de la librera son lo suficientemente completos para
permitir la creacin de una solucin completa propia para casi cualquier problema de visin por
computadora.
La licencia de cdigo abierto para OpenCV se ha estructurado de tal manera que se pueda
construir un producto comercial utilizando la totalidad o parte de OpenCV. No se est bajo
ninguna obligacin de que el cdigo del producto creado sea abierto. En parte debido a estas
condiciones de licencia liberales, hay una gran comunidad de usuarios que incluye a personas de
grandes empresas (IBM, Microsoft, Intel, Sony, Siemens, y Google, por nombrar slo algunas) y
centros de investigacin (como Stanford, MIT , CMU, Cambridge, y el INRIA). OpenCV es popular
en todo el mundo, con grandes comunidades de usuarios en China, Japn, Rusia, Europa e Israel.
79

Desde su versin alfa en enero de 1999, OpenCV ha sido utilizada en muchas aplicaciones,
productos y proyectos de investigacin. Estas aplicaciones incluyen: unin automtica de
imgenes
11
, mapas satelitales, alineacin de escaneo de imgenes, reduccin de ruido de
imgenes mdicas, anlisis de objetos, sistemas de seguridad y deteccin de intrusos, sistemas
automticos de control y seguridad, sistemas de inspeccin de manufacturas, calibracin de
cmaras, aplicaciones militares y vehculos areos, terrestres, y submarinos no tripulados. Incluso
se ha utilizado en el reconocimiento de sonido y msica, donde las tcnicas de reconocimiento de
imgenes se aplican a imgenes del espectrograma de sonidos. OpenCV es una parte clave del
sistema de visin del robot de Stanford, "Stanley", que gan la carrera DARPA Grand Desert
Challenge en el ao 2005.
6.4. Toolkits y libreras para implementar Interfaces Tangibles
Varios conjuntos de herramientas y libreras de software han surgido para facilitar la
implementacin de prototipos funcionales de TUIs. Esta seccin describe algunas de las
herramientas existentes para el desarrollo de interfaces tangibles, as como herramientas para
desarrollos basados en estilos de interaccin de realidad aumentada. Se han seleccionado
herramientas y libreras que aportan una solucin tcnica para el desarrollo de TUIs.
Los Phidgets, disponibles comercialmente [94], proporcionan un conjunto de dispositivos plug and
play con conexin USB (por ejemplo, placas de E/S, sensores y actuadores) que son anlogos a los
widgets de las interfaces grficas de usuario. Este sistema permite que cualquier sensor analgico
pueda ser conectado en su placa, siempre que module una seal de 5-V. Del mismo modo,
cualquier interruptor on/off y otros dispositivos digitales de E/S pueden ser conectados a la placa y
controlados con un valor binario. Los Phidgets estn apuntados a facilitar la tarea de los
desarrolladores de software en la implementacin de prototipos mecatrnicos de TUIs
compuestos de sensores y actuadores cableados. Tales TUIs son capaces tanto de tomar entradas
fsicas, como de generar salidas o respuestas fsicas. La principal ventaja de Phidgets es que sus
dispositivos estn controlados centralmente a travs de una computadora convencional en lugar
de a travs de un microprocesador estndar. Por lo tanto, la integracin de capacidades digitales,
tales como la creacin de redes, el uso de medios multimedia, y la interoperabilidad del
dispositivo se vuelven ms fcil. Otra ventaja es la facilidad de programacin y depuracin que son
mucho ms difciles de hacer cuando uno compila y descarga un programa a un microprocesador
estndar. Una TUI implementada utilizando esta tecnologa es AudioPad [2] .
Ya se ha descrito Arduino [67] en la seccin anterior 5.2. Micro-controladores, sensores y
actuadores. Se trata de un conjunto de herramientas que consiste en la placa Arduino y el
entorno de programacin. A diferencia de los Phidgets, que son sensores y actuadores construidos
especficamente, fcilmente conectados entre s y controlados centralmente desde una
computadora convencional, Arduino interacta con componentes electrnicos estndar. Arduino

11
El stitching o foto stitching es el proceso por el cual se combinan mltiples imgenes para producir una
imagen panormica o una imagen de alta resolucin.
80

por lo tanto, no trata a los dispositivos electrnicos como cajas negras, requiriendo cableado
fsico y la construccin del circuito.
El sistema VoodooIO [95] es similar a los Phidgets en proveer una serie de controles fsicos, pero
hace hincapi en la maleabilidad de las interfaces fsicas . VoodooIO utiliza un material de sustrato
en el que los controles pueden ser dinmicamente aadidos, ordenados, manipulados y
eliminados. Este material de sustrato sirve como un bus de red y energa al que los controles se
pueden conectar sin esfuerzo, sin cables, y rpidamente. Varios entornos de programacin
soportan la integracin de la funcionalidad de VoodooIO en las aplicaciones interactivas.
Papier-Mch [91] [92] proporciona un API de alto nivel para la facilitacin de la adquisicin y la
abstraccin de entradas de TUIs a travs de visin por computadora, RFID y cdigos de barras, as
como la facilitacin para la portabilidad de una interfaz de una tecnologa a otra. A travs de
abstracciones independientes de la tecnologa de entrada, Papier-Mch permite a los
desarrolladores de software implementar rpidamente prototipos funcionales de TUIs, as como
redirigir una aplicacin a una tecnologa de entrada diferente, con mnimos cambios en el cdigo.
Por medio del uso de visin por computadora, tecnologa RFID y cdigos de barras, Papier-Mch
permite el desarrollo de TUIs que hacen seguimiento de objetos pasivos, sin marcar, como notas
de papel y documentos. El toolkit se encarga del descubrimiento y la comunicacin con los
dispositivos de entrada, as como de la generacin de eventos de alto nivel a partir de los eventos
de entrada de bajo nivel. Para facilitar la depuracin, Papier-Mch ofrece una ventana de
monitoreo que muestra los objetos de entrada y los eventos que se crean o se invocan. Se
implementa como un plug-in para Eclipse y soporta el desarrollo de aplicaciones Java.
Slo algunos de los toolkits fsicos que se listan estn disponibles en el mercado. Los toolkits que
impliquen electrnica por su propia naturaleza, incluso siendo de cdigo abierto, no pueden ser
puestos a disposicin de forma gratuita. Ambos conjuntos de herramientas de software de visin
por computadora que se describen a continuacin estn disponibles de forma gratuita y slo
requieren de una cmara web para el desarrollo de prototipos.
ARToolKit [89] [90] es una librera de visin por computadora para seguimiento de marcadores
que permite a los desarrolladores de software implementar rpidamente aplicaciones de realidad
aumentada. Adems de permitir el seguimiento de la posicin 3D y la orientacin de los
marcadores cuadrados, el toolkit permite superponer imgenes virtuales sobre un objeto fsico
real etiquetado con un marcador. Para hacer esto, se calcula la posicin de la cmara real con
respecto a un marcador, y luego coloca una cmara virtual en el mismo punto. Modelos grficos
tridimensionales generados por computadora pueden ser superpuestos exactamente sobre el
marcador real. Aunque originalmente estaba destinado a la generacin de aplicaciones de realidad
aumentada, ARToolKit se utiliza a menudo para el desarrollo de TUIs. Por haber sido desarrollado
para brindar soporte para el desarrollo de aplicaciones de realidad aumentada, ARToolKit
proporciona informacin 3D (tamao del marcador, ngulo de visin), pero emplea un formato de
salida adaptado a las imgenes 3D de realidad virtual, por lo tanto, hace que la interpretacin de
la informacin 3D para otros fines sea un tanto difcil.
81

Por ltimo, reacTIVision [65] es un framework multiplataforma de visin por computadora
diseado principalmente para la construccin de superficies multi-tctiles. Permite el seguimiento
rpido y robusto de marcadores de referencia vinculados a objetos fsicos, as como el seguimiento
multi-tctil de dedos. El componente central del framework es una aplicacin independiente para
el seguimiento rpido y robusto de los marcadores de referencia en una secuencia de video en
tiempo real. El protocolo de comunicacin subyacente, TUIO, soporta la transmisin eficiente y
confiable de los estados de objetos a travs de una red de rea local o una WAN. Se ha convertido
en un protocolo y una API comn para la implementacin de superficies tangibles multi-tctiles. El
toolkit reacTIVision, hasta el momento, slo implementa el protocolo TUIO 2D no proporcionando
informacin 3D.
La principal diferencia entre reacTIVision y otros toolkits es su arquitectura distribuida, que separa
el tracker o rastreador de marcadores de la aplicacin o lgica del programa. TUIO proporciona
una capa de abstraccin para el seguimiento, y por lo tanto permite la transmisin de los datos de
la superficie a los clientes. Este enfoque facilita el desarrollo de clientes TUIO en varios lenguajes
de programacin.
La principal ventaja de las herramientas presentadas es que reducen el umbral para la
implementacin de prototipos de TUIs totalmente funcionales al ocultar y manejar detalles y
eventos de bajo nivel. Por lo tanto, reducen significativamente la duracin de cada ciclo de diseo,
implementacin y prueba.
Sin embargo, como cada una de estas herramientas proporciona soporte slo para tecnologas y
componentes de hardware especficos, cada vez que un prototipo de TUI utiliza diferentes
tecnologas y diferente hardware (es comn que se desarrollen varios nuevos prototipos a lo largo
de un proceso de desarrollo) el desarrollador de TUI debe aprender un nuevo toolkit o librera de
software y debe re-escribir el cdigo. Mientras que el esfuerzo por codificar las tcnicas de
interaccin existentes ya se ha iniciado, la bsqueda de nuevas tcnicas de interaccin y
soluciones tecnolgicas an contina. Por lo tanto son necesarias herramientas de software que
puedan ser fcilmente extendidas para admitir nuevas tcnicas de interaccin y nuevas
tecnologas. Por ltimo, aunque la programacin con toolkits reduce sustancialmente el tiempo y
el esfuerzo necesario de los desarrolladores de software para construir prototipos TUIs
completamente funcionales, no alcanza a proporcionar un conjunto lo suficientemente amplio de
abstracciones para especificar, discutir y programar la interaccin tangible dentro de un equipo de
desarrollo interdisciplinario.


82

7. Fortalezas y limitaciones de las TUIs
El principio bsico para la interaccin humano-computadora es facilitar a los usuarios el
cumplimiento de un conjunto de tareas. Diferentes tareas son mejor soportadas con diferentes
estilos de interaccin. Por lo tanto, la comprensin de las fortalezas y limitaciones de un estilo de
interaccin particular es esencial para determinar si es adecuado para soportar ciertas tareas.
Desde un punto de vista de diseo orientado a la resolucin de un problema, la tangibilidad como
objetivo de diseo podra no ser siempre la solucin correcta. Sin embargo, desde el punto de
vista de investigacin, a menudo hay un valor en la exploracin de lo que lo tangible nos puede
aportar, as como el descubrimiento de nuevos y diferentes enfoques. Tales exploraciones nos
proporcionan una imagen cada vez ms clara de las fortalezas y limitaciones de la TUIs. El buen
diseo tiene como objetivo poner de manifiesto los puntos fuertes y aliviar los dbiles, por
ejemplo mediante la construccin basada en las fortalezas de los elementos tangibles y
facilitndose de las fortalezas de otras reas relacionadas para el cumplimiento de cualidades que
no pueden alcanzarse por medio de las TUIs. En el sentido contrario, la integracin de elementos
tangibles puede aliviar los problemas de interaccin de los sistemas no tangibles.
7.1. Fortalezas
7.1.1. Colaboracin
Desde el principio, un objetivo subyacente de muchos sistemas TUIs ha sido fomentar el dilogo y
la comunicacin entre los expertos del dominio (por ejemplo, arquitectos) y las partes interesadas
(por ejemplo, los futuros habitantes de los edificios), y brindar soporte para el aprendizaje
colaborativo (ver [21] [40]).
Hornecker y Buur [96] listan una serie de factores que dan soporte para la colaboracin cara a
cara. La familiaridad y el affordance (abordabilidad) conocidos de la interaccin cotidiana con el
mundo real reducen el umbral para comenzar a interactuar con un sistema y por lo tanto
aumentan la probabilidad de que los usuarios contribuyan activamente. Los tangibles han
demostrado tener una cualidad de invitacin a ser usados [97] en comparacin con las interfaces
basadas en el mouse y la pantalla, produciendo, por ejemplo, que un mayor nmero de visitantes
lo utilicen en el contexto de un museo, especialmente nios y mujeres, en lugar de un sistema
similar pero con interface grfica. Los mltiples puntos de acceso asegurarn de que no haya un
"cuello de botella para la interaccin, lo que permite la interaccin simultnea y facilita la
participacin. Por otra parte, la interaccin manual con los objetos es observable y tiene una
legibilidad aumentada debido a la visibilidad de los objetos fsicos. Esto facilita la coordinacin y la
conciencia grupal. A travs de un cuidadoso diseo de la configuracin fsica, una interfaz puede
sutilmente limitar y orientar los comportamientos de los usuarios. Por ejemplo, a la reacTable [4]
se le dio deliberadamente una forma circular con el fin de fomentar el intercambio y proporcionar
igualdad de acceso a un variado nmero de usuarios. Proporcionar un nico conjunto de tarjetas o
tokens tambin puede fomentar el intercambio y el compartir entre los usuarios. Por otra parte,
los objetos tangibles puede ser entregados y compartidos con ms facilidad que los grficos, por lo
tanto los objetos tangibles fomentan la discusin grupal.
83

Jorda [5] argumenta que la capacidad para la accin simultnea y la visibilidad del sistema que
tienen los participantes hacen que las interfaces tangibles de mesa sean superiores a las interfaces
grficas para compartir el control de datos en tiempo real como por ejemplo en la ejecucin
musical. Los artefactos tangibles, los tokens por ejemplo, pueden ser vistos como recursos para la
actividad compartida.
7.1.2. Ubicacin
Las interfaces tangibles pueden ser interpretadas como una implementacin concreta de la nocin
original de Computacin Ubicua, cuyo objetivo era permitir a los usuarios permanecer situados en
el mundo real, y retener la primaca del mundo fsico. Sin embargo, aunque las interfaces tangibles
estn insertas o embebidas en el contexto, el objetivo del diseo de las interfaces tangibles no es
la invisibilidad de la interfaz, sino ms bien el aspecto fsico de la interfaz.
Una de las principales fortalezas de las interfaces tangibles es que pueden habitar el mismo
mundo que el usuario humano, se encuentran en su mismo mundo fsico. Del mismo modo,
Hornecker y Buur [96] sostienen que la interaccin tangible est integrada en el espacio real y por
lo tanto siempre se encuentra en lugares concretos. Las interfaces tangibles, no slo por residir en
una pantalla, son una parte tan importante del entorno fsico como lo son los elementos
arquitectnicos o aparatos y productos fsicos. Esta naturaleza de ubicacin especfica de las TUIs
las hace muy poderosas como dispositivos de cmputo ubicuo. Esta propiedad de ubicacin,
adems, implica que el significado del dispositivo de interaccin tangible puede cambiar
dependiendo del contexto en el que se encuentre.
7.1.3. Pensamiento tangible
El cuerpo fsico del usuario y los objetos fsicos con los que interacta desempean un papel
central en la conformacin de su comprensin del mundo [98]. Los bebs desarrollan sus
habilidades cognitivas espaciales a travs de la experiencia locomotora. Los nios aprenden
conceptos abstractos a travs de la interaccin corporal con objetos tangibles [99]. Los
profesionales tales como diseadores, arquitectos e ingenieros a menudo utilizan artefactos fsicos
para razonar acerca de problemas complejos. Uno de los puntos fuertes de los TUIs en
comparacin con las interfaces de usuario tradicionales es que aprovechan esta conexin del
cuerpo y del conocimiento, facilitando el pensamiento tangible, el pensamiento a travs de
acciones corporales, la manipulacin fsica y las representaciones tangibles.
7.1.4. Gesto
Mientras que los gestos son tpicamente considerados como medios de comunicacin, mltiples
estudios han demostrado que el uso de gestos desempea un papel importante en aliviar la carga
cognitiva en adultos y nios, y en la planificacin conceptual de la produccin del habla [100]. Al
proporcionar a los usuarios con mltiples puntos de acceso al sistema y mantener su movilidad
fsica (las manos no tienen que restringirse o atarse al teclado y mouse), las TUIs permiten a los
usuarios aprovechar la ventaja de pensar y comunicarse a travs de gestos sin restricciones
mientras interactan con el sistema.
84

Las TUI emplean gestos como modalidad de interaccin aprovechando la memoria kinestsica de
los usuarios, la capacidad de detectar, almacenar y recuperar la fuerza muscular, la posicin del
cuerpo y el movimiento para construir habilidades. Kirk y col. [101] argumentan que la memoria
kinestsica activada al mover un objeto tangible puede aumentar la conciencia de las acciones
realizadas, ayudando a reducir el riesgo de errores de modo
12
. Adems las TUIs permiten la
manipulacin 3D de manera que los sistemas computaciones basados en superficies no pueden.
7.1.5. Acciones epistmicas y apoyo al pensamiento
Diversos estudios han demostrado que los artefactos fsicos brindan soporte al proceso cognitivo
al servir como ayudas en el proceso de pensamiento y como memoria externa. Kirsh y Maglio
[102] hacen una distincin entre las acciones prcticas, que tienen consecuencias funcionales y
por lo tanto contribuyen a lograr una meta, y las acciones epistmicas, que no tienen
consecuencias funcionales pero cambian la naturaleza de la tarea mental. Las acciones epistmicas
ayudan a explorar las opciones, a realizar un seguimiento de las decisiones previas tomadas, y a
dar soporte a la memoria. Acciones tales como sealar los objetos, cambiar su disposicin,
girarlos, taparlos, anotarlos y contarlos, pueden servir como acciones epistmicas que disminuyen
la carga de trabajo mental involucrada en una tarea, recurriendo a recursos que son externos a la
mente. Al facilitar la interaccin de forma relativamente libre con objetos fsicos y permitir
interacciones que no se interpretan computacionalmente, las TUIs tienden a hacer que las
acciones epistmicas sean ms fciles y naturales que en las interfaces de usuario tradicionales.
7.1.6. Representacin tangible
En un estudio ampliamente conocido, Zhang y Norman [103] demostraron que la representacin
de una tarea puede afectar radicalmente la capacidad de razonamiento y el rendimiento. En base
a estos resultados, Zhang [104] lleg a la conclusin de que las representaciones externas son
componentes intrnsecos de muchas de las tareas cognitivas, ya que guan, limitan, e incluso
determinan la conducta cognitiva.
Algunos dominios de aplicacin, como el de la navegacin de informacin o el de creacin de
material multimedial (ej.: creacin de msica) no tienen representaciones espaciales inherentes o
convencionales, pero pueden ser representados utilizando un mapeo simblico o metafrico. En
todos los casos, la interaccin con las representaciones fsicas aprovecha los conocimientos
previos del usuario y sus habilidades de interaccin con el mundo real, no digital, como la fsica
bsica, la conciencia y habilidades corporales, las habilidades sociales, y las habilidades y
conciencia del entorno o el ambiente en donde se encuentra.
El enfoque Token + constraints utiliza las propiedades fsicas del sistema para crear una sintaxis
que codifica perceptualmente la sintaxis de la interaccin. Dicha sintaxis fsica, no slo disminuye
la necesidad de reglas explcitas [103], sino que tambin permite la inferencia perceptiva, que es la

12
Un tipo de error cuando un usuario realiza una accin apropiada para una situacin en otra situacin. Los
ejemplos incluyen software de dibujo, donde un usuario intenta utilizar una herramienta de dibujo, como si
se tratara de otra (por ejemplo, dibujar una lnea con la herramienta de relleno).
85

lectura directa a travs de la percepcin humana, que no requiere de una deduccin lgica
explcita.
7.1.7. Multiplexado espacial e interaccin directa
"Con multiplexado espacial la entrada de cada funcin se controla con un
transductor dedicado, ocupando cada uno su propio espacio. Cada transductor
puede ser accedido de forma independiente, pero tambin simultneamente.
En contraste, la entrada mediante multiplexado temporal utiliza un mismo
dispositivo para controlar diferentes funciones en diferentes puntos del
tiempo. [69]
En interfaces tangibles que emplean varios objetos de interaccin, la entrada es multiplexada
espacialmente. Diferentes objetos fsicos representan diferentes funciones o diferentes datos.
Esto permite al diseador del sistema tomar ventaja de la forma, tamao y posicin del
controlador fsico de forma tal de aumentar la funcionalidad y reducir la complejidad de la
interaccin. Adicionalmente permite un mapeo ms persistente, en comparacin con una GUI
tradicional que se basa en multiplexado temporal, donde cada clic del mouse podra resultar que
se ejecute una funcin diferente o un objeto diferente sea seleccionado.
Sin multiplexado espacial, los objetos de entrada son de carcter genrico y por lo tanto deben
tener forma y apariencia abstracta. Con mapeos estticos y mltiples objetos de entrada, los
elementos tangibles de entrada (tokens) pueden ser expresivos y, adems, puede proporcionar
affordances especficos para la funcionalidad que brindan acceso.
Mltiples objetos especficos permiten acciones paralelas, en contraste con una GUI con la cual un
usuario tiene que realizar una accin despus de la otra de forma secuencial. Las acciones
paralelas aceleran potencialmente la tarea, y permiten una interaccin sin necesidad de utilizar la
vista, ya que el resto de los objetos en el espacio de trabajo son suficientes para guiar las manos.
Fitzmaurice [69] seala que los objetos multiplexados espacialmente permiten aprovechar nuestra
memoria espacial (o memoria muscular). Por otra parte, en una GUI tradicional slo puede
haber una seleccin activa a la vez y cualquier nueva seleccin deshace la anterior. Una TUI puede
eliminar muchas de las acciones de seleccin redundantes (elegir la funcin, hacer la accin,
seleccionar la siguiente funcin). Los estudios de usuarios han demostrado que la interaccin con
multiplexado espacial es superior a la interaccin mediante multiplexado temporal en trminos
de rendimiento [69] y reduce el costo de adquirir dispositivos de entrada.
7.1.8. La especificidad permite iconicidad y affordance
El empleo de varios objetos de entrada (multiplexado espacial) significa que stos no tienen por
qu ser abstractos y genricos, sino que pueden tener un significado especfico [65], dedicado en
forma y apariencia a una determinada funcin o dato digital. En una TUI, los tokens pueden tener
un mapeo persistente. De este modo, la apariencia de un objeto puede indicar directamente su
significado o funcin, as como la forma de interactuar con l, haciendo uso de su affordance
fsico. Por otra parte, los objetos especficos pueden limitar la manipulacin para permitir (o
86

invitar a realizar) slo aquellas acciones que tengan resultados razonables [105]. Una alta
especificidad, por lo tanto, puede mejorar el mapeo entre las acciones y los efectos. Las interfaces
tangibles, a travs de su propia naturaleza de ser fsicas y, por tanto menos maleables y menos
mutables que una representacin puramente digital controlada por computadora, tienden a ser
altamente especficas. Esto es tanto una fortaleza como una debilidad.
Fitzmaurice [69] hipotetiz que los dispositivos especializados se desempean mejor que los
dispositivos genricos en configuraciones de espacio multiplexado y demostr experimentalmente
que los dispositivos especializados aceleran la adquisicin de datos, comparados con el uso de un
dispositivo digital genrico. Un token podra ser liviano o pesado, generado diferentes affordances
para levantarlo y moverlo. Pequeos cambios en la forma a menudo afectan la manera en que los
usuarios manipulan los objetos. Por ejemplo, los diferentes tamaos de los objetos resultan en
diferentes tipos de agarre. Como regla general, los tokens cuadrados con un ancho de 5 a 10 cm
son fciles de agarrar, un ancho de 5 cm facilita un agarre de precisin (pellizcando con el pulgar y
usando uno o dos dedos) y un ancho de ms de 10 cm requiere un agarre de fuerza, utilizando
toda la mano. Adems, el peso de un token puede aadir significado a la interaccin, la pesadez
podra indicar un objeto ms importante y valioso. Un propiedad central de los objetos fsicos es
que proporcionan retroalimentacin tctil, facilitando el control sin necesidad de utilizar la vista
cuando se realizan operaciones finas, tales como rotar objetos, o mover dos objetos en relacin
con los dems [101].
7.1.9. Ventajas de las Interfaces Tangibles para nios
El uso de interfaces tradicionales es a menudo inadecuado para los usuarios ms jvenes y puede
ser un obstculo para el aprendizaje interactivo. La exploracin y la manipulacin de objetos
fsicos son componentes clave del mundo de los nios pequeos y de su aprendizaje. El poder
educativo de la tecnologa digital para nios ha estado tpicamente limitado por el hecho de que
los usuarios exploran y manipulan representaciones abstractas basadas en el monitor de dos
dimensiones, y no verdaderos objetos fsicos. Los nios pequeos no pueden leer selecciones de
men basados en texto o escribir sus respuestas mediante un teclado. Adems, ellos a menudo
son incapaces de usar un mouse o cualquiera de los dispositivos apuntadores estndar (trackball,
touchpad, trackpoint, lpiz ptico, joystick). Esta inhabilidad se debe a una variedad de factores de
desarrollo, incluso la carencia de control motor fino necesario para usar dispositivos de sealando,
la carencia del entendimiento cognoscitivo de la correlacin entre el uso del dispositivo
controlador y lo que pasa en pantalla, y la carencia de habilidades representativas abstractas
necesarias para entender representaciones tpicas basadas en el monitor [106] [107] [108] [109] .
Hay fuertes motivos de desarrollo cognoscitivos de por qu la interaccin con objetos fsicos
apropiados para la tarea es el mejor ambiente de aprendizaje para nios. Piaget y psiclogos del
Desarrollo han enfatizado la importancia crtica de la manipulacin de objetos fsicos para el
desarrollo cognoscitivo de nios pequeos [99] [110]. Adems, Vygotsky enfatiz la importancia
del juego en la facilitacin del desarrollo del nio [111]. Los objetos usados en el juego de nios
pueden incluir algo que el nio encuentra prctico, como palos, rocas o cajas de cartn, pero a
87

menudo incluyen objetos desarrollados con la intencin de ser juguetes, como fichas, muecas,
coches en miniatura, bloques, etctera [109].
Las tecnologas tangibles pueden beneficiar el aprendizaje de los nios de muchas maneras:
Las TUIs requieren de poco tiempo de aprendizaje
Las TUIs son interfaces naturales que requieren poco esfuerzo cognoscitivo para aprender, por lo
tanto los nios pueden concentrarse ms en la tarea, en lugar de en cmo usar la computadora o
un determinado software.
Las TUIs ofrecen al usuario una forma alternativa de interaccin y control del ambiente
computacional
Las TUIs pueden ofrecer una variedad de interacciones, permitiendo que el usuario solucione
problemas con objetos fsicos concretos y accin fsica cuando ellos fallan en resolver el mismo
problema con representaciones ms abstractas y sintaxis compleja; por lo tanto, las TUIs pueden
brindar a los nios el control del ambiente computacional; ellos sentirn y poseern el ambiente,
estarn activamente involucrados y no perdern su inters fcilmente.
Las TUIs soportan la actividad emprica (Prueba y error)
Las TUIs brindan la presentacin continua del objeto de inters. Utilizan acciones incrementales
rpidas y reversibles cuyo impacto sobre el objeto de inters son inmediatamente visibles.
Las TUIs soportan ms de un usuario
La ventaja de usar interfaces tangibles consiste en que ya no se est restringido a un solo usuario,
los nios pueden sentarse y colaborar con sus amigos, cara a cara, de un modo completamente
natural. Esto puede proveer a los nios una experiencia social. La investigacin muestra que los
nios son ms productivos cuando ellos cooperan, por lo tanto comparado con un nio aislado, un
nio trabajando en grupo puede ser capaz de hacer una tarea ms eficazmente y beneficiarse an
ms de la experiencia
Desde el punto de vista de pedaggico y psiclogico, los tangibles son beneficiosos para aprender;
esto se debe a que: la accin fsica es importante en el aprendizaje, los objetos concretos son
importantes en el aprendizaje, los materiales fsicos dan lugar a imgenes mentales que pueden
dirigir, guiar y acotar la futura solucin del problema en ausencia de dichos materiales fsicos, los
principiantes pueden abstraer relaciones simblicas de una variedad de casos concretos y los
objetos fsicos familiares para los nios son ms fcilmente entendidos que sus entidades
simblicas [112].
7.2. Limitaciones
Varias de las aparentes limitaciones de la TUIs resultan del siguiente desafo:
"Estos sistemas requieren un cuidadoso equilibrio entre la expresin fsica
y grfica para evitar el desorden fsico y para aprovechar las ventajas de
las diferentes formas de representacin. Este equilibrio entre las
88

representaciones fsicas y digitales se presenta como uno de los retos ms
grandes del diseo de TUIs". [71]
Si bien es importante tener en cuenta las limitaciones de las TUIs a la hora de disear aplicaciones
para dominios especficos, estas limitaciones podran ser vistas como retos que deben abordar las
investigaciones futuras.
A continuacin se discuten algunas de las limitaciones actuales de las TUIs.
7.2.1. Escalabilidad y riesgo de perder objetos fsicos
Uno de los mayores desafos de las TUIs es la escalabilidad. Aplicaciones exitosas para problemas
pequeos o conjuntos de datos acotados a menudo no se adaptan bien a problemas complejos
que involucran muchos parmetros y conjuntos grandes de datos. Para cualquier aplicacin que
trate de proporcionar una representacin tangible, esto ser un problema debido a que las
representaciones ms grandes ocupan ms espacio.
El problema de la escalabilidad se puede rastrear a varias razones subyacentes. La primera sera el
espacio fsico que ocupan los tokens. En el diseo de GUIs, a esto se lo referencia como "espacio
de pantalla". Con TUIs la pregunta anloga sera, cuntas fichas se pueden colocar en una
superficie interactiva?. Si el tamao de la superficie creciera, se volvera ms difcil para un usuario
poder acceder y mover las fichas, ya que tendra que caminar a travs de o volar sobre la
representacin. Relacionado a esto est el problema del desorden fsico [69]. Si la superficie ya
est llena con el nmero mximo de fichas, ya no quedar espacio para colocar y utilizar fichas
adicionales. Por otra parte, los objetos fsicos deben ser almacenados en algn lugar, aunque no
estn en uso, lo que podra requerir de un gran armario, pudindose ocasionar la prdida de las
mismas.
La escalabilidad tambin puede ser interpretada literalmente. Con un mapa digital se puede
acercar la imagen para obtener una visin a escala de un sub-rea y alejar la imagen para ver el
mapa de la zona en relacin con su entorno. Con un modelo fsico, el tamao de cada elemento es
fijo. El aumento del tamao de un elemento requiere de la ampliacin de todo lo dems y de su
separacin, lo que esencialmente requerira de la construccin de un nuevo modelo. Edge y
Blackwell [113] describen esto como voluminosidad. Un efecto secundario de la voluminosidad
fsica es que si uno quiere trabajar en dos problemas distintos al mismo tiempo, hay que limpiar
para hacer espacio. Las representaciones digitales se pueden simplemente guardar y volver a
abrir, no ocupan espacio. Los modelos fsicos son difciles de comparar entre s, debido a que no se
pueden guardar y abrir fcilmente, como sus anlogos digitales.
Despus de haber construido un modelo de arquitectura en URP [21], uno puede decidir, por
ejemplo, aadir un edificio a la izquierda de la estructura. Dependiendo de cmo se ha llenado la
superficie interactiva, esto podra requerir mover todo el modelo existente a la derecha. Con un
sistema GUI, el usuario sera capaz de extender la superficie virtual o simplemente mover la vista.
La escalabilidad tambin contribuye a lo que Edge y Blackwell [113] definen como compromiso a
largo plazo. Para iniciar la construccin de un modelo, uno tiene que decidir, por ejemplo, el
89

tamao de los objetos y seleccionar una ubicacin para colocarlos; ms tarde los cambios son
difciles.
Bellotti y col. [114] sealan otro problema potencial relacionado con la escalabilidad. Las TUIs se
basan en la nocin de acoplamiento directo, donde los objetos tangibles incorporan tanto los
medios de representacin como los medios de manipulacin de datos digitales [71]. Por lo tanto
las TUIs proporcionan una forma extrema de manipulacin directa. Bellotti y col. [114] sostienen
que con las interfaces de manipulacin directa se necesita un mayor esfuerzo para ejecutar
comandos complejos. La manipulacin directa no tiene un concepto de variables genrica y/o
comodn, como las que proporcionan las interfaces de lnea de comandos, que permiten hacer un
fcil y rpido reemplazar todo, y no soportan adecuadamente la manipulacin de mltiples
objetos de forma conjunta.
7.2.2. Versatilidad y maleabilidad
Mientras que los objetos digitales son maleables, fciles de crear, modificar, reproducir y
distribuir, los objetos fsicos son rgidos y estticos. El aspecto icnico y el uso de la forma fsica
para crear affordance suelen dar lugar a objetos concretos y especializados. Como los objetos
fsicos no son mutables, el sistema no puede transformar a stos en diferentes objetos o alterar
sus propiedades fsicas (por ejemplo, cambiar su color), incluso si tal cambio podra ser apropiado.
La especificidad de los objetos, mientras favorece el aprendizaje, entra en conflicto con los
conceptos de abstraccin y versatilidad. Otra cuestin relacionada con la versatilidad y la
maleabilidad es la dificultad para brindar soporte para un sistema automtico de deshacer, una
funcin de historial, o una repeticin de las acciones (vase [101]).
Teniendo en cuenta la versatilidad adicional, una GUI se puede utilizar para realizar una variedad
de tareas tales como escribir un documento, chatear con amigos, y reproducir msica. Sin
embargo, la TUI est diseada especialmente para facilitar un conjunto limitado de tareas.
Adems, una GUI permite a los usuarios cambiar entre diferentes vistas o representaciones (por
ejemplo, entre un mapa y una imagen de satlite). Con una TUI el cambio es difcil, ya que la
representacin tangible ha sido elegida. Mientras que esta limitacin puede ser abordada
parcialmente a travs de la proyeccin digital, hay casos en los que un punto de vista diferente
puede retener la topologa, pero no la geometra espacial. Jacob et al. [115] afirman que los
diseadores deben aspirar a crear una interfaz que est tan basada en la realidad como sea
posible (basado en los conocimientos de los usuarios de habilidades del mundo real no digital). Sin
embargo, cuando el realismo de una interfaz disminuye su versatilidad, el diseador debe hacer
un compromiso explcito entre el realismo y la versatilidad, slo renunciando al realismo de una
interfaz a cambio de un valor agregado para el usuario.
7.2.3. Fatiga del usuario
Los efectos del tamao y del peso de los objetos tangibles no deberan ser subestimados. El diseo
fsico por lo tanto, no slo debe considerar affordances en trminos de las acciones que se invita a
realizar a travs de la forma fsica del objeto, sino tambin de la ergonoma y del desgaste y
90

tensin generados a ms largo plazo, producto de la actividad manual necesaria para realizar las
tareas.
Por ejemplo, los tokens tangibles tienen que ser fciles de agarrar, levantar, y posicionar: Los
tokens de las TUIs son constantemente levantados y movidos como su principal modalidad de
interaccin. Por ejemplo, un token con un ancho de 10 cm requiere un agarre potente con toda la
mano. La interaccin mediante una TUI tiende a requerir de movimientos ms amplios y
diferentes a los tradicionales de mouse y teclado (que tienen sus propios problemas, por ejemplo,
el sndrome del tnel carpiano). Tener que estirarse sobre una superficie en repetidas ocasiones
puede llegar a ser agotador luego de un tiempo, donde los pequeos movimientos del mouse
requeriran de menos esfuerzo. Adems, el tamao fsico del usuario en relacin con la superficie
de interaccin determina su alcance. Tambin debemos recordar que la interaccin fsica no
siempre tiene que ser fcil y sin esfuerzo. Por el contrario, la gente disfruta de un desafo en los
juegos y la sensacin de dominio experto de un instrumento musical.
91





PARTE III - DESARROLLO
EXPERIMENTAL

"La imaginacin es ms importante que el saber" - Albert Einstein




1. Introduccin ..... 92
2. Primer Prototipo .... 93
2.1. Diseo .. 93
2.2. Implementacin Introduccin . 97
2.3. Elementos y herramientas utilizadas .. 99
2.4. Diseo de clases e implementacin del cdigo .. 104
2.5. Anlisis de los resultados 112
3. Segundo Prototipo . 115






92

1. Introduccin
El proyecto consiste en desarrollar una aplicacin para la creacin de msica mediante una
interfaz tangible basada en el conocimiento adquirido en la investigacin presentada previamente.
El diseo propuesto tiene como objetivo poner de manifiesto los puntos fuertes de las TUIs y
aliviar los dbiles, mediante la construccin basada en las fortalezas de los elementos tangibles y
facilitndose de las fortalezas de otras reas relacionadas para el cumplimiento de cualidades que
no pueden alcanzarse por medio de las TUIs.
La idea del prototipo es que el usuario o grupo de usuarios puedan modificar en tiempo real,
mediante el uso de sus manos, las combinaciones y posiciones de ciertos tokens (fichas) sobre un
tablero en forma de matriz. Cada uno de estos tokens tendr asociado digitalmente un sonido o
nota musical predeterminada perteneciente a algn instrumento musical. El sistema reproducir
dicho sonido en un momento dado segn la posicin del token en el tablero. La modificacin de la
disposicin de las fichas sobre el tablero permitir al usuario o grupo de usuarios tocar msica
en tiempo real de forma intuitiva y colaborativa. De esto se desprende la posibilidad de ir creando
msica de forma incremental, iniciando con un solo instrumento y sonido e ir agregando ms
instrumentos y mayor complejidad. Bsicamente, el prototipo se comportara como un
secuenciador tangible. (PARTE I - 4.9. Secuenciadores Tangibles)
El prototipo ser implementado mediante tecnologa de visin por computadora (PARTE I - 6.3.1.
Qu es la Visin por Computadora?) por razones que se explican ms adelante. El sistema toma la
posicin de los tokens mediante visin por computadora y reproduce el sonido asociado a esa
ficha. El prototipo est pensado para aprovechar las ventajas de las interfaces tangibles e
implementarse con herramientas y elementos de fcil disponibilidad.
Basndose en el conocimiento adquirido, se desarrolla y presenta una interfaz tangible de bajo
costo para la creacin de msica de forma intuitiva, incremental y colaborativa. Dicho sistema
caer dentro de la categora de secuenciador musical tangible, segn las categoras de sistemas
tangibles musicales de Kaltenbrunner ( PARTE I - 4.7. Msica y performance multimedia ).
Se desarrollaron dos prototipos. El primero, al cual se le analizaron sus principales limitaciones y
un segundo prototipo ms evolucionado basado en el paradigma de Token and Constraints. (
PARTE I - 5.4. Token And Constraint )
El primer prototipo desarrollado se ubica dentro de la categora de superficies interactivas segn
la clasificacin de Ulmer. (PARTE I - 5.3. Clasificacin de las TUIs). El segundo prototipo se ubica
dentro de la categora Token + Constraint segn esta misma clasificacin. El mismo es mucho
mejor que el primer prototipo ya que implementa un tablero con fichas encastrables lo que
permite aprovechar todas las ventajas adicionales del paradigma Token + Constraints (PARTE I -
5.5. Fortalezas del enfoque Token + Constraint).
93

El primer prototipo fue diseado y codificado en conjunto con Octavio Portaluppi en el marco del
proyecto final de la materia Interaccin Humano Computara. Se trabaj de forma grupal, con
Octavio, mediante distintas aplicaciones que facilitaron el trabajo colaborativo.
2. Primer Prototipo
2.1. Diseo
2.1.1. Propuesta
Analizados los antecedentes de sistemas musicales antes mencionados (PARTE I - 4.7. Msica y
performance multimedia) se propuso desarrollar una interfaz tangible de bajo costo para la
creacin de msica, ms especficamente un secuenciador musical tangible (PARTE I - 4.9.
Secuenciadores Tangibles). El mismo est orientado a nios a partir de los 6 aos de edad, con el
objetivo de estimular sus sentidos e introducirlos en el mundo musical de una manera divertida,
sencilla e intuitiva. (PARTE I - 7.1.9. Ventajas de las Interfaces Tangibles para nios)
La mayora de las interfaces tangibles estudiadas requieren de un hardware especial,
generalmente de alto costo y difcil de configurar, siendo esto una desventaja importante si se
desea que la interfaz sea utilizada por un pblico variado sin conocimientos tcnicos. Esto mitiv
el desarrollo de una interfaz que utilice elementos econmicos, de fcil acceso y que a su vez sea
fcil de armar, configurar y operar.
La mayora de las interfaces musicales analizadas estn apuntadas a un pblico adulto, con cierto
conocimiento tcnico y musical. Se vio como una oportunidad apuntar el diseo de la interfaz
tangible a un pblico infantil a efectos de estimular sus sentidos. La intencin principal fue que la
herramienta permitiera a los nios interactuar y jugar con formas, colores, y sonidos, al mismo
tiempo que desarrollaran de forma sencilla e intuitiva su conocimiento musical, incorporando
conceptos de ritmo, notas, as como el sonido que identifica a cada instrumento.
La meta fue que el sistema permitiera crear msica mediante la ubicacin de distintos tokens o
fichas en una cierta posicin de un tablero (matriz), asociando a cada ficha un sonido particular
que sera reproducido en un momento dado, determinado por su posicin calculada a travs de un
sistema de visin por computadora.
El objetivo fue que el usuario pueda modificar las combinaciones y posiciones de los tokens en
tiempo real, logrando tocar msica en tiempo real. De esto se desprende la posibilidad de ir
creando msica de forma incremental, iniciando con un solo instrumento y sonido e ir agregando
ms instrumentos y mayor complejidad.
2.1.2. Concepto del sistema y modo de interaccin
A continuacin se detalla la idea conceptual del prototipo, es decir, se explica de forma abstracta,
independiente de la implementacin, la forma de interactuar con el sistema de forma de utilizarlo
para crear msica.
94

El sistema cuenta, bsicamente, con un tablero en forma de matriz, es decir marcado con filas y
columnas, y un conjunto de fichas o tokens. Estas ltimas se dividen en dos conjuntos, un primer
conjunto que indican instrumentos, que se denominaran Instru-token y otro conjunto que
indican notas musicales, que se denominaran Noti-token
El tablero tiene la siguiente forma:














Figura 39 Esquema del tablero.
Bsicamente, es una matriz de 6 filas por 9 columnas, de las cuales se distingue la primera
columna que cumple una funcin distinta al resto.
Cada fila del tablero representa un instrumento definido temporalmente por el Instru-token
colocado en su primera celda (la celda gris que define que instrumento se modelar en esa fila).
Cada columna representa un instante de tiempo dentro de un ciclo fijo. ste se repite
indefinidamente a una velocidad determinada. Entonces, por ejemplo, para un ciclo de 4 segundos
y 8 instantes de tiempo (las 8 columnas reservadas para Noti-tokens) se tiene que cada etapa
del ciclo se ejecutar una despus de otra cada 0.5 segundos. La msica se genera posicionando,
primero, el Instru-token que identifica al instrumento en la primera posicin de la fila (celda gris
en Figura 39 Esquema del tablero.), y luego ubicando Noti-tokens deseados en las celdas de la
misma fila.
Se eligieron los instrumentos occidentales ms conocidos: guitarra elctrica, piano, bajo y batera,
con el propsito de que resulten familiares. Se opt por incluir varios instrumentos, de forma de
poder lograr una banda musical completa y funcional. En el caso del bajo se utilizaron notas
musicales asociadas a cada uno de los Noti-tokens, mientras que para el piano y la guitarra se
emplearon acordes a fin de generar un sonido ms completo, al mismo tiempo que resultasen ms
apropiadas para crear canciones simples. En el caso de la batera los diferentes Noti-tokens
identifican a cada uno de los cuerpos de la misma.
Ambos, los Instru-tokens y los Noti-tokens cuentan con varias copias de cada uno, es decir,
existen, por ejemplo, varios Instru-token guitarras, varios Instru-token piano con el objetivo de
poder modelar varias guitarras, o varios pianos a la vez, en la misma cancin. Obviamente se
95

cuentan con inclusive mayor cantidad de copias de los distintos Noti-tokens de forma que sean
suficientes para modelar todas las posibles combinaciones de sonidos, aun en los casos que se
utilicen todas las filas, o se desee utilizar la misma nota al mismo tiempo, o a lo largo del mismo
instrumento.
Los Instru-tokens que identifican al instrumento que podrn ser colocadas en la primera
columna son, en trminos de modelado:



Batera Guitarra Bajo Piano
Figura 40 Los cuatro Instru-tokens.
Los Noti-tokens que identifican las variantes de sonido de un instrumento son siete.

Do Re Mi Fa Sol La Si
Figura 41 Los siete Noti-tokens de la Guitarra.
La decisin sobre qu figura representar cul instrumento fue ad-hoc.
En el caso de la guitarra, los Noti-tokens representan acordes. Para el caso de este instrumento
la letra que contienen dentro de la figura es el respectivo acorde en notacin americana. No se
incluyen las notas o acordes sostenidos para reducir la complejidad de implementacin ya que
esto aumentara la cantidad de notas y no brindara beneficios importantes en trminos de
investigacin y desarrollo de la interfaz.
En el caso de la Guitarra y el Piano cada Noti-token representa uno de los 7 acordes indicados en
Figura 41 Los siete Noti-tokens de la Guitarra. En el caso del Bajo, cada Noti-token
representa una nota simple del instrumento. En el caso de la Batera cada Noti-token representa
un sonido de cada uno de los cuerpos del instrumento, es decir, el Noti-token C representa el Hi-
Hat, el D el Tom de piso, el E el Platillo, el F y el G los Tomtom, el A el Bombo y el B el Redoblante.
C D E

E
F G A B
96


Figura 42 Los distintos cuerpos de una batera: 1. Platillo, 2. Tom de Piso, 3. Tomtoms, 4. Bombo, 5. Redoblante y 6.
Hi-hat
2.1.3. Caso de uso
A continuacin se describe un caso de uso del sistema con la idea de ejemplificar el modo de
interaccin. El objetivo de este caso de uso es generar un ritmo musical con batera, guitarra y
bajo.
Generamos la base musical de la batera:
Utilizamos el Instru-token en forma de crculo en la primera posicin de la primera fila para
identificar a la batera. Utilizaremos 2 filas. La primera fila para el bombo (A) y la segunda para el
redoblante (B). Para el bombo establecemos que se dispare el sonido en el instante inicial y a
mitad de ciclo. Para el redoblante establecemos que se dispare nicamente a mitad de ciclo.
Generamos una base de guitarra y bajo:
Ponemos un Instru-token en forma de triangulo en la primera posicin de la tercer fila para
identificar la guitarra. Utilizaremos una nica fila, la cual tiene los Noti-tokens que indican Do
(C), Mi (E), Sol (G), Si (B). Tales acordes los ubicamos al comienzo, a de ciclo, de ciclo y de
ciclo.
Ponemos un Instru-token cuadrado en la primer posicin de la cuarta fila para identificar el bajo
y luego los Noti-tokens correspondientes en las posiciones indicadas del ciclo.
Grficamente, el tablero con los tokens quedara de la siguiente manera:
















C E
G
B
B
A A
97












Figura 43 Caso de uso del sistema. Un ritmo musical con batera, guitarra y bajo.
2.2. Implementacin - Introduccin
Luego de analizadas las distintas tecnologas de implementacin (PARTE I - 6. Tecnologas de
implementacin para TUIs) y estudiado la implementacin de varios sistemas (PARTE I - 4.7.
Msica y performance multimedia), se decidi desarrollar un prototipo mediante visin por
computadora (PARTE I - 6.3. Visin por Computadora). Esto se debi principalmente a los costos
asociados y a la disponibilidad de las distintas herramientas y hardware necesarios para la
implementacin. La visin por computadora se pudo implementar mediante el simple uso de una
cmara web estndar y una librera de visin de computadora gratuita. El resto de las tecnologas
de implementacin requieren de hardware especfico, el cual adems de tener costos mayores
asociados, es difcil de conseguir en nuestro pas y muchas veces no se comercializa en negocios
locales por lo que hay que adquirirlo en el exterior a travs de Internet, con la desventaja de los
gastos adicionales de fletes e impuestos de importacin. Adicionalmente, tanto el autor como
Octavio Portaluppi cuentan con mayor experiencia en programacin de alto nivel que en
programacin de bajo nivel y manejo hardware, conocimientos necesarios para implementar el
prototipo mediante RFID o microcontroladores y sensores. Debido a estas razones se decide
implementar el prototipo mediante visin por computadora.
C E G B
98


Figura 44 Los elementos del prototipo: 1. La computadora que corre el software, muestra el estado del sistema
mediante una GUI y reproduce los sonidos. 2. El tablero con algunas tokens colocados. 3. Las fichas o tokens de
cartn. 4. El sistema de soporte conformado por el trpode y la varilla de madera. 5. La cmara web que captura las
imgenes.
El sistema desarrollado est compuesto por una parte de software y una de hardware. El software
se encarga de procesar las imgenes capturadas del tablero a travs de la cmara web, de
procesar la informacin, de reproducir los sonidos adecuados y de mostrar el estado del sistema a
travs de la GUI. La GUI permite visualizar el estado del sistema a travs de un tablero virtual
mostrado por pantalla, permite iniciar y detener el sistema, como tambin modificar la frecuencia
de ejecucin de los sonidos.
Bsicamente el prototipo opera de la siguiente manera: una vez capturada la imagen del tablero,
el software la procesa y pasa a identificar los instrumentos, las notas y sus posiciones, cargando
toda esta informacin en una estructura de datos. Paralelamente, el programa procede a recorrer
esta estructura de datos, reproduciendo los sonidos respectivos, al ritmo establecido. La ltima
1
2
3
4
5
99

tarea que realiza es la de actualizar la interfaz grfica, esto es, la versin digital del tablero fsico
que se muestra por pantalla.
El hardware consiste en un tablero de papel en forma de matriz con filas y columnas, un conjunto
de fichas de cartn que representan los instrumentos, Intru-tokens, y otro conjunto de fichas de
cartn que representan las notas o acordes, Not-tokens. Adems se cuenta con una cmara
web, y un sistema de soporte para la misma, el cual permite situar la cmara a una altura
determinada sobre el tablero.
2.3. Elementos y herramientas utilizadas
A continuacin se presentan y describen los elementos de hardware, cmara web, sistema de
soporte, tablero y fichas, y los elementos de software, esto es lenguaje de programacin, libreras,
IDE, y dems herramientas auxiliares utilizados para implementar el sistema.
El prototipo se construy teniendo como principal objetivo la utilizacin de componentes
econmicos y de fcil acceso.
2.3.1. Hardware
Las pruebas se hicieron sobre una Notebook corriendo Windows Vista con un Microprocesador
Intel Core 2 Duo P8600 a 2.4Ghz y 4 GB de RAM.
Adems de la computadora se utilizaron otros componentes de hardware, los cuales son descritos
a continuacin.
Tablero y fichas
El tablero consiste en una grilla de papel impresa de 60cm x 30cm (aproximadamente 3 hojas A4
colocadas de forma vertical una al lado de la otra) que luego fue pegada sobre una superficie de
madera para evitar que se doble y por consiguiente que se deforme la imagen capturada. La grilla
fue impresa en color gris tenue, lo que permite que el usuario la distinga para posicionar
correctamente las fichas, y que a su vez sea imperceptible para la cmara, reduciendo el ruido de
la imagen capturada, simplificando as su posterior procesamiento. El objetivo de esta grilla
impresa en color gris es facilitar a los usuarios la ubicacin correcta de los tokens sobre el tablero.




Tabla 1 Arriba los Noti-token fsicos de cartn utilizados sobre el tablero. Abajo, su representacin mediante la
interfaz grfica.
Se disearon fichas con formas tales que sean fciles de interpretar por el usuario y a su vez
robustas y eficientes para que el sistema las pueda identificar correctamente. Las figuras fueron
100

impresas en blanco y negro en papel mediante una impresora lser y luego adheridas a cada ficha
de cartn. A las mismas se le agregaron nmeros y letras para facilitar su deteccin.








Piano Guitarra Batera Bajo
Tabla 2 Arriba los Instru-tokens fsicos de cartn utilizados sobre el tablero. Abajo su representacin mediante la
interfaz grfica.
Se utilizo un papel opaco para las fichas y el tablero con el objetivo de reducir los reflejos
ocasionados por la iluminacin, y de esta forma minimizar el ruido de las imgenes capturadas por
la cmara.
Cmara
Se utiliz una cmara web Genius iSlim 1320 de 1.3 Mega Pixeles [116] para asegurar una buena
calidad de las imgenes capturadas. La cmara cuenta con objetivo Multi-layer y sensor CMOS que
proporcionan una gran calidad de imagen y captura de video de 640 x 480 a 30 cuadros por
segundo y de 1280 x 1024 a 15 cuadros por segundo. La misma es Plug and Play mediante
conexin USB por lo que no necesita driver. El precio de la misma es aproximadamente de U$D
30.
13

Inicialmente se realizaron pruebas con otras cmaras VGA (640 x 480 con 0.3 Mega Pixeles); no
obstante, la calidad de las imgenes no era la suficiente para su posterior procesamiento. Otras
cmaras probadas no fueron reconocidas por la librera de visin por computadora elegida, por lo
que fueron descartadas.

Figura 45 Genius iSlim 1320

13
Precio de referencia obtenido en Mayo del 2012 en el sitio Argentino de compras online Mercado Libre:
http://listado.mercadolibre.com.ar/Genius-iSlim-1320
101

Sistema de soporte
Se dise un sistema de soporte para poder posicionar la cmara sobre el tablero a cierta altura,
de forma de capturar las imgenes sin deformacin perspectiva. Para esto se utiliz un trpode
fotogrfico y una varilla de madera, la cual se atornill en un extremo del trpode, y en el otro se
coloc la cmara web. Este sistema brind buena estabilidad y movilidad, al mismo tiempo que
permiti ajustar la cmara con facilidad. Tambin permite colocar la cmara a una altura
suficientemente alta como para no entorpecer al usuario cuando interacta con el tablero.

Figura 46 Soporte para la cmara construido mediante el
uso de un trpode de fotografa y una varilla de madera.


Figura 47 Genius iSlim 1320 montada sobre el
soporte de madera mediante un tornillo, una tuerca y
arandelas.

Iluminacin
Se debe utilizar una iluminacin lo mas pareja posible, de forma que todas las areas de la
superficie del tablero reciban la misma intensidad lumnica. La luz no debe ser ni muy tenue, ya
que la cmara no podr capturar imgenes ntidas, ni muy fuerte, ya que podra producir reflejos
indeseados en el tablero y las fichas.
La iluminacin debe ser uniforme para evitar variaciones de tonalidad en las distintas areas de la
superficie del tablero. Si la luz es ms fuerte en un sector, los tonos de grises sern distintos a los
tonos de grises de otros sectores que reciben menor intensidad lumnica. Esto produce problemas
a la hora de procesar la imagen capturada.
102

2.3.2. Software
El software se dise utilizando UML y se implement mediante el paradigma de programacin
orientada a objetos, lo que permiti un modelado ms natural e intuitivo. Como resultado, la
implementacin y codificacin del sistema se simplific de gran manera.
En este sentido, se opt por utilizar el lenguaje de programacin C# dado que es orientado a
objetos y provee herramientas que facilitan la codificacin.
El sistema se desarroll utilizando el IDE Visual Studio 2010 de Microsoft. El mismo facilit el
proceso de codificacin y debugging, as como tambin brind soporte para el trabajo colaborativo
y el control de versiones del cdigo fuente mediante Visual Studio Team Explorer para la
plataforma Visual Studio Team Foundation Server 2010.
Una de las principales razones de la eleccin del lenguaje de programacin C#, es que, adems de
brindar soporte para la orientacin a objetos, los autores contaban con experiencia previa en
dicho lenguaje y en JAVA, ambos con sintaxis similar. Dado que la librera de visin por
computadora elegida, OpenCV, slo estaba disponible para ser utilizada con los lenguajes C y C++,
se utiliz un wrapper de esta librera para C#, llamado Emgu CV [117] que tambin es Open
Source.
Otra de las razones por lo que se eligi Visual Studio para desarrollar la aplicacin es que contaba
con la herramienta para trabajo colaborativo y control de versiones llamada Team Foundation
Server 2010 lo que permiti hacer el desarrollo del cdigo de forma grupal mucho ms eficiente.
Para esto se carg todo el proyecto al servicio de hosting de cdigo gratuito de Microsoft llamado
CodePlex [118]. De esta forma el cdigo fue trabajado de forma conjunta y paralela de una forma
segura y eficiente. Esto agiliz el proceso de desarrollo de manera notable.
A continuacin se describen las libreras utilizadas por la aplicacin.
Reconocimiento de Imgenes Emgu CV [117]
Teniendo presente la importancia del reconocimiento de imgenes, fue importante utilizar una
herramienta que facilitara el trabajo y lo hiciera de forma eficiente. Luego de analizar las
alternativas disponibles, se decidi utilizar la librera OpenCV. Esta eleccin se fundament en la
cantidad de documentacin de calidad, ejemplos disponibles en la red, facilidad de uso y que su
utilizacin acadmica y comercial es gratuita.
Asimismo, habiendo escogido el lenguaje de programacin C#, se present la necesidad de
disponer de la librera OpenCV para su uso en .Net. por lo que se utiliz un wrapper de OpenCV
denominado Emgu CV (versin 2.2.1.1150) el cual es Open Source, est desarrollado
completamente en C# y es multiplataforma.
Los archivos de dicha librera son:
Emgu.CV.dll
Emgu.CV.UI.dll
103

Emgu.Util.dll
Metronmo - C# MIDI Toolkit [119]
Para emular un metrnomo que manejara la frecuencia de reproduccin de los sonidos, se decidi
utilizar una librera especfica destinada al control de entrada-salida MIDI denominada C# MIDI
Toolkit (versin 5.0.0.0) desarrollada por Leslie Sanford bajo licencia MIT. Cabe destacar que
haciendo uso del control de tiempo nativo que provee C# (timer), no se lograron buenos
resultados, ya que haba demoras en la ejecucin de los eventos, lo que produca que se altere la
reproduccin de los sonidos y se pierda el ritmo.
El archivo de la librera es: Sanford.Multimedia.Midi.dll
Sonido Microsoft DirectX [120]
Finalmente, para la reproduccin de audio se decidi utilizar la librera DirectX de Microsoft, ms
especficamente Microsoft.DirectX.AudioVideoPlayback (versin 1.0.2902.0), ya que ofreca un
desempeo aceptable para nuestras necesidades. La misma permite que los sonidos se ejecuten
de forma simultnea. Es decir, permite modelar por ejemplo un acorde de la guitarra en
simultneo con un sonido de la batera, u otro instrumento.
El archivo de la librera es: Microsoft.DirectX.AudioVideoPlayback.dll
2.4. Diseo de clases e implementacin del cdigo
Bsicamente, el funcionamiento que se desea modelar e implementar es el siguiente:
La aplicacin detectar, a travs de la cmara web, los tokens colocados sobre el tablero,
identificando su tipo y posicin. Procesar la informacin y actualizar una estructura que modele
el tablero con sus tokens. Luego ir barriendo dicha estructura columna a columna segn la
frecuencia o velocidad especificada por el usuario. A medida que barre las columnas, la aplicacin
habr detectado qu instrumento se asocia a cada fila y ejecutar el sonido asociado al token
existente en esa posicin.
El cdigo completo del sistema se encuentra en PARTE V - Anexo Cdigo. Adicionalmente, el
mismo se encuentra disponible online para su descarga, ver 2.4.5. Descarga del proyecto.
2.4.1. Diseo UML
El programa fue, previo a su codificacin, diseado, discutido y modelado de forma de obtener los
mayores beneficios en trminos de claridad, eficiencia y flexibilidad. Como resultado de tales
discusiones se gener el siguiente diagrama UML de clases; para disearlo se utiliz el software de
modelado Enterprise Architect de Sparx Systems.
104


Figura 48 Diagrama UML de clases.
105

El modelado y diseo en UML se realiz inicialmente en espaol, luego se codific en ingls con el
objetivo de que el cdigo pueda ser comprendido por gente que hable otros idiomas. Por lo tanto
los distintos nombres de clases, mtodos y atributos del diagrama UML se corresponden con sus
anlogos en ingls en el cdigo del programa.
Existen algunos cambios entre lo modelado inicialmente en la etapa de diseo, plasmado en el
diagrama UML, y lo implementado mediante C# y el uso de las libreras en la etapa de codificacin.
Por ejemplo, mediante el uso de la librera para el manejo de sonido, DirectX, no fue necesario
crear una clase propia Sonido.
2.4.2. Principales clases
A continuacin se describen brevemente las principales clases del sistema. Para una mirada
completa del cdigo de cada una referirse a PARTE V - Anexo Cdigo.
Instrumento (Instrument.cs)
Esta clase se encarga de representar un instrumento. El mismo se modela como un arreglo de
siete sonidos. La clase cuenta con un constructor que recibe por parmetro un preset que permite
crear automticamente uno de los cuatro instrumentos antes mencionados, guitarra, bajo, batera
o piano, mediante la carga de sonidos predeterminados para cada instrumento a partir de archivos
de audio.
La clase cuenta con un mtodo utilizado para reproducir un sonido dado del instrumento, el cual
recibe como parmetro una de las siete notas posibles.
Ventana (MainWindow.cs)
Esta clase se encarga de manejar la GUI del sistema. Contiene los event handlers de los distintos
botones de la interfaz. El atributo ms importante que tiene es un objeto privado de tipo
MusicProcessor llamado musicProcessor, el cual ser el corazn del sistema. Los dos mtodos
pblicos principales son para actualizar el estado del tablero grfico, es decir, para actualizar la
representacin grfica de los Instru-tokens que aparecen en la primera columna, y los Noti-
tokens que aparecen en el resto del tablero; stos son UpdateInstruments() y UpdateNotes()
respectivamente.
Un objeto de este tipo, MainWindow, es creado al inicio de la ejecucin por el objeto inicial del
programa de tipo Program.
Tablero (Board.cs)
Es una clase abstracta que debe ser implementada por alguna versin concreta de tablero. El
objetivo de esta decisin de diseo es independizar la estructura que modela el tablero del modo
en que se cargan los datos en el mismo. La clase tablero implementa la estructura que modela al
tablero junto a todos los mtodos necesarios para facilitar el manejo del mismo, salvo por dos
mtodos que son abstractos. El ms importante de estos es Update() y debe ser implementado
por la clase que quiera implementar la carga de datos al tablero, en nuestro caso la clase
BoardFromCam. Por ejemplo, si desearamos cambiar el modo de carga del tablero, mediante
106

sensores o mediante una interfaz grfica, lo nico que deberamos hacer es heredar la clase Board
y redefinir el mtodo Update() de la forma ms conveniente segn nuestro tipo de interfaz. Los
mtodos pblicos de la clase Board estn pensados para facilitar el manejo de la estructura que
modela el tablero.
Por lo tanto se tiene una aplicacin que es independiente y transparente del sistema utilizado para
detectar los tokens fsicos. Si en algn momento se deseara cambiar la tecnologa de
implementacin por sensores, por ejemplo, lo nico que habra que hacer es heredar la clase
Board e implementar el mtodo Update().
La estructura que guarda la informacin del tablero es el atributo protegido myBoard, que es un
arreglo de filas, donde cada fila est modelada con un atributo de tipo instrumento y un arreglo de
ocho componentes. El tamao del tablero se define mediante el constructor.
TableroCam (BoardFromCam.cs)
Esta es una de las clases ms importantes del sistema. La misma implementa todo lo relacionado a
la captura de las imgenes a travs de la cmara, el procesamiento de las imgenes, y la
conversin de las mismas en informacin til que se volcar en el tablero virtual del sistema.
Implementa la clase abstracta Board a travs de la implementacin del mtodo Update(). La clase
BoardFromCam implementa la carga de los tokens al tablero mediante la deteccin de los mismos
a travs de visin por computadora. Para dicha tarea se vale de varios mtodos privados y de la
librera Emgu CV descripta previamente.
El proceso de deteccin de los tokens mediantes visin por computadora realizado por esta clase
ser descrito en detalle en la siguiente seccin.
Partida (MusicProcessor.cs)
Esta es la clase principal del sistema, el corazn del mismo. Se encarga de crear la estructura que
modela y contiene los distintos instrumentos con sus respectivos sonidos, de crear el objeto que
representa y carga el tablero mediante la cmara web, de pedirle al mismo que actualice el
tablero, de controlar el ritmo de la ejecucin de los sonidos, y de ordenarle al objeto que se
encarga de la GUI (MainWindow) de que actualice la pantalla segn los datos del tablero.
Esta clase utiliza un objeto metrnomo, el cual ir marcando el ritmo de la ejecucin de los
sonidos, de la actualizacin de la pantalla, y de la captura de informacin mediante la cmara. ste
es un objeto de tipo MidiInternalClock proveniente de la librera C# MIDI Toolkit.
Cada vez que el metrnomo haga tictac, el mtodo metronome_Tick() se ejecutar. Este mtodo
ir recorriendo la estructura que modela el tablero, avanzar una columna cada vez que se ejecute
y realizar ciertas tareas en cada ocasin. Arrancar, al inicio del programa, por la primera
columna e ir avanzando, guardando el nmero de columna actual. El mismo recorrer la columna
actual del tablero y ejecutar los sonidos indicados en esa columna. Luego, en el caso que la
columna actual sea la quinta, crear un hilo que ejecutar el mtodo Update() del objeto board de
tipo BoardFromCam, es decir le pedir al objeto board que actualice la estructura del tablero
107

mediante sus mtodos de visin por computadora. Si la columna actual es la sexta, le pedir al
objeto mainWindow que actualice la interfaz grfica. Por ltimo, si la columna es la ltima del
tablero, asignar a la columna actual la primera para volver a comenzar a ciclar por las mismas al
ritmo que marque el metrnomo.
2.4.3. Reconocimiento de Tokens
El reconocimiento de imgenes es parte fundamental de la aplicacin; sta utiliza visin por
computadora para reconocer los distintos tokens fsicos distribuidos sobre el tablero.
El sistema se basa en el reconocimiento de imgenes mediante la comparacin de la imagen
obtenida a travs de la cmara con una plantilla de imgenes previamente almacenadas. stas son
imgenes de cada uno de los distintos tokens tomadas y almacenadas previamente. Si la
comparacin con alguna de las imgenes de la plantilla arroja un resultado mayor a un dado valor
establecido, entonces la imagen representa uno de los tokens del sistema. El mtodo utilizado
para dicha comparacin es provisto por la librera Emgu CV y se llama MatchTemplate().
En la siguiente seccin se explica en detalle cmo funciona el proceso de deteccin mediante el
uso de la funcin MatchTemplate().
Previo a la comparacin, la imagen del tablero es procesada. La misma es convertida a escala de
grises, para optimizar su procesamiento, y luego recortada, de forma de que slo quede la imagen
del tablero, y la misma quede de un tamao pre establecido. Sabiendo las dimensiones de la
imagen del tablero, el tamao de cada celda en la misma, y la cantidad de filas y columnas, se
define una regin de inters (ROI) del tamao de una celda, la misma se ir moviendo a travs de
la imagen del tablero, marcando cada una de las celdas, comenzando en la fila 0 y columna 0,
recorriendo todas las celdas de esa fila, y luego comenzando a hacer lo mismo, pero en la
siguiente fila. Cada vez que se mueve, dicha regin de inters marcar justo una de las celdas del
tablero en la imagen tomada, que ser comparada con las imgenes de la plantilla mediante el
mtodo MatchTemplate() de la forma que se explic previamente. De esta manera, adems de
saber si se detect algn token, se puede establecer fcilmente en qu celda se encuentra el
mismo.
Lo que se compara no son las formas de las fichas, sino los nmeros y las letras que contienen.
Esto facilita la comparacin y aumenta la robustez de la deteccin de las figuras. Por lo tanto, las
imgenes que se almacenan como plantillas no son los tokens en su totalidad, sino un fondo
cuadrado negro con el nmero o letra en blanco, segn corresponda.
La clase que se encarga de esta tarea es la clase BoradFromCam, la cual hereda de la clase Board e
importa y hace uso de la librera de visin por computadora Emgu CV.
En trminos generales, el reconocimiento de los tokens se realiza de la siguiente manera:
1. Inicializacin (en la creacin del objeto BoardFromCam):
1.1. Se define la cmara que ser utilizada para tomar las imgenes y se define el tamao de
las mismas.
108

1.2. Se crea un hilo que se encarga de mantener a la cmara tomando imgenes
constantemente, de forma tal que al solicitarle una imagen, la misma ya haya sido
tomada mientras el programa hacea otra cosa. Se inicia dicho hilo de ejecucin.
1.3. Se cargan las imgenes tomadas previamente de los distintos tokens desde archivos en
forma de plantilla de comparacin. Las mismas se cargan en una estructura para su
rpido recorrido.
2. Deteccin (cada vez que MusicProcessor solicite que se haga un Update() del tablero):
2.1. Se toma la ltima imagen que fue capturada por el hilo de ejecucin mencionado en 1.2.
2.2. Se recorta dicha imagen a dimensiones preestablecidas y se convierte a escala de grises.
2.3. Se realiza la deteccin de los Instru-tokens
2.3.1. Segn la cantidad de filas y columnas, y el tamao de la imagen, se define un
tamao de paso para avanzar el ROI.
2.3.2. Se selecciona la primera imagen plantilla de Instru-tokens desde la estructura de
datos que la contiene.
2.3.3. Se define un ROI del tamao de una celda. El mismo se posiciona en la primera celda
de la primera columna.
2.3.4. Se compara la imagen plantilla con la imagen definida por el ROI. Para esto se utiliza
el mtodo MatchTemplate(). Luego se analizan los resultados de dicha operacin.
Si dicho resultado es mayor a un valor establecido, se considera que hubo una
coincidencia exitosa, y dicho Instru-token se encuentra en esa celda, por lo que se
actualiza la estructura que modela el tablero con dicho token en esa celda.
2.3.5. A continuacin se desplaza el ROI una celda hacia abajo y se vuelve a realizar la
comparacin.
2.3.6. Cuando se terminan de recorrer todas las celdas de la primera columna, se pasa a
cargar la imagen de comparacin del siguiente Instru-token y se vuelve a comenzar
la comparacin desde la primera celda de la columna. Esto contina hasta que se
hayam comparado las cuatro imgenes de plantilla de los Instru-tokens.
2.4. Se realiza la deteccin de los Noti-tokens. El mtodo es anlogo al de la deteccin de
los Instru-tokens, la diferencia es que se utiliza otro conjunto de imgenes de
comparacin, las imgenes de los siete Noti-tokens y el ROI se desplaza a lo largo de las
filas, omitiendo la primera columna. En otras palabras, se recorre solo la seccin donde
puede haber Noti-tokens comparando cada celda con la plantilla de imgenes
almacenada.
Template Matching (Coincidencia de plantillas)
A continuacin se describe cmo funciona la funcin de OpenCV matchTemplate, utilizada en el
prototipo para buscar coincidencias entre una imagen de muestra o plantilla y una imagen de
entrada. Tambin se describe la funcin de OpenCV minMaxLoc utilizada para encontrar el valor
mximo y mnimo (as como sus posiciones) en una matriz dada, en este caso generada como
resultado de la funcin matchTemplate.
109

Template Matching (Coincidencia de plantillas) es una tcnica para encontrar reas de una imagen
que coinciden (son similares) con una imagen de muestra (plantilla).
Se necesitan dos componentes principales:
1. La imagen fuente (I): La imagen en la que se espera encontrar una coincidencia con la
imagen de muestra (plantilla).
2. La imagen de muestra (plantilla) (T): La imagen de muestra que se puede comparar con la
imagen fuente.
El objetivo es la deteccin de la zona de mayor coincidencia:

Figura 49 Izq.: Imagen fuente. Centro: Imagen de muestra (plantilla. Der.: la imagen de muestra el localizada en la
imagen fuente.
Para identificar el rea de coincidente, se debe comparar la imagen de muestra (plantilla) con
imagen fuente, deslizndola:

Figura 50 La imagen de muestra se desliza, pixel a pixel, a travs de la imagen fuente, comparndolas en cada
ocasin.
Deslizar, se refiere a mover la imagen de muestra (plantilla) un pixel a la vez (de izquierda a
derecha, de arriba a abajo). En cada ubicacin, se calcula un indicador que representa que tan
"buena" o "mala" es la coincidencia en ese lugar (o que tan similar es la imagen de muestra
(plantilla) con esa rea en particular de la imagen original).
110

Para cada ubicacin de T sobre I se almacena la mtrica en la matriz de resultados R. Cada
ubicacin (x, y) en R contiene la mtrica de coincidencia:

Figura 51 La matriz resultante formada por los valores arrojados por la comparacin de I y T en cada punto. Los
valores ms claros representan puntos de mayor coincidencia.
La imagen de arriba es el resultado R de deslizar la imagen de muestra (plantilla) con una mtrica
TM_CCORR_NORMED. Los lugares ms brillantes indican las coincidencias ms elevadas. Como se
puede ver, la posicin marcada por el crculo rojo es probablemente una de las de mayor valor,
por lo que su ubicacin (el rectngulo formado por ese punto como una esquina y el ancho y
altura igual a la imagen de muestra (plantilla)) se considera como acierto.
La mtrica de comparacin TM_CCORR_NORMED es calculada, en la funcin matchTemplate,
mediante la siguiente frmula:

Existen otras 5 mtricas de comparacin disponibles en OpenCV, que pueden indicarse por
parmetro de la funcin matchTemplate.
Finalmente, en la prctica, se utiliza la funcin minMaxLoc para localizar el valor ms alto (o bajo,
dependiendo del tipo de mtodo de coincidencia utilizado) en la matriz R.
Una de las limitaciones de este mtodo es que la imagen de muestra (plantilla) debe aparecer
dentro de la imagen fuente en el mismo tamao, y sin ninguna rotacin.
Para una excelente y detallada explicacin terica y prctica de cmo funciona la tcnica de
reconocimiento mediante Template Matching en OpenCV referirse a [121]. En la misma se explica
qu es, cmo funciona y se presenta cdigo de ejemplo.
111

2.4.4. GUI
El sistema cuenta con una interfaz grfica de usuario que permite visualizar el estado del tablero.
Dicha interfaz permite modificar la velocidad con la que se ejecutan los sonidos, as tambin como
iniciar y detener la ejecucin del sistema.

Figura 52 Interfaz grfica de usuario de la aplicacin.
Para el diseo del mismo se tuvo como objetivo principal la simpleza de la interfaz. La misma es
una representacin virtual del tablero, en el cual se indica en tiempo real los tokens que son
detectados por el sistema y un cono en forma de mano en la parte superior indica la columna
cuyos sonidos se reproducen en ese momento. En la parte inferior cuenta con dos controles en
forma de botones, uno controla el inicio y la detencin del sistema y otro, ubicado a la derecha,
permite modificar la velocidad con la que se ejecutarn los sonidos, es decir la frecuencia de
reproduccin.
2.4.5. Descarga del proyecto
El cdigo est disponible online para su descarga de forma gratuita. El mismo se encuentra en
formato de proyecto de Visual Studio 2010 en el servicio de hosting de cdigo de Microsoft
llamado CodePlex bajo la licencia GNU General Public License version 2 (GPLv2) de cdigo
abierto. La direccin web para acceder al mismo es: http://musicatangible.codeplex.com/
2.5. Anlisis de los resultados
Se realizaron varias pruebas informales, en las que ambos programadores fueron los sujetos de
prueba. El sistema se comport adecuadamente en la mayora de los casos, permitiendo crear
simples piezas musicales rpida y fcilmente.
112

Se encontraron algunos problemas de deteccin de tokens en los casos en que los mismos no se
encontraban colocados correctamente sobre el tablero, es decir, no se encontraban justo en el
medio de una celda, se encontraban levemente girados.
La posibilidad de utilizar ambas manos permiti a los usuarios realizar las tareas de forma
eficiente. Adicionalmente, la interfaz result muy til para utilizarla de forma colaborativa, donde
ambos usuarios manipulaban distintos tokens paralelamente. Se observ rpidamente que varias
de las tareas se realizaron de forma mucho ms eficiente y natural en comparacin con el uso de
una interfaz grfica tradicional. Por ejemplo, un usuario poda remover una ficha con la mano
izquierda mientras que con la derecha colocaba otra (multiplexado espacial), algo imposible de
hacer mediante el mouse, con el cual dichas tareas deben realizarse de forma secuencial
(multiplexado temporal).
2.5.1. Desafos encontrados y soluciones
A continuacin se describen los principales desafos encontrados durante la implementacin del
prototipo, y las soluciones utilizadas para superarlos:
Problema:
No deteccin de las figuras debido a una pobre calidad de imagen.
Solucin:
Uso de una cmara de mayor resolucin. Una cmara de 1.3MPixels en lugar de una cmara VGA.

Problema:
Falsos positivos o no deteccin de las figuras.
Solucin:
Ajuste de la iluminacin. Ajuste del valor establecido como xito de una comparacin entre dos
imgenes. Utilizacin de nmeros y letras en las figuras de los tokens, en lugar de simples figuras.

Problema:
Actualizacin del tablero no lo suficientemente rpido.
Solucin:
Uso de hilos de ejecucin.

Problema:
Captura de imgenes no lo suficientemente rpido debido al tiempo que demora en activarse la
cmara para capturar la imagen
113

Solucin:
Uso de un hilo que ejecucin que haga que la cmara capture imgenes constantemente.

Problema:
Imprecisiones en el manejo del tiempo para controlar la frecuencia de ejecucin de los sonidos
Solucin:
Uso de una librera dedicada que permita la ejecucin de un metrnomo a travs de un hilo.

Problema:
Hacer que el programa sea independiente, o transparente, de la tecnologa utilizada para
implementar la interfaz tangible.
Solucin:
Utilizacin de clase abstracta Board con el mtodo Update() definido de forma abstracta para
que lo implemente la clase que se encarga de implementar la interfaz. Esto permitira, en un
futuro, la posibilidad de tener distintas clases que implementen distintos tipos de interfaces para
el programa. Con slo implementar el mtodo Update() el resto del sistema seguir funcionando
sin problema.
2.5.2. Problemas y limitaciones
Uno de los problemas que presenta el prototipo es la sensibilidad de la cmara a la luz. En muchas
ocasiones los resultados se vieron afectados si se variaba el ngulo o intensidad de la luz, pero
mejoraban al iluminar uniformemente el tablero ubicando la fuente de luz sobre el mismo, siendo
sta de buena intensidad. De otra manera el sistema entregaba falsos positivos y no detectaba
ciertas fichas. (y con cmaras infrarrojas?)
Otra limitacin es la necesidad de calibrar la cmara respecto al tablero (en cuanto a distancia y
ngulo) cada vez que se requiere trasladar el sistema de un lugar a otro. Es pertinente recordar
que tal calibracin resulta necesaria para operar el sistema de forma correcta.
Por ltimo, el prototipo descripto no es completamente robusto. Las fichas deben estar
correctamente ubicadas en las celdas del tablero, de lo contrario es posible que no se detecten.
Asimismo, no pueden estar rotadas, ni desplazadas fuera de la celda correspondiente, ya que
podran no detectarse o arrojar falsos positivos. No obstante, en la gran mayora de los casos, el
prototipo opera de forma correcta.

114

3. Segundo Prototipo
Basado en los resultados obtenidos a partir del desarrollo del primer prototipo se propone
desarrollar un prototipo superador. La creacin del mismo tiene como objetivo principal mejorar
la robustez del sistema anterior. Para esto se propone utilizar el paradigma de Token + Constraints,
implementado mediante un tablero con fichas encastrables.
La limitacin principal del prototipo anterior est relacionada con su robustez. Las fichas deben
estar correctamente ubicadas y centradas en las celdas del tablero; de lo contrario, es posible que
no se detecten. Asimismo, no pueden estar rotadas, ni desplazadas fuera del centro de la celda
correspondiente, ya que podran no detectarse o arrojar falsos positivos.
Estas limitaciones puede ser superadas fcilmente mediante la implementacin de un tablero con
fichas encastrables, que aproveche las ventajas brindadas por el paradigma de interfaces tangibles
denominado Tokens + Constraints. Al utilizar un tablero con fichas encastrables, que limite
fsicamente la ubicacin de las tokens, de forma que los mismos slo se puedan ubicar de forma
correcta, se aumenta en gran medida la robustez del sistema.
Adems de forzar al usuario a colocar las fichas de forma correcta, solucionando los problemas de
la colocacin de fichas rotadas, o no centradas dentro de la celda, el tablero encastrable brinda
otra ventaja importante relacionada con la usabilidad. El paradigma de Tokens + Constraints
brinda affordance, en el caso del tablero encastrable, sugiriendo implcitamente al usuario dnde
y cmo puede colocar las fichas para interactuar con el sistema. En otras palabras, la interfaz le
sugiere al usuario cmo interactuar con ella.
Una restriccin de diseo importante, tenida en cuenta para el desarrollo de este segundo
prototipo, fue que el mismo pueda reutilizar el cdigo del primer prototipo. Por lo tanto el nuevo
tablero se desarroll con ciertas restricciones de diseo, de forma de respetar ciertos parmetros
necesarios del primer tablero, como su tamao, la cantidad y tamao de las celdas, y el tamao y
forma de los marcadores utilizados. De esta manera el nuevo tablero podr utilizarse sin
problemas con el sistema de visin por computadora desarrollado para el primer prototipo. Slo
sern necesarias unas pequeas modificaciones.
3.1. Diseo
Inicialmente se hicieron varios dibujos borradores sobre el posible formato del nuevo tablero,
principalmente de la forma que tendran las fichas. Se dibujaron en papel las diferentes formas de
encastre. El objetivo fue disear un tablero con fichas encastrables.
Desde un principio se pens en utilizar formas diferentes para los Instru-tokens y los Noti-
tokens, con la idea de que la forma de cada conjunto de fichas sugiriese dnde podran colocarse.
La idea es evitar fsicamente que el usuario coloque un Instru-token en una posicin donde
corresponda colocar un Noti-token.
115


Figura 53 Diseo de Intru-token encastrable con
mueca cuadrada.

Figura 54 Diseo de Noti-token encastrable con
mueca redondeada-
Para facilitar el retiro de los tokens, una vez colocados en el tablero, se pens en un pequeo
hueco o ranura con forma de medio circulo en la parte superior de cada celda del tablero. Esta
ranura tiene como objetivo facilitar al usuario poder retirar la ficha una vez colocada en el tablero.
Se podra haber utilizado un material ms fino para el tablero y un material ms ancho para las
fichas, de forma que estas ltimas sobresalieran y sean ms fciles de retirar una vez que se
encuentren colocadas en las celdas. Pero esta ida requera de ms material y elevaba los costos ya
que no se podra utilizar el material removido del tablero como fichas.

Figura 55 El usuario introduce el dedo en el hueco sobre el encastre de la ficha para removerla.
La principal restriccin, sin contar que los marcadores utilizados en cada ficha deba ser el mismo
que el utilizado en el sistema anterior, fue que el tamao y la ubicacin de las distintas nuevas
piezas deba respetar el esquema utilizado en el tablero perteneciente al primer prototipo. Por lo
tanto, el tamao del tablero debera ser el mismo, la cantidad de filas y columnas la misma, y el
tamao y posicin de las celdas la misma. De esta manera se podra re utilizar el sistema de visin
por computadora del prototipo anterior aplicando solo unas pequeas modificaciones.
116

3.2. Elementos y herramientas utilizadas
Para disear el tablero se utiliz el editor de grficos vectoriales CorelDRAW, con el cual se gener
un archivo vectorizado del modelo.
El nuevo tablero se implement en dos versiones, una sobre acrlico negro y otra sobre fibro plus
blanco. Ambas implementaciones se fabricaron mediante el uso de una mquina de grabado y
cortado lser. La eleccin de los materiales y el mtodo de fabricacin se explican y justifican en
las sub secciones siguientes.
3.3. La Mquina: grabadora y cortadora lser
El grabado, marcado y corte de superficies, son procesos que industrialmente pueden ser
realizados aprovechando la tecnologa lser de CO2. Los equipos de cortado y grabado lser
pueden ser utilizados sobre casi todo tipo de superficies como metales, maderas, cartones, cueros
y cauchos, y su funcionamiento es similar al de una impresora convencional, con la diferencia que
en vez de realizar una impresin a base de tinta, realizan una diminuta excavacin, marca o
penetracin en el material soporte, a travs de un rayo lser, para reproducir as, fielmente, una
imagen, fotografa o dibujo.
Los mquinas lser ofrecen varias ventajas con respecto a otros mtodos de corte y grabado, una
de ellas es que permiten graficar imgenes de mayor calidad y precisin, dado que el haz de luz
casi invisible puede llegar a puntos donde otras herramientas, debido a su tamao, no lo logran;
de hecho, ofrecen cortes y grabados en dos y tres dimensiones, con un alto nivel de complejidad.
El principio de funcionamiento de estos equipos se concentra, inicialmente, en un rayo lser
intenso de luz invisible que es creado por medio de la excitacin de gas carbnico CO
2
al contacto
con electricidad y que es direccionado por un sistema de espejos hasta que finalmente, a travs de
un lente convexo, se proyecta sobre el material.

Figura 56 Mquina de grabado y cortado lser.

Figura 57 La mquina con la compuerta abierta. Aqu
se coloca la plancha de material que ser grabada y
cortada por el lser.

117

Al igual que una impresora, los equipos lser dependen de un software que se instala en la
computadora y se encarga de establecer comunicacin entre la mquina y su sistema operativo. La
funcin principal del controlador es informar al equipo ciertas caractersticas o variables de
impresin como por ejemplo, el tipo de trabajo que se va a realizar, es decir, si es corte, grabado o
la combinacin de ambos.
El software de impresin es un sistema en el que se puede seleccionar desde el tamao del
grabado, hasta la calidad de impresin; de hecho, a travs de este programa el usuario interacta
realmente con la mquina, pues funciona como un panel desde el cual se regulan las velocidades
de grabado, de corte y las potencias, entre otras variables. La velocidad y potencia de control
puede ser igualmente regulada de forma manual o po computadora en rangos que pueden
aumentar de 1 hasta un 100 por ciento; adems, ofrece una excelente resolucin de grabado que
va desde los 100 a 1000 dpi (dots por pulgada).
El equipo utilizado es un Versa Laser VLS3.60 de 50 watts fabricado por Universal Laser System
[122]. El mismo tiene un rea de trabajo de 610 x 305 mm sobre la que se puede trabajar
materiales de hasta 30,5 mm de grosor. Alcanza una velocidad de trabajo media, por lo que es
recomendable para trabajos en pequeas empresas en las que no se necesitan productos a gran
escala y/o con un alto grado de complejidad. Permite adems realizar trabajos a partir de
cualquier software de diseo basado en Windows, lo que incluye AutoCAD, Illustrator y
CorelDRAW. Con los mismos se genera un modelo del trabajo en un archivo vectorizado que luego
se importa por el software que controla la mquina.

Figura 58 Se puede observar a Julio Bellabarba configurando, mediante el software en la PC, los parmetros de la
mquina lser. (Volvi del futuro :o) )
Para mayor informacin sombre mquinas de grabado y cortado lser referirse a [123].
118

3.3.1. El Material: Acrlico Negro Fibro Plus Blanco
Una vez seleccionado el procedimiento de grabado y cortado lser como mtodo de fabricacin,
se eligi el material a utilizar para el tablero. Se analizaron diversos materiales, como madera,
fibrofcil, acrlico transparente, acrlico negro y plstico.
El acrlico transparente permite un acabado elegante, pero hay que pegarle a cada ficha su
marcador impreso en papel. El plstico tiene esta misma limitacin, pero adicionalmente, este
material se deforma levemente por el calor generado por el lser de la mquina, lo que impide
que las fichas encastren prolijamente.
El Fibro Plus blanco presenta varias ventajas respecto al resto de los materiales analizados. El
mismo consiste en una plancha de madera prensada, con una de sus caras laminada en color
blanco. El mismo es muy econmico, comparado con el plstico y el acrlico. Adems, se puede
conseguir fcilmente en cualquier maderera. Este material permite un acabado prolijo y preciso al
utilizar la mquina de grabado lser. Otra ventaja muy importante, es el alto grado de contraste
que se puede lograr con este material al utilizar el modo de grabado de la mquina lser. Este
contraste se genera entre el blanco de la lmina blanca y el gris oscuro de la madera quemada por
el lser en las zonas donde se aplica el mtodo de grabado.
Una propiedad fundamental del Fibro Plus, descubierta ms adelante en el trabajo, es su
opacidad. Dicha cualidad aporta robustez al proceso de reconocimiento de marcadores. Esto se
debe a que brinda robustez respecto a los cambios de iluminacin, sobre todo a los cambios del
ngulo de iluminacin, consecuencia de ser un material extremadamente opaco (producto de
presentar una superficie irregular), sobre todo en las regiones que quedan grabadas por la
mquina lser, en las cuales se expone la madera prensada. La ventaja es que casi no se genera un
reflejo especular [124] sobre el material, algo que s sucede en otros materiales brillantes como el
acrlico. Este reflejo especular hace que la imagen capturada por la cmara sea diferente segn el
ngulo de iluminacin (ms formalmente entre formado entre la fuente de iluminacin y la
cmara), haciendo que la comparacin con la imagen de muestra almacenada nunca sea igual. En
cambio, el Fibro Fcil, al ser tan opaco, es invariante al ngulo de iluminacin, facilitando la
comparacin con la imagen patrn almacenada.
Al utilizar la mquina lser en modo de grabado, este material grabado se torna gris oscuro (color
de la madera quemada); por lo tanto, se pens en utilizar este mtodo para dibujar los
marcadores sobre las fichas de forma precisa y elegante, es decir utilizando el contraste entre el
blanco del material y el gris oscuro del rea grabada.
Finalmente, vistas las ventajas de este material y teniendo en cuenta el objetivo de desarrollar un
prototipo econmico y con materiales de fcil acceso, se adquiri una lmina de Fibro Fcil Plus
Blanco de 30 cm x 60 cm de 3 mm espesor, tamao requerido por la plataforma de la mquina de
grabado y cortado lser utilizada. El precio de la plancha fue de 7 pesos argentinos.
Adicionalmente, se decidi realizar una prueba utilizando acrlico negro para la fabricacin del
tablero. El mismo presenta algunas ventajas sobre el resto de los materiales analizados. El acrlico
119

negro permite darle un acabado muy elegante a las fichas y al tablero. Al utilizar la mquina lser
en modo de grabado, este material grabado se vuelve gris claro. Por eso se pens en utilizar este
mtodo para dibujar los marcadores sobre las fichas de forma precisa y elegante. Finalmente,
vistas las ventajas de este material, se adquiri una lmina de acrlico negro de 30 cm x 60 cm de
3,4 mm. El precio de la plancha fue de alrededor de 100 pesos argentinos.
Ms adelante se descubrira que el acrlico negro presenta una limitacin importante, adems de
un precio elevado. La misma propiedad brillosa que permite un acabado elegante, genera un alto
grado de reflexin especular, volvindolo un material poco adecuado para esta aplicacin.
3.4. Implementacin del tablero
A partir del diseo realizado en papel, se prosigui a formalizarlo mediante la generacin de un
archivo vectorizado del modelo mediante la aplicacin grfica CorelDRAW.
Para aprovechar al mximo el material, se generaron las fichas de los Noti-tokens a partir de los
pedazos extrados del mismo tablero. Lo mismo se hizo para fabricar los Instru-tokens, pero
utilizando el material extrado de la primera columna, ya que la forma del encastre de los Instru-
tokens es diferente a la de los Noti-tokens. Por lo tanto se fabricaron seis Noti-token de cada
tipo y seis Intru-tokens, dos con el nmero 3, dos con el nmero 1, uno con el nmero 4 y uno
con el nmero 2.

Figura 59 Modelo vectorizado del tablero diseado en CorelDRAW. El mismo fue utilizado por la mquina lser para
producir el tablero. Las lneas de color rojo indican que la mquina realizar cortes. Las lneas de color azul la mquina
120

grabar ligeramente. Lo que est pintado de negro ser grabado de manera un poco profunda, por lo que quedar
pintado de un color distinto al del material utilizado.
Una vez finalizada la creacin del modelo vectorizado se prosigui a importarlo al software
controlador de la mquina de cortado y grabado lser.
Luego de importar el modelo, se pas a hacer una pequea prueba de impresin sobre madera,
material mucho ms econmico que el acrlico y el Fibro Plus. Esto se hizo para ver que la mquina
realice el trabajo de forma correcta, antes de proseguir con la generacin completa del tablero.

Figura 60 La plancha de madera colocada en la
mquina.

Figura 61 Resultado de las pruebas de grabado y corte
de fichas sobre madera.
Una vez comprobado que la impresin sobre madera fue correcta, se prosigui a imprimir el
tablero en la plancha de acrlico negro y luego en la plancha de Fibro Fcil blanco.
3.4.1. Tableros y fichas fabricados
A continuacin se muestra el tablero y las fichas producidas sobre los dos materiales.
Tableros
Se presentan los dos tableros. El primero en Fibro Plus blanco y el segundo en acrlico negro.

Figura 62 Tablero producido en Fibro Plus blanco.


Figura 63 Tablero producido en acrlico negro. Se puede
observar el reflejo especular en las celdas de ms abajo.


121

Fichas
A continuacin se exhiben los tokens del sistema fabricados en los dos materiales. Se puede
observar la opacidad de las fichas producidas en Fibro Plus blanco, en contraste con el brillo que
generan las fichas de acrlico.

Figura 64 Los cuatro Instru-tokens producidos en acrlico negro. Se puede observar el reflejo especular.

Figura 65 - Los cuatro Instru-tokens producidos en Fibro Plus blanco.


Figura 66 Los siete Noti-tokens fabricados en acrlico negro.

Figura 67 Los siete Noti-tokens fabricados en Fibro Plus blanco.

Fichas colocadas en el tablero
Aqu se muestran dos posibles configuraciones del tablero y las fichas. Los respectivos Instru-
tokens colocados en la primer columna, y luego los Noti-tokens posicionados en las respectivas
filas. Se puede observar que el encastre, distinto entre los Noti-tokens y los Instru-tokens
fuerza al usuario a colocar los distintos tipos de fichas en los lugares correctos. Adicionalmente, se
puede observar un fuerte reflejo en la parte inferior del tablero fabricado con acrlico negro. Ms
adelante se ver que este reflejo complica el proceso de reconocimiento de los marcadores,
concluyendo que los materiales opacos ofrecen mayor robustez respecto a los cambios de
iluminacin.
122


Figura 68 Tokens colocados en el tablero de Fibro Plus blanco. Se puede apreciar la opacidad de todos sus elementos

Figura 69 Tokens colocados en el tablero de acrlico negro. Se puede observar un fuerte reflejo especular en el
centro del mismo.
123

3.5. Calibracin del software
Una vez finalizado el nuevo tablero, se re configur el cdigo del prototipo anterior para que el
sub-sistema de visin por computadora opere correctamente. Dicha proceso consisti en dos
tareas relacionadas a la clase BoardFromCam. Las mismas se explican a continuacin.
La primera tarea fue capturar las imgenes patrn de cada una de los nuevos Noti-tokens e
Instru-tokens creados, cortarlas de forma correcta, e importarlas al sistema para poder
utilizarlas como imgenes de comparacin.
La segunda tarea consisti en ajustar el tamao del corte de la imagen del tablero tomada por la
cmara, de forma que se ajuste correctamente a los lmites del nuevo tablero, eliminando el resto
de lo que aparece en la foto. Dicha modificacin se realiza en el mtodo captureImage(). Luego se
re ajust ligeramente el tamao del paso y el tamao de las celdas, de forma que el mtodo
recorra de forma correcta cada una de las celdas del tablero de la imagen capturada, es decir que
el ROI caiga de forma justa y centrada en cada una de las celdas del tablero, para permitir una
comparacin correcta de ese rea con las imgenes patrones de comparacin. Dicha modificacin
se realiz en el mtodo detectNotes() y en el mtodo detectInstruments().
3.6. Anlisis de los resultados
Se realizaron varias pruebas informales sobre este segundo prototipo, donde el autor fue el sujeto
de prueba.
Basado en los resultados obtenidos, se pudo comprobar que se mejor notablemente la robustez
del sistema con respecto a la deteccin de los marcadores, en comparacin con el primer
prototipo. Esto se debi al uso del paradigma de Token + Constraints, el cual se implement
mediante el tablero con fichas encastrables. Esta implementacin permiti que las fichas fueran
colocadas en el lugar correcto, evitando que se posicionaran de forma rotada, o des centrada. En
otras palabras, slo existe una forma posible de colocar las fichas, la correcta.
El paradigma Token + Constraints simplific en gran medida el cdigo del sistema relacionado a la
deteccin de los marcadores. Esto se debi a que elimin muchos casos posibles que deban ser
contemplados en el proceso de reconocimiento de los tokens, como tokens rotados en infinitos
ngulos o tokens desplazados del centro de la celda. Todos estos casos se evitaron, ya que el
posicionado correcto de los tokens est guiado y limitado fsicamente, por los encastres del
tablero.
Adems de asistir al usuario a colocar las fichas de forma correcta, solucionando los problemas de
la colocacin de fichas rotadas o no centradas dentro de la celda, el tablero encastrable brinda
otra ventaja importante relacionada con la usabilidad. El paradigma de Tokens + Constraints
brinda affordance, en el caso del tablero encastrable, sugiriendo implcitamente al usuario dnde
y cmo puede colocar las fichas para interactuar con el sistema. En otras palabras, la interfaz le
sugiere al usuario cmo interactuar con la misma.
124

Adicionalmente se mejor la esttica del sistema emulando, con los tokens encastrables, piezas o
fichas de juegos de mesa, como rompecabezas, de forma que los usuarios puedan utilizar sus
conocimientos previos, adquiridos con los mismos, para interactuar eficazmente con el sistema.
Uno de los problemas que sigue presentando el prototipo es la sensibilidad de la cmara a la luz.
En muchas ocasiones los resultados del reconocimiento de los marcadores se vieron afectados si
se variaba el ngulo o intensidad de la fuente de luz, pero mejoraban al iluminar uniformemente el
tablero ubicando la fuente de luz sobre el mismo, siendo sta de buena intensidad. Se comprob
que los materiales opacos, que no generan reflexin especular, como el Fibro Plus, son ms
adecuados para la fabricacin de las fichas y los marcadores, ya que sus reflejos son ms
invariantes respecto a la variacin de la intensidad y del ngulo de iluminacin. En cambio, los
materiales brillosos, que generan reflexin especular, como el acrlico negro, no son adecuados
para utilizar para la fabricacin de los marcadores, ya que la imagen capturada de los mismos vara
debido al reflejo ocasionado por las distintas variaciones de iluminacin, complicando la
comparacin con una nica imagen patrn de comparacin.
Una limitacin, que sigue existiendo, es la necesidad de calibrar la cmara respecto al tablero (en
cuanto a distancia y ngulo) cada vez que se requiere trasladar el sistema de un lugar a otro. Es
pertinente recordar que tal calibracin resulta necesaria para operar el sistema de forma correcta.
Finalmente, se observ que el sistema se comport mejor que el primer prototipo en la totalidad
de los casos, por lo que se puede concluir que este segundo prototipo es ampliamente mejor que
primero.

125







PARTE IV - CONCLUSIONES

"La conclusin final es que sabemos muy poco y, sin embargo, es asombroso lo mucho que
conocemos. Y ms asombroso todava que un conocimiento tan pequeo nos pueda dar tanto
poder" - Bertrand Russell




1. Resumen . 125
2. Limitaciones, problemas y cuestiones pendientes ... 125
3. Trabajo futuro . 125




126

1. Resumen
Se dise e implement una interfaz tangible de bajo costo para la creacin de msica; dicho
desarrollo se bas en el estudio previo de las interfaces tangibles, la interaccin humano-
computadora y los antecedentes relacionados a la composicin de msica utilizando estos medios.
El sistema se implement mediante tecnologa de visin por computadora con herramientas y
elementos de fcil acceso. La interfaz permiti la creacin de msica de forma intuitiva,
incremental y colaborativa, con una curva de aprendizaje empinada.
El sistema desarrollado es un secuenciador musical tangible de mesa. El mismo identifica, en
tiempo real, mediante visin por computadora, patrones preestablecidos impresos en fichas que
son colocadas sobre un tablero, para luego asociarlos a notas musicales o instrumentos,
dependiendo del caso y permitiendo de esta forma generar msica. Se desarrollaron dos
prototipos de dicho sistema. El segundo prototipo presenta, adicionalmente, un tablero con fichas
encastrables, el cual brinda importantes ventajas.
2. Limitaciones, problemas y cuestiones pendientes
Varias de las limitaciones del primer prototipo fueron superadas con la implementacin del
tablero encastrable perteneciente al segundo prototipo, sobre todo los problemas relacionados
con la robustez del reconocimiento de imgenes.
Sin embargo, las limitaciones ms importantes del segundo prototipo siguen estando asociadas
con la robustez y eficiencia del mismo en lo que respecta al reconocimiento de las fichas.
Uno de los principales problemas est relacionado con la ubicacin de la cmara. Al tener la
cmara posicionada sobre el tablero, cuando el usuario mueve su brazo sobre el mismo para
colocar una ficha en alguna celda, bloquea la cmara por unos segundos, es decir introduce ruido,
ya que el sistema capturar la imagen del brazo e intentar analizarlo, arrojando resultados
errneos.
Uno de los problemas que sigue presentando el prototipo es la sensibilidad de la cmara a la luz.
En muchas ocasiones los resultados del reconocimiento de los marcadores se vieron afectados si
se variaba el ngulo o intensidad de la fuente de luz, pero mejoraban al iluminar uniformemente el
tablero ubicando la fuente de luz sobre el mismo, siendo sta de buena intensidad.
Otra cuestin pendiente est relacionada con el cdigo del sistema. El cdigo del prototipo no fue
optimizado an, por lo que se debe realizar un anlisis del mismo para lograr un funcionamiento
ms eficiente del mtodo de reconocimiento de imgenes y del sistema en su conjunto.
Por ltimo, una limitacin importante asociada con la usabilidad y robustez del prototipo est
relacionada con la calibracin de la cmara. La misma debe colocarse correctamente sobre el
tablero, a una altura, ngulo y distancia correctos, de forma tal que el tablero quede centrado de
modo tal que el software funcione correctamente. Esta operacin debe realizarse de forma
artesanal cada vez que se arma o mueve el tablero, volvindose algo tedioso. Si el sistema queda
mal calibrado el mismo operar de forma incorrecta.
127

3. Trabajo futuro
3.1. Mejoras
Basado en los resultados obtenidos, y a partir del desarrollo de los prototipos y las pruebas
informales realizadas sobre los mismos, se propone un conjunto de mejoras apuntadas a superar
las principales limitaciones.
Para mejorar la eficiencia y robustez relacionadas al reconocimiento de imgenes, se podra
estudiar el campo de los marcadores de referencia con el objetivo de desarrollar y utilizar diseos
ms robustos y eficientes (Ver [125]). Esto se podra encarar utilizando alguna librera especifica,
como por ejemplo la librera para realidad aumentada ARToolkit [126], o algn sistema de
reconocimiento de marcadores, como cdigos QR, fiducial markers o glyphs recognition. Los
mismos pueden aportar una solucin ms eficiente y robusta, incrementando la usabilidad del
prototipo
Para solucionar el problema de reconocimiento de los marcadores relacionado con la variacin
del ngulo e intensidad de la iluminacin, se propone montar una lmpara sobre el soporte de la
cmara. El objetivo de esta propuesta es que la iluminacin sobre el tablero y las fichas sea
siempre la misma, independientemente de la iluminacin del ambiente donde se encuentre la
interfaz. De esta forma se podra aumentar la robustez del prototipo.
Otra mejora relacionada con la usabilidad del juego es la incorporacin de un mecanismo para
calibrar la cmara de forma fcil y eficiente. Esto se podra lograr mediante software, ubicando
cuatro fichas especiales en las cuatro esquinas del tablero de modo que, al capturar la imagen del
mismo, al reconocer tales fichas, la cmara estara correctamente ubicada y la iluminacin sera la
apropiada. Adicionalmente, se podra realizar un segundo paso en la calibracin, el cual consistira
en colocar en el tablero los cuatro Intru-tokens de una forma pre establecida (por ejemplo, de
forma creciente), y los siete Noti-token tambin de una forma pre establecida (por ejemplo de
forma creciente en la primer fila). Una vez hecha la calibracin descripta anteriormente, el sistema
podra tomar y almacenar las imgenes sabiendo cul corresponde a cada token, de forma de
utilizar las mismas como imgenes patrn para las comparaciones posteriores. Esta segunda
calibracin podra reducir los problemas producidos por las variaciones de iluminacin, ya que las
imgenes patrones de los tokens seran tomadas con la iluminacin que utilizar posteriormente el
sistema durante su ejecucin.
Una vez comprobado que el prototipo se comport de forma correcta, se propone una mejora
importante para evitar los problemas causados por la interferencia generada en las imgenes
capturadas por la cmara, producto del brazo del usuario. Esto sucede cuando el mismo coloca
alguna ficha en el tablero. Lo que se propone es colocar el tablero sobre una mesa o superficie de
acrlico transparente o vidrio, que permita posicionar la cmara debajo de la misma, permitiendo
tomar las imgenes sin interferencias. A su vez, los tokens tendrn dos marcadores distintos, uno
en cada cara. En una cara del token se colocar el marcador optimizado para el reconocimiento
mediante visin por computadora y en la otra cara del mismo, se colocar una figura que sea fcil
128

de reconocer y asociar para el usuario humano. De esta manera se mejora la robustez del sistema,
ya que no habr interferencias en las imgenes; tambin se mejorar la eficiencia, ya que el
marcador utilizado se desdobla en las dos caras del token, uno optimizado para la computadora y
otro optimizado para el usuario humano. Adicionalmente se mejorar la esttica del sistema ya
que el usuario slo ver un tablero tradicional. (Ver Figura 70)
3.2. Extensiones
Luego de implementadas las mejoras, se podra pensar en extender el sistema de alguna de las
maneras descritas a continuacin.
Una extensin importante podra ser la utilizacin de un proyector colocado sobre el tablero, que
permita realimentar informacin sobre el mismo, es decir, afectar de cierta manera el mundo
fsico, pintando con un dado color la columna del tablero que se est reproduciendo actualmente.
Adicionalmente, se podra pintar de algn otro color los tokens que son identificados
correctamente por el sistema, de forma tal que los usuarios cuenten con informacin visual
instantnea que les permita reconocer si el software detect correctamente la ficha colocada.
Otra alternativa podra ser la utilizacin de acrlico transparente como material para el tablero y
los tokens y colocar el proyector debajo del tablero. Esto evitara que el usuario interfiriera en la
proyeccin cuando coloca el brazo sobre el tablero para colocar alguna ficha.

Figura 70 Sistema tangible con cmara debajo del tablero y realimentacin de informacin a travs de un proyector.
Otra extensin que se podra implementar es el manejo de ciertos parmetros del sistema, que
an se manejan de forma grfica por la interfaz tangible. Esto es, manejar los controles de Play y
Stop, el volumen y la frecuencia de reproduccin mediante objetos tangibles. Tales funciones se
podran implementar mediante ranuras que permitan deslizar cierto token por las mismas. El
control de volumen tangible podra ser una ranura vertical, ubicada a la derecha del tablero, que
permita aumentar el volumen deslizando un token especial hacia arriba, y reducir el volumen
deslizando el token hacia abajo. Algo similar se podra implementar para controlar de forma
conjunta la frecuencia de reproduccin y las funciones de Play/Stop. Se podra colocar una ranura
horizontal en la parte inferior del tablero, que permita deslizar un token especial sobre la misma.
129

Cuando el token se encuentre en la posicin ms a la izquierda de la ranura, el sistema estar
detenido; a medida que se deslice el token hacia la derecha el sistema aumentar la frecuencia de
reproduccin de los sonidos.
Adicionalmente se podran utilizar distintos tipos de fichas con, por ejemplo, diferentes colores,
materiales y formas. Esto ltimo permitira estimular el sentido del tacto, lo que sera una
extensin ideal para personas no videntes. Se podra asociar la textura o forma de la ficha con un
sonido particular.
Finalmente, el sistema podra contar con una librera de sonidos pre establecidos, o permitir la
importacin de los mismos para que luego el usuario los pueda asociar a un token en particular
mediante el uso de la interfaz grfica.
3.3. Pruebas de usabilidad
Una cuestin pendiente, muy importante y que excede el alcance de este trabajo, es la realizacin
de un anlisis formal de usabilidad del prototipo. Dicho anlisis se deber basar en pruebas
formales de usabilidad con el fin de contar con mtricas objetivas que permitan comparar el
prototipo desarrollado con un anlogo que utilice una interfaz grfica tradicional.

130







PARTE V - ELEMENTOS FINALES




Bibliografa .. 130
Anexo .... 139
Cdigo .. 139






131

Bibliografa
[1] J. Bowers, Improvising Machines: Ethnographically Informed Design For Improvised
Electro-Acoustic Music, ARiADA: Applied Research in Aesthetics in the Digital Arts, 2003.
[Online]. Available: http://www.ariada.uea.ac.uk/ariadatexts/ariada4/index4.html.
[2] J. Patten, B. Recht, and H. Ishii, Audiopad: A tag-based interface for musical performance,
in Proceedings of the International Conference on New Interface for Musical Expression
NIME02, 2002, pp. 24-26.
[3] H. Newton-Dunn, H. Nakano, and J. Gibson, Blockjam: A tangible interface for interactive
music, in Proceedings of the 2003 Conference on New Interfaces for Musical Expression
(NIME-03), 2003, pp. 170-177.
[4] S. Jord, M. Kaltenbrunner, and R. Bencina, The ReacTable*, in ICMC 2005 - CDROM
Proceedings, 2005.
[5] S. Jord, On stage: The reactable and other musical tangibles go real, International
Journal of Arts and Technology (IJART), Special Issue on Tangible and Embedded Interaction,
vol. 1, no. 3/4, pp. 268-287, 2008.
[6] O. Shaer and E. Hornecker, Tangible User Interfaces: Past, Present, and Future Directions,
Foundations and Trends in HumanComputer Interaction, vol. 3, no. 1-2, pp. 1-137, 2009.
[7] C. Sabino, Como hacer una Tesis, 1994. [Online]. Available:
http://paginas.ufm.edu/sabino/word/hacer_tesis.doc.
[8] R. Chandrasekhar, How to Write a Thesis: A Working Guide, 2002. [Online]. Available:
http://www.mendeley.com/research/write-thesis-working-guide-1/.
[9] H. Ishii and B. Ullmer, Tangible Bits: Towards Seamless Interfaces between People, Bits
and Atoms, in CHI 97: Proceedings of the SIGCHI conference on Human factors in
computing systems, 1997, no. March, pp. 234-241.
[10] Hewett et al., ACM SIGCHI Curricula for Human-Computer Interaction: 2. Definition and
Overview of Human-Computer Interaction, 2009. [Online]. Available:
http://old.sigchi.org/cdg/cdg2.html.
[11] Newell, Perlis, and Simon, What is computer science?, Science, no. 157, pp. 373-4, 1967.
[12] Denning, Report on the ACM Task Force on the Core of Computer Science, New York,
1988.
[13] F. Hillier, Introduction to Operations Research. Mcgraw Hill Higher Education, 2009, p. 1088.
[14] J. Rasmussen, A. M. Pejtersen, and L. P. Goodstein, Cognitive Systems Engineering. Wiley-
Interscience, 1994, p. 396.
132

[15] Participatory Design, Human Computer Interaction group at Aarhus University, Department
of Computer Science. [Online]. Available: http://www.daimi.au.dk/research/areas/human-
computer-interaction/participatory-design/index.html.
[16] C. Hewitt and P. de de Jong, Open Systems, MIT Artificial Inteligence Memo, vol. 691, pp.
1-27, 1982.
[17] J. Carroll, Human Computer Interaction (HCI), in Encyclopedia of Human-Computer
Interaction, M. Soegaard and R. F. Dam, Eds. The Interaction-Design.org Foundation, 2009.
[18] P. Wellner, W. Mackay, and R. Gold, Computer-augmented environments. Back to the real
world, Communications of the ACM, vol. 36, no. 7, pp. 24-26, 1993.
[19] G. W. Fitzmaurice, H. Ishii, and W. Buxton, Bricks: Laying the foundations for graspable
user interfaces, in Proceedings of CHI95, 1995, pp. 442449.
[20] W. E. Mackay and A. L. Fayard, Designing interactive paper: Lessons from three
augmented reality projects, in Proceedings of IWAR98, International Workshop on
Augmented Reality, 1999.
[21] J. Underkoffler and H. Ishii, Urp: A luminous-tangible workbench for urban planning and
design, in Proceedings of CHI 99, 1999, pp. 386393.
[22] R. Perlman, Using Computer Technology to Provide a Creative Learning Environment for
Preschool Children, MIT Logo Memo 24, 1976.
[23] The MIT Media Lab, Logo Foundation, What is Logo? [Online]. Available:
http://el.media.mit.edu/logo-foundation/logo/index.html. [Accessed: 2012].
[24] R. Abrams, Adventures in tangible computing: The work of interaction designer Durrell
Bishop in context, Masters thesis, Royal College of Art, London, 1999.
[25] A. N. Antle, The CTI framework: Informing the design of tangible systems for children, in
Proceedings of TEI 07, 2007, pp. 195-202.
[26] S. Goldin-Meadow, Hearing Gesture: How Our Hands Help Us Think. Harvard University
Press, 2003.
[27] G. Zufferey, P. Jermann, A. Lucchi, and P. Dillenbourg, TinkerSheets: Using paper forms to
control and visualize tangible simulations, in Proceedings of TEI09, 2009, pp. 377-384.
[28] J. Underkoffler and H. Ishii, Illuminating light: An optical design tool with a luminous-
tangible interface, in Proceedings of CHI98, 1998, pp. 542549.
[29] O. Zuckerman, S. Arida, and M. Resnick, Extending tangible interfaces for education:
Digital montessori-inspired manipulatives, in Proceedings of CHI 05, 2005, pp. 859868.
133

[30] M. Resnick, Behavior construction kits, Communications of the ACM, vol. 36, no. 7, pp.
64-71, 1993.
[31] C. OMalley and D. Stanton Fraser, Literature review in learning with tangible
technologies, in NESTA futurelab report 12, 2004.
[32] D. Kirsh and P. Maglio, On distinguishing epistemic from pragmatic actions, Cognitive
Science, vol. 18, no. 4, pp. 513-549, 1994.
[33] B. Ullmer, H. Ishii, and R. Jacob, Token+constraint systems for tangible interaction with
digital information, ACM Transactions on Computer-Human Interaction, vol. 12, no. 1, pp.
81-118, 2005.
[34] M. J. Kim and M. L. Maher, The impact of tangible user interfaces on designers spatial
cognition, Human-Computer Interaction, vol. 23, no. 2, 2008.
[35] R. J. K. Jacob, H. Ishii, G. Pangaro, and J. Patten, A tangible interface for organizing
information using a grid, in Proceedings of CHI 02, 2002, pp. 339346.
[36] J. Underkoffler and H. Ishii, Illuminating light: An optical design tool with a luminous-
tangible interface, in Proceedings of CHI98, 1998, pp. 542549.
[37] G. Zufferey, P. Jermann, A. Lucchi, and P. Dillenbourg, TinkerSheets: Using paper forms to
control and visualize tangible simulations, in Proceedings of TEI09, 2009, pp. 377384.
[38] K. Hinckley, J. G. R. Pausch, and N. Kassel, Passive real-world interface props for
neurosurgical visualization, in Proceedings of CHI94, 1994, pp. 452458.
[39] N. Couture, G. Riviere, and P. Reuter, GeoTUI: A tangible user interface for geoscience, in
Proceedings of TEI08, 2008, pp. 8996.
[40] H. Suzuki and H. Kato, AlgoBlock: A tangible programming language, a tool for
collaborative learning, in Proceedings of the 4th European Logo conference (Eurologo93),
1993, pp. 297303.
[41] T. S. McNerney, From turtles to tangible programming bricks: Explorations in physical
language design, Pers Ubiquit Comput, vol. 8, pp. 326337, 2004.
[42] D. Edge and A. Blackwell, Correlates of the cognitive dimensions for tangible user
interfaces, Journal of Visual Languages and Computing, vol. 17, no. 4, pp. 366394, 2006.
[43] J. Sosoka, B. Abercrombie, B. Emerson, and A. Gerstein, EDUCATIONAL MUSIC
INSTRUMENT FOR CHILDREN, U.S. Patent US 6,353,168 B1,2002.
[44] A. Dekel, G. Yavne, E. Ben-Tov, and Y. Roschak, The spelling bee, in Proceedings of the
international conference on Advances in computer entertainment technology - ACE 07,
2007, p. 212.
134

[45] H. Raffle, C. Vaucelle, R. Wang, and H. Ishii, Jabberstamp, in Proceedings of the 6th
international conference on Interaction design and children - IDC 07, 2007, p. 137.
[46] Z. Zhou, A. D. Cheok, J. Pan, and Y. Li, Magic Story Cube, in Proceedings of the 2004 ACM
SIGCHI International Conference on Advances in computer entertainment technology - ACE
04, 2004, pp. 364-365.
[47] E. van Loenen et al., EnterTaible: A solution for social gaming experiences, in Tangible
Play: Research and Design for Tangible and Tabletop Games, Workshop at the 2007
Intelligent User Interfaces Conference, 2007, pp. 16-19.
[48] C. Magerkurth, M. Memisoglu, T. Engelke, and N. A. Streitz, Towards the next generation
of tabletop gaming experiences, in Graphics Interface 2004 (GI04), 2004, pp. 7380.
[49] J. Leitner, M. Haller, K. Yun, W. Woo, M. Sugimoto, and M. Inami, IncreTable, a mixed
reality tabletop game experience, in Proceedings of the 2008 International Conference on
Advances in Computer Entertainment Technology, 2008, pp. 916.
[50] A. Singer, D. Hindus, L. Stifelman, and S. White, Tangible progress: Less is more in
somewire audio spaces, in Proceedings of CHI 99, 1999, pp. 104-111.
[51] S. Greenberg and H. Kuzuoka, Using digital but physical surrogates to mediate awareness,
communication and privacy in media spaces, Personal Tech-nologies, vol. 4, no. 1, 200AD.
[52] J. J. Kalanithi and V. M. Bove, Connectibles: Tangible social networks, in Proceedings of
TEI08, 2008, pp. 199-206.
[53] D. Edge and A. Blackwell, Peripheral tangible interaction by analytic design, in
Proceedings of TEI09, 2009, pp. 68-76.
[54] R. Strong and B. Gaver, Feather, scent and shaker: Supporting simple intimacy, in
Proceedings of CSCW 1996, 1996, pp. 29-30.
[55] A. Chang, B. Resner, B. Koerner, X. Wang, and H. Ishii, LumiTouch: An emotional
communication device, in Proceedings of CHI01 Extended Abstracts, 2001, pp. 313314.
[56] G. Weinberg and S. Gan, The squeezables: Toward an expressive and interdependent
multi-player musical instrument, Computer Music Journal, vol. 25, no. 2, pp. 37-45, 2001.
[57] Furukawa, Fujihata, and Muench, Small fish, 2000. [Online]. Available:
http://hosting.zkm.de/wmuench/small_fish.
[58] M. Kaltenbrunner, Tangible Musical Interfaces, Web site, 2012. [Online]. Available:
http://modin.yuri.at/tangibles/.
135

[59] S. Jord, G. Geiger, M. Alonso, and M. Kaltenbrunner, The reacTable: Exploring the synergy
between live music performance and tabletop tangible interfaces, in in Proceedings of TEI
07, 2007, pp. 139146.
[60] NIME: International Conference on New Interfaces for Musical Expression. [Online].
Available: http://www.nime.org/.
[61] B. S. and J. Vanderdonckt, AudioCubes: A distributed cube tangible interface based on
interaction range for sound design, in Proceedings of TEI 08, 2008, pp. 3-10.
[62] E. W. Pedersen and K. Hornbk, mixiTUI: A tangible sequencer for electronic live
performances, in Proceedings of TEI 09, 2009, pp. 223230.
[63] F. Price, Laugh & Learn
TM
Fun With Friends
TM
Musical Table, Fisher Price Toys website,
2012. [Online]. Available: http://www.fisher-
price.com/fp.aspx?st=2341&e=detail&pcat=bulnl&pid=45350.
[64] T. Bartindale, J. Hook, and P. Olivier, Media Crate: Tangible Live Media Production
Interface, in Proceedings of TEI09, 2009, pp. 255-262.
[65] M. Kaltenbrunner and R. Bencina, reacTIVision: A computer-vision framework for table-
based tangible interaction, in Proceedings of TEI 07, 2007, pp. 69-74.
[66] P. Bennett, The BeatBearing: a tangible rhythm sequencer, in Proceedings of NordiCHI,
2008.
[67] Arduino, Official Web site, 2012. [Online]. Available: http://www.arduino.cc/. [Accessed:
2012].
[68] H. Hannes and M. Andrew, The Bubblegum Sequencer, in CHI 2008 Extended Abstract
Format, 2008.
[69] G. W. Fitzmaurice, Graspable User Interfaces, Thesis for Degree of Doctor of Philosophy,
Graduate Department of Computer Science,University of Toronto, 1996. [Online]. Available:
http://www.dgp.toronto.edu/~gf/papers/PhD - Graspable UIs/Thesis.gf.html.
[70] G. W. Fitzmaurice and W. Buxton, An empirical evaluation of graspable user interfaces:
Towards specialized, space-multiplexed input, in Proceedings of CHI97, 1997, pp. 4350.
[71] B. Ullmer and H. Ishii, Emerging frameworks for tangible user interfaces, in Human-
Computer Interaction in the New Millenium, 2001, pp. 579601.
[72] K. Fishkin, A taxonomy for and analysis of tangible interfaces, Personal and Ubiquitous
Computing, vol. 8, pp. 347358, 2004.
136

[73] B. Ullmer, H. Ishii, and R. Jacob, Token+constraint systems for tangible interaction with
digital information, ACM Transactions on Computer-Human Interaction, vol. 12, no. 1, pp.
81-118, 2005.
[74] O. Shaer, N. Leland, E. H. Calvillo-Gamez, and R. J. K. Jacob, The TAC paradigm: Specifying
tangible user interfaces, Personal and Ubiquitous Computing, vol. 8, no. 5, pp. 359369,
2004.
[75] B. Ullmer and H. Ishii, Mediablocks: Tangible interfaces for online media, in Proceedings
of CHI 99, 1999, pp. 31-32.
[76] D. OSullivan and T. Igoe, Physical Computing: Sensing and Controlling the Physical World
with Computers. Boston: Thomson, 2004.
[77] A. Schmidt and K. V. Laerhoven, How to build smart appliances, IEEE Personal
Communications, Special Issue on Pervasive Computing, vol. 8, no. 4, pp. 66-71, 2001.
[78] M. P. Weller, E. Y. Do, and M. D. Gross, Posey: Instrumenting a poseable hub and strut
construction toy, in Proceedings of TEI 08, 2008, pp. 39-46.
[79] V. LeClerc, A. A. Parkes, and H. Ishii, Senspectra: A computationally augmented physical
modeling toolkit for sensing and visualization of structural strain, in Proceedings of CHI
07, 2007, pp. 801804.
[80] K. Camarata, B. R. J. E. Y. Do, and M. D. Gross, Navigational blocks: Navigating information
space with tangible media, in Proceedings of the 7th International Conference on
Intelligent User Interfaces, 2002, pp. 31-38.
[81] J. Patten and H. Ishii, Mechanical constraints as computational constraints in tabletop
tangible interfaces, in Proceedings of CHI07, 2007, pp. 809-818.
[82] The Handy Board and The Super Cricket, Official web site. [Online]. Available:
http://handyboard.com/. [Accessed: 2012].
[83] O. Shaer, M. S. Horn, and R. J. K. Jacob, Tangible User Interface Laboratory: Teaching
Tangible Interaction Design in Practice, Journal of Artificial Intelligence for Engineering
Design, Analysis and Manufacturing (AIEDAM), vol. 23, no. 3, pp. 251-261, 2009.
[84] Lego Mindstorms, Lego web site, 2012. [Online]. Available: http://mindstorms.lego.com.
[85] PicoCricket - Invention kit that integrates art and technology, Commercial web site, 2012.
[Online]. Available: http://www.picocricket.com.
[86] A. N. Antle, N. Motamedi, K.Tanenbaum, and Z. L. Xie, The EventTable technique:
Distributed fiducial markers, in Proceedings of TEI 09, 2009, pp. 307-313.
137

[87] S. R. Klemmer, M. W. Newman, R. Farrell, M. Bilezikjian, and J. A. Landay, The designers
outpost: A tangible interface for collaborative web site design, in Proceedings of
UIST2001: ACM Symposium on User Interface Software and Technology, 2001, pp. 1-10.
[88] V. Maquil, A. T. Psik, and I. Wagner, The ColorTable: A design story, in Proceedings of TEI
08, 2008, pp. 97-104.
[89] H. Kato and M. Billinghurst, Marker tracking and HMD calibration for a video-based
augmented reality conferencing system, in Proceedings of the 2nd International Workshop
on Augmented Reality (IWAR 99), 1999.
[90] H. Kato, M. Billinghurst, and et al., Virtual object manipulation on a table-top AR
environment, in Proceedings of International Symposium on Augmented Reality ISAR 2000,
2000, pp. 111-119.
[91] S. R. Klemmer, J. L. J. Li, and J. A. Landay, Papier-Mch: Toolkit support for tangible
input, in Proceedings of CHI2004, 2004, pp. 399-406.
[92] S. Klemmer and et al, HCI at Stanford University - Papier-Mch: Toolkit support for
tangible interaction, UC Berkeley. [Online]. Available:
http://hci.stanford.edu/research/papier-mache/.
[93] G. Bradski and A. Kaehler, Learning OpenCV. OReilly Media, 2008.
[94] Phidgets Inc. - Unique and Easy to Use USB Interfaces, Official web site, 2012. [Online].
Available: http://www.phidgets.com/.
[95] N. V. A and H. Gellersen, A malleable control structure for softwired user interfaces, in
Proceedings of TEI 07, 2007, pp. 49-56.
[96] E. Hornecker and J. Buur, Getting a grip on tangible interaction: a framework on physical
space and social interaction, in Proceedings of the SIGCHI conference on Human Factors in
computing systems - CHI 06, 2006, p. 437.
[97] M. S. Horn, E. T. Solovey, R. J. Crouser, and R. J. K. Jacob, Comparing the use of tangible
and graphical programming languages for informal science education, in Proceedings of
the 27th international conference on Human factors in computing systems - CHI 09, 2009,
p. 975.
[98] S. R. Klemmer, B. Hartmann, and L. Takayama, How bodies matter, in Proceedings of the
6th ACM conference on Designing Interactive systems - DIS 06, 2006, p. 140.
[99] J. Piaget, Play, dreams, and imitation in childhood. W. W. Norton and Company, Inc., 1962.
[100] M. W. Alibali, M. W. Alibali, S. Kita, A. J. Young, and D. Psychology, Gesture and the
process of speech production: We think, therefore we gesture, LANGUAGE AND
COGNITIVE PROCESSES, vol. 15, pp. 593 - 613, 2000.
138

[101] D. Kirk, A. Sellen, S. Taylor, N. Villar, and S. Izadi, Putting the physical into the digital: issues
in designing hybrid interactive surfaces, in Proceedings of the 23rd British HCI Group
Annual Conference on People and Computers: Celebrating People and Technology, 2009,
pp. 35-44.
[102] D. Kirsh and P. Maglio, On Distinguishing Epistemic from Pragmatic Action, Cognitive
Science, vol. 18, no. 4, pp. 513 - 549, 1994.
[103] J. Zhang, J. M, M. St, and D. A. Norman, Representations in distributed cognitive tasks,
COGNITIVE SCIENCE, vol. 18, pp. 87 - 122, 1994.
[104] J. Zhang, The Nature of External Representations in Problem Solving, Cognitive Science,
vol. 21, no. 2, pp. 179 - 216, 1997.
[105] D. Norman, La psicologa de los objetos cotidianos. Madrid: NEREA, 1990.
[106] G. L. Revelle and E. F. Strommen, The effects of practice and input device used on young
childrens computer control, Collegiate Microcomputer, vol. 8, no. 4, pp. 33-41, Nov. 1990.
[107] A. Lane and J. Ziviani, The Suitability of the Mouse for Childrens Use: A Review of the
Literature, Journal of Computing in Childhood Education, vol. 8, no. 2/3, pp. 227-45, 1997.
[108] J. P. Hourcade, B. Bederson, and A. Druin, Building KidPad: an application for childrens
collaborative storytelling, Software: Practice and Experience, vol. 34, no. 9, pp. 895-914,
2004.
[109] G. Revelle, O. Zuckerman, A. Druin, and M. Bolas, Tangible user interfaces for children, in
CHI 05 extended abstracts on Human factors in computing systems (CHI EA '05), 2005, pp.
2051-2052.
[110] B. Inhelder and J. Piaget, The Early Growth of Logic in the Child. 1999.
[111] L. Vygotsky, Interaction between learning and development, in In Mind in Society, 1978,
pp. 79-91.
[112] D. Xu, Tangible User Interface for Children - An Overview, in UCLAN Department of
Computing Conference, 2005.
[113] D. Edge and A. Blackwell, Correlates of the cognitive dimensions for tangible user
interfaces, Journal of Visual Languages and Computing, vol. 17, no. 4, pp. 366-394, 2006.
[114] V. Bellotti, M. Back, W. K. Edwards, R. E. Grinter, A. Henderson, and C. Lopes, Making
sense of sensing systems, in Proceedings of the SIGCHI conference on Human factors in
computing systems Changing our world, changing ourselves - CHI 02, 2002, p. 415.
139

[115] R. J. K. Jacob et al., Reality-based interaction: a framework for post-WIMP interfaces, in
Proceeding of the twenty-sixth annual CHI conference on Human factors in computing
systems - CHI 08, 2008, p. 201.
[116] Genius iSlim 1320 Web Cam, Genius Web Site. [Online]. Available:
http://www.geniusnet.com/wSite/ct?xItem=19463&ctNode=1303&mp=3.
[117] Emgu CV, Official Web Site. [Online]. Available: http://www.emgu.com.
[118] CodePlex, Project Hosting for Open Source Software. [Online]. Available:
http://www.codeplex.com/.
[119] L. Sanford, C# MIDI Toolkit", The Code Project, 2007. [Online]. Available:
http://www.codeproject.com/Articles/6228/C-MIDI-Toolkit.
[120] Microsoft.DirectX.AudioVideoPlayback, Windows Desktop Development. [Online]. Available:
http://msdn.microsoft.com/en-us/library/windows/desktop/bb318762(v=vs.85).aspx.
[121] Template Matching, OpenCV v2.4.0 documentation - OpenCV Tutorials - Image Processing.
[Online]. Available:
http://opencv.itseez.com/doc/tutorials/imgproc/histograms/template_matching/template
_matching.html.
[122] VLS3.60, Universal Laser Systems, 2012. [Online]. Available:
http://www.ulsinc.com/products/vls360/.
[123] L. F. Castro Patio, Corte y Grabado por Lser: Tecnologa Novedosa Verstil y Sencilla,
Revista El Mueble y La Madera, Edicin No. 68, pp. 84-94, 2010.
[124] S. M. Castro, Iluminacin, Clases de Computacin Grafica - VyGLab - DCIC - UNS, 2011. .
[125] M. Fiala, Designing highly reliable fiducial markers., IEEE transactions on pattern analysis
and machine intelligence, vol. 32, no. 7, pp. 1317-24, Jul. 2010.
[126] ARToolKit Official web site. [Online]. Available: http://www.hitl.washington.edu/artoolkit/.
[127] O. Carreras, Disciplinas relacionadas con la usabilidad, Usable y accesible. Olga Carreras.
Blog, 2007. [Online]. Available: http://olgacarreras.blogspot.com.ar/2007/01/disciplinas-
relacionadas-con-la.html.


140

Anexo
Cdigo
Program.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

namespace MusicaTangible
{
static class Program
{
/// <summary>
/// Punto de entrada principal para la aplicacin.
/// </summary>
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new MainWindow());
}
}
}

141

MainWindow.cs


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace MusicaTangible
{
public partial class MainWindow : Form
{
private MusicProcessor musicProcessor;
private PictureBox circleRed, circleOrange, circleYellow, circleGreen,
circleLightblue, circleBlue, circlePurple;
private PictureBox circle, quad, triangle, cross;
private PictureBox hand;

public MainWindow()
{
InitializeComponent();
this.GotoFullScreen();
this.CreatePictureBoxes();
this.musicProcessor = new MusicProcessor(this);
}

private void GotoFullScreen()
{
this.FormBorderStyle = FormBorderStyle.None;
this.Left = 0;
this.Top = 0;
this.Width = Screen.PrimaryScreen.Bounds.Width;
this.Height = Screen.PrimaryScreen.Bounds.Height;
}

public void CreatePictureBoxes()
{
#region Hand
this.hand = new PictureBox();
this.hand.Size = new System.Drawing.Size(47, 68);
this.hand.Image = global::MusicaTangible.Properties.Resources.hand;
this.hand.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.hand.Anchor = AnchorStyles.None;
#endregion
#region Notes

this.circleRed = new PictureBox();
this.circleRed.Size = new System.Drawing.Size(114, 112);
this.circleRed.Image =
global::MusicaTangible.Properties.Resources.token_c;
this.circleRed.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleRed.Anchor = AnchorStyles.None;

this.circleOrange = new PictureBox();
this.circleOrange.Size = new System.Drawing.Size(114, 112);
142

this.circleOrange.Image =
global::MusicaTangible.Properties.Resources.token_d;
this.circleOrange.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleOrange.Anchor = AnchorStyles.None;

this.circleYellow = new PictureBox();
this.circleYellow.Size = new System.Drawing.Size(114, 112);
this.circleYellow.Image =
global::MusicaTangible.Properties.Resources.token_e;
this.circleYellow.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleYellow.Anchor = AnchorStyles.None;

this.circleGreen = new PictureBox();
this.circleGreen.Size = new System.Drawing.Size(114, 112);
this.circleGreen.Image =
global::MusicaTangible.Properties.Resources.token_f;
this.circleGreen.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleGreen.Anchor = AnchorStyles.None;

this.circleLightblue = new PictureBox();
this.circleLightblue.Size = new System.Drawing.Size(114, 112);
this.circleLightblue.Image =
global::MusicaTangible.Properties.Resources.token_g;
this.circleLightblue.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleLightblue.Anchor = AnchorStyles.None;

this.circleBlue = new PictureBox();
this.circleBlue.Size = new System.Drawing.Size(114, 112);
this.circleBlue.Image =
global::MusicaTangible.Properties.Resources.token_a;
this.circleBlue.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circleBlue.Anchor = AnchorStyles.None;

this.circlePurple = new PictureBox();
this.circlePurple.Size = new System.Drawing.Size(114, 112);
this.circlePurple.Image =
global::MusicaTangible.Properties.Resources.token_b;
this.circlePurple.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circlePurple.Anchor = AnchorStyles.None;

#endregion
#region Shapes

this.quad = new PictureBox();
this.quad.Size = new System.Drawing.Size(114, 112);
this.quad.Image = global::MusicaTangible.Properties.Resources.quad;
this.quad.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.quad.Anchor = AnchorStyles.None;

this.circle = new PictureBox();
this.circle.Size = new System.Drawing.Size(114, 112);
this.circle.Image =
global::MusicaTangible.Properties.Resources.circle;
this.circle.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.circle.Anchor = AnchorStyles.None;
143


this.triangle = new PictureBox();
this.triangle.Size = new System.Drawing.Size(114, 112);
this.triangle.Image =
global::MusicaTangible.Properties.Resources.triangle;
this.triangle.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.triangle.Anchor = AnchorStyles.None;

this.cross = new PictureBox();
this.cross.Size = new System.Drawing.Size(114, 112);
this.cross.Image = global::MusicaTangible.Properties.Resources.cross;
this.cross.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.cross.Anchor = AnchorStyles.None;

#endregion

for (int i = 0; i < this.tableLayoutPanel1.RowCount; i++)
{
PictureBox pp = new PictureBox();
pp.Size = new System.Drawing.Size(114, 112);
pp.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
pp.Anchor = AnchorStyles.None;
pp.Image = null;
this.tableLayoutPanel1.Controls.Add(pp, 0, i);

for (int j = 1; j < this.tableLayoutPanel1.ColumnCount; j++)
{
PictureBox pp1 = new PictureBox();
pp1.Size = new System.Drawing.Size(114, 112);
pp1.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
pp1.Anchor = AnchorStyles.None;
pp1.Image = null;
this.tableLayoutPanel1.Controls.Add(pp1, j, i);
}
}

for (int j = 0; j < this.tableLayoutPanel2.ColumnCount; j++)
{
PictureBox pp1 = new PictureBox();
pp1.Size = new System.Drawing.Size(114, 112);
pp1.SizeMode =
System.Windows.Forms.PictureBoxSizeMode.CenterImage;
pp1.Anchor = AnchorStyles.None;
pp1.Image = null;
this.tableLayoutPanel2.Controls.Add(pp1, j, 0);
}

}

public void UpdateColumn(int current)
{
if (this.tableLayoutPanel2.InvokeRequired)
{
this.tableLayoutPanel2.Invoke(new
UpdateColumnDelegate(this.UpdateColumn), current);
}
else
{
if (current == 0)
144

((PictureBox)this.tableLayoutPanel2.GetControlFromPosition(8,
0)).Image = null;
else

((PictureBox)this.tableLayoutPanel2.GetControlFromPosition(current, 0)).Image =
null;

((PictureBox)this.tableLayoutPanel2.GetControlFromPosition(current + 1, 0)).Image
= global::MusicaTangible.Properties.Resources.hand;
}
}

private delegate void UpdateColumnDelegate(int current);

#region Event Handlers

private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
this.pictureBoxIniciar.Image =
global::MusicaTangible.Properties.Resources.iniciar_on;
}

private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
this.pictureBoxIniciar.Image =
global::MusicaTangible.Properties.Resources.iniciar_off;
}

private void pictureBox2_MouseEnter(object sender, EventArgs e)
{
this.pictureBoxDetener.Image =
global::MusicaTangible.Properties.Resources.detener_on;
}

private void pictureBox2_MouseLeave(object sender, EventArgs e)
{
this.pictureBoxDetener.Image =
global::MusicaTangible.Properties.Resources.detener_off;
}

private void pictureBox3_Click(object sender, EventArgs e)
{
Application.Exit();
}

private void pictureBox3_MouseEnter(object sender, EventArgs e)
{
this.pictureBox3.Image =
global::MusicaTangible.Properties.Resources.salir_on;
}

private void pictureBox3_MouseLeave(object sender, EventArgs e)
{
this.pictureBox3.Image =
global::MusicaTangible.Properties.Resources.salir_off;
}

private void pictureBox1_Click(object sender, EventArgs e)
{
this.musicProcessor.Play();
}

private void pictureBox2_Click(object sender, EventArgs e)
145

{
this.musicProcessor.Stop();
}

private void MainWindow_FormClosed(object sender, FormClosedEventArgs e)
{
this.musicProcessor.Stop();
}

#endregion

private void pictureBoxSpeedDown_Click(object sender, EventArgs e)
{
if (this.musicProcessor.Tempo > 1)
{
this.musicProcessor.Tempo--;
this.lblTempo.Text = this.musicProcessor.Tempo.ToString();
}
}

private void pictureBoxSpeedUp_Click(object sender, EventArgs e)
{
if (this.musicProcessor.Tempo < 15)
{
this.musicProcessor.Tempo++;
this.lblTempo.Text = this.musicProcessor.Tempo.ToString();
}
}

private delegate void UpdateInstrumensDelegate(int row, Shapes shape);

public void UpdateInstruments(int row, Shapes shape)
{
if (this.tableLayoutPanel1.InvokeRequired)
{
this.tableLayoutPanel1.Invoke(new
UpdateInstrumensDelegate(this.UpdateInstruments), row, shape);
}
else
{

PictureBox pp =
(PictureBox)this.tableLayoutPanel1.GetControlFromPosition(0, row);
switch (shape)
{
case Shapes.circle:
pp.Image =
global::MusicaTangible.Properties.Resources.circle;
break;
case Shapes.square:
pp.Image =
global::MusicaTangible.Properties.Resources.quad;
break;
case Shapes.triangle:
pp.Image =
global::MusicaTangible.Properties.Resources.triangle;
break;
case Shapes.cross:
pp.Image =
global::MusicaTangible.Properties.Resources.cross;
break;
default:
pp.Image = null;
146

break;
}
}
}

private delegate void UpdateNotesDelegate(int row, int column, Colors
color);

public void UpdateNotes(int row, int column, Colors color)
{
if (this.tableLayoutPanel1.InvokeRequired)
{
this.tableLayoutPanel1.Invoke(new
UpdateNotesDelegate(this.UpdateNotes), row, column, color);
}
else
{
PictureBox pp =
(PictureBox)this.tableLayoutPanel1.GetControlFromPosition(column+1, row);
switch (color)
{
case Colors.red:
pp.Image =
global::MusicaTangible.Properties.Resources.token_c;
break;
case Colors.orange:
pp.Image =
global::MusicaTangible.Properties.Resources.token_d;
break;
case Colors.yellow:
pp.Image =
global::MusicaTangible.Properties.Resources.token_e;
break;
case Colors.green:
pp.Image =
global::MusicaTangible.Properties.Resources.token_f;
break;
case Colors.lightblue:
pp.Image =
global::MusicaTangible.Properties.Resources.token_g;
break;
case Colors.blue:
pp.Image =
global::MusicaTangible.Properties.Resources.token_a;
break;
case Colors.purple:
pp.Image =
global::MusicaTangible.Properties.Resources.token_b;
break;
default:
pp.Image = null;
break;
}
}
}

private void MainWindow_KeyDown(object sender, KeyEventArgs e)
{
switch (e.KeyCode)
{
case Keys.Add:
if (this.musicProcessor.Tempo < 12)
{
147

this.musicProcessor.Tempo++;
this.lblTempo.Text =
this.musicProcessor.Tempo.ToString();
}
break;
case Keys.Subtract:
if (this.musicProcessor.Tempo > 1)
{
this.musicProcessor.Tempo--;
this.lblTempo.Text =
this.musicProcessor.Tempo.ToString();
}
break;
case Keys.Space:
case Keys.Enter:
if (this.musicProcessor.IsPlaying)
this.musicProcessor.Stop();
else
this.musicProcessor.Play();
break;
default:
break;
}
}
}
}


148

MusicProcessor.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Sanford.Multimedia.Midi;
using System.Threading;

namespace MusicaTangible
{
class MusicProcessor
{
protected Thread updateThread;
protected Board board;
protected Instrument[] instruments;
protected MidiInternalClock metronome;
protected int currentColumn;
protected MainWindow parent;
protected int tempo;
public int Tempo
{
get
{
return this.tempo;
}
set
{
this.tempo = value;
this.metronome.Tempo = 12000000 - this.tempo * 500000;
}
}
public bool IsPlaying { get; protected set; }

public MusicProcessor(MainWindow parent)
{
this.parent = parent;
this.currentColumn = 0;
this.board = new BoardFromCam(this, 8);
this.createDefaultIntruments();

this.metronome = new MidiInternalClock();
this.Tempo = 1;
this.metronome.Ppqn = 24;
this.metronome.Tick += new EventHandler(metronome_Tick);
}

private void createDefaultIntruments()
{
this.instruments = new Instrument[4];
instruments[(int)Shapes.circle] = new Instrument("Piano",
Instrument.InstrumentPresets.piano);
instruments[(int)Shapes.square] = new Instrument("Drums",
Instrument.InstrumentPresets.drums);
instruments[(int)Shapes.cross] = new Instrument("Bass",
Instrument.InstrumentPresets.bass);
instruments[(int)Shapes.triangle] = new Instrument("Guitar",
Instrument.InstrumentPresets.guitar);
}

protected void update()
149

{
this.board.Update();
}

public void UpdateForm()
{
for (int i = 0; i < this.board.NumberOfRows; i++)
{
this.parent.UpdateInstruments(i, this.board.GetInstrument(i));
for (int j = 0; j < this.board.NumberofColumms; j++)
{
this.parent.UpdateNotes(i, j, this.board.GetColor(i, j));
}
}
}

void metronome_Tick(object sender, EventArgs e)
{
this.parent.UpdateColumn(this.currentColumn);
for (int i = 0; i < this.board.NumberOfRows; i++)
{
Colors colorAux = this.board.GetColor(i, currentColumn);
Shapes instrument = this.board.GetInstrument(i);
if (instrument != Shapes.empty)
{
if (colorAux != Colors.empty)
{
this.instruments[(int)instrument].Play(colorAux);
}
}
}
if (this.currentColumn == 7)
this.currentColumn = 0;
else
this.currentColumn++;

if (this.currentColumn == 5)
{
this.updateThread = new Thread(this.update);
this.updateThread.Start();
}

if (this.currentColumn == 6)
{
this.UpdateForm();
//this.board.printBoard();
}

}

public void Play()
{
this.IsPlaying = true;
this.metronome.Start();
}

public void Stop()
{
this.IsPlaying = false;
if (this.metronome != null)
this.metronome.Stop();
this.board.Stop();
}
150


}
}


151

Board.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace MusicaTangible
{
public enum Shapes { circle, square, cross, triangle, empty }

abstract class Board
{
public int NumberOfRows { get; protected set; }
public int NumberofColumms { get; protected set; }
protected MusicProcessor parent;

protected struct Row
{
public Shapes instrument;
public Colors[] row;
}

protected Row[] myBoard;

public abstract void Stop();

protected void Initialize(int numberOfRows, int numberOfColumns)
{
this.NumberofColumms = numberOfColumns;
this.NumberOfRows = numberOfRows;
myBoard = new Row[numberOfRows];
for (int i = 0; i < numberOfRows; i++)
{
myBoard[i].instrument = Shapes.empty;
myBoard[i].row = new Colors[numberOfColumns];
for (int j = 0; j < numberOfColumns; j++)
{
myBoard[i].row[j] = Colors.empty;
}
}
}

public abstract void Update();

public void SetInstrument(int rowNumber, Shapes shape)
{
myBoard[rowNumber].instrument = shape;
}

public void SetColor(int rowNumber, int columnNumber, Colors color)
{
myBoard[rowNumber].row[columnNumber] = color;
}

public Shapes GetInstrument(int rowIndex)
{
return this.myBoard[rowIndex].instrument;
}

public Colors GetColor(int rowIndex, int columnIndex)
152

{
return this.myBoard[rowIndex].row[columnIndex];
}

protected void PlaceShapeOnBoard(int row, Shapes shape)
{
this.SetInstrument(row, shape);
}

protected void PlaceColorOnBoard(int row, int column, Colors color)
{
this.SetColor(row, column - 1, color);
}

public void printBoard()
{
char symbol = '#';
for (int i = 0; i < NumberOfRows; i++)
{
Shapes instrument = this.myBoard[i].instrument;
switch (instrument)
{
case Shapes.circle:
symbol = '1';
break;
case Shapes.triangle:
symbol = '2';
break;
case Shapes.square:
symbol = '3';
break;
case Shapes.cross:
symbol = '4';
break;
case Shapes.empty:
symbol = '-';
break;
}
System.Console.Write(symbol);
System.Console.Write('|');
for (int j = 0; j < NumberofColumms; j++)
{
Colors note = this.myBoard[i].row[j];
switch (note)
{
case Colors.red:
symbol = 'C';
break;
case Colors.orange:
symbol = 'D';
break;
case Colors.yellow:
symbol = 'E';
break;
case Colors.green:
symbol = 'F';
break;
case Colors.lightblue:
symbol = 'G';
break;
case Colors.blue:
symbol = 'A';
break;
153

case Colors.purple:
symbol = 'B';
break;
case Colors.empty:
symbol = '-';
break;
}
System.Console.Write(symbol);
System.Console.Write('|');
}
System.Console.WriteLine();
}
System.Console.WriteLine();
}

}
}


154

BoardFromCam.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Drawing;

using Emgu.CV;
using Emgu.CV.UI;
using Emgu.CV.Structure;

namespace MusicaTangible
{
class BoardFromCam : Board
{
private Capture capture;
private Image<Gray, Byte>[] shapeImageList;
private Image<Gray, Byte>[] colorImageList;
private Image<Gray, Byte> boardGrayImg;
protected Image<Bgr, Byte> boardCapture;
private Thread Capturator;

public BoardFromCam(MusicProcessor parent, int numberOfColumns, int
numberOfRows = 6)
{
this.NumberOfRows = numberOfRows;
this.NumberofColumms = numberOfColumns;
Initialize(numberOfRows, numberOfColumns);
this.parent = parent;
this.capture = new Capture(0);

capture.SetCaptureProperty(Emgu.CV.CvEnum.CAP_PROP.CV_CAP_PROP_FRAME_WIDTH,
1600);

capture.SetCaptureProperty(Emgu.CV.CvEnum.CAP_PROP.CV_CAP_PROP_FRAME_HEIGHT,
1200);
this.Capturator = new Thread(this.CaptureThread);
this.Capturator.Start();

this.capture.SetCaptureProperty(Emgu.CV.CvEnum.CAP_PROP.CV_CAP_PROP_BRIGHTNESS,
1);

shapeImageList = new Image<Gray,
Byte>[Enum.GetNames(typeof(Shapes)).Length];
colorImageList = new Image<Gray,
Byte>[Enum.GetNames(typeof(Colors)).Length];

this.loadTemplateImages();
}

public void addShapeImage(Shapes shape, string fileName)
{
this.shapeImageList[(int)shape] = new Image<Gray, Byte>(fileName);
}

public void addColorImage(Colors color, string fileName)
{
this.colorImageList[(int)color] = new Image<Gray, Byte>(fileName);
}
155


public void loadTemplateImages()
{
addShapeImage(Shapes.circle, "Img\\Instrumentos\\circle.bmp");
addShapeImage(Shapes.square, "Img\\Instrumentos\\quad.bmp");
addShapeImage(Shapes.triangle, "Img\\Instrumentos\\triangle.bmp");
addShapeImage(Shapes.cross, "Img\\Instrumentos\\cross.bmp");
addShapeImage(Shapes.empty, "Img\\Instrumentos\\empty.bmp");

//System.Console.WriteLine("Cargue las imagenes de formas con
exito");

addColorImage(Colors.blue, "Img\\Notas\\token_a.jpg");
addColorImage(Colors.green, "Img\\Notas\\token_f.jpg");
addColorImage(Colors.lightblue, "Img\\Notas\\token_g.jpg");
addColorImage(Colors.orange, "Img\\Notas\\token_d.jpg");
addColorImage(Colors.purple, "Img\\Notas\\token_b.jpg");
addColorImage(Colors.red, "Img\\Notas\\token_c.jpg");
addColorImage(Colors.yellow, "Img\\Notas\\token_e.jpg");
addColorImage(Colors.empty, "Img\\Notas\\empty.bmp");

//System.Console.WriteLine("Cargue las imagenes de colores con
exito");
}

public override void Update()
{
this.captureImage();
this.detectInstruments();
this.detectNotes();
}

protected void CaptureThread()
{
while (true)
boardCapture = this.capture.QueryFrame();
}

protected void captureImage()
{
this.boardCapture.Save("antesDeCortar.jpg");

Image<Bgr, byte> boardCapture2 = this.boardCapture;
double scaleFactor = 880.0 / boardCapture2.Width; // 880 / 1280 =
0,6875
Image<Bgr, Byte> resizedCapture = boardCapture2.Resize(scaleFactor,
Emgu.CV.CvEnum.INTER.CV_INTER_AREA); // newPic = 880 x 660
Rectangle ROI = new Rectangle(0,0,850,535);
boardGrayImg = resizedCapture.Copy(ROI).Convert<Gray, Byte>();

//this.boardGrayImg.Save("postCorte.jpg");
}

protected void detectInstruments()
{
#region Initialization
bool aux = false;

int cantShapes = Enum.GetNames(typeof(Shapes)).Length; // S recorro
el Empty
int curY = 0;
int height = this.boardGrayImg.Height;
int step = height / 6;
156

int width = this.boardGrayImg.Width / 9;
int widthAux = this.boardGrayImg.Width;
int heightAux = this.boardGrayImg.Height;
#endregion
#region Detection
for (int i = 0; i < 6; i++)
{
aux = false;
for (Shapes shape = 0; (int)shape < cantShapes; shape++)
{
boardGrayImg.ROI = new Rectangle(0, curY, width, step);

boardGrayImg.Save("generated\\" + i + "-" + "0.png");

Image<Gray, float> result =
boardGrayImg.MatchTemplate(this.shapeImageList[(int)shape],
Emgu.CV.CvEnum.TM_TYPE.CV_TM_CCORR_NORMED);
double[] min, max;
Point[] minLocations, maxLocations;
result.MinMax(out min, out max, out minLocations, out
maxLocations);
int k = 0;
foreach (var point in maxLocations)
if (max[k++] > 0.83)
{
if (shape == Shapes.triangle)
{
result =
boardGrayImg.MatchTemplate(shapeImageList[(int)Shapes.empty],
Emgu.CV.CvEnum.TM_TYPE.CV_TM_CCORR_NORMED);

result.MinMax(out min, out max, out minLocations,
out maxLocations);
k = 0;
foreach (var point2 in maxLocations)
if (max[k++] > 0.999)
{
this.PlaceShapeOnBoard(i, Shapes.empty);
aux = true;
}
if (!aux)
{
this.PlaceShapeOnBoard(i, Shapes.triangle);
aux = true;
}
}
else
{
this.PlaceShapeOnBoard(i, shape);
aux = true;
}
}
if (aux)
break;

}
curY += step;
if (curY > height) curY = height;
}
#endregion
boardGrayImg.ROI = new Rectangle(0, 0, widthAux, heightAux);
}

157

protected void detectNotes()
{
#region Initialization
bool aux = false;

int cantColors = Enum.GetNames(typeof(Colors)).Length; // S recorro
el Empty

int height = this.boardGrayImg.Height;
int width = this.boardGrayImg.Width;

int widthAux = this.boardGrayImg.Width;
int heightAux = this.boardGrayImg.Height;

int stepX = width / 9;
int stepY = height / 6;

int curY = 0;
int curX = stepX;
#endregion
#region Detection
for (int i = 0; i < 6; i++) //rows
{
for (int j = 1; j < 9; j++) //columns
{
aux = false;
for (Colors color = 0; (int)color < cantColors; color++)
{
boardGrayImg.ROI = new Rectangle(curX, curY, stepX,
stepY);

boardGrayImg.Save("generated\\" + i + "-" + j + ".png");

Image<Gray, float> result;

try
{
result =
boardGrayImg.MatchTemplate(this.colorImageList[(int)color],
Emgu.CV.CvEnum.TM_TYPE.CV_TM_CCORR_NORMED);

double[] min, max;
Point[] minLocations, maxLocations;
result.MinMax(out min, out max, out minLocations, out
maxLocations);
int k = 0;
foreach (var point in maxLocations)
if (max[k++] > 0.93)
{
this.PlaceColorOnBoard(i, j, color);
aux = true;
}
}
catch (Exception)
{
System.Console.WriteLine("OpenCV: Bad input roi in
methos detectNotes from class BoardCam");
}

if (aux)
break;
}
curX += stepX;
158

if (curX > width) curX = width;
}
curX = stepX;
curY += stepY;
if (curY > height) curY = height;
}
#endregion
boardGrayImg.ROI = new Rectangle(0, 0, widthAux, heightAux);
}

public override void Stop()
{
this.Capturator.Abort();
}
}
}


159

Instrument.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.DirectX.AudioVideoPlayback;

namespace MusicaTangible
{
public enum Colors { red, orange, yellow, green, lightblue, blue, purple,
empty };

class Instrument
{
public enum InstrumentPresets { drums, guitar, bass, piano };
public String Name {get; set;}
private Audio[] sounds;

public Instrument(String name)
{
this.Name = name;
this.sounds = new Audio[Enum.GetNames(typeof(Colors)).Length];
}

public Instrument(String name, InstrumentPresets preset)
{
this.Name = name;
this.sounds = new Audio[Enum.GetNames(typeof(Colors)).Length];

switch (preset)
{
case InstrumentPresets.drums:
this.sounds[0] = new Audio("Sounds\\Drums\\hihat.wav");
this.sounds[1] = new Audio("Sounds\\Drums\\hihat.wav");
this.sounds[2] = new Audio("Sounds\\Drums\\hihat.wav");
this.sounds[3] = new Audio("Sounds\\Drums\\hihat.wav");
this.sounds[4] = new Audio("Sounds\\Drums\\hihat.wav");
this.sounds[5] = new Audio("Sounds\\Drums\\kick.wav");
this.sounds[6] = new Audio("Sounds\\Drums\\snare.wav");
break;
case InstrumentPresets.guitar:
this.sounds[0] = new Audio("Sounds\\Guitar\\guitar_c.wav");
this.sounds[1] = new Audio("Sounds\\Guitar\\guitar_d.wav");
this.sounds[2] = new Audio("Sounds\\Guitar\\guitar_e.wav");
this.sounds[3] = new Audio("Sounds\\Guitar\\guitar_f.wav");
this.sounds[4] = new Audio("Sounds\\Guitar\\guitar_g.wav");
this.sounds[5] = new Audio("Sounds\\Guitar\\guitar_a.wav");
this.sounds[6] = new Audio("Sounds\\Guitar\\guitar_b.wav");
break;
case InstrumentPresets.piano:
this.sounds[0] = new Audio("Sounds\\Piano\\piano_c.wav");
this.sounds[1] = new Audio("Sounds\\Piano\\piano_d.wav");
this.sounds[2] = new Audio("Sounds\\Piano\\piano_e.wav");
this.sounds[3] = new Audio("Sounds\\Piano\\piano_f.wav");
this.sounds[4] = new Audio("Sounds\\Piano\\piano_g.wav");
this.sounds[5] = new Audio("Sounds\\Piano\\piano_a.wav");
this.sounds[6] = new Audio("Sounds\\Piano\\piano_b.wav");
break;
case InstrumentPresets.bass:
this.sounds[0] = new Audio("Sounds\\Bass\\bass_c.wav");
160

this.sounds[1] = new Audio("Sounds\\Bass\\bass_d.wav");
this.sounds[2] = new Audio("Sounds\\Bass\\bass_e.wav");
this.sounds[3] = new Audio("Sounds\\Bass\\bass_f.wav");
this.sounds[4] = new Audio("Sounds\\Bass\\bass_g.wav");
this.sounds[5] = new Audio("Sounds\\Bass\\bass_a.wav");
this.sounds[6] = new Audio("Sounds\\Bass\\bass_b.wav");
break;
default:
break;
}
}

public void AddSound(Colors color, Audio sound)
{
this.sounds[(int)color] = sound;
}

public void Play(Colors color)
{
if (color != Colors.empty)
{
this.sounds[(int)color].Stop();
this.sounds[(int)color].Play();
}
}

}
}