Instituto Polit�cnico Nacional
Instituto Politécnico Nacional
"La Técnica al Servicio de la Patria"

 

Boletín No. 37
1o. de mayo de 2013

Aplicación Web basada en Realidad Aumentada  para hacer figuras de Origami

Rogelio-Daryl Barbosa-Trujillo1, María Antonieta Abud Figueroa2,
Ricardo Barrón-Fernández3, Salvador Godoy Calderón4

1y 2Instituto Tecnológico de Orizaba, Orizaba, Veracruz, México
3y 4 Instituto Politécnico Nacional. Centro de Investigación en Cómputo. México DF
1 Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. 1 Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. 2 Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
3 Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. 4 Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

Abstract

En el presente trabajo se muestra el desarrollo de una aplicación Web e-learning con realidad aumentada que ofrece una guía para desarrollar figuras de Origami. Esta aplicación utiliza los patrones GUI identificados en [1], y que se emplean en la aplicación web desarrollada expuesta en el presente artículo

Keywords: Realidad Aumentada, Patrones de diseño de interfaz gráfica, origami.

Introducción

El uso de realidad aumentada tiene un gran auge actualmente  en varios ámbitos, entre los cuales destacan mercadotecnia, video juegos y educación [2] [3]. En el caso de mercadotecnia un claro ejemplo es la marca Lego que utiliza realidad aumentada en sus tiendas para mostrar los productos armados  a sus clientes para incrementar sus ventas. En el caso de video juegos está el juego de tarjetas de realidad aumentada que incluye la consola Nintendo 3DS. En la educación hay aplicaciones con realidad aumentada por mencionar algunos: MARIE[2] la cual es una interfaz interactiva en e-learning utilizando realidad aumentada con la biblioteca ArtoolKit, mediante la cual los profesores adaptan sus contenidos a esta interfaz para utilizarlos como auxiliar en la enseñanza con sus alumnos; MARS[3] que son sistemas móviles de realidad aumentada las cuales ofrecen mayor movilidad al estudiante al tener las manos libres durante la interacción con la computadora, entre otros; en cuanto a aplicaciones de Internet no se encuentran evidencias hasta la fecha del uso de realidad aumentada.

Conceptos

2.1 Realidad Aumentada

Existen varias definiciones de realidad, de acuerdo con la real academia de la lengua española, es la existencia real y efectiva de algo [5]. Acercando la definición a términos informáticos se llega a la definición de realidad virtual la cual es un sistema informático que genera entornos sintéticos en tiempo real y que se rigen en una realidad ilusoria, pues trata de una realidad perceptiva sin soporte objetivo, ya que existe sólo dentro de la computadora [6].

Ya llegando a la definición que utiliza el presente trabajo, la realidad aumentada se usa para describir la combinación de tecnologías que permiten mezclar en tiempo real contenido generado por computadora con video en vivo. La realidad aumentada se utiliza en múltiples campos como medicina, entretenimiento como son los videojuegos, en el entrenamiento como puede ser la simulación, en arquitectura para reconstruir o construir edificios antiguos o de nuevo diseño y en la educación, entre otros, y esta se diferencia de la realidad virtual en que esta es un ambiente completamente virtual y sintético ya que todo ocurre dentro de la computadora sin interacción con el exterior y la realidad aumentada hace una combinación de elementos del mundo real con elementos virtuales, y en la realidad virtual todo es un ambiente completamente virtual. [7]

Hay dos tipos de realidad aumentada, la que usa marcadores (markers) y la que no los usa (sin marcadores). La principal característica de la primera es que utiliza imágenes llamadas marcadores que la cámara reconoce, busca la imagen asociada y la colocar sobre el marcador. El marcador está impreso en un papel de preferencia blanco para que la cámara logre reconocer la imagen ya que ésta se ve afectada por el brillo y contraste que existe en el ambiente. El otro tipo de realidad aumentada se caracteriza en que no utiliza marcadores, ya que busca patrones para reconocer el entorno y aplicar la realidad aumentada sobre esto, además de que se puede auxiliar de acelerómetro, GPS, entre otros.

2.2 Patrones de Diseño

