20.671 - Desarrollo de aplicaciones interactivas - Aula 1

Pública

Índice

1. Introducción y objetivo
2. Decisiones técnicas librería de reconocimiento
3. Arquitectura y estructura del código
4. Decisiones estéticas
5. Flujo de desarrollo

1.     Introducción y objetivo

En esta práctica, se ha desarrollado una aplicación de escritorio interactiva con el objetivo de fomentar buenos hábitos de salud dental en niños. La idea principal es la siguiente: el usuario debe mantener la boca abierta el máximo tiempo posible, simulando el gesto de tener la boca abierta mientras un dentista o mientras se realizan ejercicios de limpieza dental.

La aplicación se ha construido con p5.js para la parte visual y de partículas, MediaPipe FaceLandmarker para la detección facial en tiempo real, y Electron para empaquetar todo como una aplicación de escritorio.

2.     Decisiones técnicas

Dentro de las diferentes opciones se planteó utilizar las siguientes:

• js (la sugerida por el enunciado)
• MediaPipe Task Vision código abierto de Google

Finalmente se escogió MediPipe por dos razones de peso una de ellas abordando las capacidades tecnológicas del modelo y la otra de capacidad de trabajo. Y es que la primera son los 478 puntos de referencia que MediaPipe coge de la cara lo que da un grado mucho mayor de precisión y la segunda es la capacidad de delegar el trabajo a la CPU creando programas mucho más factibles a nivel de rendimiento.

3.     Arquitectura y estructura del código

Para no entrar en detalle muy técnico voy a indicar de forma general la estructura de este código:

• Tenemos el archivo man.js que es la entrada de Electron quien gestiona las ventanas, permisos y arranca el proyecto como tal.
• html carga la HUD es decir la parte visual y los diferentes scripts.
• css solicitado por el enunciado independiente y desarrollado por nosotros, con fuentes de Google fonts de Halloween, por ejemplo.
• js y particleSystem.js gestionan los estilos, timings y condicionales de las partículas
• js se encarga de definir las constantes globales, como por ejemplo el parámetro de obertura de boca.

4.     Decisiones estéticas

La paleta de colores y el estilo del proyecto se han establecido en base a diferentes referencias que he encontrado por internet, de todas estas he localizado los colores comunes que son los siguientes y los que se han utilizado finalmente en el proyecto.

1. Malva / Violeta (#6B2D7B, #4A1D5C) — color principal de fondo y elementos de la UI
2. Naranja dorado (#E8A030) — color secundario, presente en el HUD y en los elementos de calabaza.
3. Crema (#FFF5E6) — color base del texto y de los fantasmas, aporta calidez y contraste suave.
4. Coral (#E85D3A) — usado en botones y acentos, da vida y energía a la interfaz.
5. Amarillo (#F5C518) — para los detalles brillantes y las chispas.

5. Flujo de desarrollo

Durante la creación de este proyecto se ha ido iterando en diferentes ideas y conceptos para acabar teniendo una propuesta completa como la de ahora.

Por ejemplo, en un principio se propuso la idea de crear una serie de minijuegos llegados a un porcentaje de progreso, estos minijuegos estaban pensados para utilizar otras características de MediaPipe como son detectar el movimiento de los ojos o las diferentes formas que podía crear la boca. Esto en un inicio me pareció una buena idea, pero luego vi que rompía con el principio de la idea propuesta y la desestimé.

Otra idea que tuve y que si que esta en la propuesta final es el uso de recompensas visuales para tener al usuario activo y animarle a seguir con la actividad. A este recurso le llamo “anillos dinámicos” y funciona de la siguiente forma: se trata de un círculo que decrece alrededor de la boca del usuario y que al hacerse completamente pequeño explotan muchas partículas dando ese subidón para seguir jugando.

6. Enlaces

GitHub: https://github.com/Ramonet02/PEC-2.git

p5.js Editor: p5.js Web Editor | Halloween smiles