Es tracta d’una aplicació interactiva que utilitza la càmera web per detectar la cara de l’usuari i, més concretament, l’obertura de la boca. Quan l’usuari obre la boca, l’aplicació genera animacions, combinades amb música i elements visuals com fantasmes i una carabassa animada. L’objectiu és oferir una experiència que connecti el moviment facial amb efectes gràfics en temps real.

Workflow del App

L’aplicació s’inicia mostrant una pantalla de benvinguda amb el títol i un botó “Començar”, indicant a l’usuari que ha d’obrir la boca per generar animacions. En prémer el botó, es carrega la càmera i es detecta la cara en temps real amb FaceMesh; quan l’usuari obre la boca, apareixen partícules animades (caramels) sobre els llavis. Alhora, la música es reprodueix i es pot controlar amb el botó de play/pause i el slider de volum. La interacció continua fins que l’usuari tanca l’aplicació, moment en què es deixa de processar el vídeo i s’aturen les animacions i el so.

Aspectes tècnics

He fet servir p5.js 2.0.5 i per detectar el moviment dels llavis en temps real he triat la llibreria externa ml5.js, concretament el model FaceMesh. Es tracta d’una llibreria JavaScript basada en TensorFlow.js que facilita l’ús de models d’intel·ligència artificial directament al navegador.

El model FaceMesh detecta de forma automàtica i en temps real més de 400 punts de referència de la cara, incloent-hi els llavis, els ulls i el contorn facial. Aquesta detecció detallada permet calcular l’obertura de la boca i generar animacions de partícules exactament en la posició correcta dels llavis.

L’avantatge de fer servir ml5.js és que tot es processa localment al navegador, sense necessitat de servidors externs ni enviar imatges de la càmera a la xarxa, millorant la privacitat i la fluïdesa de l’experiència.

Enllaços

Github

https://github.com/magulloc/healthy_smile

Web

https://editor.p5js.org/magulloc/full/QXkPzX7lH

1. Introducció

L’encàrrec de HealthySmile tenia com a objectiu crear una aplicació interactiva que animés els infants a mantenir la boca oberta mentre s’observen les dents, utilitzant la càmera i una temàtica de Halloween. L’aplicació havia d’emprar p5.js per a la part visual i una llibreria externa de visió artificial per detectar l’ obertura de la boca en temps real.

2. FaceMesh

S’ha desenvolupat tot amb p5.js i ml5.js (FaceMesh), ja que ml5 s’integra fàcilment amb p5 i disposa de models preentrenats de reconeixement facial. Inicialment es van detectar errors com ml5.facemesh is not a function, resolts actualitzant la versió de la llibreria a ml5@0.12.2. També es van corregir problemes amb la càmera i la sincronització del model, assegurant que el vídeo es carregués abans de crear el FaceMesh.

3. Detecció de la boca

Per comprovar si la boca està oberta, s’ha calculat un MAR (Mouth Aspect Ratio) a partir de punts facials concrets del model (13, 14, 61 i 291). L’usuari pot ajustar el llindar de detecció (MAR) mitjançant un slider DOM. Aquesta detecció és la base de totes les accions visuals i sonores del joc.

4. Interfície i flux del joc

Abans d’activar la càmera, l’usuari ha de validar els permisos i prémer el botó “Començar”, tal com recomana l’enunciat per motius de permisos i usabilitat. El flux és el següent:

1. Es mostra una pantalla de càrrega amb el logo de l’app.
2. Quan s’ha carregat tot, l’ usuari prem “Començar”.
3. Quan s’obre la boca, s’activen les partícules animades i el so de raspallat.
4. Cada 5 segons de boca oberta apareix un ratpenat com a premi.
5. En aconseguir l’últim ratpenat, es mostra el missatge d’enhorabona i sona el so d’èxit.

També s’ha afegit un botó per reiniciar la partida i un altre per activar o desactivar la música de fons.

5. Partícules i aspecte visual

S’ha implementat un sistema de partícules amb forma de carabasses que apareixen a prop de la boca quan aquesta és oberta. Inicialment les partícules es generaven al costat equivocat del rostre; aquest error s’ha resolt aplicant un mirall horitzontal sobre la posició detectada. S’ha ajustat la mida, la dispersió i el moviment per aconseguir un efecte més suau i coherent amb la temàtica. Cal esmentar que a les primeres versions es van intentar afegir ratpenats, per mantenir coherència amb el logotip, però quedava més fluid i vistós amb les carabasses.

