Diseño de un sistema interactivo

Consultor y profesor: Eloi Maduell y Quelic Berga 

Asignatura: Diseño de interacción

Diseño de interacción es una asignatura práctica donde se aprende a prototipar interacciones y llevarlas a cabo mediante el software libre processing.org y el hardware libre arduino.cc. En el próximo semestre esta asignatura está abierta a todos los públicos ya que ha sido incluida en el Ateneo UOC (para más información, aquí).

La asignatura Diseño de interacción se estructura en torno a tres pilares básicos (fundamentos, casos de estudio y proyecto propio) en los que el estudiante va avanzando, adquiriendo conocimientos a lo largo del curso. Los fundamentos dotan al alumno de las herramientas necesarias para comprender la materia y llevar a cabo un análisis crítico de la misma. Así pues, se estudian los fundamentos de la interaccion, analizando las 5 principales formas de recibir datos: mediante teclado, dispositivos apuntadores, analisis de audio, vision por computador y sensores. Recogidos los datos se procede a analizarlos y a diseñar la respuesta deseada. Estos materiales pueden consultarse de forma totalmente abierta en el ‘repositorio institucional’ de la UOC.

Ejemplo de interacción con sensores en pantallas interactivas

Además, una vez sentadas las bases, el estudiante selecciona, investiga y elabora diferentes casos de estudio para ahondar en el aspecto de la cultura de la interacción que más le interese. Los mejores casos de estudio elaborados por los alumnos son publicados en el blog de la asignatura de los Estudios de Multimedia de la UOC.

Página principal de ‘DiBlog’

En el blog se pueden encontrar ejemplos impresionantes de trabajos relacionados con el mundo de la interacción que sirven como estudio e inspiración a los alumnos en cuanto a desarrollar su propio proyecto.

Muestra de trabajo de interacción.

Finalmente, para que los estudiantes puedan llevar a cabo su  proyecto final, al matricularse al curso reciben un lote con el hardware Arduino y todos los sensores necesarios para hacer realidad su idea.

Alberto González ha sido uno de los primeros alumnos en seguir la novedosa asignatura diseño de interacción y esta es la muestra de su trabajo:

Introducción

Tal y como vaticinaron ideólogos como Lev Manovich o Henry Jenkins, la idea de usuario-creador no sólo se ha extendido por la web sino que compañías de la industria de los videojuegos como Valve o Bethesda cada vez apuestan con mayor firmeza por ella. Es por eso que en el diseño de este sistema interactivo, mezcla entre Pinball y Arkanoid, se apuesta por permitir al usuario crear sus propios escenarios: mediante el uso de una webcam se puede capturar cualquier imagen y el programa puede interpretar el escenario y aplicar correctamente las reglas del juego.

Además, como homenaje a las máquinas arcade de las que proceden los juegos que han servido de inspiración a este sistema, se ha creado una interacción con unos Leds mediante un Arduino: tres luces verdes indican nuestras vidas disponibles y se irán apagando según las vayamos perdiendo.

Etapas y retos

De entrada, abrir el lote de Arduino y encontrarse con una variedad de elementos de electrónica puede resultar intimidador. Sin embargo, gracias a la gran cantidad de tutoriales existentes en internet es fácil entender su funcionamiento y obtener así una nueva herramienta de posibilidades casi ilimitadas. Asimismo, apoyarse en Processing y su multitud de librerías nos ha permitido diseñar y desarrollar proyectos interesantes y complejos. Si las ventajas y posibilidades del Open Software son ya bastante conocidas, el Open Hardware resulta igualmente interesante: abre un mundo nuevo de posibilidades a los pequeños emprendedores.

En primer lugar, era necesario procesar la imagen capturada por la webcam. Mediante el software Processing y la librería de openCV se consigue capturar una imagen y acceder a su información píxel a píxel. Sobre estos datos se realiza una binarización de la imagen a partir de un umbral.

Con los distintos píxeles de la imagen tomando tan sólo dos posibles valores, se consigue un condición que comprueba si la pelota debe rebotar o no. Para reducir al mínimo los problemas en la detección de colisiones, se ha creado una función normalizadora consistente en un elemento estructurante de 3×3 que recorre la imagen píxel a píxel y rellena el píxel central si un número determinado de los adyacentes son negros, en una transformación lineal de dilatación.

El segundo paso que se realizó en el programa fue la programación de los rebotes. Para esto, del píxel con el que colisiona la pelota se pide la matriz de elementos adyacentes y se calcula la densidad de negro en base a los ejes x e y. Con esta información podemos tener una representación aproximada de la fuerza normal y se distingue entre las distintas casuísticas para calcular la dirección en que debe producirse el rebote.

Finalmente, se implementó un sistema de vidas y se sincronizó con los leds de un arduino. Mediante el uso de la librería de arduino para processing y con el Stardard Firmdata cargado en el dispositivo, se crearon los circuitos para conectar tres luces de manera independiente. Una función se encarga de comprobar si la pelota está en una posición “válida” y en caso contrario reiniciar los valores de las variables (reiniciar el juego) y restar una vida a las disponibles.

El juego en funcionamiento:

Conclusiones

El mundo del DIY (Do It Yourself) está muy extendido y se pueden encontrar una gran variedad de herramientas ya desarrolladas que se pueden utilizar para enriquecer nuestros proyectos. Es importante atreverse a emprender proyectos aunque parezcan difíciles ya que hay multitud de recursos disponibles.

Si tuviese que volver a realizar la misma práctica, creo que sería muy interesante experimentar con un proyector. De este modo podría proyectarse tan sólo la imagen de la pelota y jugar directamente sobre el escenario elegido sin necesidad de una pantalla de ordenador.

Documentación

OpenCV (online) en Wikipedia: http://en.wikipedia.org/wiki/OpenCV

DIY (online) en Wikipedia: http://en.wikipedia.org/wiki/Do_it_yourself

Cita recomendada: GONZÁLEZ MOSQUERA, Alberto. Diseño de un sistema interactivo. Mosaic [en línea], diciembre 2012, no. 103. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n103.1241.