20.471 - Desenvolupament d'aplicacions interactives - Aula 1

Públic

A partir de les necessitats sol·licitades per HealthySmile Lab, he tractat de dissenyar un aplicatiu amb temàtica de Halloween per captar l’atenció dels més petits de la casa. Donat que és per a nens, tampoc ens podem passar de terrorífic, així que ho hem de fer amb una aparença amigable. L’objectiu és que els nens mantinguin la boca el major temps possible per tal de mostrar el seu somriure i reflectir l’estat de la seva salut bucodental. Això ho faran dintre d’una zona que he anomenat ‘el mirall encantat’, que no deixa de ser un reflex de la càmera, com si fos un espill on passa la màgia que realitzarem amb p5.js, gràcies a altres tecnologies.

El que he pensat és que, quan els nens mostrin el seu somriure a càmera, aparegui un fantasma amistós, el qual s’encarregui de raspallar les dents de l’usuari que es mostri a càmera. Mitjançant un moviment lateral i un altre constant de pujada i baixada, simularem el moviment a seguir amb el raspall i, per cada recorregut, farem que apareguin espurnes màgiques com a reflex de la neteja. Per tot això, he hagut de dissenyar una interfície amigable, a més de fer ús de diverses tecnologies, les quals vaig agrupar en la següent taula per tal d’orientar-me:

Tecnologies emprades en el desenvolupament

Aquest conjunt de tecnologies engloben el desenvolupament de l’app que he anomenat Spooky Scary Smile, en referència a una mítica cançó que estava escoltant en aquell moment, de la qual us comentaré més endavant. Aquestes tecnologies em permeten combinar el disseny visual, la interacció i l’execució com a aplicació d’escriptori. JavaScript és el llenguatge principal, el qual controla la lògica del joc i la interacció entre els elements. p5.js és el protagonista, el qual facilita la creació de l’escenari il·lustrat, les animacions i els elements «terrorífics».

Ara bé, per a la interacció facial, he decidit utilitzar MediaPipe Face Landmarker. Aquesta és l’eina de detecció de punts facials que m’ha resultat més atractiva, ja que, en comparació amb altres alternatives com OpenCV, que ofereix eines més generals de visió artificial i pot requerir una barrera d’implementació i configuració més complexa, amb MediaPipe se’ns facilita treballar directament amb els punts facials que necessitem a l’hora d’obrir la boca i controlar l’animació del fantasma. A més, és una eina de Google, per la qual cosa tenim el seu suport a la xarxa.

Després, HTML i CSS s’encarreguen, respectivament, de l’estructura de la interfície i de la meva part preferida, la presentació visual. Per a aquest desenvolupament, he treballat amb Visual Studio Code com a editor de codi i Vite com a eina per executar i preparar el projecte web. M’he decidit a fer-ho amb Vite, ja que ofereix una configuració inicial senzilla, un servidor local ràpid i actualització automàtica dels canvis durant el desenvolupament. Aquesta és una eina de compilació molt més directa i àgil, més recomanada per a projectes d’aquest tipus, a diferència d’altres que poden requerir configuracions més complexes.

I, a més, com hem vist, he utilitzat Tauri 2 per integrar l’aplicació web en una aplicació d’escriptori per a Windows. Un dels motius d’elecció ha sigut la puntuació extra, però, a més, com Electron habitualment utilitza una instància pròpia de Chromium en cada aplicació, amb Tauri he usat el motor del meu propi Windows, amb algunes poques dependències de Rust i Node que han acabat sent necessàries per al correcte desenvolupament.

Objectiu i concepte creatiu

La finalitat ha estat crear un aplicatiu senzill que qualsevol persona el pugui utilitzar, fent que la barrera d’entrada sigui nul·la. Per això, l’únic control que hi haurà serà el botó de començar l’aventura. La interfície, senzilla, elegant però funcional, explicarà el funcionament del joc de forma amigable, mentre de fons sona una versió instrumental de Spooky Scary Skeletons, versionada per TJ the DJ i adaptada per al seu ús en projectes d’aquest tipus. Aquest és el recurs multimèdia que he decidit implementar per a aquest cas.

La intenció ha estat crear una atmosfera misteriosa, però mantenint un estil visual atractiu, accessible i polit, en lloc d’apostar per un terror realista o excessivament fosc, com jo hauria preferit. Per a l’escenari vaig prendre com a referència els turons amb carabasses de Pesadilla antes de Navidad, però sense sobrecarregar-ho tant, simplement per fer que la temàtica del projecte sigui més identificable. I, per tal de donar un toc més màgic dintre de la zona del mirall, també he afegit espurnes màgiques, les quals es distribueixen amb un patró aleatori, alternant la seva opacitat per simular una brillantor màgica.

La paleta cromàtica parteix del contrast entre els tons foscos i els colors més lluminosos. Els morats amb tons blavosos representen l’atmosfera nocturna i misteriosa associada a la nit de bruixes, mentre que els tons ataronjats van en paral·lel amb les carabasses i introdueixen els punts de llum colorits que evoquen la festivitat de Halloween. Aquest to brillant destaca principalment en el botó d’inici per guiar l’usuari en l’experiència.

