1. No category

!
RAE!
1.! Tipo!de!documento:!Título!para!optar!por!el!título!de!Ingeniero!de!Sonido.!
2.! Título:! IMPLEMENTACIÓN! DEL! LEAP! MOTION! COMO! CONTROLADOR!
MIDI!
INTERACTIVO!
MEDIANTE!
RECONOCIMIENTO!
GESTUAL!
(DACTILAR)!
3.! Autores:!Jhoana!Paola!Gaitán!Quiasua!!
4.! Lugar:!Bogotá!D.C!!
5.! Fecha:!4!de!Mayo!de!2015!!
6.! Palabras!Clave:!Leap!Motion,!Protocolo!MIDI,!Protocolo!OSC,!Pure!Data,!
Unity,!interacción!humanoTmaquina,!Innovación,!DSP!
7.! Descripción!del!trabajo:!En!este!Documento!se!presenta!el!desarrollo!de!
un! controlador! MIDI! no! convencional! basado! en! reconocimiento! gestual!
(dactilar),! mediante! la! implementación! del! LEAP! MOTION.! Se! describe! el!
procedimiento!para!el!!diseño!y!!programación!de!seis!!gestos!controlados!y!
visualizados! en! tiempo! real! a! través! de! una! interfaz! gráfica,! asignando!
previamente!cambios!de!control!desde!un!software!de!audio.!!
El!proyecto!consta!de!3!fases!significativas^!la!primera!está!conformada!por!
la! adquisición,! interpretación! de! datos! y! asignación! de! gestos! en! tiempo!
real^! esto! ! a! través! ! del! entorno! de! programación! libre! Pure! Data.! La!
segunda! fase! establece! la! comunicación! y! control! del! software! de! audio!
mediante! el! protocolo! MIDI,! en! éste! caso! Ableton! Live.! Por! último! la!
comunicación!a!través!del!protocolo!OSC!con!su!respectiva!interfaz!gráfica!
desarrollada!en!Unity!3D.!
8.! Líneas! de! Investigación:! El! proyecto! está! enfocado! a! la! interactividad!
usuario! máquina! por! lo! cual! la! línea! de! investigación! corresponde! al!
“análisis! y! procesamiento! de! señales”! y! el! campo! temático! del! programa!
está!enfocado!al!Audio!y!la!Acústica.!
1
9.! Contenidos:!Introducción,!planteamiento!del!problema,!metodología,!línea!
de!investigación,!marco!teórico,!desarrollo!ingenieril,!análisis!de!resultados,!
conclusiones,!productos,!limitaciones,!bibliografía,!glosario,!anexos.!
10.!!Metodología:! Debido! a! que! el! desarrollo! del! proyecto! es! un! producto!
tecnológico,! que! emula! el! resultado! de! experiencias! sensitivas! e!
interactivas,! este! enfoque! será! entonces! de! investigación! EmpíricoT
analítico.!
11.!Conclusiones:! El! documento! presenta! el! diseño! y! desarrollo! de! un!
controlador!
MIDI! no! convencional,! basado! en! reconocimiento! dactilar!
implementando! el! dispositivo! Leap! Motion^! el! cual! como! sensor! permite! la!
captura! de! movimientos! y! gestos! previamente! programados,! que! fueron!
asignados! a! cambios! de! control! con! el! fin! de! comunicarlos! al! software! de!
Audio! mediante! Protocolo! MIDI.! Se! visualiza! el! control! en! tiempo! real! a!
través!de!!una!interfaz!gráfica.!!
!
!
!
!
!
!
!
!
!
!
!
2
IMPLEMENTACIÓN!DEL!LEAP!MOTION!COMO!CONTROLADOR!MIDI!
INTERACTIVO!MEDIANTE!RECONOCIMIENTO!GESTUAL!(DACTILAR)!
!
!
!
!
!
!
JHOANA!PAOLA!GAITÁN!QUIASUA!
!
!
!
!
!
!
UNIVERSIDAD!DE!SAN!BUENAVENTURA!!
FACULTAD!DE!INGENIERÍA!DE!SONIDO!!
ÁREA!DE!PROYECTO!DE!GRADO!!
!
!
!
!
!
!
!
!
BOGOTÁ!D.C.!2015!
!
!
!
3
IMPLEMENTACIÓN!DEL!LEAP!MOTION!COMO!CONTROLADOR!MIDI!
INTERACTIVO!MEDIANTE!RECONOCIMIENTO!GESTUAL!(DACTILAR)!
!
!
!
!
!
JHOANA!PAOLA!GAITÁN!QUIASUA!
!
!
!
!
!
Proyecto!de!Grado!presentado!como!requisito!para!optar!por!el!título!de!
Ingeniero!de!Sonido!
!
!
!
!
TUTOR:!!
INGENIERA!DIANA!MARTÍNEZ!
!
!
!
!
!
!
UNIVERSIDAD!DE!SAN!BUENAVENTURA!!
FACULTAD!DE!INGENIERÍA!DE!SONIDO!!
ÁREA!DE!PROYECTO!DE!GRADO!!
!!!!!BOGOTÁ!D.C.!2015!
4
!
Nota!de!Aceptación!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
______________________________________________________!!
!
Firma!del!Jurado!
!
!!
______________________________________________________!
!
Firma!del!Jurado!!
!
______________________________________________________!!
!
!
!
Ciudad!y!fecha!(dd/mes/año)!__________,!___/____/________!
!
!
!
!
5
!
A"Dios"por"permitirme"culminar"este"logro"
A"mis"padres"y"Hermana,"Orlando,"Claudia"y"Vanessa"
Las"personas"más"importantes"en"mi"vida"
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
6
!
!
!
Agradecimientos.!
!
A! Dios! Primeramente! por! permitirme! culminar! este! objetivo,! darme! la! fuerza!
suficiente!para!seguir!adelante.!!!!
!
A!las!personas!más!importantes!en!mi!vida,!mis!padres!Luis!Orlando,!Claudia!y!mi!
Hermana!Laura!Vanessa.!Gracias!por!ese!apoyo!incondicional!desde!el!comienzo,!
por!el!esfuerzo!y!sacrificio!para!lograr!el!gran!objetivo!y!ser!un!soporte!día!a!día.!
!
A! mi! guía! en! el! planteamiento! del! proyecto,! la! Ingeniera! Diana! Martínez,! por! su!
paciencia,!apoyo!y!orientación!a!lo!largo!de!este!proyecto.!
!
A! mis! amigos! y! compañeros! de! carrera,! Nicolas! Calderón,! Andres! Caballero,!
Katherine!Herrera,!Dorian!Sánchez,!Wendy!Rodríguez,!Kelly!Díaz!gracias!infinitas!
por!su!apoyo!y!compresión!a!lo!largo!de!esta!etapa.!
!
!
!
!
!
!
!
!
!
!
7
1.!Tabla#de'contenido#
1''PLANTEAMIENTO'DEL'PROBLEMA'................................................................................'17'
1.1#Antecedentes#....................................................................................................................................................#17#
1.2#Descripción#del#problema#...........................................................................................................................#19#
1.3#Pregunta#Problema#........................................................................................................................................#19#
1.4#Justificación#.......................................................................................................................................................#19#
1.5#Objetivos#.............................................................................................................................................................#20#
####1.5.1##Objetivo#General#.....................................................................................................................................#20#
####1.5.2##Objetivo#Específico#................................................................................................................................#20#
#####1.6#Alcances#y#Limitaciones#del#Proyecto#....................................................................................................#20#
####1.6.1##Alcances#.....................................................................................................................................................#20#
#########1.6.2##Limitaciones#.............................................................................................................................................#21#
2''METODOLOGIA'......................................................................................................................'21'
2.1#Enfoque#de#la#Investigación#........................................................................................................................#21#
2.2#Línea#de#la#Investigación#.............................................................................................................................#21#
2.3#Hipótesis#.............................................................................................................................................................#21#
2.4#Variables#.............................................................................................................................................................#21#
####2.4.1##Independientes#.......................................................................................................................................#21#
####2.4.2##Dependientes#...........................................................................................................................................#22#
'3'MARCO'TEORICO'..................................................................................................................'22'
3.1#Sensor#Leap#Motion#.......................................................................................................................................#23#
####3.1.1##Construcción#y#Componentes#...........................................................................................................#23#
####3.1.2##Funcionamiento#......................................................................................................................................#24#
####3.1.3##Información#proporcionada#a#Desarrolladores#........................................................................#27#
########3.1.3.1##Kit#de#Desarrollo#de#Software#(SDK)##....................................................................................#27#
########3.1.3.2#Interfaz#de#Programación#de#Aplicaciones##(API)##............................................................#27#
#####3.2#Entornos#de#Programación#y#DAW#(Digital#Audio#Workspace)##................................................#28#
#########3.2.1#Pure#Data#....................................................................................................................................................#28#
#############3.2.1.1#PD#Vanilla#...........................................................................................................................................#28#
#############3.2.1.2#PD#Extended#......................................................................................................................................#28#
##########3.2.2#Unity#............................................................................................................................................................#29#
##########3.2.3##Ableton#Live#DAW#................................................................................................................................#29#
3.3#Diseño#de#Interfaz#de#Usuario#...................................................................................................................#29#
####3.3.1##Interfaz#de#Usuario##UI#(User#Interface)#.......................................................................................#29#
########3.3.1.1##Tipos#de#Interfaz#de#Usuario#UI#...............................................................................................#30#
########3.3.1.2##Tipos#de#Interfaz#Gráfica#de#Usuario#(GUI)#.........................................................................#30#
########3.3.1.3##Experiencia#de#Usuario##UX##......................................................................................................#31#
3.4#Protocolos#de#Comunicación##.....................................................................................................................#31#
####3.4.1##Protocolo#MIDI##(Interfaz#Digital#de#Instrumentos#Musicales)#..........................................#31#
########3.4.1.1##Transmisión#MIDI#..........................................................................................................................#32#
########3.4.1.2##Mensaje#MIDI#...................................................................................................................................#32#
############3.4.1.2.1##Mensaje#de#Nota#ON/Off#.....................................................................................................#32#
''''''''''''3.4.1.2.2##Mensaje#de#Cambio#de#Programa#....................................................................................#32#
############3.4.1.2.3##Mensaje#de#Cambio#de#Control#.........................................................................................#32#
############3.4.1.2.4##Mensaje#de#Sistema#...............................................................................................................#33####
########3.4.1.3##Controlador#MIDI#...........................................................................................................................#33#
#####3.4.2#Protocolo#OSC#(Open#Sound#Control)#...........................................................................................#34#
#####3.4.3#Protocolo#IP#..............................................................................................................................................#34#
8
4'DESARROLLO'INGENIERIL'.................................................................................................................'35'
####4.1#Requerimientos#................................................................................................................................................#35#
###4.1.1#Funcionales#.................................................................................................................................................#35#
###4.1.2#No#Funcionales#..........................................................................................................................................#35#
4.2#Casos#de#Uso#......................................................................................................................................................#36#
4.3#Arquitectura#de#Software#............................................................................................................................#43#
4.4#Desarrollo#de#Software#.................................................................................................................................#45#
'''4.4.1#Adquisición#e#Interpretación#de#los#Datos#....................................................................................#45#
#######4.4.1.1#Implementación#del#SDK,#API##....................................................................................................#45#
#######4.4.1.2#Funcionamiento#de#la#API#............................................................................................................#46#
#######4.4.1.3#Desarrollo#del#Patch#........................................................................................................................#50#########
###########4.4.1.3.1Calibración#de#Altura#e#Interacción#...................................................................................#50############
###########4.4.1.3.2#Identificación#Mano#Izquierda#Y#Derecha#.....................................................................#51#
#############4.4.1.4#Programación#de#Gestos#..............................................................................................................#51#
############4.4.1.4.1#Gesto#Desplazamiento#en#Ejes#X,Y,Z#...............................................................................#52#
############4.4.1.4.2#Gesto#Puño#Cerrado#en#Eje#Z#..............................................................................................#53#
############4.4.1.4.3#Gesto#–#Rotacional#(KNOB)#.................................................................................................#55#
############4.4.1.4.4#Gesto#i#Selección#y#Ejecución#.............................................................................................#58#
#####4.4.2#Comunicación#..........................................................................................................................................#59#
#########4.4.2.1#Con#Unity##..........................................................................................................................................#59#
#########4.4.2.2#Mediante#UDP##.................................................................................................................................#60#
#########4.4.2.3#Mediante#OSC##..................................................................................................................................#61#
#########4.4.2.4#MIDI##....................................................................................................................................................#62#
######4.4.3#Diseño#Interfaz#Gráfica#UI#.................................................................................................................#63#
##########4.4.3.1#Directrices#UI#y#UX#.......................................................................................................................#63#
##########4.4.3.3#Desarrollo#del#Diseño#..................................................................................................................#66#
######4.4.4#Implementación#Interfaz#de#Usuario#en#Unity##........................................................................#69#
'''''##4.4.4.1#Comunicación#Unity#i#PD#..............................................................................................................#71#
############4.4.4.3#Asignación#MIDI#...............................................................................................................................#73#
#######4.4.4.2#Manual#de#Usuario#...........................................................................................................................#77#
#############
'
5'ANÁLISIS'Y'RESULTADOS'..................................................................................................................'78'
6'CONCLUCIONES'.....................................................................................................................................'80'
7'RECOMENDACIONES'............................................................................................................................'82'
REFERENCIAS'BIBLIOGRAFICAS'.........................................................................................................'82'
ANEXOS'.......................................................................................................................................................'85'
'
'
9
Tabla#de'contenido'De'Imágenes#
Imagen#1#Superficie#de#control#reactable##........................................................................................................#17#
Imagen#2#Dispositivo#sensor#de#entrada#leap#motion##................................................................................#22#
Imagen#3#Componentes#internos#del#dispositivo#leap#motion##...............................................................#23#
Imagen#4#Posición#de#funcionamiento#standart#del#leap#motion###.........................................................#24#
Imagen#5#Modelo#interno#de#la#mano#.................................................................................................................#24#
Imagen#6#Visualizador#leap#motion#más#de#dos#manos#..............................................................................#25#
Imagen#7#Modelo#Segmentación#brazo#de#la#API#...........................................................................................#27#
Imagen#8#Controlador#MIDI#no#convencional#.................................................................................................#33#
Imagen#9#Segmentación#del#brazo#y#la#mano#por#módulos##......................................................................#39#
Imagen#10#Vista#volumétrica#de#la#API#del#Leap#Motion#............................................................................#40#
Imagen#11#Regla#de#la#mano#derecha#.................................................................................................................#41#
Imagen#12#Normal#de#la#Palma#..............................................................................................................................#42#
Imagen#13#Calibración#Altura#de#Interacción#Leap#Motioni#Automática#............................................#43#
Imagen#14#Nomenclatura#Puntos#de#la#mano#sobre#plano#Bidimensional#.........................................#44#
Imagen#15#Diseño#Gráfico#de#la#Interfaz#............................................................................................................#56#
Imagen#16#Retroalimentación#Visual#..................................................................................................................#57#
Imagen#17#Selección#cursor##...................................................................................................................................#57#
Imagen#18#Configuración#MIDI##.............................................................................................................................#63#
Imagen#19#Asignación#Parámetros#MIDI#...........................................................................................................#64#
Imagen#20#Instrucción#1i#Herramienta#Selección#.........................................................................................#65#
Imagen#21Instrucción#2i#Herramienta#Cursor#y#Click#.................................................................................#66#
Imagen#22#Instrucción#3i#Información#...............................................................................................................#67#
Imagen#23#Instrucción#4i#Ejecución#Gestos#Desplazamiento#Eje#Y##......................................................#68#
Imagen#24#Instrucción#5i#Eje#Rotacional##.........................................................................................................#68#
Imagen#25#Instrucción#6i#Ejecución#Gesto#Switch#........................................................................................#69#
Imagen#26#Diagrama#de#clases#desarrollado#para#patch#Pure#Data#......................................................#75#
Imagen#27#Diagrama#de#clases#para#Interfaz#Gráfica#en#Unity#................................................................#76#
Imagen#28#Canvas#–#Imagen#de#fondo#interfaz#Gráfica#Unity#...................................................................#76#
Imagen#29#Implementación#Sliders#en#Unuty##................................................................................................#77#
Imagen#28#Diseño#de#interfaz#Gráfica#.................................................................................................................#77#
Imagen#29#Problema#ocurrido#por#utilizar#mismo#puerto#........................................................................#78#
Imagen#30#Diseño#animación#manos#Interfaz#Gráfica##................................................................................#78#
10
Imagen#31#Retroalimentación#visual##.................................................................................................................#56#
#
#
#
#
#
Tabla#de'contenido'De'Gráficos!
#
Gráfico#1#Secciones#de#desarrollo#del#marco#teórico#...................................................................................#21#
Gráfico#2#Casos#de#uso#...............................................................................................................................................#37#
Gráfico#3#Arquitectura#de#software#del#proyecto#..........................................................................................#42#
Gráfico#4#Diagrama#Plataforma#de#Desarrollo#................................................................................................#43#
Gráfico#5#Diagrama#de#bloques#estructural#del#proyecto#...........................................................................#37#
Gráfico#6#Diagrama#de#clases#UMLiimplementación#del#API#“leap#motion#........................................#38#
Tabla#de'Casos'de'Uso!
#
Tabla#1#(Primer#Caso#de#Uso#para#el#Click)…#...................................................................................................#37#
Tabla#2#(Curso#Normal#de#los#Eventos#para#el#Primer#Caso#de#Uso)#....................................................#37#
Tabla#3#(Segundo#Caso#de#Uso#para#el#Desplazamiento#Y)#........................................................................#38#
Tabla#4#(Curso#Normal#de#los#Eventos#para#el#Segundo#Caso#de#Uso)##................................................#39#
Tabla#5#(Tercer##Caso#de#Uso#para#el#Desplazamiento#X)#...........................................................................#39#
Tabla#6#(Curso#Normal#de#los#Eventos#para#el#Tercer#Caso#de#Uso).#....................................................#39#
Tabla#7#(Cuarto##Caso#de#Uso#para#el#Desplazamiento#Z)##..........................................................................#40#
Tabla#8#(Curso#Normal#de#los#Eventos#para#el#Cuarto#Caso#de#Uso)#.....................................................#40#
Tabla#9#(Quinto#Caso#de#Uso#para#el#Desplazamiento#Z#con#la#mano#cerrada)#................................#41#
Tabla#10#(Curso#Normal#de#los#Eventos#para#el#Quinto#Caso#de#Uso)#..................................................#42#
Tabla#11#(Sexto#Caso#de#Uso#para#el#Gesto#Rotacional#Knob)…##.............................................................#43#
Tabla#12#(Curso#Normal#de#los#Eventos#para#el#Quinto#Caso#de#Uso)#..................................................#44#
!
!
11
!
!
!
!
!
'
Tabla#de'contenido'De'Figuras#
#
Figura#1#Exportación#datos#de#control#relevantes#fuera#del#lienzo#en#Pd#..........................................#45#
Figura#2#Programación#diferencia#mano#derecha#de#izquierda#..............................................................#46#
Figura#3#Algoritmo#“programación”#de#gestos#en#X,Y#y#Z#...........................................................................#48#
Figura#4#Gesto#rotacional#knob#..............................................................................................................................#49#
Figura#5#Algoritmo#del#cursor##...............................................................................................................................#50#
Figura#6#Comunicación#bidireccional#PdiOsc#a#través#de#UDP#................................................................#52#
Figura#7#Envió#mensajes#de#control#MIDIi#argumentos##............................................................................#54#
Figura#8#Representación#diagrama#de#clases#..................................................................................................#59#
Figura#9#Componente#colisionador#collider2D#...............................................................................................#60#
Figura#10#Diagrama#de#clases#comunicación#UnityiPd#...............................................................................#62#
!
!
!
!
!
!
!
!
!
!
!
12
!
!
!
!
!
RESUMEN!
!
!
En!este!proyecto!de!investigación!se!presenta!el!desarrollo!de!un!controlador!MIDI!
no! convencional! basado! en! reconocimiento! gestual! (dactilar),! mediante! la!
implementación! del! LEAP! MOTION,! se! describe! el! diseño! y! la! programación! de!
seis! gestos! controlados! y! visualizados! mediante! una! interfaz! gráfica,! asignando!
previamente!cambios!de!control!desde!un!software!de!audio.!!
!
El! proyecto! consta! de! 3! fases! significativas^! la! primera! está! conformada! por! la!
adquisición,! interpretación! de! datos! y! asignación! de! gestos! en! tiempo! real^!
mediante!el!lenguaje!de!programación!Pure!Data.!En!la!segunda!fase!se!establece!
la!comunicación!y!control!del!software!de!audio!mediante!el!protocolo!MIDI,!y!por!
último! la! comunicación! a! través! del! protocolo! OSC! con! su! respectiva! interfaz!
gráfica!desarrollada!en!"Unity!3D".!
!
!
!
!
PALABRAS!CLAVES:!Leap!Motion,!Protocolo!MIDI,!Protocolo!OSC,!Protocolo!IP!
Pure!data,!Unity,!interacción!humanoTmaquina,!Innovación,!DSP.!
!
!
!
!
!
13
!
!
!
ABSTRACT!
!
This! research! project! presents! a! non! convencional! MIDI! controller.! This! non!
conventional! controller! is! based! on! finger! movement! recognition! by! using! LEAP!
MOTION! interfase! .! To! comprehend! it! better,! a! design! and! a! six! visualized!
movements! programming! (through! a! graphical! interface)! will! be! described,!
assigning!previously!changes!from!an!audio!software.!!
!
!
This! project! is! composed! by! three! significant! phases^! the! first! one! is! about! data!
acquisition,! interpretation! and! real! time! movement! assignment! by! using! PURE!
DATA! programming.! The! second! phase! is! about! the! system! communication!
establishment! and! audio! software! control! by! using! "Ableton! Live"! MIDI! protocol.!
The! third! one! phase! is! about! getting! a! communication! by! OSC! protocol! with! its!
(developed!by!"Unity!3D")!graphic!interface.!
!
!
Keywords:! Leap! motion,! MIDI! protocol,! OSC! protocol,! IP! protocol,! Pure! data,!
Unity,!HumanTMachine!interface,!Innovation,!DSP!
!
!
!
!
!
!
!
!
14
INTRODUCCIÓN!
!
La!evolución!de!la!!tecnología!ha!hecho!posible!la!transformación!en!la!forma!de!
controlar,!crear!o!generar!sonidos.!El!desarrollo!de!tecnologías!como!el!protocolo!
MIDI! han! hecho! posible! la! comunicación! con! las! computadoras! u! otros!
dispositivos,! permitiendo! crear! sistemas! electrónicos! que! sirven! como! interfaz! al!
usuario!para!producir!o!modificar!sus!sonidos!a!través!de!procesos!de!síntesis!o!
muestreo,! los! cuales! !se! realizan! en! los! software! para! producción! musical.! ! En!
esta!misma!vía!el!control!basado!en!gestos!está!empezando!a!ser!reconocido!en!
el!medio!de!los!artistas!musicales!y!visuales,!por!lo!cual!diferentes!compañías!han!
logrado! desarrollos! alternativos! que! intentan! ofrecer! soluciones! diferentes! a! las!
existentes!en!el!mercado!como!lo!han!hecho!los!desarrolladores!del!Leap!Motion^!
el!cual!tiene!como!principio!el!!reconocimiento!dactilar.!Este!dispositivo!cuenta!con!
varias!cámaras!y!leds!infrarrojos!que!reconocen!manos,!dedos,!e!incluso!objetos^!
actuando!como!un!sensor!dentro!de!su!espacio!de!trabajo.!
!
Después! de! tener! en! cuenta! este! tipo! de! tecnologías! y! dispositivos! se! llegó! a! la!
conclusión! de! unir! estas,! y! desarrollar! un! controlador! práctico! e! interactivo! en! el!!
cual! el! usuario! es! capaz! de! generar! mensajes! MIDI! por! medio! de! detección! de!
gestos!dactilares!a!través!del!sensor,!para!luego!enviarlos!!hacia!!un!software!de!
audio,!por!último,!controlar!varios!de!sus!parámetros!que!pueden!ser!previamente!
definidos!y!visualizados!en!tiempo!de!real!a!través!de!!una!interfaz!gráfica.!
!
!
!
!
!
15
1.! PLANTEAMIENTO!DEL!PROBLEMA!
!
1.1!!!!!!!!!ANTECEDENTES!
!! GESTURES!TO!OPERATE!DAW!SOFTWARE!!'
El!objeto!de!este!artículo!fue!realizar!un!estudio!para!así!explorar!hasta!qué!punto!
el! software! de! audio! puede! beneficiarse! mediante! reconocimiento! gestual,! esto!
debido! a! la! creciente! disponibilidad! de! dispositivos! como! teléfonos! inteligentes,!
tabletas! y! pantallas! táctiles.! Los! realizadores! de! este! estudio! establecieron! 22!
funciones! de! un! Daw! para! controlar! éstas! por! medio! de! gestos! preTestablecidos,!
dando!como!conclusión!la!gran!aceptación!de!este!sistema,!sin!embargo!recalcan!
el!hecho!que!algunas!personas!no!se!acostumbran!del!todo!al!sistema!propuesto!
(Wincent,!Jorn,!2011).!
!
!! INTERFACE!
DESING!
FOR!
COMPUTER^CONTROLLED!
AUDIO!
SYSTEMS!!
En! este! artículo! hacen! referencia! al! desarrollo! de! interfaces! avanzadas! que! se!
presentará!a!futuro!y!como!influirán!en!el!ámbito!de!la!ingeniería.!Se!dice!que!el!
éxito! en! el! diseño! de! interfaces! de! usuario! para! los! complejos! sistemas!
informáticos!será!en!gran!parte!determinante!para!el!éxito!de!los!sistemas!en!su!
conjunto.! La! interacción! personaTordenador! se! presenta! y! se! aplica! en! el! ámbito!
de!los!sistemas!de!audio!controlados!por!el!ordenador.!Los!temas!a!tratar!incluyen!
el!diseño!de!las!pantallas!táctiles!y!visuales,!el!uso!de!dispositivos!alternativos!de!
entrada!y!sus!asignaciones,!la!compatibilidad!estímuloTrespuesta,!personalización!
e!interfaces!inteligentes!(AES,!13th!international!conference).!!
!! FUTURE!HUMAN!INTERFACES!TO!COMPUTER!CONTROLLED!SOUND!
SYSTEMS!!!!!
Este! artículo! plantea! nuevas! posibilidades! de! interacción! hombreTmáquina! por!
medio! de! seguimiento! de! posición! espacial,! de! ojos,! de! cabeza! y! de! entradas!
táctiles.! Presenta! algunas! tecnologías! de! interfaces! humanas,! las! cuales! pueden!
16
ser! implementadas! en! los! sistemas! de! sonido.! Los! avances! en! la! interacción!
hombreTmáquina!se!divide!en!3!secciones^!ingreso!y!reconocimiento!de!datos!por!
la! computadora,! sistemas! visuales! y! de! escucha! y! análisis! de! espacialidad.! Los!
problemas!asociados!a!estos!diseños!suelen!afectar!la!usabilidad!de!los!sistemas!
que!están!conectados!a!este,!implementar!un!dispositivo!ópticoTeléctrico!conlleva!
diferentes! problemas.! Con! el! sentido! de! la! vista,! el! sentido! de! la! audición! es! la!
forma!principal!en!la!que!los!humanos!recolectan!información!de!su!entorno,!como!
la!localización!espacial!(Craig,!Bob,!1993)!
!! REACTABLE!!!
Es! un! instrumento! musical! electrónico! el! cual! posee! una! interfaz! táctil! sobre! una!
superficie,! esta! compuesto! de! un! tablero! semitraslucido! iluminado! con! dos!
cámaras,! las! cuales! analizan! cualquier! movimiento,! posición! y! orientación! de! los!
diferentes! objetos! físicos! y! lógicos! que! estan! situados! sobre! el! tablero.! Los!
usuarios! pueden! obtener! simultaneamente! el! control! de! ella,! creando! distintas!
combinaciones! de! figuras! y! dependiendo! del! ángulo! de! posición! del! objeto,! la!
mesa!emitirá!un!sonido!sintetizado!(Grupo!de!Tecnología,!2005).!
La#imagen#muestra#la#Superficie#de#Control#Reactable##
MTG,!Music!Technology!Group.!Genesis!of!the!project.!Universidad!Pompeu!Fabra,!
Barcelona.!
#
17
1.2! DESCRIPCIÓN!DEL!PROBLEMA!!
Gracias! a! los! avances! tecnológicos! y! desarrollo! de! dispositivos,! hoy! en! día! se!
hace! fácil! generar! una! relación! interactiva! entre! usuarioTmáquina,! lo! cual! hace!
posible! que! el! usuario! llegue! al! punto! de! sentirse! inmerso! en! las! acciones!
ejecutadas!en!su!computadora,!donde!uno!de!los!enfoques!más!relevantes!es!la!
interacción! gestual,! generando! una! relación! más! amigable! con! esta! y! evitando!
en! lo! posible! el! contacto! con! objetos! físicos.! A! raíz! de! esto,! se! busca! la!
incorporación! de! estas! nuevas! tecnologías! en! el! campo! de! la! ingeniería! de!
sonido,! específicamente! en! los! controladores! MIDI,! debido! a! que! son! una!
herramienta! necesaria! para! cualquier! artista! musical! y! visual! que! desee!
sobresalir!en!la!escena.!!!
1.3!
!!PREGUNTA!PROBLEMA!
¿Cómo!desarrollar!un!controlador!MIDI!no!convencional!que!permita!la!interacción!
usuarioTmáquina!mediante!reconocimiento!dáctil!(gestual)?!
1.4!
!JUSTIFICACIÓN!
Los!avances!tecnológicos!a!nivel!mundial,!han!tomado!mucha!fuerza!en!el!campo!
musical,! lo! cual! ha! llevado! a! crear! diferentes! formas! de! expresión! artística,!
integrando! varias! ramas! ingenieriles,! esto! genera! nuevas! e! innovadoras!
alternativas! que! brindan! al! público! experiencias! no! solo! auditivas! sino! visuales,!
como!el!Reactable.!
Por! medio! de! esta! investigación! y! desarrollo,! se! pretende! promover! la!
implementación! de! nuevas! tecnologías! para! el! control! de! parámetros! mediante!
protocolo!MIDI,!ya!que!el!reconocimiento!gestual!brinda!una!interacción!natural!en!
tiempo!real!humanoTordenador,!este!se!ajusta!a!las!necesidades!del!usuario!en!el!
momento!que!éste!decida!realizar!una!acción,!de!esta!manera!al!lograr!controlarlo!
con! solo! el! movimiento! de! las! manos! le! evitarán! al! usuario! tener! que! ir! a! la!
configuración!y!escoger!el!parámetro!que!desean,!brindándole!así!una!experiencia!
inmersiva! e! innovadora! por! lo! cual! logrará! llamar! la! atención! de! otros! músicos! y!
18
artistas! visuales! generando! un! mayor! ! interés! en! este! tipo! de! controladores! no!
convencionales!y!ver!la!practicidad!que!este!presenta.!!
Este!proyecto!se!presenta!como!una!solución!novedosa,!a!las!exigencias!artísticas!
y!de!alta!calidad!que!demanda!la!producción!musical!siendo!la!tecnología!la!que!
posibilite!nuevas!alternativas!de!interacción!ordenadorThumano.!
1.5!
OBJETIVOS!DE!INVESTIGACIÓN!
!
1.5.1! Objetivo!General!
!
Desarrollar! un! controlador! MIDI! interactivo! no! convencional! mediante!
reconocimiento!dactil!(gestual)!implementando!el!sensor!Leap!Motion!
1.5.2! Objetivos!Específicos!
!! Implementar! el! algoritmo! para! la! adquisición! e! interpretación! de! datos!
provenientes!del!Leap!Motion.!!
!! Establecer! 6! comandos! de! ejecución! de! eventos! de! cambio! de! control!
MIDI.!
!! Implementar! una! interfaz! gráfica! para! la! visualización! del! control! y!
retroalimentación!para!el!usuario!en!tiempo!real.!
1.6!
!ALCANCES!Y!LIMITACIONES!DEL!PROYECTO!
1.6.1! !Alcances!
!! La! implementación! será! un! aporte! de! innovación! en! las! tecnologías! de!
interacción! humanoTmáquina! enfocadas! al! audio,! logrando! una!
interpretación!inmersiva!donde!el!usuario!se!relacione!naturalmente!con!
el!sistema!que!controla.!!
!! El! producto! tendrá! un! valor! agregado! por! innovación! en! el! área! de!
controladores!no!convencionales.!!
!! El!sistema!controlará!parámetros!configurables!en!tiempo!real!mediante!
MIDI.!!
19
1.6.2! Limitaciones!
!! El!sistema!reconocerá!la!posición!de!seis!gestos!diferentes.!!
!! Se!programarán!determinados!mensajes!MIDI,!para!evitar!que!el!LEAP!
MOTION! confunda! algunos! movimientos! que! podrían! llegar! a! ser! muy!
similares,!y!envíe!mensajes!erróneos!al!sistema.!
!! El! sistema! será! diseñado! para! trabajar! con! un! DAW! o! software! de!
programación!modular!gráfico!específico.!
2! METODOLOGÍA!
2.1!
ENFOQUE!DE!LA!INVESTIGACIÓN!
Debido!a!que!el!desarrollo!del!proyecto!es!un!producto!tecnológico,!que!emula!el!
resultado!de!experiencias!sensitivas!e!interactivas,!este!enfoque!será!entonces!de!
investigación!EmpíricoTanalítico.!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
2.2!
!LINEA!DE!INVESTIGACIÓN!
!
El!proyecto!está!enfocado!a!la!interactividad!usuario!máquina!por!lo!cual!la!línea!
de!investigación!corresponde!al!“análisis!y!procesamiento!de!señales”!y!el!campo!
temático!del!programa!está!enfocado!al!Audio!y!la!Acústica.!
2.3!
!HIPÓTESIS!
Es!posible!desarrollar!un!controlador!MIDI!que!permita!al!usuario!interactuar!con!el!
sistema!de!una!forma!no!convencional!mediante!reconocimiento!dáctil!(gestual)!a!
través! del! sensor! de! entrada! LEAP! MOTION! para! ejecutar! acciones! específicas!
con!ayuda!de!protocolo!MIDI,!visualizándolo!a!través!de!una!interfaz!gráfica.!
2.4!
!VARIABLES!!
2.4.1! Variables!Independientes!!
•! Cambio!de!control!
20
•! Nota!MIDI!
•! Cambio!de!programa!
2.4.2! Variables!Dependientes!
•! Latencia! del! mensaje! enviado! por! el! Leap! Motion! al! ser! enlazado! con!
Pure!Data.!
3! MARCO!TEÓRICO!
El!desarrollo!del!proyecto!toma!como!base!conceptos!y!teorías!que!se!dividen!en!
4! secciones:! Sensor! de! entrada! Leap! Motion,! entornos! de! programación,! diseño!
de! interfaz! de! usuario! y! protocolos! de! comunicación! (ver! gráfico! (1)).! La! primera!
hace! énfasis! en! la! forma! en! la! que! trabaja! el! sensor,! sus! componentes! y! la!
información! que! brindan! los! fabricantes! a! desarrolladores.! La! segunda! sección!
explica!las!características!y!tipos!de!entornos!de!programación,!en!la!tercera!fase!
se! explican! los! conceptos! de! interfaz! y! experiencia! de! usuario^! por! último! se!
explican!los!tipos!de!protocolos!mediante!los!cuales!se!realizó!todo!el!proceso!de!
comunicación!de!un!entorno!a!otro.!!
!
Sensor#de#
entrada#
Leap#
Motion#
Entornos#de#
Programación#
Diseño## Protocolos'de'
Interfaz#de# Comunicación
Usuario
Gráfico#(1)#secciones#de#desarrollo#del#Marco#Teórico#
21
!
3.1!
SENSOR!DE!ENTRADA!LEAP!MOTION!!
!
3.1.1! Construcción!y!Componentes!
El! Leap! Motion! es! un! dispositivo! capaz! de! interpretar! de! forma! tridimensional!
gestos! dactilares! y! elementos! tales! como:! esferos,! lápices,! palillos! entre! otros!
desde! un! ordenador.! Estos! los! interpreta! por! medio! de! la! forma,! posición! y!
aceleración.!Este!dispositivo!trabaja!bajo!el!mismo!principio!de!funcionamiento!que!
el!Kinect!pero!de!una!forma!más!precisa,!debido!a!que!el!Leap!Motion!toma!200!
cuadros! por! segundo,! dependiendo! del! rendimiento! del! ordenador! al! que! esta!
conectado,! mientras! que! el! Kinect! toma! 30! (Meera,! 2013).! ! En! la! Imagen! (2)! se!
observa!el!dispositivo.!
!
La#imagen#muestra#un##Dispositivo#Sensor#de#Entrada#Leap#Motion#
Raquel,!2013.!Leap!Motion,!dispositivo.!
El! sistema! consiste! en! un! pequeño! lector! el! cual! está! conformado! en! su! interior!
por! dos! sensores! cámaras! CCD! y! 3! leds! infrarrojos.! Las! cámaras! CCD! del! Leap!
Motion! presentan! un! principio! de! funcionamiento! basado! en! tomar! la! luz! y!
convertirla!en!una!señal!eléctrica!(García,!2004),!donde!cada!cámara!cuenta!con!
un!sensor!monocromático!sensible!a!la!luz!infrarroja.!Los!leds!infrarrojos!!son!un!
tipo! de! diodos! emisores! de! luz,! los! cuales! se! encargan! de! iluminar! la! zona! de!
cobertura,! varían! la! iluminación! dependiendo! de! la! luz! que! haya! en! dicha! zona,!
22
asegurando! la! resolución! de! la! imagen! (Belda,! 2015).! Estos! cámaras! CCD!
detectan! los! movimientos! de! cada! mano! individualmente! y! el! movimiento! de! los!
dedos!de!forma!independiente.!!
El! Leap! Motion! es! por! lo! tanto! un! sistema! de! captura! en! 3D! que! controla! el!
ordenador! sin! necesidad! de! tocarlo,! brindando! un! espacio! hasta! de! 8! metros!
cúbicos! de! interacción! y! precisión,! no! tiene! un! límite! de! puntos! de! detección,!
teniendo!una!respuesta!casi!instantáneo!(Castromil,!2007).!Se!conecta!por!medio!
de! entrada! USB,! en! la! imagen! (3)! se! puede! observar! cómo! está! compuesto!
internamente!el!dispositivo.!
!
La#imagen#muestra#los#componentes#internos#del#dispositivo#Leap#Motion!
!
3.1.2! Funcionamiento!
!
Los!datos!de!posición!de!la!mano!se!obtienen!por!medio!de!sus!!sensores!ópticos!
y! de! luz! infrarroja,! creando! un! !campo! de! puntos! basado! en! un! sistema! de!
coordenadas!cartesianas,!dónde!el!punto!de!origen!se!toma!en!el!centro!del!Leap!
Motion!y!los!ejes!X,Y!y!Z!son!definidos!como!se!puede!observar!en!la!imagen!(4).!!
23
!
##
La#Imagen#muestra#la#Posición#de#Funcionamiento#estandart#del#Leap#Motion#
Leap!Motion,!developer!portal.!API!overview.!The"Leap"Motion"right?handed"coordinate"
system.!
Para!crear!este!esquema!y!realizar!el!seguimiento!de!las!manos,!el!Leap!Motion!
combina! sus! datos! de! sensores! con! un! modelo! interno! de! las! extremidades!
superiores,!y!así!lograr!una!alta!precisión.!En!este!modelo!se!tuvo!en!cuenta!las!
falanges! proximales,! medias! y! distales! como! se! observa! en! la! !Imagen! (5),! cada!
una!de!estas!arroja!una!posición!en!los!3!ejes!descritos!anteriormente,!aportando!
información!sobre!cada!una!de!las!manos.!
La#Imagen#muestra#un#Modelo#Interno#de#la#mano!!
Leap!Motion,!developer!portal.!API!overview.!
24
•! Metacarpiano:#Hueso#dentro#de#la#parte#que#conecta#el#dedo#a#la####muñeca#
(excepto##el#pulgar)!
•! Falange'proximal:#Hueso#en#la#base#del#dedo,#conectado#a#la#palma#
•! Intermedio'falange:#Hueso#medio#del#dedo,#entre#la#punta#y#la#base#
•! Falange'distal:#Hueso#terminal#en#el#extremo#del#dedo#
El!modelo!utilizado!para!el!pulgar,!no!se!ajusta,!puesto!que!es!diferente,!ya!que!el!
dedo! pulgar! tiene! un! hueso! menos! que! los! otros! dedos.! Sin! embargo,! para!
facilidad! de! programación,! el! modelo! pulgar! del! Leap! Motion! incluye! un! hueso!
metacarpiano!de!longitud!cero,!de!modo!que!el!pulgar!tiene!el!mismo!número!de!
huesos!que!los!otros!dedos!(Api!Overview,!Portal!de!Desarrolladores).!
El!modelo!de!la!mano!se!diseñó!para!obtener!diferentes!datos!de!2!brazos,!pero!
cuándo!se!ingresan!más!de!dos!manos!u!objetos,!el!seguimiento!del!dispositivo!no!
puede! soportarlas! a! ellas,! ni! a! los! objetos.! Debido! a! esto,! el! Leap! Motion! solo!
muestra!una!de!las!3!manos!como!se!muestra!en!la!imagen!(6).!Todos!sus!dedos!
deben! ser! claramente! visibles! y! separados,! de! no! ser! así,! si! dos! dedos! se!
encuentran!muy!juntos!podría!tomarlos!como!uno!solo.!!
!
!
Imagen##Visualizador#Leap#Motion#más#de#dos#manos#
25
!
3.1.3! Información!Proporcionada!a!Desarrolladores!
Leap!Motion!brinda!información!a!los!desarrolladores!que!se!interesan!por!realizar!
aplicaciones!con!este!dispositivo,!esto!a!través!de!la!implementación!de!la!SDK!y!
la!API.!!
3.1.3.1!
Kit!de!Desarrollo!de!Software!SDK!(Software!Development!
Kit)!!
Es!un!conjunto!de!herramientas!que!brindan!los!fabricantes!de!los!dispositivos!a!
desarrolladores,! logrando! así! la! generación! de! software! a! través! de! alguna!
documentación!técnica,!dicha!información!puede!incluir!librerías,!códigos!ejemplo,!
paquetes! de! software! e! infraestructura! digital.! De! esta! manera! se! permite! el!
desarrollo!de!aplicaciones!para!un!dispositivo,!en!un!sistema!operativo!o!lenguaje!
de! programación! especifico,! algunos! ejemplos! son! JavaScript,! Unity! /C#,! C++,!
Java,! Phyton,! Objective! –! C,! etc.! ! Este! kit! se! obtiene! desde! la! página! Web! del!
fabricante!del!dispositivo.!(http://techterms.com/definition/sdk)!!
!
3.1.3.2!
Interfaz!
de!
Programación!
de!
Aplicaciones!
API!
(Application!Progamming!Interface)!
!
Es! una! llave! de! acceso! a! funciones! que! permiten! hacer! uso! de! un! servicio!!
provisto! por! los! fabricantes,! por! medio! de! esta,! se! obtiene! la! información!
específica!!para!la!adquisición!de!datos!provenientes!del!Leap!Motion.!El!modelo!
que!los!fabricantes!utilizan!para!esta!adquisición,!se!basa!en!establecer!una!serie!
de!clases!o!módulos!los!cuales!se!pueden!observar!en!la!imagen!(7).!Estas!clases!
representan! las! ! partes! en! las! que! fue! segmentado! el! brazo! y! la! mano! para!
realizar!toda!su!caracterización.!!
!
!
!
!
!
!
26
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Imagen##Modelo#Segmentación#Brazo#de#la#API#
!
3.2! ENTORNOS!DE!PROGRAMACIÓN!Y!DAW!
3.2.1! Pure!Data!!
Es! un! Entorno! de! programación! libre! desarrollado! por! Miller! Puckette,! el! cual!
maneja! una! programación! por! medio! de! bloques! y! es! multiplataforma.!
Desarrollado!especialmente!para!audio!video,!y!procesamiento!de!imagen,!permite!
a! ! músicos,! artistas! visuales,! investigadores! y! desarrolladores! crear! software!
gráficamente,! sin! necesidad! de! escribir! líneas! de! código.! PD! es! usado! para!
procesar!y!generar!vídeo!y!sonidos!en!interfaz!MIDI!(Brinkmann,2012),!se!puede!
trabajar!fácilmente!en!redes!locales!y!remotas!para!integrar!tecnología!usable.!Sus!
librerías! externas! son! escritas! en! C++.! PD! puede! descargarse! en! diferentes!
versiones.!Las!dos!distribuciones!!principales!son!!
3.2.1.1!
PD! vanilla! (o! simplemente! Pd):! el! núcleo! de! Pure! Data,!
centrándose! en! la! señal! de! audio! y! procesamiento! de! mensajes!
MIDI.!
3.2.1.2!
PD!extendida:!una!versión!de!vanilla!Pd!que!viene!con!muchas!
bibliotecas! escritas! por! la! comunidad.! PD! extendida! puede!
27
utilizarse!para!el!procesamiento!de!gráficos!(biblioteca!de!GEM),!
OSC! comunicaciones,! procesamiento! de! archivos! binarios,!
streaming! de! audioTvisuales,! modelado! físico,! espectáculos!
basados!en!sensores!y!mucho!más!(Pure!Data,2015)!!
!
Ambas! distribuciones! están! disponibles! para! GNU/Linux,! Windows! o! Mac! OSX,!
así! como! para! otros! sistemas! operativos.! ! La! versión! utilizada! en! el! presente!
proyecto! fue! la! Extendida,! debido! a! la! necesidad! de! utilizar! librerías! como! mr!
peach!para!establecer!comunicación!a!través!de!OSC.!
3.2.2! Unity!
Unity! es! una! plataforma! de! programación! para! crear! videojuegos,! aplicaciones!
interactivas,! visualizaciones,! animaciones! 3D! en! tiempo! real.! Se! programa!
mediante!Scripts,!es!decir!no!solo!se!puede!usar!librerías!en!C++!como!la!mayoría!
de! plataformas,! también! se! utilizan! códigos! en! JavaScript,! C#,! entre! otros.! El!
resultado! puede! ser! exportado! a! múltiples! plataformas! como! Mac,! PC,! iPhone! y!
Android!entre!otros!(Unity!Technologies,2015).!
3.2.3! Ableton!Live!DAW!(Digital!Audio!Workstation)!!
Es!un!secuenciador!de!audio!destinado!a!artistas!y/o!productores!musicales.!Sus!
principales! aplicaciones! son:! shows! o! música! en! vivo! ejecutando! en! cada! pista!
fragmentos!de!audio!o!MIDI!llamados!clips!y!para!composición!desde!un!estudio!
de!grabación.!De!esta!manera!Ableton!Live!permite!realizar!sesiones!en!directo!o!
en!estudios!de!grabación.!
3.3!
DISEÑO!INTERFAZ!DE!USUARIO!
3.3.1! Interfaz!de!Usuario!UI!(User!Interface)!!
!
Es!el!medio!por!el!cual!el!usuario!puede!comunicarse!con!una!máquina,!un!equipo!
o!una!computadora.!Comprende!todos!los!puntos!de!contacto!entre!el!usuario!y!el!
28
equipo.! La! mayoría! de! interfaces! de! usuario! presentan! un! diseño! en! el! cual! se!
incluyen!elementos!como!menús,!ventanas,!teclado,!mouse,!entre!otros.!!
3.3.1.1!
Tipos!de!Interfaz!de!Usuario!(UI)!
!
Dentro!de!las!Interfaces!de!usuario!se!pueden!distinguir!básicamente!dos!tipos!de!
interacción!entre!esta!y!el!usuario:!
!
•! Interfaces! táctiles:! Las! cuales! representan! gráficamente! un! panel! de!
control!en!una!pantalla!sensible!que!permite!interactuar!con!el!dedo!de!
forma!similar!a!si!se!accionara!un!control!físico.!
!
•! Interfaz!Gráfica!de!Usuario!(GUI),!las!que!permiten!comunicarse!entre!
el! humano! y! la! máquina! de! una! forma! muy! rápida! e! intuitiva!
representando! gráficamente! los! elementos! de! control! y! medida.! Ésta!
utiliza! un! conjunto! de! imágenes! y! objetos! gráficos! para! representar! la!
información! y! acciones! disponibles! en! la! interfaz.! Su! principal! uso,!
consiste! en! proporcionar! un! entorno! visual! sencillo! para! permitir! la!
comunicación! con! el! sistema! operativo! de! una! máquina! o! computador.!
En!el!contexto!del!proceso!de!interacción!personaTordenador,!la!interfaz!
gráfica! de! usuario! es! el! medio! de! interacción! que! permite! el! uso! y! la!
representación! de! un! lenguaje! gráfico,! que! permite! la! interacción!
amigable!con!un!sistema!informático!(!Aránzazu,!2015).!
!
3.3.1.2!
Tipos!de!Interfaz!Gráfica!de!Usuario!(GUI)!
!
•! Interfaz!de!usuario!de!pantalla!táctil!!
Pantalla! que! al! ser! tocada! efectúa! los! comandos! del! mouse! en! el!
software,! un! ejemplo! de! un! GUI! de! uso! específico! es! el! touchscreen! o!
pantalla!táctil!popularizado!en!los!últimos!años!en!nuevos!dispositivos.!
!
29
!
•! Interfaz!Natural!de!Usuario!NUI!!
!
Son!aquellas!en!las!que!se!interactúa!con!un!sistema,!aplicación,!entre!
otras,! sin! utilizar! dispositivos! de! entrada! como! mouse,! teclado,! lápiz!
óptico,!etc.!En!lugar!de!éstos!se!utilizan!la!parte!superficial!de!los!dedos!
(Mtz,!2015).!
!
3.3.1.3!
Experiencia!de!Usuario!UX!(User!Experience)!
!
Es! el! conjunto! de! factores! y! elementos! relativos! a! la! interacción! del! usuario,! con!
un! entorno! o! dispositivo! concretos,! donde! se! evalúa! la! respuesta! del! usuario!
siendo! positiva! o! negativa! dependiendo! de! su! percepción.(Arhippainen! y! Tähti,!
2003).!La!experiencia!del!usuario!tiene!por!objetivo!la!creación!de!productos!que!
resuelvan! necesidades! concretas! de! sus! usuarios! finales,! consiguiendo! la! mayor!
satisfacción! y! mejor! experiencia! de! uso! posible! con! el! mínimo! esfuerzo.! Para! el!
diseño! cada! decisión! tomada! debe! estar! basada! en! las! necesidades,! objetivos,!
expectativas,!motivaciones!y!capacidades!de!los!usuarios.!
!
3.4!
PROTOCOLOS!DE!COMUNICACIÓN!!
!
3.4.1! Protocolo!MIDI!(Interfaz!Digital!de!Instrumentos!Musicales)!
Este! es! un! protocolo! de! comunicación! serial! estándar,! el! cual! permite! a!
controladores,! secuenciadores,! sintetizadores,! computadores! y! otros! dispositivos!
musicales! electrónicos! comunicarse! en! red! para! compartir! información! y! generar!
sonidos!(Smith,!1970).!
3.4.1.1!
Transmisión!MIDI!
MIDI! utiliza! una! velocidad! de! transferencia! de! 31.250! Kbps,! los! mensajes! MIDI!
están!compuestos!de!10!bits!donde!se!incluye!un!bit!de!inicio!y!uno!de!parada,!los!
30
ocho! bits! restantes! son! los! más! relevantes! ya! que! contienen! la! información! del!
mensaje!MIDI!(Moreno,!2007).!
3.4.1.2!
Mensaje!MIDI!
Es!un!sistema!digital!por!lo!que!sus!valores!y!mensajes!están!representados!por!
una!serie!de!datos!de!On!y!Off,!representados!por!un!bit!y!su!valor!efectivo!solo!
podrá!ser!1!o!0!respectivamente,!para!dar!mensajes!hace!falta!agrupar!bits,!esto!
se!logra!a!través!de!un!byte!que!es!un!grupo!de!ocho!bits (Moreno,!2007).
3.4.1.2.1! Mensaje!de!nota!On/off!
Cuando!se!oprime!una!tecla!en!el!controlador,!se!emite!un!mensaje!MIDI!nota!ON!
la!primera!el!byte!de!estado!indicará!por!cual!canal!se!emitirá!el!mensaje,!seguido!
por!dos!bytes,!el!segundo!especifica!el!número!de!tecla!y!el!tercero!el!valor!de!la!
velocidad! de! la! pulsación,! el! cual! determina! que! tan! fuerte! fue! pulsada.! En! el!
momento!de!soltar!la!tecla!en!el!controlador,!se!emite!un!mensaje!MIDI!nota!OFF!
el!cual!también!lleva!byte!de!datos!que!determinará!la!nota!y!la!velocidad!con!que!
se!ha!soltado,!aunque!este!último!no!se!tiene!en!cuenta!puesto!que!se!apaga!por!
medio! del! byte! de! estado! que! en! este! caso! sería! apagado! (OFF),! (Caballero,!
2013).!
3.4.1.2.2! Mensaje!de!cambio!de!programa!
Este! mensaje! modifica! los! elementos! que! generan! sonido! dentro! de! un!
sintetizador,! se! refiere! al! cambio! del! instrumento! activo.! Con! un! byte! de!
encabezamiento!(1100)!seguido!por!el!byte!de!datos!que!determinaría!el!número!
de!programa,!se!consigue!cambiar!el!mensaje!inmediatamente.(Caballero,!2013).!
3.4.1.2.3! Mensaje!de!cambio!de!control!
Un! Cambio! de! control! permite! controlar! diversas! funciones! de! un! sintetizador,!
añadir!cambios!sutiles!a!una!interpretación,!se!incluyen!la!mayoría!de!los!controles!
de! expresión! de! sonido! como^! modulación! (es! decir,! vibrato! y! tremolo),! pedal!
31
sostenido,! pedal! celeste! entre! otros.! Estos! mensajes! tienen! un! número! ó! valor!
asignado! que! se! utilizan! en! todos! los! instrumentos! MIDI,! y! engloba! 128! posibles!
mensajes! de! control! diferentes! los! cuales! modifican! el! volumen,! la! modulación! y!!
la!reverberación!(Puig,!1997).!
3.4.1.2.4! Mensaje!de!Sistema!
Los! Mensajes! de! sistema! pueden! enviarse! independientemente! de! los! canales!
MIDI!a!los!que!haya!ajustado!los!dispositivos!emisor!y!receptor,!ya!que!se!utilizan!
para! controlar! el! sistema! MIDI! en! general,! por! ejemplo,! pueden! utilizarse! para!
sincronizar! un! secuenciador! y! una! unidad! de! ritmo! de! manera! que! toquen! al!
mismo!tiempo,!o!para!iniciar!o!parar!una!interpretación,!o!simplemente!para!evitar!
problemas!en!el!sistema!MIDI.
•! Bit!mas!significativo!MSB!(Most!significant!bit)!!
El! Bit! más! significativo! o! también! llamado! bit! de! orden! superior,! es! el! bit! que! de!
acuerdo! a! su! posición! tiene! el! mayor! valor,! usualmente! ubicado! en! la! parte!
izquierda!del!mensaje.!!Éste!solo!podrá!ser!1(negativo)!o!0(positivo).!
•! Byte!de!Datos!
Un! byte! es! el! conjunto! de! ocho! bits,! siendo! un! bit! una! unidad! mínima! de!
información! de! computadoras! donde! (0)! es! apagado! y! (1)! es! encendido^! estos!
únicamente! pueden! almacenar! dos! valores! (0)! y! (1),! ! cuyo! almacenamiento!
guarda!un!carácter!letra,!número!o!signo!especial!(Olvera,!2010).!!
3.4.1.3!
Controlador!MIDI!
Es! un! dispositivo! carente! de! sonidos! pero! es! capaz! de! interpretar! y! reproducir!
mensajes!MIDI,!por!lo!general!los!controladores!convencionales!tienen!apariencia!
de!un!teclado!musical,!tal!y!como!se!puede!observar!en!la!Imagen!(9)!,!se!pueden!
modificar! parámetros! mediante! sus! elementos! físicos! como! por! ejemplo,!
modulaciónTafinación! y! demás.! Puesto! que! son! muy! comunes! no! cuentan! con!
32
tantas! opciones! para! el! manejo! de! programas! especializados! en! bancos! de!
sonidos! como! reason! o! kontakt! los! demás! controladores! existentes! cuentan! con!
diferentes! configuraciones! previas! para! facilitar! el! manejo,! pero! el! concepto! o! la!
aplicación!es!la!misma.!Los!controladores!MIDI!cuentan!en!la!parte!posterior!con!
entrada!y!salida!MIDI!.!(Academia!unimúsica,!2014).!
#
La#imagen#muestra#el##Controlador#MIDI#convencional#
AKAI,!2012.!Controlador!MIDI!.!Teclado!controlador!de!25!teclas!con!pads!MPC.!
!
!
3.4.2! Protocolo!OSC!
OSC! (Open! Sound! Control)! es! un! protocolo! para! ! compartir! información! musical!
en! tiempo! real! sobre! una! red,! es! más! flexible! y! preciso! que! el! protocolo! MIDI,!
permitiendo!una!comunicación!a!un!nivel!superior,!debido!a!los!datos!numéricos!y!
simbólicos! en! alta! resolución,! se! pueden! enviar! mensajes! empaquetados! para!
aquellos! eventos! que! deben! ocurrir! simultáneamente.! Puede! ser! producido! por!
varios! protocolos,! pero! comúnmente! se! utiliza! el! (User! Datagram! Protocol).!!
(DidácticaTMúsica!electrónica,!2010).!
3.4.3! Protocolo!IP!!
'
El!Protocolo!de!Internet!(Internet!Protocol),!permite!el!desarrollo!y!!transmisión!de!
paquetes! de! datos! (datagramas)! bidireccionalmente,! de! un! origen! a! un! destino!
33
previamente! enlazado! o! fuera! de! conexión.! Para! transportar! dichos! paquetes!
utiliza!direcciones!numéricas!denominadas!direcciones!IP.!Los!equipos!de!una!red!
utilizan!estas!direcciones!para!comunicarse,!de!manera!que!cada!equipo!de!la!red!
tiene!una!dirección!IP!exclusiva.!(Ecured,!2015).!
!
4!
DESARROLLO!INGENIERIL!
Para! lograr! el! objetivo! planteado! en! el! presente! proyecto,! fue! necesario!
implementar!las!metodologías!de!desarrollo!de!software,!cumpliendo!eficazmente!
los! objetivos! específicos^! se! planteó! una! cadena! lógica! de! actividades! a! llevar! a!
cabo.!De!esta!forma!se!desarrolló!el!controlador!MIDI!basado!en!reconocimiento!
dactilar!a!partir!de!los!requerimientos!funcionales,!no!funcionales,!casos!de!uso!y!
la!arquitectura!de!software.!!!
!
4.1!Requerimientos!De!Usuario!
!
4.1.1! Funcionales!
!
•! Detección!de!Índice!como!cursor.!
•! Selección!y!activación!de!parámetros!por!medio!de!un!clic.!
•! Generación!de!gestos!dactilares.!
•! Configuración!de!parámetros.!
!
4.1.2! No!Funcionales!
•! API!
!
!
•! SDK!
•! Leap!Motion!
•! Computador!Mac!Book!Pro!
•! Dos!plataformas!de!programación!que!permitan:!Detección!y!registro!de!
movimientos! dactilares^! y! la! segunda,! desarrollo! de! una! interfaz! al!
usuario!
34
•! Software!de!Producción!Musical!
•! Protocolos! que! permitan! a! dispositivos! musicales! electrónicos!
comunicarse!!entre!ellos!para!compartir!información!y!generar!sonidos!
!
4.2!!CASOS!DE!USO!!
Por! medio! de! los! casos! de! uso,! se! muestran! los! requerimientos! funcionales! del!
controlador! MIDI! basado! en! reconocimiento! dactilar,! el! software! suministra! el!
cambio!de!control!y!parámetros!de!audio!que!el!usuario!requiera,!además!define!el!
procedimiento! para! trabajar! adecuadamente! la! aplicación.! En! el! gráfico! (2)! se!
observa!el!modelo!de!caso!de!uso!para!el!controlador.!
!
!
!
!
!
!
#
#
#
#
Gráfico#[2]#casos#de#uso#
#
#
35
#
Tabla#1#(Primer#Caso#de#Uso#para#el#Click)#
#
Tabla#2#(Curso#Normal#de#los#Eventos#para#el#Primer#Caso#de#Uso)#
36
#
Tabla#3#(Segundo#Caso#de#Uso#para#el#Desplazamiento#Y)#
#
Tabla#4#(Curso#Normal#de#los#Eventos#para#el#Segundo#Caso#de#Uso)#
#
#
#
37
#
Tabla#5#(Tercer##Caso#de#Uso#para#el#Desplazamiento#X)#
#
Tabla#6#(Curso#Normal#de#los#Eventos#para#el#Tercer#Caso#de#Uso)#
#
#
38
#
Tabla#7#(Cuarto##Caso#de#Uso#para#el#Desplazamiento#Z)#
#
#
Tabla#8#(Curso#Normal#de#los#Eventos#para#el#Cuarto#Caso#de#Uso)#
#
39
#
Tabla#9#(Quinto#Caso#de#Uso#para#el#Desplazamiento#Z#con#la#mano#cerrada)#
#
Tabla#10#(Curso#Normal#de#los#Eventos#para#el#Quinto#Caso#de#Uso)#
#
#
40
#
Tabla#11#(Sexto#Caso#de#Uso#para#el#Gesto#Rotacional#Knob)#
#
Tabla#12#(Curso#Normal#de#los#Eventos#para#el#Quinto#Caso#de#Uso)#
#
#
41
4.3!!ARQUITECTURA!DE!SOFTWARE!
La! arquitectura! de! software! indica! de! forma! gráfica! el! funcionamiento! del!
controlador,! especificando! la! ! estructura! de! sus! partes! y! la! interacción! entre! las!
mismas.!Ver!gráfico!(3).!!
!
!
!
!
!
!
!
!
Gráfico#(3)#Arquitectura#de#software#del#proyecto.#
#
Cuando!se!Inicia!la!aplicación!la!primera!capa,!es!decir,!el!primer!software!con!el!
que!tendrá!interacción!el!usuario!es!Unity!3D!el!cual!esta!representado!como!un!
archivo! ejecutable,! allí! el! usuario! podrá! elegir! diferentes! tipos! de! parámetros! a!
controlar!los!cuales!le!informaran!su!estado!(activo/desactivo)!a!Pure!Data,!siendo!
este! la! capa! media! con! la! que! mantiene! una! comunicación! bidireccional,! pues!
unity! le! informa! que! botón,! fader! o! knob! se! encuentra! habilitado! por! el! usuario! y!
pure! data! responde! con! la! programación! del! gesto,! Pure! data! a! su! vez! envía!
directamente! sin! necesidad! de! pasar! por! unity! el! mensaje! MIDI! al! secuenciador!
Ableton! live! quien! es! la! tercera! y! ultima! capa! de! la! arquitectura,! pues! este! es! el!
encargo!de!reproducir!el!sonido.!!
42
!
Gráfico#(4)#Diagrama#de#la#plataforma#de#desarrollo.#
#
Se!establecieron!4!etapas!para!lograr!los!objetivos!del!presente!proyecto^!éstas!se!
pueden! observar! en! el! Gráfico! (4).! Dónde! la! primera! etapa! hace! énfasis! a! la!
adquisición!de!datos!a!través!de!la!API!e!interpretación!de!los!mismos,!estos!son!
captados! por! el! sensor! tras! el! movimiento! dactilar! realizando! todo! el! proceso! de!
programación!de!los!6!gestos!y!asignación!de!efectos.!Una!segunda!etapa!orienta!
al!proceso!de!!comunicación,!haciendo!uso!del!protocolo!MIDI!para!el!control!del!
DAW!y!protocolo!OSC!para!la!comunicación!con!la!interfaz!gráfica.!En!la!tercera!
etapa! se! establecen! las! directrices! y! objetivos! tenidos! en! cuenta! al! diseñar! la!
interfaz!de!usuario!(UI).!Por!último!se!explica!todo!el!proceso!de!!implementación!
de!la!interfaz!gráfica.!
43
Comunicación
•Implementación#del#
SDK#y##la#API
•Adquisición#de#datos
• Desarrollo#del#Patch
•Programación#de#Gesos
TAdquisición'e'
Interprestación'
de'los'Datos
•Protocolo#IPiUDP
•Comunicación#
Bidireccional#con#Unityi
OSCiUDP
•Comunicación#MIDI
•Directrices#de#
UX#y#UI
•Objetivos#de#
la#Interfaz
Diseño#
UI
Implementación#
de#Interfaz#de#
Usuario
•Desarrollo#
de#la#Interfaz#
de#Usuario
•Comunicació
n#con#Pure#
Data
•Asignación#
MIDI
#
Gráfico#(5)#Diagrama#de#bloques#estructural#del#proyecto.!
!
4.4!!DESARROLLO!DE!SOFTWARE!
!
!
4.4.1! Adquisición!e!Interpretación!de!los!Datos!!
4.4.1.1! Implementación! del! SDK! y! API! para! la! Adquisición! de! los!
Datos.!!
Para! el! desarrollo! del! software! se! hizo! uso! del! SDK! que! contiene! la! librería!
requerida!para!el!entorno!de!programación!Pure!Data.!!Así!mismo!!se!utilizó!la!API!
de! Leap! Motion! para! Pd! obteniendo! la! información! de! identidad,! posición! y!!
dirección! de! los! dedos! y! manos! como! se! muestra! en! el! diagrama! de! clases,!
gráfico!(5).!!
44
De!esta!manera!serán!requeridos!únicamente!los!módulos!Hand!donde!determina!
toda!la!información!referente!a!la!mano!y"Finger(Point)"que!a!su!ves!lo!realiza!para!
los! dedos! de! cada! mano," y! así" adquirir! la! información! previamente! descrita,!
indicando!adicionalmente!el!número!de!dedos!ubicados!en!el!campo!de!acción!del!
Leap!Motion,!siguiendo!el!modelamiento!interno!de!la!mano.!!
!
Gráfico#(6)#Diagrama#de#Clases#UMLaImplementación#del#API#“Leap#Motion”#
4.4.1.2!
Funcionamiento!de!la!API!
!
Dentro! de! Pure! Data! se! implementó! la! caja! denominada! Leap! Motion,! contiene!
todo! el! proceso! de! modelamiento! y! desarrollo! para! la! adquisición! de! los! datos,!
segmentando!el!!brazo!en!cuatro!regiones!importantes:!Antebrazo,!mano,!huesos!
y!dedos!representado!en!la!API!como!clases!ver!imagen!(9).!!
!
45
!
Imagen#(9)#Segmentación#del#brazo#y#la#mano#por#módulos."
Para! representar! la! captura! de! imagen! de! las! cámaras! CCD! del! Leap! Motion! se!
define! la! clase! Image,! donde! se! realiza! el! proceso! de! calibración! automático!
definiendo! una! cuadricula! de! 64! x! 64! puntos,! esto! mediante! la! función!
bytesPerPixel()." Cada! punto! representa! un! rayo! proyectado! en! la! cámara,! este!
rayo!está!compuesto!por!valores!de!luminancia!los!cuales!permiten!la!definición!de!
cada! pixel! en! la! cuadricula! de! puntos,! se! puede! encontrar! el! valor! del! brillo! para!
cualquier!rayo!proyectado!por!medio!de!la!interpolación!entre!los!puntos!de!datos!
de! la! cuadricula.! Los! rayos! proyectados! en! la! cámara! ingresan! con! una! escala!
amplia!que!debe!ser!reducida,!debido!a!que!la!escala!por!defecto!proyecta!rayos!
que!se!ubican!fuera!del!mapa,!generando!imprecisiones!en!el!sistema!de!captura.!!
!
Debido! a! la! existencia! de! dos! sensores! de! captura,! se! otorga! a! cada! uno! su!
respectiva! identificación,! donde! se! establece! un! ID! 0! para! las! imágenes!
pertenecientes! a! la! cámara! izquierda! a! través! de! la! función! int_32" id(),! aquellas!
con!un!ID!1!son!las!pertenecientes!a!la!cámara!derecha,!esto!siempre!y!cuando!el!
dispositivo! se! encuentre! ubicado! correctamente,! es! decir! con! el! LED! verde!
apuntando!hacia!el!usuario.!
!
46
La! encargada! de! verificar! que! el! dispositivo! esté! conectado! físicamente! y!
proporcionar! el! ID! correspondiente! a! cada! cámara,! el! campo! de! visión! con!
respecto! al! dispositivo,! la! posición! y! orientación! en! coordenadas,! es! la! clase!
Device.! Utilizando! esta! información,! se! calcula! la! distancia! entre! la! posición! de!
entrada! y! la! pared! más! cercana,! definiendo! una! vista! volumétrica! la! cual! está!
representada! por! una! pirámide! invertida! alineada! en! eje,! tomando! el! punto! de!
origen!desde!el!centro!del!dispositivo.!
!
Imagen#(10)#Vista#Volumétrica#de#la#API#del#Leap#Motion.#
!
Con!el!propósito!de!intercambiar!la!información!entre!clases!se!establece!la!clase!
Listener,! indicando! cambios! de! eventos! y! si! el! Leap! Motion! se! encuentra!
conectado! para! comenzar! a! recibir! frames! de! datos.! Todas! las! funciones! deben!
estar!comunicadas!con!la!clase!Frame!la!cual!es!la!base!de!ésta!API^!informando!
en! cada! frame! por! segundo! todos! los! cambios! de! posición,! orientación! y!
movimiento! ocurridos! en! el! campo! de! acción! del! Leap! Motion.! Éstos! cambios! se!
capturan!mediante!la!clase!Vector,!donde!se!puede!determinar!la!dirección!lineal!
y/o!rotacional!de!los!vectores,!a!través!del!método!de!la!regla!de!mano!derecha,!el!
cual! consiste! en! utilizar! el! dedo! pulgar,! índice! y! corazón.! Para! determinar! la!
ubicación!en!el!plano!cartesiano,!como!se!observa!en!la!imagen!(12).!
!
47
!
La#imagen#muestra#la#regla#de#la#mano#derecha"
La! clase! Vector! se! encuentra! directamente! relacionada! con! las! clases! que! se!
establecieron! para! hacer! el! modelamiento! del! brazo! humano! como! está!
representado!en!la!Imagen!(10),!dónde!los!huesos!de!todo!el!brazo!se!representan!
por! medio! de! clase! Bone.! Cada! vector! se! asocia! a! un! hueso! para! determinar! la!
orientación!de!éste,!analizándolo!en!los!tres!ejes.!Se!tomó!principalmente!el!punto!
medio!del!hueso!distal,!para!esto!se!estableció!la!función!Vector_center(),!y!para!
obtener! la! dirección! de! la! base! del! hueso! hacia! la! punta,! la! función!
Vector_direction().!!
Esta!información!será!transmitida!a!las!clases!hand!y!finger,!para!crear!los!dedos!
que!consecuentemente!se!utilizarán!para!la!construcción!de!la!mano.!La!posición!
del! dedo! se! determinará! a! partir! de! la! información! de! los! 3! huesos! que! lo!!
componen,!ordenándolo!desde!la!base!hasta!la!punta!indexado!de!0!a!2^!éste!es!
construido! a! partir! de! la! unión! de! esos! vectores,! formando! una! matriz! que!
determina!la!orientación!del!dedo.!!
Para!la!construcción!de!la!mano,!se!toman!los!valores!adquiridos!por!los!dedos!y!
adicionalmente!los!vectores!para!la!normal!de!la!palma,!la!cual!está!definida!por!
una!matriz!de!3!ejes.!
!
48
!
"
La!imagen!muestra!!Normal!de!la!palma!
Leap!Motion,!developer!portal.!Motion!tracking!data.!
!
!
4.4.1.3!
Desarrollo!del!Patch!
!
4.4.1.3.1! Calibración!de!altura!de!Interacción!!
Es!necesario!realizar!un!proceso!de!calibración,!de!tal!forma!que!las!distancias!y!
velocidades! registradas! se! acerquen! a! la! realidad.! Los! sensores! deben! estar!
posicionados! sobre! el! eje! X,! y! se! debe! seleccionar! la! opción! de! “Altura" de"
Interacción" Automática”! para! que! el! dispositivo! sea! capaz! de! regular!
automáticamente!la!cantidad!de!luz!que!ingresa!a!los!sensores,!como!se!muestra!
en!la!Imagen!(13).!
En!el!caso!de!no!querer!implementar!la!interacción!automática,!se!puede!regular!
la!altura!de!funcionamiento!que!varía!desde!25!hasta!300!mm!aproximadamente,!
por!encima!del!dispositivo.!
49
!
!
Imagen#(13)#Calibración#Altura#de#Interacción#Leap#Motion#–#Automática!
!
!
4.4.1.3.2! Identificación!de!Mano!Izquierda!y!Derecha!!
!
El!firmware!del!Leap!Motion!crea!un!punto!de!referencia!central!de!la!mano!en!un!
plano! bidimensional! para! identificar! los! 5! dedos:! pulgar,! índice,! medio,! anular! y!
meñique!(imagen!14).!Donde!Point0!siempre!será!el!dedo!pulgar!y!Point4!el!dedo!
meñique.!
!
!
!
50
!
!
#
Imagen#(14)#Nomenclatura#Puntos#de#la#Mano#sobre#plano#bidimensional.!
!
La! adquisición! de! datos! de! la! mano! establece! como! referencia! una! matriz! base!
que!está!definida!por!tres!ejes^!donde!el!eje!X!es!positivo!en!la!dirección!del!dedo!
meñique! para! la! mano! derecha,! por! consiguiente,! el! Leap! Motion! no! podrá!
identificar! ni! analizar! los! datos! de! la! mano! izquierda,! puesto! que! el! eje! X! es!
positivo!en!dirección!hacia!el!pulgar.!Esto!se!presenta!cuando!se!ingresa!una!sola!
mano! al! campo! de! acción,! con! lo! cual! la! API! no! podría! diferenciar! la! mano!
izquierda! de! la! derecha.! Para! identificar! cada! mano,! fue! necesario! diseñar! el!
módulo! de! separación! de! información,! enviando! los! datos! de! control! relevantes!
entre!los!que!se!encuentran:!Dirección!de!las!falanges!distales!en!el!eje!X!de!los!
dedos!meñique!y!pulgar,!posición!normal!de!la!palma!y!dirección!de!la!misma!en!
los!tres!ejes.!Con!esto!se!logró!trabajar!las!manos!como!variables!independientes!
y!programar!gestos!para!cada!mano. !
51
!
Figura#(1)#Exportación#datos#de#control#relevantes#fuera#del#lienzo#en#Pd!
Una!vez!se!pueden!manipular!los!datos!de!forma!independiente,!se!crea!una!clase!
denominada! Left/Right! la! cual! tiene! por! objeto! determinar! qué! mano! está! siendo!
ingresada!por!el!Usuario.!La!identificación!de!mano!derecha!o!izquierda!se!logra!a!
partir! de! dos! condicionales,! estos! consisten! en! el! análisis! de! la! dirección! que!
toman! las! falanges! distales! tanto! del! pulgar! como! del! meñique.! El! parámetro!
determina! que! la! mano! es! derecha! cuando! la! punta! del! dedo!pulgar,! es! decir,! la!
falange! distal! tiene! valores! negativos,! pues! se! encuentra! en! el! dominio! negativo!
del!plano!trazado!sobre!el!centro!de!la!mano.!La!punta!del!meñique!toma!valores!
positivos! y! ocurre! lo! mismo! con! la! mano! izquierda,! de! esta! manera! se! puede!
asegurar!el!reconocimiento!correcto!de!cada!mano!como!se!puede!observar!en!la!
Figura!(2).!
52
!
Figura#(2)#Programación#Diferencia#Mano#Derecha#de#Izquierda#
!
4.4.1.4!
Programación!de!gestos
Para! el! desarrollo! de! este! proyecto! fue! necesaria! la! creación! de! 6! gestos,! que!
obedecieron!a!los!parámetros!de!diseño!e!interacción!con!el!usuario!y!así!ofrecer!
una!experiencia!de!control!intuitiva.!A!continuación!se!describen!los!gestos!para!la!
utilización!del!controlador.!
!
53
!
4.4.1.4.1! Gestos!de!desplazamiento!por!ejes,!con!mano!abierta!
El! desarrollo! de! los! tres! primeros! gestos! fue! realizado! con! base! a! la! estructura!
física!de!un!potenciómetro!deslizable!(Fader)!,!por!lo!que!el!desplazamiento!de!la!!
mano! en! cada! eje! es! análogo! al! desplazamiento! del! fader,! es! decir,! que! el!
posicionamiento! de! la! mano! es! de! un! extremo! a! otro! según! el! eje! que! este!
asignado,!generando!un!movimiento!lineal!para!cada!gesto,!permitiendo!a!usuario!
asignar! hasta! 6! movimiento! de! fader! con! ambas! manos.! De! esta! manera,! el!
desarrollo!de!la!separación!de!mano!derecha!e!izquierda,!permite!que!el!usuario!
ingrese! las! dos! manos! en! el! campo! de! acción,! y! así! controlar! 6! diferentes!
parámetros!mediante!MIDI,!donde!se!asignan!3!para!mano!derecha!y!3!para!mano!
izquierda.!A!través!de!un!algoritmo!como!el!que!se!muestra!en!la!Figura!(3)!
Para! obtener! estos! parámetros! es! necesario! realizar! un! escalamiento! de! los!
valores!entregados!por!la!API,!y!así!lograr!una!variación!de!datos!en!un!rango!de!
0!a!127,!el!cual!es!necesario!para!realizar!la!comunicación!con!el!DAW!a!través!
del!protocolo!MIDI!
Una!vez!se!establece!la!escala!de!0!a!127!en!los!datos!de!los!gestos!entrantes,!se!
ejecuta! la! clase! declarada! anteriormente! Left/Right,! el! cual! identifica! si! la! mano!
ingresada!es!derecha!o!izquierda.!Al!activarse!una!sección!con!la!mano!derecha,!
izquierda! o! ambas.! Estos! datos! se! van! a! enrutar! de! tal! manera,! que! ejecute! un!
mensaje! particular! para! cada! mano! y! lo! enlace! a! un! mensaje! MIDI.! Al! no! haber!
una!activación!de!alguna!de!las!dos!manos!no!va!a!realizar!ninguna!acción.!!
54
Figura#(3)#Algoritmo#“programación”#de#Gestos#en#X,Y#y#Z!
4.4.1.4.2! Gesto!de!puño!de!cerrado!en!el!eje!Z!
El!cuarto!gesto!se!diseñó!con!el!fin!de!simular!una!acción!que!implique!generar!un!
movimiento! con! fuerza.! El! algoritmo! consiste! en! una! variación! de! posición! de! la!
palma!en!el!eje!Z!es!decir!profundidad,!se!logra!mediante!un!condicional!que!solo!
este! activo! cuando! el! usuario! empuñe! la! mano,! es! decir,! cuando! detecte! una!
mano! con! los! dedos! recogidos! en! forma! de! puño,! estableciendo! que! la! cantidad!
de!dedos!que!recibe!el!Leap!Motion!debe!ser!igual!a!cero.!Si!es!así,!el!condicional!
permite!el!paso!de!datos.!
!
!
55
4.4.1.4.3! Gesto!rotacional!
Este! gesto! fue! definido! como! una! rotación! de! la! mano! en! el! eje! Y,! se! definió!
pensando! en! las! directrices! de! diseño! de! UX! y! dentro! del! esqueumorfismo!
(representación! de! un! objeto! físico! a! uno! virtual)! de! girar! una! perilla! real! en! un!
dispositivo! de! control.! Es! decir,! representar! el! objeto! Knob! utilizado! en!
controladores!tangibles,!en!una!interfaz!gráfica.!
La!variación!en!dirección!para!el!dedo!Pulgar!en!el!eje!Y,!es!la!propiedad!usada!
para!la!implementación!de!este!gesto.!El!rango!posible!de!este!valor!va!desde!T1!
hasta! 1,! lo! que! permite! una! resolución! aceptable! en! el! escalamiento! necesario!
para!la!codificación!MIDI.!
!
Figura#(4)#Gesto#rotacional#knob!
56
4.4.1.4.4! Gesto!selección!y!ejecución!
Para!implementar!el!concepto!de!un!botón!que!actúe!como!switch!y!obedeciendo!
a!valores!de!encendidoTapagado,!se!toma!el!concepto!del!esqueumorfismo!para!la!
creación!de!los!gestos.!Se!realizó!entonces!un!modelo!que!es!similar!a!la!acción!
de!un!botón!el!cual!aprovechó!el!atributo!de!la!posición!de!la!palma!en!el!eje!Z!y!
de! esta! manera! controlar! un! cursor! que! sería! la! herramienta! de! control! digital.!
Para! accionar! los! botones! virtuales,! éstos! deben! ir! acompañados! por! una! regla!
que!determine!el!número!de!dedos!presentes,!el!cual!debe!ser!igual!a!1!para!llevar!
a!cabo!el!funcionamiento.!Su!algoritmo!se!presenta!en!la!Figura!(5)!
!
Figura#(5)#Algoritmo#del#cursor#
!
57
4.4.2! COMUNICACIÓN!!
Para! la! comunicación! entre! los! elementos! del! proyecto,! fue! necesaria! la!
implementación!de!dos!protocolos!de!comunicación!los!cuales!fueron!OSC!y!MIDI,!
protocolos!que!son!utilizados!por!los!software!implementados!en!el!desarrollo.!
4.4.2.1!
Comunicación!con!Unity!
En! el! análisis! de! diferentes! entornos! de! programación! para! el! desarrollo! de! la!
interfaz!de!usuario,!se!llegó!a!la!conclusión!de!utilizar!Unity!3D.!Debido!a!la!gran!
cantidad! de! herramientas! que! posee! para! el! desarrollo! visual! y! fácil! integración!
con!múltiples!plataformas!de!control!y!protocolos!de!comunicación.!
Para! la! conexión! entre! Pure! Data! y! Unity,! se! necesitó! una! conexión! mediante!
protocolo! de! comunicación! en! Red! UDP,! creando! puertos! virtuales! dentro! del!
sistema!operativo!para!la!comunicación!bidireccional!ilustrada!en!la!Figura!(6).!!
4.4.2.2!
Comunicación!mediante!UDP!
El!User!Datagram!Protocol!(UDP)!es!un!protocolo!del!nivel!de!transporte!basado!
en!el!intercambio!de!datagramas.!Permite!el!envío!de!datos!a!través!de!la!red!sin!
que!se!haya!establecido!previamente!una!conexión,!el!propio!datagrama!incorpora!
la!información!de!direccionamiento!en!su!cabecera.!Tampoco!tiene!confirmación!ni!
control!de!flujo,!por!lo!que!los!paquetes!pueden!adelantarse!unos!a!otros.!
Para!la!conexión!entre!!Pure!Data!y!Unity!mediante!UDP!fue!necesaria!la!creación!
de!un!puerto!de!salida!y!uno!de!entrada!en!ambos!entornos,!para!él!envió!OSC!de!
los!valores!codificados!provenientes!de!los!gestos,!que!controlarán!la!interfaz!de!
usuario! y! esta! a! su! vez,! enviará! los! datos! de! control! para! la!
activación/desactivación!de!los!efectos!enviados!al!DAW.!
La! conexión! entre! aplicaciones! se! logra! conectando! el! puerto! de! salida! de! Pure!
Data! mediante! la! caja! udpsend! Figura! (6),! la! cual! envía! bytes! mediante! una!
conexión!UDP!hacia!Unity!con!la!información!de!los!valores!de!gestos,!posición!de!
58
cursor! y! estado! de! click.! Para! la! recepción! de! datos! provenientes! de! Unity! se!
utiliza!otro!puerto!el!cual!recibe!la!información!usando!la!caja!netreceive!Figura![8],!
la!cual!abre!un!socket!para!la!recepción!en!red!de!UDP,!permitiendo!así!que!Pure!
Data! conozca! la! activación! o! desactivación! de! los! canales! de! efectos!
seleccionados!por!el!usuario,!directamente!en!la!UI.!!
!
Figura#(6)#Comunicación#Bidireccional#PdaOsc#a#través#de#UDP#
#
4.4.2.3!
Comunicación!mediante!OSC!!
Una!vez!establecidos!los!canales!de!comunicación!por!red,!se!debe!generar!el!bus!
que!contendrá!los!datos!de!OSC!para!el!control!de!la!UI,!esto!fue!posible!creando!
un!bus!que!contuviera!todos!los!mensajes!enviados!a!la!UI.!!
59
Creando! el! bus! de! datos! denominado! 'packOSC'! Figura! (6),! se! tiene! en! una!
misma! ubicación! de! todos! los! datos! relevantes! para! el! envío^! posteriormente! se!
hace!uso!de!la!caja!packOSC!que!envía!una!lista!de!valores!que!ingresan!a!la!caja!
de! comunicación! UDP! udpsend.! Igualmente,! para! la! recepción! de! información!
desde!Unity!es!necesario!recibir!los!datagramas!del!puerto!especificado.!Debido!a!
que! están! todos! los! mensajes! sin! orden! en! el! bus,! se! enrutan! en! orden! para!
ejercer!el!control.!La!caja!routeOSC!en!Pure!Data,!se!emplimentó!para!recibir!los!
datagramas! de! netreceive! y! rutear! los! mensajes! de! OSC! dependiendo! de! los!
argumentos,! de! esta! manera! se! reciben! múltiples! parámetros! simultáneamente!
por!el!mismo!puerto.!Los!argumentos!en!la!caja!routeOSC!son!los!nombres!de!los!
valores!a!separar!en!los!mensajes!entrantes.!!
!
4.4.2.4!
Comunicación!MIDI!!
!
Una! vez! finalizadas! las! conexiones! entre! el! patch! y! la! UI,! es! necesario!
implementar! un! canal! de! comunicación! con! el! DAW.! Para! este! propósito! se! hizo!
uso!del!objeto!'ctlout'!que!envía!mensajes!de!control!al!puerto!MIDI!establecido!en!
Pure! Data! de! manera! que! solo! se! requieren! tres! argumentos! para! hacer! el!
empaquetamiento! de! bytes! MIDI! para! ser! recibidos! por! el! DAW^! los! tres!
argumentos!son:!valor!de!control,!número!de!control!y!canal!de!control!Figura!(7).!
El! valor! de! control! de! la! salida! ha! sido! previamente! escalado! permitiendo! una!
resolución!de!128!valores.!!
La!comunicación!MIDI!permite!seleccionar!números!de!control!para!cada!gesto!en!
cada!mano,!izquierda!y!derecha,!de!esta!manera!el!envío!de!mensajes!de!control!
MIDI!son!8!mensajes!diferentes!que!controlarán!8!parámetros!estilo!!
60
!
!
Figura#(7)#Envió#Mensajes#de#Control#MIDI#–#Argumentos#
#
4.4.3! DISEÑO!!INTERFAZ!GRÁFICA!UI!!!
El! proceso! de! diseño! se! realizó! una! vez! la! programación! y! la! funcionalidad!
estuvieron!definidas.!El!objetivo!se!enfocó!en!desarrollar!una!interfaz!de!usuario,!
donde! éste! interactuara! intuitivamente.! Por! ende! al! realizar! las! respectivas!
investigaciones! de! los! tipos! de! interfaces! gráficas! (GUI),! se! decide! plasmar! un!
diseño! basado! en! una! interfaz! Natural! de! Usuario! (NUI),! es! decir,! basada! en! un!
diseño!dónde!no!se!requiere!utilizar!sistemas!de!mando!o!dispositivos!de!entrada!
(como!mouse!o!teclado),!si!no,!a!través!de!movimientos!naturales!basados!en!el!
reconocimiento! dactilar,! generando! cambios! de! control! ! sonoros! en! la! UI.! Para!
ellos! se! tienen! en! cuenta! algunas! directrices! UI,! UX! y! los! objetivos! finales! de! la!
interfaz.!
61
4.4.3.1!
Directrices!UI!y!UX:!!
!
De!estas!directrices!depende!la!mayor!o!menor!facilidad!a!la!hora!de!utilizar!
el! controlador,! siendo! la! interfaz! gráfica! lo! más! importante.! Las! directrices!
establecidas!fueron:!
!
"! Lograr!que!el!esfuerzo!del!usuario!sea!el!mínimo!requerido!
"! Cada! decisión! tomada! debe! ser! basada! en! las! necesidades,!
objetivos,!!expectativas,!motivaciones!y!capacidades!de!los!usuarios.!!
"! Se! recomienda! implementar! un! manual! de! Instrucciones! con!
información!clara!y!sencilla.!
"! Se! deben! manejar! gestos! naturales,! brindando! mayor! facilidad! y!
rapidez.!
"! Generar! retroalimentación! para! el! usuario,! tanto! en! la! parte! sonora!
como!visual.!
"! Se! requiere! implementar! un! modelamiento! en! la! pantalla! que! sea!
funcional!y!!no!instructivo.!
"! Dar! uso! al! concepto! del! esqueumorfismo,! implementando! un! cursor!
como! herramienta! de! control! digital,! para! accionar! los! botones!
virtuales!
!
4.4.3.2! DESARROLLO!DEL!DISEÑO!!
Para! el! desarrollo! de! la! interfaz! se! dividió! la! pantalla! en! 2! partes! como! se!
representa! en! la! Imagen! (15),! donde! el! usuario! obtuviera! una! retroalimentación!
visual,! es! decir,! en! la! pantalla! se! realiza! la! animación! de! la! mano,! la! cual!
representa! digitalmente! el! movimiento! y! gesto! que! está! realizando! el! usuario,! de!
tal! forma! cuando! el! usuario! genere! un! incremento! de! nivel! tras! un! movimiento!
dactilar,!se!incrementará!visualmente!el!nivel!del!color!en!la!animación,!obteniendo!
una!relación!entre!el!brillo!del!color!y!la!intensidad!del!efecto.!En!la!Imagen(16)!se!
observa! cómo! con! la! mano! izquierda! se! mantiene! el! nivel! en! un! 100%! y! con! la!
derecha!el!nivel!está!en!0%.!
62
!
Imagen#(15)#Diseño#Gráfico#de#la#Interfaz#"
!
!
La! segunda! parte! se! enfoca! en! la! retroalimentación! sonora! ! y! asignación! de!
efectos! a! los! gestos! establecidos.! El! usuario! estaría! en! capacidad! de! observar!
como!debe!ubicar!su!mano!y!que!movimiento!debe!realizar!para!generar!el!tipo!de!
efecto! sonoro! deseado,! por! ejemplo:! Al! ir! elevando! la! mano! se! incrementará! el!
nivel!sonoro.!
63
!!
Imagen#(16)#Retroalimentación#Visual###
Para! la! elección! de! los! parámetros! que! puede! activar! o! desactivar,! se! pensó! en!
representar! digitalmente! el! objeto! Cursor! dándole! vida! al! concepto! del!
esqueumorfismo,! logrando! un! modelo! similar! a! la! acción! de! un! botón.! Esto! seria!
de!fácil!recordación!y!manipulación!para!el!usuario.!!
Imagen#(17)#Selección#Cursor!
64
!
4.4.4! IMPLEMENTACIÓN!INTERFAZ!DE!USUARIO!EN!UNITY!
Una! vez! hecho! el! diseño! gráfico! de! la! interfaz,! éste! fue! llevado! al! entorno! de!
programación! Unity^! para! esto! lo! primero! fue! apartar! los! elementos! estáticos! de!
los! interactivos.! Los! elementos! estáticos! se! ajustan! al! diseño! requerido! y! los!
dinámicos!se!programan!para!obtener!un!comportamiento!demandado,!el!cual!se!
explicará!más!adelante!en!detalle.!
Notando! que! los! elementos! del! diseño! se! pueden! agrupar,! se! abordó! el! primer!
grupo! de! elementos:! Las! imágenes! estáticas.! Estas! imágenes! se! ajustaron! a! los!
tamaños! establecidos! en! el! diseño,! dichos! tamaños! y! especificaciones! se!
configuraron!en!los!componentes!iniciales!de!Unity,!como!lo!fueron:!la!cámara!y!el!
canvas,!el!cual!se!refiere!a!la!imagen!de!fondo.!!
Usando! las! imágenes! estáticas! como! referencia! para! posicionar! los! elementos!
interactivos,! se! tomó! cada! uno! usando! la! implementación! ofrecida! por! los!
componentes!de!Unity,!inicialmente!los!sliders.!Cada!uno!de!los!8!sliders!pueden!
ser! modificados! tanto! en! aspecto! como! en! comportamiento,! por! lo! tanto! se!
ajustaron! al! diseño! y! se! modificaron! hasta! tener! los! valores! y! apariencia!
necesarios.!
Existen!componentes!que!deben!responder!a!los!cambios!de!estos!sliders,!como!
lo!son!por!ejemplo!las!manos!animadas!en!la!parte!izquierda!de!la!interfaz,!éstas!a!
medida! que! se! incrementa! el! nivel! del! slider! su! tamaño! y! color! también! se! van!
intensificando,! de! la! misma! manera! el! texto,! indicando! el! porcentaje! que! ha!
elevado!o!disminuido!el!nivel.!
!
Unity! ofrece! dentro! de! las! configuraciones! del! componente! Slider! una! lista!
modificable!de!objetos!llamada!OnValueChanged,!que!permite!que!este!grupo!de!
objetos! sea! notificado! del! cambio! en! el! valor! del! slider.! Cada! grupo! de! 4! Sliders!
genera!4!movimientos!de!la!mano,!lo!que!significa!que!las!imágenes!dinámicas!de!
las! manos! deben! estar! en! la! lista! de! función! OnValueChanged! para! el! slider!
correspondiente! y! así! finalmente! asignar! el! comportamiento! respectivo! de!
65
movimiento! y! color.! Se! visualiza! el! valor! actual! de! los! sliders! en! porcentaje!
mediante!el!componente!Text!que!ofrece!Unity,!los!cuales!se!establecieron!de!la!
clase!TextDisplay!permitiendo!establecer!el!cambio!de!los!textos!sobre!las!barras!
que!indican!su!valor.!
Las! imágenes! de! las! manos! que! reproducen! varias! animaciones,! deben! habilitar!
también! el! uso! de! un! cursor! indicador! que! ayude! al! usuario! a! seleccionar! los!
botones! o! perillas,! la! clase! HandCursor! es! usada! para! el! control! del!
comportamiento! de! esta! imagen! que! se! empleó! como! cursor,! tanto! para! su!
posición! como! para! intercambiar! el! estado! de! la! mano! entre! la! animación! del!
efecto! y! el! modo! cursor.! Esta! clase! cuenta! con! el! método! “CountStatic”! que!
permitió! calcular! el! tiempo! transcurrido! sin! mover! el! cursor.! El! método! “Moved”!
que! es! llamado! en! cada! movimiento! del! cursor,! los! métodos! “MoveToX”! y!
“MoveToY”! llamados! por! los! objetos! SlidersCursor! son! una! pareja! de! Sliders!
auxiliares!que!fueron!utilizados!para!usar!el!valor!actual!de!estos!como!la!posición!
del! cursor! en! X/Y.! La! relación! gráfica! de! todas! estas! clases! y! sus! respectivas!
funciones!se!puede!observar!en!la!Figura!(8).!
!
!
!
!
!
!
!
Figura#[8]#Representación#Diagrama#de#Clases##
#
66
Para!establecer!las!posiciones,!escala!y!tono!de!las!animaciones!de!cada!uno!de!
los! gestos! se! hizo! uso! de! la! clase! GestoEffect,! en! donde! se! encuentran! las!
imágenes! de! las! manos.! Ésta! clase! contiene! los! métodos! "EffectOne",!
"EffectTwo",!"EffectThree"!!y!"EffectFour".!Estos!métodos!fueron!accedidos!por!los!
Sliders! agregando! las! imágenes! de! las! manos! a! la! lista! “OnValueChanged”! de!
cada!uno!de!los!Sliders.!Se!programó!del!tal!manera!que!al!cambiar!la!disposición!
de!la!mano!y!realizar!el!gesto!del!cursor!la!interfaz!mostrara!la!imagen!que!tiene!
por! nombre! “handRigthCursor”,! de! la! clase! CursorPoint,! que! fue! usada! para! el!
comportamiento! del! indicie! en! la! selección! de! los! controles.! Ésta! clase! contiene!
los! métodos! propios! de! Unity! “OnTriggerStay2D”! que! indica! la! selección! o!
activación!del!botón!y!“OnTriggerExit2D”!indica!la!!desactivación!del!mismo.!Esto!
se! generó! debido! al! componente! colisionador! collider2D! cuando! entra! o! deja! de!
hacer! contacto! con! otro! Collider2D,! como! se! observa! en! la! Figura! [14].!
Adicionalmente! en! esta! clase! se! implementó! el! método! “MyToggle”! que! es!
llamado!desde!el!componente!de!comunicación!cuando!recibe!un!evento!de!click.
Figura#(9)##componente#colisionador#collider2D!
Se! tiene! como! background! o! fondo! las! imágenes! de! las! manos! una! animación!
adicional.!Esta!se!estableció!del!tamaño!del!canvas^!este!background!fue!tomado!
de! la! clase! SpriteSequence! la! cual! controla! su! reproducción! en! secuencia! de!
sprites!a!un!fps!requerido.!
67
Seguidamente,! se! crearon! los! componentes! Toggle! ofrecidos! por! Unity! con! el!
propósito! de! controlar! la! activación! de! los! efectos,! este! componente! ya! incluía!
transiciones! para! intercambiar! o! deshabilitar! su! imagen! de! acuerdo! al! estado! de!
activación.! Los! objetos! toggle! creados! son! complementados! añadiendo! el!
componente! “BoxCollider2D”,! esto! para! que! sean! detectados! por! el! cursor!
controlado!por!el!usuario.!
De! forma! similar! a! los! toggle,! se! diseñaron! controles! a! manera! de! perilla! para!
efectos!de!sonido!adicionales.!Estas!perillas!fueron!agregadas!a!la!interfaz!usando!
de!nuevo!el!componente!Image!que!ofrece!Unity,!puesto!que!éstas!tienen!también!
un!comportamiento!de!activación!para!habilitar!o!no!su!movimiento^!una!capa!de!
fondo! que! compone! la! perilla! es! de! la! clase! PotCollider.! Esta! clase! permitió!
controlar!el!comportamiento!de!colisión!de!las!perillas!con!el!cursor!mediante!los!
métodos! que! Unity! ofrece! como! “OnTriggerEnter2D”! y! ! “OnTriggerExit2D”,!
mencionados! anteriormente,! para! identificar! los! momentos! en! los! que! el! usuario!
está!seleccionando!estos!elementos.!
Las!imágenes!de!las!perillas!pertenecen!a!la!clase!Rotating!y!TogglePot.!Mediante!
la!clase!Rotating!se!asignó!el!comportamiento!de!la!imagen!que!permitió!rotar!al!
mover! la! perilla,! esta! clase! tiene! el! método! “RotateZ”! que! recibe! el! valor! de! un!
slider!auxiliar!asociado!a!cada!perilla!y!lo!convierte!en!rotación.!Mediante!la!clase!
TogglePot!se!estableció!un!comportamiento!similar!al!del!componente!Toggle!que!
brinda! el! software! Unity^! este! permitió! asignar! un! estado! y! una! transición! de! la!
imagen!asociada!a!dicho!estado.!
4.4.4.1!
COMUNICACIÓN!UNITY^PD!
En!cuanto!a!la!comunicación!de!Unity,!así!como!en!PureData!se!importó!la!librería!
mrPeach! para! el! PackOSC.! Para! esto! fue! necesario! importar! una! librería! que!
empaquetara!los!datos!de!envío!en!protocolo!OSC.!!Las!clases!UnityOSCListener!
y! UDPSend! contienen! los! métodos! para! efectuar! el! envió! y! recepción! de! datos,!
estos! se! comunican! con! los! demás! objetos! de! la! interfaz! para! informar! de! los!
comandos! solicitados! por! el! usuario.! Las! clases! UnityOSCListener! y!!
68
UnityOSCReceiver! ! permitieron! obtener! por! el! puerto! establecido,! todos! los!
mensajes^! habilitaron! el! acceso! a! esta! información! por! medio! del! método!
“OSCMessageReceived”! y,! direccionando! esta! información! al! método! “process”,!
se!delegaron!los!eventos!a!efectuar,!dentro!de!los!cuales!está,!el!movimiento!de!
los! sliders! con! el! método! “ChooseEffect”,! la! posición! del! cursor! con! el! método!
“ReadCursor”,!!los!gestos!de!click!ocurridos!con!el!método!“PressClick“!y!el!control!
de!volumen!en!las!perillas!con!el!método!“ReadRot”.!Esta!clase!tuvo!los!atributos,!
es!decir,!todas!sus!variables!de!clase!fueron!referenciadas!a!los!otros!objetos!de!
la! interfaz! para! poder! acceder! a! sus! funciones! y! poder! procesar! los! eventos!
necesarios,! ya! sea! reproducir! un! efecto! con! los! sliders,! posicionar! la! imagen! del!
cursor,! notificar! ! que! ocurrió! un! click! o! reproducir! el! giro! de! una! perilla.! Por! otro!
lado,! se! hizo! uso! de! la! clase! UDPSend,! la! cual! permitió! conectarse! al! puerto! de!
envío!y!usar!el!protocolo!UDP!para!retornar!información!a!PureData.!
Posteriormente!se!creó!el!objeto!“Comunicación”!el!cual!es!de!la!clase!UDPSend!,!
de! esta! forma! se! permitió! agregar! el! objeto! Comunicación! a! la! lista!
“OnValueChanged”! de! cada! uno! de! los! Toggles! para! que! accedieran! al! método!
“sendString”!y!así!notificar!y!enviar!a!PureData!que!el!Toggle!respectivo!cambiaria!
de!valor!o!estado,!como!se!detalla!en!la!figura!(10)!
Figura#(10).#Diagrama#de#clases#Comunicación#UnityaPd#
69
4.4.4.2!
ASIGNACIÓN!MIDI!!
Para!la!asignación!de!cambios!de!control!de!cada!parámetro!implementado!en!la!
interfaz!gráfica,!se!utiliza!el!software!de!edición!musical!Ableton!Live™.!!En!este!
proceso! se! debe! tener! en! cuenta! un! procedimiento! de! configuración! y! luego! la!
asignación!
Para!configurar!los!mensajes!MIDI!en!el!Ableton,!es!necesario!ingresar!al!modo!de!
edición!MIDI!como!se!observa!en!la!Imagen!(18),!donde!se!asignarán!los!cambios!
de! control.! Para! ello! se! selecciona! el! efecto! ubicando! el! cursor! en! el! parámetro!
que!se!desea!controlar,!seguido!a!esto!se!realiza!el!gesto!que!se!le!desea!asignar^!
por! ejemplo:! El! usuario! desea! controlar! el! nivel! de! ganancia! en! un! canal,! lo! que!
debe! realizar! es! seleccionar! a! través! del! mouse! este! control! e! inmediatamente!
realizar!el!gesto!que!desea!asignarle.!Una!vez!asignados!y!enlazados!los!cambios!
de! control! MIDI,! se! retira! de! modo! edición! MIDI! y! procede! a! reproduce! la! pista,!
seguido!a!esto!se!empiezan!a!ejecutar!los!gestos!para!controlar!los!efectos.!
#
Imagen#(18)#Configuración#MIDI#
70
Para! la! asignación! de! los! ! gestos,! el! usuario! puede! otorgar! diferentes! tipos! de!
efectos! a! cualquier! elemento! de! la! interfaz! gráfica! desde! un! un! fader! ,knob! o!
switch.! Imagen! (19)! Sin! embargo,! para! el! siguiente! modelo! de! configuración! se!
realiza! una! asignación! en! función! del! concepto! analógico! que! puede! representa!
cada! gesto,! es! decir,! para! los! faders! se! asignaran! movimientos! de! la! mano! que!
impliquen! el! desplazamiento! en! los! extremos! de! algún! eje! ,! como! lo! haría!
físicamente! un! fader! de! forma! deslizable! ,! de! la! misma! manera! se! aplica! es!
concepto!para!la!activación!y!desactivación!de!controles!con!gestos!impulsivos^!y!
a!conveniencia!los!knobs!para!envios,!paneo!u!otro!control.!
!
Imagen#(19)#Asignación#Parámetros#MIDI#
!
!!
!
71
4.4.4.3!
Diseño!Manual!de!Instrucciones!al!Usuario!
Al! plantear! un! diseño! con! interfaz! tipo! NUI,! el! manual! de! instrucciones! no! es!
necesario,! sin! embargo,! es! necesario! indicarle! al! usuario! cual! sería! la! posición!
correcta!del!dispositivo!y!como!debe!ubicar!las!manos!respecto!a!este.!Lo!primero!
con! lo! que! se! encuentra! el! usuario! al! abrir! el! software! es! una! instructivo,! que!
indica! como! debe! ingresar! el! dedo! para! obtener! un! cursor! o! herramienta!
selección,!imagen!(20).!De!esta!manera!el!dedo!puede!elegir!los!objetos!dentro!de!
la!interfaz!gráfica,!y!explica!que!al!realizar!un!movimiento!en!profundidad!genera!
un!click.!Teniendo!claro!lo!anterior!el!usuario!puede!optar!por!ver!el!tutorial,!o!si!ya!
sabe!manejar!el!software!simplemente!seleccionar!la!opción!de!iniciar.!
!
Imagen#(20)#Instrucción#1#–#Herramienta#Selección#
!
!
!
!
!
!
72
Si!el!usuario!ha!seleccionado!la!opción!de!ver!el!tutorial,!aparecerá!una!segunda!
imagen! instructiva,! Imagen! (21)! donde! se! le! indicará! como! puede! desplazarse! a!
través!de!la!pantalla,!la!posición!que!debe!tener!su!mano!respecto!al!dispositivo!y!
la! cantidad!de!dedos!que!debe!utilizar.!Si!desea!seleccionar!los!elementos!de! la!
interfaz,! primero! debe! ubicarse! encima! del! elemento,! seguido! a! la! realización! de!
un!movimiento!impulsivo!en!el!eje!de!profundidad!(z).!
!
!
Imagen#(21)#Instrucción#2#–#Herramienta#Cursor#y#Click#
#
!
El! la! tercera! imagen! instructiva! se! le! indicara! al! usuario! que! los! elementos! que!
seleccione!serán!los!únicos!que!estarán!permitidos!de!reproducirse!en!el!DAW!
!
!
!
!
!
!
73
!
!
!
!
!
!
!
!
!
!
!
!
#
#
Imagen#(22)#Instrucción#3#–#Información#
!
!
Una! vez! que! el! usuario! sepa! como! utilizar! las! herramientas! de! cursor! y! click,!
puede! lograr! seleccionar! los! parámetros.! Se! agrega! un! ejemplo! de! cómo!
seleccionaría! el! gesto! de! desplazamiento! en! el! eje! Y,! indicando! que! el! Fader! se!
controla! realizando! un! movimiento! de! la! mano! de! arriba! hacia! abajo! y! así!
sucesivamente!para!los!otros!gestos,!pero!variando!la!dirección!de!la!mano!en!el!
respectivo!eje!del!gesto.!!
!
!
!
!
!
!
!
!
74
!
!
!
!
!
!
!
!
!
!
!
!
!
Imagen#(23)#Instrucción#4#–#Ejecución#Gesto#Desplazamiento#Eje#Y#
!
Para!el!gesto!rotacional,!se!indica!como!debe!realizar!el!movimiento!de!la!mano!al!
desear!realizar!el!gesto!correspondiente!a!los!knobs,!!
!
Imagen#(24)#Instrucción#5#–#Ejecución#Gesto#Rotacional#
75
De! igual! manera! en! la! imagen! (25)! se! presenta! el! último! instructivo,! donde! se!
realiza! la! respectiva! indicación! cuando! el! usuario! desea! activar! un! switch!
desplazándose!con!cierta!velocidad!en!el!eje!z.#
!
#
Imagen#(25)#Instrucción#6#–#Ejecución#Gesto#Switch#
#
MEDICIÓN!DE!LATENCIA!DEL!SISTEMA!!
!
Se! efectúo! la! medición! de! latencia! realizando! un! análisis! de! muestreo! de!
imágenes!,!esto!mediante!el!uso!de!una!cámara!de!grabación!con!una!frecuencia!
de!muestreo!de!120!frames!por!segundo,!es!decir,!8,3!milisegundos!por!frame.!El!
procedimiento! cosiste! en! grabar! el! instante! en! que! se! realiza! el! gesto! de!
activación!con!el!dedo!índice,!Imagen!(26)!!posteriormente!se!analiza!la!grabación!
en!un!editor!de!video!en!donde!se!puede!evidenciar!con!precisión!el!instante!en!el!
que! el! gesto! hace! la! activación,! para! esto! es! necesario! tener! en! cuenta! el!
movimiento! del! dedo! índice! en! el! eje! de! análisis,! cuando! se! ve! reflejado! en! la!
pantalla!del!secuenciador!de!audio!que!llega!señal!seria!el!ultimo!frame!contado.!
Para! este! caso! fueron! 30! frames! los! que! pasaron! cuando! se! realizo! el! gesto! y!
llego!señal!al!vúmetro!con!lo!cual!el!sistema!tiene!una!latencia!de!250ms.!!
76
!
!
Imagen#(26)#Medición#Latencia#del#Sistema##
!
!
5!
ANÁLISIS!Y!RESULTADOS!!
!
•! En! la! programación! fue! necesario! independizar! los! gestos! de! las! manos!
con! una! selección! previa! de! ejes,! es! decir,! que! para! cada! gesto! existe! un!
único! eje! de! control,! esto! debido! a! que! la! anatomía! y! el! desplazamiento!
natural! que! presenta! la! mano! al! no! ser! totalmente! ortogonal,! por!
consiguiente!al!desplazar!la!mano!en!cualquier!sentido!siempre!van!a!haber!
componentes!en!mas!ejes!ya!sea!por!movimiento!!rotacional!o!lineal.!
!
•! Para!el!control!que!se!emplea!para!la!activación!o!desactivación!de!algún!
parámetro,!!fue!necesario!establecer!un!umbral!basado!en!la!velocidad,!que!
se! debe! sobrepasar! para! generar! el! cambio! de! control,! este! umbral! esta!
determinado! por! una! diferencia! del! posicionamiento! entre! cuadros! por!
segundo,! tomando! un! punto! inicial! y! final! según! los! cuadros! tomados!
durante! el! momento.! Por! esta! razón! el! usuario! se! ve! en! la! necesidad! de!
realizar! un! movimiento! impulsivo! que! supere! ese! umbral,! para! hacer! la!
77
activación!del!parámetro.!Esta!diferencia!esta!basada!en!la!derivación!de!la!
posición! con! respecto! a! la! unidad! de! tiempo,! en! la! que! se! toman! los!
cuadros!y!como!resultado!se!evalúan!los!cambios!de!velocidad!instantánea,!
para!identificar!si!el!gesto!existe!o!no.!
!
•! La! figura! (3)! se! muestra! un! valor! de! movimiento! que! depende! de! la!
velocidad! con! la! que! se! efectúo! el! gesto! ,! este! presenta! un! valor! de! 3159!
cuadros!por!segundo,!como!se!puede!observar,!el!rango!mínimo!y!máximo!
necesario!es!únicamente!de!127!valores!,!lo!cual!garantiza!la!fiabilidad!del!
comportamiento! de! forma! eficiente,! es! decir,! que! siempre! se! ejecutaran!
valores! de! movimiento! mucho! mayores! a! los! necesarios! dentro! del! rango!
requerido.! Sin! embargo,! se! puede! llegar! a! emplear! esa! cantidad! de! datos!
para!aplicaciones!que!requieran!una!mayor!precisión!según!la!cantidad!de!
muestras!necesarias.!
!
•! No! se! necesita! el! rango! completo! de! datos! para! poder! hacer! las!
asignaciones! dentro! de! los! 127! valores! MIDI! requeridos,! ya! que! es!
suficiente! utilizar! los! valores! que! van! de! 0! a! 127! ,! asegurando! que! los!
limites! no! vayan! a! afectar! considerablemente! la! operación! del! dispositivo.!!
Sin!embargo!,!al!realzar!el!movimiento!completo!del!desplazamiento!de!las!
manos!,!se!observo!que!en!repetidas!ocasiones!no!era!posible!llegar!a!los!
valores! máximos! o! mínimos! del! control! debido! a! la! velocidad! con! que! se!
realizara! el! gesto,! por! esta! razón! hay! que! tener! en! cuenta! que! se! deben!
establecer! la! totalidad! de! los! 127! valores! dentro! de! un! rango! de!
desplazamiento! de! mano! inferior! a! ! los! extremos! en! los! que! se! adquieran!
datos! del! gesto! ,! esto! podría! garantizar! que! a! mayores! velocidades! ,! se!
puede!conservar!los!valores!máximos!y!mínimos!de!parámetro!controlado.!
•! Es! importante! tener! en! cuenta! que! la! implementación! de! gesto! o!
movimientos!que!requieran!mucha!precisión,!puede!afectar!directamente!!la!
experiencia!de!usuario,!causando!confusiones.!!
!
78
•! Hay!una!suma!de!latencias,!donde!la!primera!no!se!puede!modificar!debido!
a!que!es!propia!de!la!transferencia!de!datos!por!puerto!usb!del!leap!motion,!
y!la!generada!por!el!sistema!en!el!cual!se!procesan!los!datos!(API)!entre!el!
software!de!programación!de!gestos!(Pure!data),!Unity!y!el!DAW!(Ableton!
live)!
!
6!
CONCLUSIONES!
!
•! Las! posibilidades! de! trabajo! con! los! datos! provistos! por! el! Leap!
Motion!son!versátiles,!pues!pueden!ser!exportados!y!manipulados!en!
múltiples! plataformas! y! protocolos! lo! que! facilita! la! integración! no!
solo! con! procesos! en! los! que! se! requiera! el! control! de! DAWS! sino!
con!la!integración!de!estos!datos!para!el!desarrollo!de!!aplicaciones!
interactivas.!!
!
•! El!sensor!Leap!Motion!es!capaz!de!ofrecer!un!muestreo!de!datos!a!
intervalos! más! cortos! que! los! requeridos! por! software! de!
procesamiento! audiovisual! para! el! ojo! humano,! ya! que! el! API!
promete!200!muestras!por!segundo,!y!en!el! presente! proyecto!solo!
se!requieren!de!10!a!20!para!obtener!un!desempeño!adecuado.!Por!
consiguiente! se! estableció! una! tasa! de! captura! de! datos! de! 100!
muestras! por! segundo! y! así! aprovechar! las! capacidades! de!
seguimiento! del! Leap! (midiendo! diferencias! menores! a! 1mm)! sin!
arriesgar! la! estabilidad! del! equipo,! pero! manteniendo! una! tasa! de!
muestreo! alta! lo! que! permite! proporcionar! una! respuesta! rápida! y!
una!medición!exacta!de!los!eventos!generados!por!el!usuario.!!
!
•! La!comunicación!en!paralelo!que!ofrece!el!protocolo!UDP!mediante!
OSC! permite! que! la! transferencia! entre! los! datos! de! a! UI! y! la!
plataforma! de! programación! sea! mas! rápida! que! utilizando! un!
79
protocolo!basado!en!comunicación!serial!!
!
•! El! Leap! Motion! como! dispositivo! de! interacción! natural! con! la!
máquina!esta!subvalorado!y!tiene!un!gran!potencial!en!aplicaciones!
como!las!de!procesamiento!digital!de!señales,!pues!al!implementarlo!
como! controlador! para! el! presente! proyecto! se! logró! proveer! una!
alternativa! para! la! ejecución! de! múltiples! cambios! de! control! en! un!
sistema!de!audio!(DAW)!brindando!un!lugar!a!la!implementación!de!
6! gestos! “propios! del! movimiento! del! cuerpo”! para! crear! nuevas!
formas!de!control!y!“producción”!creativa.!
!
•! El! desarrollo! de! este! software! presenta! una! comunicación!!
bidireccional!basada!en!el!uso!de!doble!protocolos!(OSC!y!MIDI)!con!
lo! que! se! puede! lograr! un! nivel! de! control! más! elevado! a! partir! de!
herramientas! que! no! dependan! únicamente! del! MIDI! y! la!
programación,! sino! también! de! sistemas! de! comunicación!
alternativos,!abriendo!la!brecha!!a!protocolos!TCP,!UDP,!IP!y!demás!!
!
•! La!interconexión!entre!los!diferentes!sistemas!utilizando!3!procesos!
simultáneos! de! comunicación,! presenta! una! latencia! imperceptible!
entre! la! parte! visual! y! sonora,! la! cual! se! puede! observar! en! la!
interfaz! gráfica! desarrollada! en! Unity! y! percibir! en! el! software! de!
producción!musical!Ableton!Live!.!
!
•! Las!directrices!planteadas!en!el!diseño!de!la!interfaz!gráfica!para!la!
asignación!de!los!knobs,!faders!y!switches!es!intuitiva!acorde!al!uso!
de! los! controladores! convencionales! para! producción! musical.! Sin!
embargo! se! presenta! una! alternativa! no! convencional! para! la!
interacción! entre! el! usuario! y! el! software,! eliminando! cualquier! tipo!
de! manipulación! física! e! implementando! diferentes! gestos!
determinados!por!el!movimiento!de!las!manos.!
80
!
•! El! eskeumorfismo! surge! como! pilar! para!el! diseño! de! la! interacción!
en! la! interfaz! de! usuario,! de! tal! manera! los! gestos! basados! en!
movimientos! básicos! de! la! mano,! permiten! al! usuario! experimentar!
formas!innovadoras!para!el!control!del!Audio.!
!
•! Es! posible! optimizar! la! latencia! del! sistema! implementando! todo! el!
algoritmo!de!Pure!data!en!Unitypro,!sin!embargo!para!llevarlo!a!cabo!
es!necesario!pagar!un!costo!significativo!por!la!!licencia!!del!software!
!
7!
RECOMENDACIONES!
!
•! Convertir!la!interfaz!en!una!aplicación!ya!sea!móvil!o!web!
!
•! Realizar!el!mismo!proyecto!pero!enfocado!a!personas!con!discapacidad!
auditiva,! de! tal! manera! que! los! gestos! recrean! una! secuencia! de!
imágenes!o!video.!
#
REFERENCIAS!BIBLIOGRÁFICAS!
!
!
Academia!Unimúsica!(2014).!Producción!musical.!Controladores!MIDI.!Recuperado!de!
http://www.unimusicaTperu.com/produccion_musical_controlador_midi.htm!
!
AES.!Artículo!extraido!de!la!AES!13th!international!conference,!university!of!Washington,!
Seattle,!WA,!USA.!!
!
Arhippainen!&!Täht!(!2005,!7!de!septiembre).!La!experiencia!del!usuario.!Asu.!
Recuperado!de!
http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm!
81
!
Áranzazu.!C(2015,!18!de!agosto).!Diseño!Multimedia![web!log!post].!Recuperado!de!
http://dismul.blogspot.com/2009/08/interfazTdeTusuario.html!
!
Belda,!J(2015,!20!de!Abril).!Leap!Motion!(I)!Características!Técnicas.!ShowLeap.!
Recuperado!de!http://blog.showleap.com/2015/04/leapTmotionTcaracteristicasT
tecnicas/!
Brinkmann.!P!(2012).!Making!Musical!Apps.!Estados!Unidos.!O’Reilly!Media,!Inc.,!1005!
Gravenstein!Highway!North,!Sebastopol,!CA!95472.!Recuperado!de!
http://pdf.th7.cn/down/files/1312/making_musical_apps.pdf?yundunkey=116240423
762322875e02002957b2830c1429592185_112629!
Caballero,!A.(2013).!Desarrollo!de!un!controlador!MIDI!no!convencional,!implementado!en!
un!sistema!embebido,!utilizando!el!Kinect.!Universidad!de!San!Buenaventura,!
Bogotá,!Colombia.
Castromil.!J!(2012,!22!de!abril).!Leap!es!200!veces!mas!preciso!que!kinect!en!la!detección!
de!comandos!gestuales.!Clipset.!Recuperado!de!http://clipset.20minutos.es/leapT
motionTcontrolaTtuTordenadorTconTgestosT3dTsinTcontactoTaTloTminorityTreport/!
Craig!&!Bob!(1993).!.!University!of!Washington,!Seattle.!Rane!Corporation,!Mukilteo.!
DidácticaT!Música!electrónica!(2010,!3!de!agosto).!Introducción!al!OSC.!Inventable.!
Recuperado!de!http://www.inventable.eu/2010/08/03/introduccionTalToscTopenT
soundTcontrolTprimerTparte/!
Ecured.!(2015,!1!de!junio).!La!familia!de!protocolos!de!internet.!Ecured,!conocimiento!para!
todos.!Recuperado!de!http://www.ecured.cu/index.php/Protocolo_IP!
García.!R(2005).!Montaje!y!uso!de!la!cámara!ccd.!Universidad!Autónoma!de!Madrid.!
Recuperado!de!
http://astro.ft.uam.es/old/TJM/tjm/webpaginas/practicas/manuales/ST8/ST8_2.html!
Meera,!D.(2013).!Leap!motion!places!computer!control!right!at!your!fingertips.!Dogo!news.!
Recuperado!de!http://www.dogonews.com/2013/3/24/leapTmotionTplacesT
computerTcontrolTrightTatTyourTfingertips!
82
Moreno,!R.(2005)!Diseño!y!construcción!de!una!flauta!controladora!MIDI.!
Universidad!de!San!Buenaventura,!Bogotá,!Colombia.!
Mtz.!J(2015,!10!de!marzo).!Interfaz!Gráfica.!Academia.edu.!Recuperado!de!
http://www.academia.edu/8286025/Interfaz_grafica_de_usuario!
Olivera,!C.!(2010).!Almacenamiento!de!datos!bit!byte.!Sildeshare.!Recuperado!de!
http://es.slideshare.net/CarlosOlveraC/almacenamientoTdeTdatosTbitTbyteT
megabyteTyTmuchoTmasTcursoTgratisTparteT1!
Pure!Data!(20015).!Pure!Data.!Recuperado!de!http://puredata.info!
Puig(1997).!Audio!digital!y!MIDI.!Guías!monográficas!Anaya!multimedia,!Madrid.!
Recuperado!de!http://www.ccapitalia.net/reso/articulos/audiodigital/pdf/08T
EspecificacionMIDI.pdf!!
(2005)!Grupo!de!Tecnología!Musical!de!la!Universidad!Pompeu!Fabra!de!Barcelona!
Guioteca.!Recuperado!de!http://www.guioteca.com/instrumentosTmusicales/laTreactableT
unTsorprendenteTinstrumentoTelectronico.!
Smith.!D(2011).!MIDI!interfaz!digital!de!instrumentos!musicales.!Ingeniatic.!Recuperado!
de!http://ingeniatic.euitt.upm.es/index.php/tecnologias/item/521TmidiTinterfazT
digitalTdeTinstrumentos.!
Unity!Technologies(!2015,!1!de!junio).!Unity!3D.!Ecured.!Recuperado!de!
http://www.ecured.cu/index.php/Unity3D!!
Wincent! &! Jom.! (2011).! Artículo! extraído! de! la! AES! presentado! en! la! 130th! convención,!
London!UK,!paper!8456.!University!Oldenburg,!Germany.!
!
!
!
83
ANEXOS!
!
Imagen#(26)–#Diagrama#de#Clases#Desarrollado#para#Patch#Pure#Data#
!
!
!
!
84
!
Imagen#(27)#Diagrama#de#clases#para#interfaz#gráfica#en#Unity#
!
Imagen#(28)#Canvas,#Imagen#de#Fondo#interfaz#gráficaaUnity#
!
!
!
!
85
!
!
!
!
!
Imagen#(29)–#Implementación#Sliders#en#Unity#
!
Imagen#(30)#Diseño#Interfaz#Gráfica#
86
!
!
!
!
#
Imagen#(31)#Problema#ocurrido#por#utilizar#mismo#puerto##
!
!
Imagen#(32)#Diseño#animación#manos#interfaz#gráfica#
87
!
!
88