Los patrones de diseño son  soluciones a problemas que se usa repetidamente en contextos similares con algunas variantes de implementación [8] los más conocidos son los que catalogó Eric Gamma. Los patrones GUI son soluciones a problemas recurrentes solo que específicamente en el contexto visual.

Los patrones de diseño de interfaz gráfica de usuario son de gran ayuda para facilitar la interacción y convivencia del usuario con la aplicación. Este tipo de patrones tienen muchas aplicaciones ya sea para páginas Web o aplicaciones de escritorio.

El combinar patrones de diseño de interfaz de usuario con realidad aumentada es de gran utilidad ya que se ofrece un ambiente más atractivo para los usuarios al utilizar las aplicaciones, como es el caso de aplicaciones Web con realidad aumentada con fines educativos.

La aplicación que se describe en el presente escrito utiliza realidad aumentada con marcadores.

2.3 Origami

En cuanto al  origami de acuerdo a [4]  significa plegado de  papel y que es un arte proveniente de Japón. Se trata de una práctica artesanal en la cual sólo se emplean las manos y uno o más trozos de papel con el propósito de lograr toda clase de figuras, además de que también se le conoce en algunos lugares como papiroflexia.

Existen varias clasificaciones del origami entre las que destacan  el origami de acción, el cual tiene la particularidad de desarrollar piezas con partes movibles. Para conseguir ese resultado, se suelen armar módulos en donde con sólo tirar o presionar sobre una zona produzcan un movimiento determinado.

Otros, en cambio, cultivan el arte del origami modular (técnica que invita a juntar figuras iguales entre sí para conformar una única pieza que exhiba profundidad y posea una cierta complejidad que le permita funcionar como objeto decorativo), así como también hay quienes prefieren trabajar con la opción del plegado en húmedo para moldear mejor la materia prima. Por último, resulta interesante mencionar además al estilo pureland, una metodología que sólo contempla el uso de pliegues simples, de a uno por vez.

El objetivo del presente documento es mostrar el desarrollo de una aplicación Web que utilice los patrones combinados con realidad aumentada para guiar al usuario a crear un avión de papel.

Caso de Estudio

El origami muchas veces se considera muy difícil debido a que los diagramas que se encuentran en los libros e internet en ocasiones resultan muy complejos y para un principiante es muy difícil el poder entender el orden, la dirección y la posición de los trazos que debe de seguir para lograr la figura que busca crear.

Con esta aplicación se busca facilitar a los usuarios que estén interesados en aprender papiroflexia con una manera fácil y no complicada de entender la cantidad de trazos que se realizan en el antiguo arte japonés.

Para la aplicación se crearon marcadores, en los cuales se tomó de base la imagen que da la instrucción de como doblar el papel. En la figura 1 se muestra el marcador del primer paso.

Figura 1. Marcador del paso 1. Muestra la primera acción a realizar en el proceso de doblado del papel.

De los patrones propuestos en [1], se seleccionaron Wizard y Acordeón debido, el primero se eligió debido a que permite agrupar información de un mismo tema, pero con la ventaja de que puede dividirse en pequeñas secciones, que se pueden colocar dentro del cualquier tipo de componente, en este caso se le colocó un video display. El segundo se seleccionó debido a que permite seguir una serie de pasos en un determinado orden, con lo cual se fueron detallando uno por uno en el proceso de la construcción del avión de papel.

En la figura 2 se muestra la interfaz de la aplicación Web.

Figura 2. Interfaz de la aplicación.

El recuadro de la izquierda en la figura 2 es un acordeón en el que muestra la información como materiales requeridos y una imagen del producto final obtenido.
En el recuadro de la derecha de la figura 2 es un patrón Wizard el cual se utiliza para guiar al usuario en el desarrollo de la figura. Cuenta con 5 pestañas las cuales se muestran con realidad aumentada los 5 pasos con los cuales se logra hacer la figura completa. Cuenta con botones para iniciar y detener la captura de video.

La figura 3 muestra la aplicación trabajando mostrando los pasos para ir armando la figura de papel.

Figura 3. Primer paso en el proceso de creación.

La figura 4 muestra otro paso más en el proceso de creación del avión de origami.

Figura 4. Paso 5 en el proceso de creación del avión.

4. Tecnología Utilizada