6. So i multimèdia

L’aplicació inclou diversos elements sonors, prèviament fabricats amb “text-to-speech” i una mica d’edició bàsica amb efectes de so:

• RASPALLAT.mp3: s’activa quan la boca és oberta.
• BGMUSICA.mp3: música de fons amb control ON/OFF i volum.
• NOVAICON.mp3: sona cada cop que apareix un nou ratpenat.
• EXIT.mp3: s’activa al final del joc.

El volum del raspallat i de la música de fons és ajustable des d’un slider comú.

7. Problemes i solucions

Durant el desenvolupament s’han trobat alguns inconvenients:

• Desfassament entre vídeo i punts del model: solucionat amb el càlcul mirallat de coordenades.
• Sons que no s’aturaven en tancar la boca: corregit amb control explícit de pause() i currentTime = 0.
• Elements de la interfície fora de lloc: reorganitzats dins de la mateixa caixa visual.
• El degradat inicial (vinyeta) tapava el vídeo: eliminat després d’algunes probes per mantenir claredat visual.

8. Resultat final i valoració

El resultat final és una aplicació funcional que compleix amb els requisits de:

• Detecció real d’obertura de boca amb FaceMesh.
• Interfície amb controls DOM (botons, sliders).
• Partícules animades i sons temàtics de Halloween.
• Missatge final d’èxit i reinici del joc.

Enllaç al repositori GitHub:

https://josepmsole.github.io/R2_Healthysmile_Halloween-Edition/

NOTA: Aquesta versió és una DEMO que es pot completar amb 3 ratpenats (15 segons), per tal de comprovar-ne la operativa. La versió final del joc hauria de tenir una durada d’entre 1-2 minuts (2 minuts és el que es recomana per la higiene infantil, però no es té la boca oberta durant tota l’estona, així que ho podríem ajustar a 1 minut: 12 ratpenats). Cal acabar d’aclarir amb el client.

La idea inicial era que la temàtica de Halloween fos una sorpresa, així que l’aplicació web semblava un joc innocent fins que es feia clic al botó d’iniciar/apagar.
Per aquest motiu es van tractar per separat l’estètica de Healthy Smile Labs i la de Brush or treat.

La primera havia de ser neta, asèptica, gairebé com un consultori mèdic. En canvi, en entrar al programa de raspallat, el vídeo havia de tornar-se fosc i inquietant.

A més, la idea principal era la d’una presència fosca al voltant de l’usuari que l’amenaça perquè es raspalli les dents. Quan l’usuari ho fa, la presència embogeix i encara l’amenaça més. Tot això ambientat dins de l’humor negre, i no massa explícit, ja que està pensat per a un públic més aviat jove.

A nivell visual, l’estil s’inspira en el terror clàssic: colors foscos, contrastos freds i efectes de llum intermitent. Les il·lustracions i gràfics han estat creats per mi, amb un traç brut i expressiu per reforçar la sensació d’incomoditat, i inspirats en la bogeria de Jinx (de la sèrie Arcane —Netflix—).

La tipografia utilitzada prové de dafont.com, triada pel seu aspecte distorsionat que encaixa amb l’atmosfera. Els sons de l’ambientació s’han obtingut de Pixabay amb llicència lliure, i s’ha ajustat el volum perquè s’integrin sense saturar l’experiència.
També s’ha afegit un sistema de partícules per als “dents” que apareixen en el crazyMode, per reforçar el to surrealista.

Les llibreries utilitzades són: p5.js per a la visualització, ml5.js per a la detecció facial —centrant la interacció en l’obertura de la boca i en pintar creus a la posició dels ulls—.
També s’ha utilitzat Electron per convertir-la en una aplicació d’escriptori, i el projecte s’ha pujat a un repositori de GitHub
https://github.com/elecinas/BrushOrTreat

Gràcies a Git, s’ha pogut treballar amb més tranquil·litat i mantenir un bon control de canvis.

