Origam-i:Juego basado en procesado de imagen para iPhone
Realizado por: Santiago Garcıa Guillen
Dirigido por: Cristina Urdiales Garcıa
Escuela Tecnica Superior de Ingenierıa de Telecomunicacion
Universidad de Malaga
19 Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
1 Introduccion a los dispositivos moviles
2 Caracterısticas del problema: iOS y origami
3 Estudio de procesado de imagen aplicado a Origam-i
4 Aplicaciones desarrolladas
5 Conclusiones y trabajo futuro
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Explosion de los dispositivos moviles
� Dispositivos moviles del ahora: Smartphones y tabletas
� Desde ∼2009: explosion de ventas. Llegada al usuario medioI Reduccion de precioI Aparicion de la tecnologıa 3GI Mejora de sus capacidades y perifericos
I CPUI Pantalla tactilI Videocamara y GPUI Sistema de sonidoI GPSI Acelerometros
� Mercado se compartimenta segun plataforma
I iOS de Apple: iPhone y iPadI Android de Google junto a diferentes companıasI BlackberryI Windows Phone (Microsoft + Nokia)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Explosion de los dispositivos moviles
� Dispositivos moviles del ahora: Smartphones y tabletas
� Desde ∼2009: explosion de ventas. Llegada al usuario medioI Reduccion de precioI Aparicion de la tecnologıa 3GI Mejora de sus capacidades y perifericos
I CPUI Pantalla tactilI Videocamara y GPUI Sistema de sonidoI GPSI Acelerometros
� Mercado se compartimenta segun plataformaI iOS de Apple: iPhone y iPadI Android de Google junto a diferentes companıasI BlackberryI Windows Phone (Microsoft + Nokia)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Aplicaciones para smartphones
Un telefono ya no sirve solo para llamar: aplicaciones (apps)
� Smartphone: ordenador en la palma de la manoI Movilidad, maniobrabilidad, ergonomıa,...I Tiendas virtuales: App Store, Google Play
� Aplicaciones de todo tipoI UtilidadesI Comunicaciones y redes socialesI OfimaticaI MusicaI JuegosI TelemedicinaI Educativas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Aplicaciones para smartphones
Aplicaciones educativas: Sistemas interactivos tutorizados
X Simbiosis perfecta con sistemas moviles
X Tutorizacion mediante realimentacion usuario–movil
X Un smartphone es un ordenador en la palma de la manoI Siempre encimaI ManiobrabilidadI Mas ameno que leer un manual
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Smartphones: evolucion
A lifetime of Apps. IEEE Spectrum Sep 2012 c©James Provost
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
¿Que vamos a hacer?
Sistema interactivo tutorizado
� Aportar know-how academico
� Desarrollar una aplicacion que permita probar las ventajas queofrecen los smartphones
� Crear un ejemplo de aplicacion interactiva tutorizadaI Tutor: tiene el conocimientoI Usuario: realiza el aprendizajeI Programador: aısla el conocimiento del tutor y lo ofrece al
usuario
X Origam-i: Juego basado en procesado de imagen para iPhoneI Captura del entorno: videocamaraI Realimentacion hacia el usuario: Pantalla tactilI Alto consumo de CPU/GPU: procesado en directo
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
¿Que vamos a hacer?
Sistema interactivo tutorizado
� Aportar know-how academico
� Desarrollar una aplicacion que permita probar las ventajas queofrecen los smartphones
� Crear un ejemplo de aplicacion interactiva tutorizadaI Tutor: tiene el conocimientoI Usuario: realiza el aprendizajeI Programador: aısla el conocimiento del tutor y lo ofrece al
usuario
X Origam-i: Juego basado en procesado de imagen para iPhoneI Captura del entorno: videocamaraI Realimentacion hacia el usuario: Pantalla tactilI Alto consumo de CPU/GPU: procesado en directo
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Realidad Aumentada
� Version mejorada de la realidad superponiendo informacion digital
� Toma de datos del entorno, procesado y representacion
� No es imprescindible, pero se ajusta perfectamenteI Forma mas intuitiva de ensenar: mostrar en directoI Aplicaciones de altos requerimientos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Eleccion de plataforma: iPhone y iOS
� iOS: iPhone OS, lanzado en 2007
� Version actual: iPhone 5S/5C y iOS 7.0
� ¿Por que iPhone? Pocos dispositivos, pocas versiones SO
� Programacion en Objective-CI Extension POO del lenguaje C. Sintaxis propia
� SDK y entorno de desarrollo proporcionado por Apple
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Arquitectura logica iOS
Capas Logicas en iOS
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Patrones de diseno
Patron de diseno (templates): Solucion reutilizable a problemas comunes
� Modelo–Vista–Controlador (MVC)
� Paso de mensajes: NSNotificationCenter
� Delegacion
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Caracterısticas del origami
La papiroflexia —u origami en japones— es el arte de plegar unpapel para obtener figuras de formas variadas
Caracterısticas:
� Cada figura se compone de diferentes pasos ordenados
� Cada paso tiene una forma unica
� Entre paso y paso se realiza un doblez
� El papel usado tiene dos colores: frente y dorso
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Tipos de dobleces
Valle
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Tipos de dobleces
Inside Reverse o Hueco
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Tipos de dobleces
Apertura
¡No es plano!
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Limitaciones
� No se pueden tener pasos tridimensionalesI Easy Origami: Solo 2D
� Es necesario aislar caracterısticas que identifiquen la forma
� Existen zonas de sombra y el color no es constante
I Procesado de imagen: deteccion de esquinas, color
� Es necesario diferenciar Frente, Dorso y color de fondo
I Imponer el uso de tres colores planos y diferentes
� El doblez se identifica mediante varios parametros
I Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?
� Los pasos deben ser almacenados correctamente
I Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Limitaciones
� No se pueden tener pasos tridimensionalesI Easy Origami: Solo 2D
� Es necesario aislar caracterısticas que identifiquen la forma
� Existen zonas de sombra y el color no es constanteI Procesado de imagen: deteccion de esquinas, color
� Es necesario diferenciar Frente, Dorso y color de fondo
I Imponer el uso de tres colores planos y diferentes
� El doblez se identifica mediante varios parametros
I Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?
� Los pasos deben ser almacenados correctamente
I Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Limitaciones
� No se pueden tener pasos tridimensionalesI Easy Origami: Solo 2D
� Es necesario aislar caracterısticas que identifiquen la forma
� Existen zonas de sombra y el color no es constanteI Procesado de imagen: deteccion de esquinas, color
� Es necesario diferenciar Frente, Dorso y color de fondoI Imponer el uso de tres colores planos y diferentes
� El doblez se identifica mediante varios parametros
I Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?
� Los pasos deben ser almacenados correctamente
I Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Limitaciones
� No se pueden tener pasos tridimensionalesI Easy Origami: Solo 2D
� Es necesario aislar caracterısticas que identifiquen la forma
� Existen zonas de sombra y el color no es constanteI Procesado de imagen: deteccion de esquinas, color
� Es necesario diferenciar Frente, Dorso y color de fondoI Imponer el uso de tres colores planos y diferentes
� El doblez se identifica mediante varios parametrosI Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?
� Los pasos deben ser almacenados correctamente
I Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Limitaciones
� No se pueden tener pasos tridimensionalesI Easy Origami: Solo 2D
� Es necesario aislar caracterısticas que identifiquen la forma
� Existen zonas de sombra y el color no es constanteI Procesado de imagen: deteccion de esquinas, color
� Es necesario diferenciar Frente, Dorso y color de fondoI Imponer el uso de tres colores planos y diferentes
� El doblez se identifica mediante varios parametrosI Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?
� Los pasos deben ser almacenados correctamenteI Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Estudiando el problema en conjunto...
� Sistema interactivo tutorizado
� Dispositivo movil
� Origami
X Plataforma que genera nuevas aplicacionesI Tutor–Programador: Aplicacion del desarrolladorI Programador–Usuario: Aplicacion de usuario final
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Estudiando el problema en conjunto...
� Sistema interactivo tutorizado
� Dispositivo movil
� Origami
X Plataforma que genera nuevas aplicacionesI Tutor–Programador: Aplicacion del desarrolladorI Programador–Usuario: Aplicacion de usuario final
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Division del proyecto en dos aplicaciones
� Diferentes usuarios, diferentes necesidadesI El usuario final quiere feedback rapido: flujo de videoI El tutor ya sabe los pasos: fotografıas
� Diferentes escenarios, diferentes procesadosI Al crear la base de datos, el visto bueno lo da el tutorI Al usar la base de datos, la aplicacion da el visto bueno
� Aislar creacion y distribucion
I Crear diferentes bases de datos para comercializar
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Division del proyecto en dos aplicaciones
� Diferentes usuarios, diferentes necesidadesI El usuario final quiere feedback rapido: flujo de videoI El tutor ya sabe los pasos: fotografıas
� Diferentes escenarios, diferentes procesadosI Al crear la base de datos, el visto bueno lo da el tutorI Al usar la base de datos, la aplicacion da el visto bueno
� Aislar creacion y distribucionI Crear diferentes bases de datos para comercializar
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Division del proyecto en dos aplicaciones
� Diferentes usuarios, diferentes necesidadesI El usuario final quiere feedback rapido: flujo de videoI El tutor ya sabe los pasos: fotografıas
� Diferentes escenarios, diferentes procesadosI Al crear la base de datos, el visto bueno lo da el tutorI Al usar la base de datos, la aplicacion da el visto bueno
� Aislar creacion y distribucionI Crear diferentes bases de datos para comercializar
Dos aplicaciones sobre iOS
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
¿Que procesado de imagen?
� Procesado en colorI Mejora de la calidad de imagen: Iluminacion, sombras
� Extraccion de esquinasI Identificacion de la forma de la figura: Esquinas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
¿Que sabemos de las sombras?
� ¿Que provoca las sombras?I Elementos externosI La propia figura: bordes
� Reduccion de luz:I Oscurecimiento de una zona
de la imagen
� ¿Podemos aclarar un color?I Gracias a la representacion
en espacio de color
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Espacios de color
RGB: ¡No es facil moverse! HSV: Basta variar V
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Procesado de color
Transformacion RGB→HSV→RGB
� Ecuaciones complejas: LentasI Tabular los resultados (Look-Up Table) (7)
I Memoria: 256× 256× 256× 3× 4 ≈ 192MbytesI iPhone 4: 512 Mbytes de RAMI Usar disco: Perdida de velocidadI Diezmado: Perdida de precision
I Agrupacion de colores (7)
I Acudir a transformaciones aproximadas y rapidas (!)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Procesado de color
Transformacion RGB→HSV→RGB
� Ecuaciones complejas: LentasI Tabular los resultados (Look-Up Table) (7)
I Memoria: 256× 256× 256× 3× 4 ≈ 192MbytesI iPhone 4: 512 Mbytes de RAMI Usar disco: Perdida de velocidadI Diezmado: Perdida de precision
I Agrupacion de colores (7)I Acudir a transformaciones aproximadas y rapidas (!)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Procesado de color
Transformacion RGB→HSV→RGB
Transformada rapida RGB-HSV
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Deteccion de esquinas
¿Que caracterısticas debe tener un detector de esquinas?
� Debe detectar todas las esquinas
� No debe detectar esquinas donde no las hay
� Tiene que ser robusto ante el ruido
� Debe ser preciso en la localizacion de una esquina
¿Que problemas podemos encontrar en la imagen?
� Sombras
� Desenfoque o imagen borrosa
� Exceso o defecto de iluminacion
� Fallos hardware
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas
Algoritmos de extraccion de esquinas
� FAST(-er)I Codigo liberado en C++I Usa escala de grisesI fastn y fastn non max
I non max suppression: Supresion de no maximos locales
� Medida de HarrisI Desarrollo matematicoI Gran cantidad de calculos: uso de GPU y flujo de videoI Basado en intensidad lumınica de varios pıxeles
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas
Extraccion de esquinas: escala de grises
� Mapear un universo tridimensional en uno unidimensional
� PAL/Apple (FAST): Y = 0,299× R + 0,587× G + 0,114× B
� ITU-R BT.709 (Harris): Y = 0,2125×R + 0,7154×G + 0,0721×B
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas
Extraccion de esquinas: escala de grises
� Mapear un universo tridimensional en uno unidimensional
� PAL/Apple (FAST): Y = 0,299× R + 0,587× G + 0,114× B
� ITU-R BT.709 (Harris): Y = 0,2125×R + 0,7154×G + 0,0721×B
Colisiones en colores complejos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app del tutor: FAST
FAST
Parametro clave: Contiguidad de n pıxeles
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app del tutor: FAST
fast10 fast10 non max
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app del tutor: FAST
fast10 fast11
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app del tutor: FAST
X Modelo hıbridoI fast10
I Contiguidad 10px sobre circunferencia 16px
I Algoritmo de supresion de duplicados propioI fastn non max elimina esquinas que no debeI Rcluster = 0,03 ·
√W · H
I Ajuste fino manual aprovechando la pantalla tactilI Borrar es mas facil que anadir
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
FAST: Rendimiento
Modulo/funcion Tiempo de proceso t (ms)
Obtencion del mapa de bits (CG) ≈ 690
RGB2HSVRapido (C++) ≈ 270
Giro de la imagen (CG) ≈ 670
Image2Grayscale (CG) ≈ 100
fast10 (C++) ≈ 17
Simplificar cluster /10u (C++) ≈ 6
Superposicion RA /1u (UIKit) ≈ 5
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
FAST: Rendimiento
Modulo/funcion Tiempo de proceso t (ms)
Obtencion del mapa de bits (CG) ≈ 690
RGB2HSVRapido (C++) ≈ 270
Giro de la imagen (CG) ≈ 670
Image2Grayscale (CG) ≈ 100
fast10 (C++) ≈ 17
Simplificar cluster /10u (C++) ≈ 6
Superposicion RA /1u (UIKit) ≈ 5
Tiempo total ≈ 2s
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app de usuario: Medida Harris
Medida Harris
Parametro clave: variacion de la intensidad en ambas dimensiones
Robert Collins. Harris Corner Detector, 2007
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app de usuario: Medida Harris
� Trabajo con flujo de video: Procesado HarrisI OpenGL ES
I Fragment ShadersI Vertex Shaders
I Librerıa GPUImage
� Cadena de procesado (filtros)I Escala de grises (ITU-R BT.709): dotI Derivada discreta: 2×convolucion 2D con operador Prewitt
I Gx =(−1 0 1
−1 0 1−1 0 1
)∗ I , Gy =
(1 1 10 0 0−1 −1 −1
)∗ I
I Limpieza: Desenfoque gaussianoI Medida Harris: R = R(Ix , Iy , Ixy , k)I Supresion de puntos no maximos locales (non max suppression)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app de usuario: Medida Harris
� Proceso en GPU: destructivo
� El resultado del procesadoHarris no esta en la CPU
� La informacion esta dispersapor el mapa de bits
� Perdida de rendimiento(iPhone 4, iOS 6):
I Leer con glReadPixels()≈ 90ms
I Leer imagen pıxel a pıxel≈ 30ms
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Extraccion de esquinas en app de usuario: Medida Harris
� Proceso en GPU: destructivo
� El resultado del procesadoHarris no esta en la CPU
� La informacion esta dispersapor el mapa de bits
� Perdida de rendimiento(iPhone 4, iOS 6):
I Leer con glReadPixels()≈ 90ms
I Leer imagen pıxel a pıxel≈ 30ms
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Deteccion de figura correcta: Emparejado
� Hay un flujo de video: movimientos
� No puede ser emparejado perfectoI Esquinas de mas o menosI Ligeras rotaciones y variaciones de perspectiva
X Algoritmo propioI Fijar dos puntos extremos de la escenaI Escalar distancias y calcular angulos respecto de estosI Buscar parejas punto a punto
X El paso ha sido realizado correctamente si durante 4fotogramas de los ultimos 5 al menos un ratio mayor del 80 %de los n elementos de la base de datos son emparejados sobrelos k elementos obtenidos del procesado en directo con nomas de un elemento del procesado no emparejado
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Deteccion de figura correcta: Emparejado
� Hay un flujo de video: movimientos
� No puede ser emparejado perfectoI Esquinas de mas o menosI Ligeras rotaciones y variaciones de perspectiva
X Algoritmo propioI Fijar dos puntos extremos de la escenaI Escalar distancias y calcular angulos respecto de estosI Buscar parejas punto a punto
X El paso ha sido realizado correctamente si durante 4fotogramas de los ultimos 5 al menos un ratio mayor del 80 %de los n elementos de la base de datos son emparejados sobrelos k elementos obtenidos del procesado en directo con nomas de un elemento del procesado no emparejado
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Deteccion de figura correcta: Emparejado
� Hay un flujo de video: movimientos
� No puede ser emparejado perfectoI Esquinas de mas o menosI Ligeras rotaciones y variaciones de perspectiva
X Algoritmo propioI Fijar dos puntos extremos de la escenaI Escalar distancias y calcular angulos respecto de estosI Buscar parejas punto a punto
X El paso ha sido realizado correctamente si durante 4fotogramas de los ultimos 5 al menos un ratio mayor del 80 %de los n elementos de la base de datos son emparejados sobrelos k elementos obtenidos del procesado en directo con nomas de un elemento del procesado no emparejado
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Base de datos
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Base de datos
nombreFigura: DemonumeroFigura: 1numeroPaso: 1
P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Base de datos
nombreFigura: DemonumeroFigura: 1numeroPaso: 1
P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163
+Doblez:x1=26
x2=418xe=298
y1=133y2=537ye=2581
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Base de datos
nombreFigura: DemonumeroFigura: 1numeroPaso: 1
P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163
+Doblez:x1=26
x2=418xe=298
y1=133y2=537ye=2581
nombreFigura: DemonumeroFigura: 1numeroPaso: 2
P1: x=58, y=76P2: x=354, y=377P3: x=43, y=373
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Base de datos
nombreFigura: DemonumeroFigura: 1numeroPaso: 1siguientePaso: Paso2
P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163
+Doblez:x1=26
x2=418xe=298
y1=133y2=537ye=2581
nombreFigura: DemonumeroFigura: 1numeroPaso: 2anteriorPaso: Paso1
P1: x=58, y=76P2: x=354, y=377P3: x=43, y=373
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Division del proyecto en dos aplicaciones
Tutor — Programador — Usuario
� Origam-i dev.appI Aplicacion del desarrolladorI Reconocimiento de esquinasI Adicion de informacion a ddbbI Interaccion manual (edicion)I Uso de fotografıasI Realidad aumentada
� Origam-i.appI Aplicacion del usuarioI Decision sobre la formaI Lectura de la base de datosI Feedback visualI Uso del flujo de videoI Realidad aumentada
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i dev.app resumen
Origam-i dev.app
Amplio espacio de visualizacion
Esquinas y doblez: Realidad Aumentada
Pantalla tactil: botones y edicion manual
Botones para el uso de funciones
Tocar para anadir
Ajuste fino con deslizamiento
Base de datos: CoreData
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i dev.app resumen
Origam-i dev.app
1 Indicacion de comienzo
2 Toma de fotografıa / Carga desde carrete
3 Eliminacion de sombras:RGB→HSV→V=1→RGB
4 Deteccion de esquinas (FAST)
5 Visualizacion
6 Seleccionar doblez e introducir texto
7 Almacenamiento
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i dev.app: Integracion del procesado
Imagen Original Value=1Deteccion esquinas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
La aplicacion del usuario final: Origam-i.app
Inicio Seleccion de figuras Principal
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i.app: Flujo de uso
1 Seleccion de figuraI Carga desde la ddbb
2 Procesado continuo del flujo de vıdeoI Calculo Harris en GPUI Deteccion forma correcta/incorrecta: MatchingI Calculo RA
3 Visualizacion: fotograma + RA
4 Interaccion del usuario (interrupcion)
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i.app: Realidad Aumentada
� Mostrar texto de ayuda
� Mostrar esquinas detectadas
� Botones OK/Atras
� Mostrar doblez
� Mostrar imagenessuperpuestas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i.app: Realidad Aumentada
� Mostrar texto de ayuda
� Mostrar esquinas detectadas
� Botones OK/Atras
� Mostrar doblez
� Mostrar imagenessuperpuestas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i.app: Realidad Aumentada
El problema del doblez
� La escena tiene perspectivadiferente al original
� Nuevo sistema de coordenadas
I Transformacion lineal apartir de dos puntosemparejados
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Origam-i.app: Realidad Aumentada
� Mostrar texto de ayuda
� Mostrar esquinas detectadas
� Botones OK/Atras
� Mostrar doblez
� Mostrar imagenessuperpuestas
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Control de estado de red
Sin conexion Conexion WiFi Conexion red movil
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Conclusiones
X Juego educativo de origami con Realidad Aumentada para iOS
X Estudiar caracterısticas de smartphone. Test ante apps exigentes
X Division en dos aplicaciones: desarrollador y usuario
I Crear diferentes aplicaciones cambiando la base de datos
X Uso de lo ofrecido por Apple: frameworks, librerıas,...
X FAST obtienen buenos resultados y es rapido
X Medida Harris permite usar OpenGL ES (GPU)
I GPU–RAM es cuello de botella
X Realidad Aumentada mediante CoreGraphics
X Uso de redes sociales permite autopromocion
X Internacionalizacion y Localizacion de manera simple
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones
Trabajos futuros
� Paso a la tercera dimension: mas figuras
� Comercializacion de la aplicacion
� Mejoras de rendimiento: emparejado, doblez
� Portar la app a otros sistema movil: Windows Phone/Android
� Aumentar la virtualidad de la escena
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garcıa Guillen Mayo 2014
¿Preguntas?
Top Related