20.471 - Desenvolupament d'aplicacions interactives - Aula 1

Públic

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