La tipografia, en conjunt amb els colors, ajuda a crear una jerarquia visual dintre de l’escena. En aquest cas, he combinat l’ús de Creepster, utilitzada en els títols, amb Nunito, destinada principalment als textos de la interfície. Creepster està formada per una superfície irregular, la qual recorda els cartells clàssics del cinema de terror i aporta la personalitat que busquem en l’estètica del projecte. En canvi, Nunito té una estètica més neta i llegible per facilitar la comprensió dels missatges i botons. Així diferenciem el que és decoratiu del que és més útil.

El personatge principal és el fantasma, el qual té una estètica caricaturitzada. Aquest és l’element d’interacció principal: és blanc i semitransparent, i apareix sobre la nostra boca en obrir-la, com si estigués en una altra dimensió. Està format per formes simples i esfèriques per simular les seves ondulacions de forma simple i infantil, ja que no busquem donar por, sinó treure un somriure.

Desenvolupament i arquitectura usable

Per començar a crear Spooky Scary Smile, primer vaig configurar l’entorn de treball sobre Visual Studio. Vaig preparar el projecte amb Vite amb les dependències requerides, per tal de configurar el package.json per definir les ordres d’execució i desenvolupament. Seguidament, vaig preparar l’estructura de Tauri 2, on vaig revisar el fitxer tauri.conf.json, on es defineixen els aspectes com el nom de l’aplicatiu i la configuració de la finestra.

Un cop tot preparat, ja vaig passar a preparar l’esquelet amb HTML, on carregaria l’arxiu principal de JavaScript que treballaríem juntament amb el fitxer d’estils CSS per donar-li l’estil que hem comentat. Tot l’escenari que he descrit anteriorment l’he desenvolupat amb p5.js de forma coherent amb tots els elements de Halloween. Sobre aquest he integrat el MediaPipe Face Landmarker per relacionar els moviments facials de l’usuari amb els elements creats amb p5, tal com ho són el fantasma i les partícules.

Una de les parts que ha requerit més ajustos és la detecció de l’obertura de la boca, ja que no n’hi havia prou amb detectar els punts facials. Va ser necessari establir un criteri per diferenciar l’estat de boca oberta del de boca tancada. Per tal cosa, vaig usar la relació entre l’altura i l’amplada de la boca, en lloc de dependre d’una única distància fixa. Amb l’ajust d’aquest llindar evitem que el fantasma aparegui massa aviat o que la interacció no respongui correctament.

Una altra dificultat ha estat coordinar les diferents parts de l’aplicatiu, com ara la interfície, l’escenari gràfic, la càmera i el model de detecció facial, les quals necessiten compatibilitzar-se per inicialitzar-se correctament. Per això mateix, també tenim la pantalla de càrrega, que dona feedback a l’usuari mentre es carreguen els diversos processos.

També he hagut de prestar molta atenció a l’estructura HTML dels selectors utilitzats en JS i als estils CSS, ja que, quan aquests elements no coincideixen, els components poden no aparèixer o no mostrar-se com estava previst. El que em va molestar bastant va ser aplicar una transparència global a tot el cos del fantasma, però al final, englobant-ho tot en una capa per al fantasma, vaig poder aplicar transparència a tot el conjunt, ja que volia fer-lo amb transparència per donar-li un toc d’esperit.

La integració amb Tauri 2 per adaptar el projecte a un entorn d’escriptori va requerir preparar diverses dependències necessàries amb els paràmetres de l’aplicatiu. Per tal de poder-se executar com un aplicatiu, he hagut de configurar un arxiu de configuració de Vite addicional, el qual explico com executar des de la terminal des de la còpia del projecte.

Durant tot el desenvolupament he buscat que l’experiència sigui clara i fàcil d’utilitzar, especialment tenint en compte que va dirigit a un públic infantil. Per això, també he pensat en situacions que poguessin interrompre l’experiència amb problemes de càmera o càrrega de recursos. Per això he fet diverses proves amb la càmera i diferents il·luminacions. I, en definitiva, mentre la cara sigui visible i hi hagi un somriure mínimament visible, per molt penosa que sigui la qualitat de la imatge, l’aplicatiu acaba detectant-la per posar-te el fantasma a raspallar-te la dentadura.

He tractat d’adaptar-lo a les interaccions previstes. En concret, he establert un valor de 0,15 per determinar que la boca estigui oberta, ja que no tothom tenim la mateixa boca i pot haver-hi persones que tinguin dificultats per obrir-la. Per tant, ho he volgut fer accessible per a tothom i, en detectar una mínima obertura de boca, ja s’executarà l’animació.

En consluió, el desenvolupament de Spooky Scary Smile m’ha permès crear un aplicatiu interactiu que compleix amb l’objectiu principal: oferir una experiència visual i lúdica que interaccioni amb el somriure dels usuaris. L’estètica abordada encaixa molt bé en aquestes èpoques de l’any, la qual cosa ha estat una activitat que s’ha notat realista.

Més enllà del resultat final, aquest projecte m’ha permès aprofundir en l’ús de les tecnologies web per tal d’integrar-les en una app. Com a futures possibles ampliacions, es podria augmentar la interacció amb noves animacions i activitats, incorporar alguna seqüència final que doni per acabada l’experiència i millorar el sistema per adaptar-se a diverses il·luminacions i distàncies amb la càmera, així com conscienciar més sobre la salut bucodental.

En definitiva, el projecte ha sigut una oportunitat per transformar una idea en una aplicació interactiva i per posar en pràctica els coneixements adquirits, tenint en compte tant els aspectes tècnics com l’experiència de l’usuari.