20.671 - Desarrollo de aplicaciones interactivas - Aula 1

Pública

El Dentista Oveja

Autora: Nathalia Carolina Padrón Bavutti
Titulo: Aplicación Odontológica, «El dentista Oveja»

Preview

Página en vivo

Click para acceder a la Versión Live

Github:https://github.com/NattyDCI/ml5-facemesh-project

Sobre el proyecto

Este proyecto explora experiencias interactivas para la primera infancia utilizando detección facial en tiempo real para fomentar hábitos de higiene a través del juego.

En el laboratorio HealthySmile, nos enfocamos en diseñar experiencias digitales que combinan aprendizaje, emoción e interacción.

Concepto y diseño del personaje

– La oveja se percibe como un animal suave, tranquilo y amigable, ideal para niños de 2 a 4 años.
– Sus formas simples funcionan bien en filtros faciales.
– Evoca ideas de limpieza y cuidado (lana blanca, suavidad).
– La estética de Halloween se plantea como un “terror seguro”, evitando generar miedo.
– Su diseño ligeramente extraño (cicatriz, herida) genera curiosidad sin rechazo.

La oveja funciona como un puente entre la fantasía y el aprendizaje.

Bocetos
Este fue mi boceto inicial

⚙️¿Cómo funciona?

1.Pantalla de carga

Una barra de progreso se completa mientras se cargan los recursos.

2. Activación de cámara

El usuario debe activar la cámara para comenzar la experiencia.

3. Interacción facial

– Aparece un filtro facial de oveja con temática de Halloween.

Cuando el niño/a abre la boca:

– Aparecen partículas similares al jabón
– Elementos decorativos se animan (dientes y calabazas)
– Salen burbujas de la boca

4.Sistéma de feedback

Cada 5 segundos de interacción correcta:

– Aparece un mensaje motivador
– Un temporizador visual se llena y se vuelve verde
– Un icono de “pulgar arriba” refuerza el logro
– Esta burbuja fue pensaba principalmente como feedback visual, ya que los niños aún no leen.

5.Fin de interacción

Cuando se cierra la boca:

– Las animaciones se detienen y las burbujas desaparecen.

Acerca de la implementación
He desarrollado este proyecto utilizando p5.js y ml5.js.
Con p5.js gestiono toda la parte visual e interactiva, incluyendo el renderizado, la interfaz, las animaciones y el uso de WEBGL para trabajar con una malla facial.

Para la detección facial en tiempo real utilizo FaceMesh de ml5.js, que me permite identificar puntos clave del rostro. A partir de estos datos, detecto cuándo la boca está abierta y activo una lógica interactiva basada en tiempo, generando feedback visual como mensajes, contador y animaciones de burbujas.

Además, utilizo una malla facial triangulada con coordenadas UV para aplicar una textura que se adapta al movimiento y orientación de la cara en tiempo real.

En conjunto, combino visión por computador y gráficos interactivos para crear una experiencia educativa y gamificada.

Tecnología

– ml5.js (FaceMesh) – para reconocimiento facial en tiempo real
– p5.js – for visualizaciiones creativas y sketches
– Electron – para empacar el proyecto como una plataforma para uso en Desktop y Mobile

Recursos

FaceMesh (ml5.js)

– https://learn.ml5js.org/#/reference/facemesh

Utilizado para la detección de puntos faciales en tiempo real.

Learning Resource (Coding Train)

– Daniel Shiffman – The Coding Train

Este tutorial fue fundamental para implementar FaceMesh.

—

Technologies Used Tecnologías utilizadas

– p5.js 1.9.x
– ml5.js 1.2.2

– https://beta.p5js.org/
– https://p5js.org/reference/

—