Proyecto: QTigual

Presentación

Proyecto de Visión Computacional by Roberto Carlos

Propósito
Actualmente el desarrollo de sistemas en dispositivos móviles es una de las muchas maneras en las cuales nosotros como futuros ingenieros en software podemos utilizar para hacer uso de todas sus capacidades y aprovecharlas para hacer innovadoras ideas y atraer al público en general.

Para el proyecto visión computacional se nos pide realizar un sistema que utilice las técnicas aprendidas durante el semestre, es por eso que estuve trabajando en la combinación de tratamiento de imágenes y los dispositivos móviles para realizar un juego donde el usuario debe dibujar lo más igual posible, una imagen que se le muestra al principio de manera que contra el tiempo, luego de un proceso con la imagen dibujada y la original, realizar filtros para obtener un porcentaje de igualdad de imagenes.

Diseño de software
El software está orientado a diferentes campos, primero que nada tenemos una aplicación móvil desarrollada en el lenguaje de programación Objective-C en donde tenmos diferentes vistas, de manera que tenemos una vista principal en donde se la bienvenida al usuario en el juego y tiene que seleccionar si desea continuar jugando.

Durante 4 segundos aparece una imagen que se carga desde el servidor, luego se pasa a la siguiente vista para que el usuario mediante un canvas pueda capturar el dibujo y después de 10 segundos, esta imagen se mande al servidor donde por medio de una aplicación WEB desarrollada en PHP lo guarde y establesca conexión con el puerto 6699 creado mediante un socket en python, de esta manera, al momento de mandar un mensaje a este socket se crea una conexión independiente mediante un hilo y se empieza a procesar la imágen para dar como regreso un promedio de cuanta cantidad de imagen es igual o semejante a la capturada por el usuario, para esta a su vez responder a la aplicación WEB de PHP y retornar un mensaje por HTTP a la aplicación móvil mediante una alerta.

Descripción textual
El sistema se divide en diferentes partes importantes:

• La aplicación móvil la cual captura mediante un canvas el dibujo hecho por el usuario para mandarlo a la aplicación WEB.
• Aplicación WEB en PHP que guarda la captura y hace una llamada al puerto que contiene el procesamiento de los filtros.
• Socket que hace todas las imagenes de tratamiento para devolver el porcentaje de semejanza con la imagen.

En diagrama anterior podemos ver las etapas por las que pasa el juego, de manera que podamos los procedimientos por lo que pasa y sobre los tratamiento de imagen necesarios para obtener un buen porcentaje de semejanza.

Entre los filtros que es necesario desarrollar son:

• Cambiamos a grises
• Agregamos el filtro de la mediana varias veces
• Sacamos la diferencia 
• Ponemos un umbral
• Obtenemos esquinas
• Obtenemos los bordes con Laplaciana
• Agregamos BFS
• Obtenemos figura
• Dibujamos en dicha figura cada esquina detectada con un elipse
• Se comprara con el mismo procedimiento la figura hecha por canvas
• Obtenemos el porcentaje de blancos de la imagen

Imagen de server

Detección de esquinas de imagen de server 

Detección de esquinas de imagen dibujada

Se sobre ponen los círculos más grandes
con los círculos más pequeños y
 sacamos la cantidad de blanco en la imagen,
En este caso, no coincidió con ninguno, por lo tanto
no se tiene semejanza

Librerías utilizadas
En la parte de visión computacional no utilicé ningún recurso para realizar los filtros, todo fue escrito por mi, utilizando solamente la librería de imagenes de Python para poder accesar a cada pixel y aplicar los diferentes filtros.

En la parte web, utilizo los recursos de python para números random, numpy y para crear sockets y en la parte móvil utilizo los recursos necesarios para las interfaces y vistas.

• Threading
• PIL
• Image, 
• ImageTk, 
• ImageDraw
• math 
• floor,
• atan, 
• fabs, 
• pi, 
• cos, 
• sin, 
• ceil, 
• sqrt, 
• degrees, 
• atan2
• random 
• randint
• time
• numpy
• socket

Desempeño
Al ser hecha por mi, el proyecto al principio demoraba mucho para dar una respuesta, este fue en el problema que estuve trabajando durante este tiempo en hacer tiempos de respuesta más pequeñas, por lo que hice de cierta manera que la imágen bajara de tamaño para de esta forma el procesado de los pixeles fuera más rápido y dar un resultado rapidamente.

Las imágenes con las que trabaje al principio eran computacionalmente pesadas, por lo de un tiempo aproximado de 15 segundos de respuesta, lo baje a 10, para luego en la versión entregable del proyecto final, lo tenemos aproximadamente en unos 4-5 segundos.

El tiempo está siendo marcado siempre por el tiempo de vida de la conexión del hilo en python, por lo que podemos ver los resultados cada que se inicia un nuevo juego en el terminal.

Trabajo a futuro
Como trabajo futuro yo creo que sería el hacer mucho menos el tiempo de espera al porcentaje de la similitud para de esta manera poder hacer que el usuario tenga una respuesta más rapida sobre lo que esta jugando y no se aburra de estarlo esperando.

Otro proyecto futuro sería el agregar niveles, agregar dificultades de manera que cada vez sean imágenes más dificiles para su similitud, esto mas o menos se encuentra contemplado en el proyecto ya que como lo dije anteriormente al momento de detectar las esquinas el radio de esta detección cambia y de esta manera podemos hacer que los radios sean más pequeños y aumente la dificultad de similitud.

Y como proyecto de largo plazo también el agregar funcionalidades necesarias para su proyección, por ejemplo el jugar contra enemigos, el compartir en redes sociales, en poner puntaje en el gamecenter, etc...

Este es un video de cómo funciona el juego.

Liga a mi repositorio. aquí.