R2 – Filtre Halloween

https://editor.p5js.org/everoro/full/9CZT7vdZ7

 

Descripció del projecte

Aquest projecte és una aplicació d’escriptori interactiva desenvolupada amb p5.js i empaquetada amb Electron, que utilitza la llibreria de visió ml5.js (FaceMesh) per detectar l’obertura de la boca de l’usuari en temps real.
Quan la boca està oberta per sobre d’un llindar, l’aplicació activa efectes visuals 2D i partícules sobre la imatge en directe de la càmera per simular una raspallada de dents digital.
La temàtica escollida és Halloween, tal com demana el repte, i s’ha aplicat a tot el disseny.

 

Workflow de l’app

L’aplicació s’inicia en mode pantalla completa i mostra una interfície Halloween amb un canvas central i els controls al lateral.
L’usuari ha de prémer el botó “Començar” per donar permís a la càmera i, al mateix temps, es precarrega l’àudio.
Quan la càmera està disponible, es mostra el vídeo en mirall i s’activa el model de FaceMesh.
A partir d’aquí, el programa calcula contínuament l’obertura de la boca; quan detecta que és superior al llindar definit, activa les partícules i l’efecte de “brutícia / raspallada digital” sobre la zona de la boca.
L’usuari pot canviar el tema de colors, el llindar d’activació i fer una captura del canvas.
La interacció finalitza quan l’usuari tanca la boca o tanca l’aplicació.

 

Decisions d’estètica

He triat una estètica Halloween perquè el client (HealthySmile) volia llançar l’app a finals d’octubre.
A style.css he definit una paleta amb porpres i taronges (variables –halloween-purple i –halloween-orange) per poder reutilitzar els colors a tota la UI.
He fet servir la font Creepster per al títol i Nunito per al text principal, ja que combina un to lúdic amb bona llegibilitat.
També he afegit un fons amb teles d’aranya i una aranya animada per reforçar la temàtica.

Decisions tècniques

He optat per p5.js 2.x i ml5.js perquè la seva integració està ben documentada i, ja que és la primera vegada que faig un filtre, està bé per començar.
La detecció de la boca es fa a partir dels landmarks que retorna FaceMesh: calculo la distància vertical entre el llavi superior i l’inferior i la normalitzo per obtenir un ratio d’obertura.
Aquest valor se suavitza amb interpolació per evitar vibracions.
Quan el valor supera el llindar (ajustable des del panell), es disparen les partícules i el so associat.

Investigació de llibreries

• ml5.js – FaceMesh: llibreria utilitzada. Senzilla, basada en MediaPipe, molt apta per a p5.js.
• Google MediaPipe (Face Landmarker): alternativa més moderna i ràpida, però requereix més configuració.
• TensorFlow.js + models facials: més pesats, però permeten més control sobre el model.
• clmtrackr: descartada per ser més antiga i menys precisa amb la detecció de la boca.

Repositori

https://github.com/everoro/HealthySmile-Halloween