Para la  aplicación de realidad aumentada con los patrones de diseño de interfaz gráfica se utilizó la biblioteca FlarManager[9] la cual usa el Framework Adobe Flex, como IDE de desarrollo se utilizó Adobe Flex Builder 3, Microsoft Publisher para la creación de marcadores y la herramienta de Taro Taro Marker Generator [10] con la cual se crean los marcadores para que los reconozca la cámara Web. Para la creación de los objetos virtuales se utilizó la herramienta Blender así como Google Sketchup, las cuales permite exportar a diferentes formatos de objetos virtuales.

5. Estructura de la aplicación

La aplicación se desarrolló en Adobe Flex Builder y se utilizaron componentes y los Frameworks de Paper Vision 3D, Ascollada y Flar Manager. En la figura 5 se muestra la el diagrama de clases de la aplicación.

Figura 5. Diagrama de clases del sistema.

6. Resultados Obtenidos

El resultado de la combinación de los patrones identificados y realidad aumentada se obtuvo una pequeña aplicación Web la cual permite al usuario crear su figura de origami que se enseña, con la ventaja sobre los videos y diagramas, de que ve los trazos en una imagen, además de tener el diagrama del trazo en papel. Además de que se utilizaron las propiedades de POO que son herencia y polimorfismo, así como eventos por medio de un patrón observer (observador) con lo cual todos los métodos fueron invocados por medio de eventos que se definieron en las clases.

7. Conclusiones

La realidad aumentada es una tecnología que tiene mucho potencial en campos como educación, video juegos, industria, entre otras. Además, si se aplica ese potencial en patrones de diseño de interfaz gráfica de usuario se obtendrán aplicaciones más atractivas para los usuarios.
En la industria de video juegos la Realidad aumentada tiene un gran auge, por lo que si se emplea de manera correcta se pueden tener resultados muy prometedores.
Finalmente es importante destacar que a pesar de que todos los patrones de diseño de interfaz gráfica permiten una mejor interacción  con el usuario, tienen limitantes que se busca superar con la aplicación de realidad aumentada como se puede observar en la aplicación.

Los patrones diseño de interfaz gráfica ayudan tanto a los usuarios como desarrolladores a solucionar problemas referentes a las interfaces de usuario, ya que permiten agrupar y mostrar la información de una mejor manera, ya que sin ellos toda la información sería demasiada y sin orden lo cual provoca que sea cansado para el usuario final la visualización de esta, como el desarrollador  que tiene que ver la mejor manera de colocar la información.

Los patrones ofrecen distintas maneras de ordenar la información, ya sea agrupándola como es el caso del acordeón, que a la vez la separa para un mejor entendimiento. Hay otros como el patrón ampliar el contexto que evita la sobre saturación de imágenes en la pantalla ya que muestra información con forme se va requiriendo al pasar el mouse sobre el elemento que se desea obtener mayor información.

Referencias

  1. Barbosa T. Rogelio, Abud F. M. Identificación de Patrones de Diseño de Interfaz de Usuario para aplicar Realidad Aumentada. CICOS 2012
  2. F. Liarokapis, P. Petridis, P. F. Lister, and M. White, “Multimedia augmented realityinterface for e-learning” (MARIE),World Transactions on Engineering and Technology Education, 2002
  3. J. T. Doswell, M. B. Blake, and J. Butcher-Green, “Mobile augmented reality system architecture for ubiquitous e-learning (MARS)”, Proceedings of the Fourth IEEE International Workshop on Wireless, Mobile and Ubiquitous Techno-logy in Education , 2006
  4. Gray Alice, Kasahara Kunihiko. La magia del Origami. 2002. Editorial Edaf. Japón
  5. http://lema.rae.es/drae/?val=realidad. Accedido 17 septiembre 2012
  6. G. M. Alfonso, Educación multimedia y nuevas tecnologías. Ediciones de la torre, 2002.
  7. M. Tony, Prototyping Augmented Reality. John Willey and Sons, 2011.
  8. G. Erich, H. Richard, and V. John, Design Patterns: Elements of Reusable Object-Oriented Software. Addison Wesley, 1994
  9. http://words.transmote.com/wp/flarmanager/ Accedido Marzo 2013.
  10. http://flash.tarotaro.org/blog/2009/07/12/mgo2/ Accedido Marzo 2013.