Autor: MDCV. Emilio José Quiroz Galván (eqg26@comunidad.unam.mx)
Revisión: Mat. María del Carmen Ramos Nava (cramos@unam.mx)
Departamento de Recursos Digitales para la Educación de la Dirección de Innovación en Tecnologías para la Educación, DGTIC. UNAM.
Año: 2023
Herramientas de desarrollo asociadas:
TouchOSC, MadMapper
Situación
Para poder controlar a distancia distintos escenarios desarrollados en MadMapper, se realizó una búsqueda de posibles soluciones, resultando como la mejor opción TouchOSC, ya que ambos softwares tienen la capacidad de comunicarse entre sí.
Las características de dichos softwares son las siguientes:
MadMapper es un software de video mapping[1] que facilita la adaptación de una o varias proyecciones a distintas superficies tridimensionales o bidimensionales, además permite la gestión de datos para comunicar fuentes de luz desde la información de color e intensidad de una imagen, es decir Light mapping.
Por otro lado, TouchOSC es una herramienta que hace posible generar una interfaz para controlar remotamente desde una tablet o smartphone cualquier aplicación que soporte OSC (Open Sound Control)[2] o MIDI (Musical Instrument Digital Interface)[3] utilizando respectivamente el protocolo UDP (User Datagram Protocol)[4].
Por lo anterior, para aprovechar las ventajas que ofrece se busca generar una de interfaz con TouchOSC para controlar escenarios en MadMapper.
Redacción de la solución
La metodología utilizada comprende la creación de presets en MadMapper, la generación de la interfaz de control con TouchOSC, la configuración de comunicación entre TouchOSC y MadMapper, la configuración del protocolo OSC en MadMapper y la carga de la interfaz generada en una tablet.
Creación de presets en MadMapper
La versión de MadMapper usada en esta metodología es la 2.2.2 y el archivo de trabajo esta integrado por 6 escenarios y el video mapping es desplegado por 4 proyectores.
En esta versión para crear presets, los cuales son los ajustes preestablecidos; primero tenemos que elegir los elementos a proyectar, para ello del panel de “Select Input media” seleccionamos los medios que se mostrarán y luego del panel de “Manage Surface”, el cual aparece dando clic en el primer botón superior con el ícono de un cuadro con cuatro vértices, escogemos la superficie donde se visualizarán.
Figura 1. Emilio Quiroz. Paneles “Select Input media” y “Manage Surface”. 2023. Imagen digital.
Como se puede observar en la Figura 1, los elementos elegidos adquieren una coloración turquesa.
Después con elementos seleccionados, en el panel de “Select Input media” damos clic al botón izquierdo del ratón y del menú flotante que aparece, elegimos “Apply media to selected surfaces”.
Figura 2. Emilio Quiroz. Opción “Apply media to selected surfaces”. 2023. Imagen digital.
Realizado lo anterior, aparecerá del lado izquierdo de los medios elegidos, un número indicando la cantidad de superficies en las cuales se proyectará.
Figura 3. Emilio Quiroz. Medio con número indicando en cuantas superficies se proyecta. 2023. Imagen digital.
En este punto es importante mencionar que dependiendo de los parámetros que tengan todos los elementos al momento de seleccionarlos, son los que reproducirá al ejecutar el preset, es decir, si tienen una opacidad de 50% o una velocidad de 120% será el porcentaje que mantendrán durante el video mapping. Y para ajustar dichos parámetros, basta con modificarlos en los apartados respectivos debajo de los paneles de “Select Input media” y “Manage Surface”.
Figura 4. Emilio Quiroz. Parámetros ajustables de los elementos. 2023. Imagen digital.
Posteriormente con los elementos seleccionados, damos clic al tercer botón superior “Manage Presets” que tiene como ícono una lista con tres líneas horizontales.
Figura 5. Emilio Quiroz. Botón “Manage Presets”. 2023. Imagen digital.
A continuación, dando clic al signo de más (+) se crearía un preset.
Figura 6. Emilio Quiroz. Creación de un preset. 2023. Imagen digital.
A este preset automáticamente MadMapper le pone un nombre, pero se puede cambiar dando doble clic sobre dicho nombre.
Siguiendo el proceso antes descrito se crearían los demás presets para los otros escenarios.
Figura 7. Emilio Quiroz. Presets para los 6 escenarios. 2023. Imagen digital.
Generación de la interfaz de control con TouchOSC
Para generar la interfaz de control con TouchOSC es recomendable utilizar la versión de escritorio, ya que en esta versión es más fácil manipular las herramientas del software, además podemos utilizarla sin costo, con el inconveniente de que cada vez que la abramos o guardemos avances nos saldrá una ventana indicando que es una copia sin registrar.
Asimismo, hay que considerar que al iniciar TouchOSC, de manera automática nos crea un documento de 640 x 860 pixeles, sin embargo, se puede ajustar el tamaño a los requerimientos que necesitemos; para ello en el panel de lado derecho damos clic en el apartado “Document” y en este mismo apartado podemos cambiar el color negro de fondo.
Figura 8. Emilio Quiroz. Apartado “Document”. 2023. Imagen digital.
Antes de generar la interfaz también es conveniente ajustar el porcentaje del documento para que abarque una mayor área del espacio de trabajo, ya que así moveremos con mayor precisión los botones que vayamos agregando. De inicio el porcentaje está al 100% y para que se adecue a nuestro espacio de trabajo debemos dar clic en el botón “Fit” que se encuentra en la barra superior de herramientas.
Figura 9. Emilio Quiroz. Ubicación botón “Fit”. 2023. Imagen digital.
Contemplando los ajustes anteriores, para crear un botón hay que dar clic al botón derecho del ratón en cualquier parte del espacio de trabajo y al hacerlo saldrá un menú flotante del cual elegiremos la opción “BUTTON”.
Figura 10. Emilio Quiroz. Cómo crear botones en TouchOSC. 2023. Imagen digital.
El botón creado será de color rojo y para ser escalado lo seleccionamos y con clic sostenido desplazamos cualquiera de sus vértices. Si queremos que el tamaño sea proporcional, se tiene que apretar en el teclado la tecla de mayúsculas mientras movemos algún vértice.
Figura 11. Emilio Quiroz. Cambio de tamaño de un botón en TouchOSC. 2023. Imagen digital.
También se pueden cambiar otros valores del botón en el panel de lado derecho, en los apartados “Control” y “Button”, como el color, el relleno, la forma, etc. Las modificaciones dependerán de las características que se requieran para la interfaz.
Figura 12. Emilio Quiroz. Apartados “Control” y “Button”. 2023. Imagen digital.
Ahora bien, ya que terminemos de ajustar el botón, lo copiamos con la combinación de teclas “Control + C” y lo pegamos con “Control + V”, hasta tener el número de botones necesarios para ejecutar las acciones en MadMapper. En este sentido, para la interfaz que estamos generando se necesitarán 4 botones por cada escenario, salvo para el sexto que requeriría solo los dos primeros.
Figura 13. Emilio Quiroz. 4 botones para cada escenario de MadMapper. 2023. Imagen digital.
En la Figura 13 podemos observar que cada botón se situó de lado derecho de su antecesor además se le cambió la forma y su orientación.
Llegando a este punto, es conveniente guardar el archivo de trabajo de TouchOSC e ir salvando constantemente para evitar pérdidas por si el software se llegará a trabar o a cerrar de repente.
Continuando con el proceso, se generarían los nombres para distinguir el primer escenario y la acción que realizaría cada botón, las cuales serían: “Select” para seleccionar el escenario, “Play” para iniciar el video mapping, “Pause” para detener el video mapping y “Rewind” para rebobinarlo.
Para crear el texto debemos dar clic al botón derecho del ratón en cualquier parte del espacio de trabajo y elegir del menú flotante la opción “TEXT”.
Figura 14. Emilio Quiroz. Cómo crear texto en TouchOSC. 2023. Imagen digital.
El texto generado tendrá de fondo un rectángulo rojo y estarán activadas las esquinas de dicho rectángulo, no obstante, estos valores se pueden desactivar en el panel de lado derecho en el apartado “Control”, dando clic en la paloma blanca de “Background” y “Outline”.
Figura 15. Emilio Quiroz. Valores de texto “Background” y “Outline”. 2023. Imagen digital.
Hay otros valores del texto que se pueden cambiar en el mismo panel de lado derecho, pero en el apartado “Text”, como lo son el color, la alineación, el tamaño y el tipo de fuente, aunque para este valor solo hay dos opciones.
Figura 16. Emilio Quiroz. Valores del apartado “Text”. 2023. Imagen digital.
Después de generar y modificar los nombres del primer escenario y sus botones, añadiríamos un título en la parte superior de la interfaz para distinguirla visualmente.
Figura 17. Emilio Quiroz. Título, botones y nombres en TouchOSC. 2023. Imagen digital.
Configuración de comunicación entre TouchOSC y MadMapper
Antes de generar los nombres y botones para los otros escenarios, es recomendable configurar la comunicación entre TouchOSC y MadMapper, para realizar una prueba rápida de interfaz y verificar que los botones funcionan o en su defecto, modificarlos.
Cabe mencionar que para esta prueba rápida la comunicación entre ambos softwares de momento no sería de forma remota, debido a que los dos están instalados en la misma computadora y por ende, la dirección IP (Internet Protocol) es igual. También debemos considerar que, para establecer la conexión los dos softwares tienen que estar ejecutándose a la par.
La forma más ágil para configurar TouchOSC y se comunique con MadMapper, es dar clic en el botón “Connections” que se encuentra en la barra superior de herramientas, con el ícono de dos eslabones de una cadena.
Figura 18. Emilio Quiroz. Botón “Connections”. 2023. Imagen digital.
Al dar clic, aparecerá una ventana flotante con cuatro pestañas superiores de lado izquierdo y la que seleccionaremos es la segunda que tiene el nombre de “OSC”.
Figura 19. Emilio Quiroz. Pestaña “OSC”. 2023. Imagen digital.
En esta pestaña de forma automática se despliega “Connection 1” y en ella daremos clic en el botón “Browse”.
Figura 20. Emilio Quiroz. “Connection 1” y botón “Browse”. 2023. Imagen digital.
Luego damos clic en “MadMapper:8000”[5] y de las opciones que muestre, seleccionamos la que corresponda a nuestra IP.
Figura 21. Emilio Quiroz. Selección de nuestra IP. 2023. Imagen digital.
Enseguida en el apartado “Recieve Port”, escribimos los mismos números que tiene MadMapper en su ventana “Preferences”, la cual en la versión 2.2.2 tenemos que dar clic en el menú superior llamado “MadMapper” y seleccionar “Preferences” para que se despliegue. En dicha ventana, damos clic en la pestaña “OSC” y verificamos que los números del campo “OSC Feedback Port”, que en este caso son “1234”; sean iguales a los del apartado “Recieve Port” de TouchOSC. Si no hubiera ningún número escrito podemos poner cualquiera, pero este debe coincidir en ambos softwares.
Figura 22. Emilio Quiroz. Apartados “Recieve Port” de TouchOSC y “OSC Feedback Port” de MadMapper. 2023. Imagen digital.
Finalmente damos clic en el botón “Done” de la ventana “Connections”.
Figura 23. Emilio Quiroz. Botón “Done” en la ventana “Connections”. 2023. Imagen digital.
Configuración del protocolo OSC en MadMapper
En MadMapper para configurar el protocolo OSC, inicialmente tenemos que dar clic en el menú superior “Controls” y seleccionar la opción “Control List”.
Figura 24. Emilio Quiroz. Ruta para desplegar la ventana “Control List”. 2023. Imagen digital.
A continuación, en la ventana “Control List” elegimos la pestaña “OSC”.
Figura 25. Emilio Quiroz. Ventana “Control List”. 2023. Imagen digital.
Trabajo a futuro
Se buscará si es posible modificar el diseño gráfico de la interfaz generada con TouchOSC, con el objetivo de hacerla más atractiva visualmente por medio de un cambio en la paleta de color, apariencia y forma de los botones, uso de diferentes tipografías e integración de un background.
Referencias
- Academia No Lineal. (2023, 21 abril). Creando un controlador con el editor de TouchOSC. [Video]. YouTube. https://youtu.be/pgoFmTtHSX4
- Androidlista. (2023,17 abril). TouchOSC Controla dispositivos MIDI desde la comodidad de tu Android. https://www.androidlista.com/item/android-apps/18575/touchosc/
- Beghin Matthieu. (2023, 18 abril). MadMapper Sending Text String through OSC. [Video]. YouTube. https://youtu.be/QJKAfkU9FXs
- Beghin Matthieu. (2023, 18 abril). MadMapper 3.2 OSC Query Demo. [Video]. YouTube. https://youtu.be/1UTUR7M43no
- Cruz Iván. (2023,17 abril). TouchOSC + Madmapper. [Video]. Transmedia Design. http://transmedia.cc/2018/03/23/touchosc-madmapper/
- Hexler. (2023,17 abril). TouchOSC Manual. https://hexler.net/touchosc/manual/introduction
- MadMapper. (2023, 19 abril). MadMapper Guides. https://madmapper.com/madmapper/tutorials
- MadMapper. (2023, 3 abril). MadMapper The Mapping Software. [Videos]. Canal de YouTube. https://www.youtube.com/@madmapperthemappingsoftwar9943/videos
- ProjectileObjects. (2023, 20 abril). Controlling Madmapper with Qlab over OSC quick tutorial. [Video]. YouTube. https://youtu.be/znPNzxPQCks
- Spencer Simon. (2023, 18 abril). Using a virtual IOS light desk to control MadMapper – with TouchOSC [Video]. Vimeo. https://vimeo.com/184287732
- Synths Luis. (2023,19 abril). Como instalar y configurar TouchOSC Mac – Win [Video]. YouTube. https://youtu.be/u6keZ55A3Do
- Tormo Teo. (2023, 20 abril). Controla Traktor con TouchOSC. https://www.hispasonic.com/tutoriales/controla-traktor-touchosc/38266
-
El video mapping es el despliegue de imágenes estáticas o animadas en formato de vídeo sobre superficies reales (MadMapper 2023). ↑
-
Open Sound Control es un protocolo para conectar en red ya sea sintetizadores, computadoras u otros dispositivos multimedia con fines como la interpretación musical o el control de espectáculos (Hexler 2023). ↑
-
Musical Instrument Digital Interface es un protocolo que permite a las computadoras, instrumentos musicales y hardware comunicarse entre sí (Hexler 2023). ↑
-
User Datagram Protocol es un protocolo que permite la transmisión sin conexión de datagramas en redes basadas en IP (Tormo 2023). ↑
-
Para que se muestre la opción, MadMapper tendrá que estar ejecutándose. Y el número final después de los puntos, cambiará dependiendo de la versión que se tenga instalada. ↑