El flux és simple i directe: en iniciar l’aplicació, es mostra la càmera i un entorn fosc; l’usuari pot activar el programa amb el botó “iniciar”.
Apareix una ambientació inquietant i fosca amb la presència d’un fantasma que xiuxiueja amenaces, però quan l’usuari obre la boca, l’atmosfera canvia dràsticament: sons de rialles, música més intensa, imatges de somriures inquietants i dents que es multipliquen per la pantalla mentre se li tatxen els ulls.
Aquest joc d’ambientacions es pot aturar amb el mateix botó amb què es va iniciar, tornant a l’estat normal.

Conclusió

En començar el desenvolupament de l’app vaig decidir prioritzar-ne el muntatge i l’acabat, deixant per més endavant l’elecció de la llibreria de reconeixement facial i la d’Electron.
Això va ser un error, ja que, d’una banda, vaig haver d’instal·lar Electron amb l’aplicació ja creada a GitHub i ho vaig fer afegint els arxius manualment, en lloc de crear una aplicació d’Electron des del principi —que hauria estat molt més senzill—.
Però el més complicat va ser intentar migrar de llibreria de reconeixement facial: ho vaig provar amb MediaPipe de Google durant no sé quantes hores, sense aconseguir-ho.
Així que, per manca de temps i una planificació poc encertada, em vaig quedar amb ml5.js.

Descripció general

Aquesta PAC consisteix a desenvolupar una aplicació interactiva d’escriptori (Electron + p5.js) pensada per ajudar la mainada a agafar hàbits saludables, concretament mantenir la boca oberta, gràcies a una detecció facial automàtica en temps real ambientada amb temàtica de Halloween.

Procés de treball

He començat revisant llibreries de detecció facial per p5.js i, després de comparar opcions (MediaPipe, ml5.js, face-api.js), he seleccionat MediaPipe per precisió i facilitat.
He fet diversos esbossos a mà i amb Figma sobre l’estructura de l’app i les partícules. El disseny visual s’ha adaptat a la temàtica de Halloween, escollint il·lustracions i sons lliures de drets i afegint animacions de ratpenats.

Esbós inicial de pantalla principal:
Dibuix que il·lustra l’estructura general, els botons i el missatge inicial.

Durant el desenvolupament he tingut dos grans reptes:

• Integrar la detecció facial en temps real a Electron sense perdre rendiment.

• Ajustar les partícules perquè reaccionin de manera fluida quan s’obre la boca i fer que l’efecte fos atractiu per a infants.

Finalment, he empaquetat tot el projecte i documentat instruccions detallades al README, així com els crèdits dels recursos usats.

Prototip i validació d’interacció

Per validar que el funcionament i la interfície fossin adequats he fet un esbós secundari representant l’app en execució amb l’usuari davant la webcam.

Esbós de la pantalla de l’app amb la webcam activa, mostrant la detecció facial.

Tecnologies i decisions

• Electron: per crear l’entorn d’escriptori multiplataforma.

• p5.js: per gestionar la gràfica, animacions i càmera.

• MediaPipe: per a la detecció premade de punts de la cara i obertura de la boca.

• CSS separat: per personalitzar fàcilment l’estètica.

He triat aquestes eines perquè faciliten la integració de webcam i animació, i tenen molta documentació, així com una comunitat activa.

Flux de funcionament

• L’usuari obre l’aplicació i prem “Començar”.

• Es demana accés a la webcam i es mostra el flux de vídeo.

• La llibreria MediaPipe detecta la boca: quan s’obre, apareixen partícules animades i s’activa un so.

• Quan es tanca la boca, els efectes s’aturen i es mostra un missatge d’“obre la boca per continuar”.

• En qualsevol moment es pot tancar l’app amb el botó o la tecla ESC.

Vídeo real de l’aplicació detectant la boca i mostrant els efectes dinàmics. 

Recursos visuals i atribució

• Il·lustracions de ratpenats: Bats silhouettes isolated – Freepik — Llicència: Ús gratuït amb atribució.

• Efecte de so de ratpenat: bat-chirping-sounds — Pixabay — Llicència: Ús gratuït sota llicència de contingut de Pixabay.

Enllaços

• p5.js Fullscreen del projecte

• Repositori GitHub amb codi, assets i README