El projecte METEOQUARS s’ha desenvolupat per al Repte 3, que plantejava la creació d’una extensió per a Firefox basada en l’ús del temps, en la reutilització del Rellotge Creatiu del Repte 1 i en la incorporació d’una interfície construïda amb el DOM i amb persistència de dades.

En el marc d’aquest enunciat, es va adaptar el rellotge original programat amb p5.js a un format més reduït i coherent amb l’espai disponible a la barra superior del navegador, i es va sincronitzar automàticament amb l’hora real del sistema (a diferencia del Repte 1, que es podía programar manualment), assegurant que continués representant el pas del temps tal com s’exigia en l’activitat. Aquesta adaptació es va integrar al fitxer clock.js, carregat des del content-script.

Es van realizar alguns petits esboixos per decidir-ne l’aspecte, ja que el rellotge creatiu tenia una forma més aviat rectangular. Així doncs, es va decidir que l’extensió ocuparia l’ample de la pàgina, mantenint l’alçada de 150px.

També es va treballar en la creació de l’extensió amb Manifest V3. El manifest.json inclou els permisos necessaris, com storage, i els host_permissions per poder connectar amb l’API d’Open-Meteo. A més, s’hi defineixen tots els recursos externs de l’extensió —p5.js, icones GIF, scripts principals— que estructuren la base del projecte i en garanteixen el funcionament dins del navegador Firefox.

La construcció de la interfície amb el DOM es va fer completament des del content-script.js. Aquesta interfície incorpora elements de UI com el cercador de localització, els botons de desament i previsió, les etiquetes informatives i els contenidors visuals per a la icona meteorològica i el rellotge. Es van distribuir en tres blocs principals (esquerra, centre i dreta) per aconseguir una presentació clara i organitzada. Els estils visuals, es van aplicar amb CSS, injectat des del mateix script, però adaptable a un fitxer style.css extern si cal.

Quant a la persistència de dades, un altre punt clau del repte, es va optar per utilitzar localStorage, que funciona com a equivalent als mètodes storeItem() i getItem() de p5.js. En aquest espai s’hi desa la localització escrita per l’usuari i les seves coordenades corresponents. Quan l’extensió es torna a activar, el content-script recupera automàticament aquesta informació i actualitza la meteorologia, garantint que l’usuari mantingui el seu estat sense necessitat de repetir cap acció.

Amb l’objectiu d’“anar més enllà”, es van integrar fonts externes i funcionalitats ampliades. Concretament, es va utilitzar l’API pública d’Open-Meteo per obtenir temperatura, precipitació i codis meteorològics sense necessitat de clau d’accés. A partir d’aquestes dades, es va implementar una previsió de 48 hores analitzant la variació de precipitació, l’estat del cel i les temperatures.

L’ experiència visual es va reforçar amb cinc icones meteorològiques animades (amb After Effects) en format GIF, creades especialment per representar els 5 estats posibles d’aquesta primera versió: sol, sol i núvol, núvol, pluja i tempesta. També es va incorporar un sistema de color de fons dinàmic que canvia automàticament segons l’estat meteorològic detectat, aportant una lectura immediata i enriquint la percepció final de la interfície.

Com a possibles millores futures es podria incloure una webcam en directe mostrant una camera meteo del lloc buscat, però després d’investigar una mica, no hi ha cap servei que permeti mostrar qualsevol webcam de qualsevol lloc del mon, així que es varia la idea, i per tal d’aprofitar aquell espai, la següent iteració podria incloure una imatge omplint aquell espai (amb un degradat al final de l’esquerra) relacionada amb el resultat del temps de la ubicació cercada.

En el següent exemple es mostra la opció de “Ennuvolat”:

També es podria generar una versió “Mini” de la barra, i readaptar els elements per a un display més reduït.

CONCLUSIÓ

En conjunt, METEOQUARS (que podem variar el nom a METEOQUARTS, tot i què per algun motiu sonava millor sense la T) es presenta com una extensió que integra l’ús del temps, p5.js i una interfície construïda amb el DOM. Manté les dades entre sessions, mostra informació meteorològica actual i incorpora elements visuals i funcionals que en milloren l’experiència. El resultat és una eina clara i pràctica que et permetrà dir: “Abans de dos quarts de 6 estava plovent a Quito”.

————————————-

ENLLAÇ A GITHUB

https://github.com/JosepMSole/-R3-_METEOQUARS

Documentació de l’Extensió Rellotge Binari

Concepte del projecte

Aquesta extensió és una aplicació de tipus WebExtension per al navegador Firefox. Mostra un rellotge binari minimalista dins d’un popup, permetent personalitzar el color dels bits i la visualització de l’hora digital. L’objectiu és oferir una eina visual i estètica que representi el temps d’una manera alternativa.

Esbossos del disseny

Les tres columnes representen l’hora (columna esquerra), els minuts (columna central) i els segons (columna dreta). Cada columna té sis quadrats que representen els bits d’un nombre binàri.

Hi ha nombres que, en convertir-los a binari, no necessiten 6 dígits per ser representats. Per exemple, el número 23 es converteix en 10111, que només té 5 dígits. Per mantenir totes les columnes del rellotge amb la mateixa alçada i el mateix nombre de quadrats, he afegit zeros a l’esquerra fins a completar els 6 dígits. D’aquesta manera, hores, minuts i segons sempre formen columnes uniformes i visualment alineades.

Alhora de representar aquest números binaris en les columnes, el primer dígit de l’esquerra es representa a dalt de tot en la seva colummna corresponent i els digits següents és van dibuixant en la columna en ordre descendent. Els quadrats grisos equivalen a 0 i els quadrats blaus equivalen a 1.

Casos d’ús principals

• Consultar l’hora en format binari.
• Personalitzar el color dels bits per adaptar-lo al gust o al tema del navegador.
• Activar o desactivar la visualització de l’hora digital.

Interacció amb els elements

La icona de configuració en el popup redirecciona a la secció de configuració on es pot decidir:

• Mostrar o no l’hora en format digital
• Canviar el color dels cuadrats que representen bits actius.

Ús de storeItem() i getItem()

L’extensió utilitza localStorage per recordar les preferències de l’usuari. Quan l’usuari canvia el color dels bits o la configuració de l’hora digital, la informació s’emmagatzema amb storeItem(). Quan el popup es torna a obrir, getItem() recupera les preferències guardades, permetent mantenir la configuració personalitzada sempre activa.

Millora proposada
Fixar el popup perquè es pugui mantenir obert (“pin popup”).

Normalment, el popup d’una extensió es tanca automàticament quan l’usuari fa clic fora o canvia de pestanya. Això és una limitació de totes les extensions: un popup no pot quedar-se obert per si mateix. La millora consisteix a simular un “popup fix” obrint una finestra pròpia de l’extensió que actua com una mini-aplicació flotant.

Això permetria:

• Mantenir el rellotge sempre visible.
• Posicionar-lo lliurement.
• Tancar-lo manualment quan l’usuari vulgui.
• Obrir múltiples “rellotges” si es permet.

Procediment proposat:

• Afegir una icona estil “xinxeta” al popup

Quan l’usuari prem el botó, sobre una petita finestra independent que no es tanca sola, es pot moure, i té el mateix contingut que el popup.

• Diferenciar el popup real de la finestra flotant

El codi podria detectar si està dins una finestra flotant:

• 3. Desactivar elements innecessaris en la versió fixada.

• Amagar el botó “Opcions”
• amagar la icona “xinxeta” (per no obrir infinites finestres)

Enllaç Git

https://github.com/magulloc/rellotge-binari.git

1. Introducció

En aquest repte he desenvolupat una extensió per al navegador Firefox anomenada Rellotge Orbital Pomodoro. L’objectiu principal és combinar un rellotge orbital abstracte amb un temporitzador Pomodoro clàssic, de manera que l’usuari pugui controlar els seus cicles de treball i descans directament des de la barra del navegador.

L’extensió mostra un rellotge amb tres òrbites (hores, minuts i segons), un arc exterior que indica el progrés del Pomodoro i tres fases principals: treball, descans curt i descans llarg. A més, les dades de la sessió es guarden perquè, encara que es tanqui la popup, en reobrir-la es pugui continuar exactament on s’havia deixat.

2. Ideació i esbossos

La idea de partida va ser reutilitzar el “Rellotge Creatiu” del repte anterior i portar-lo a un context més funcional: una extensió que ajudi a aplicar la tècnica Pomodoro. Volia mantenir el caràcter visual i experimental del rellotge orbital, però afegint-hi botons, fases i sons que el convertissin en una eina real de productivitat.

Figura 1. Esbós inicial de la interfície del rellotge orbital Pomodoro.

En aquest esbós es pot veure la idea general: tres òrbites de colors amb punts en moviment, un arc exterior per indicar el progrés i una imatge central per diferenciar la fase. A la part inferior hi apareixen les icones de play, pausa i reinici, que més endavant es van substituir per botons amb text per millorar la claredat.

3. Disseny de la interfície

La interfície està pensada per encaixar en un popup de 300 × 150 píxels. La part superior està ocupada pel canvas de p5.js, on es dibuixen el rellotge orbital i l’arc de progrés. Just a sota hi ha el text amb la fase actual (Treball, Descans curt, Descans llarg) i a la part inferior hi ha tres botons: Iniciar, Pausa i Reinicia.

Els colors de les òrbites i de l’arc canvien segons la fase per donar un feedback visual ràpid. Quan canvia la fase també es mostra una imatge diferent al centre del rellotge (icona de treball, descans curt o descans llarg) i es reprodueix un so curt.

Figura 2. Vista del popup en fase de treball, amb el rellotge orbital, la imatge de fase i els botons “Iniciar”, “Pausa” i “Reinicia”.

4. Funcionament intern i lògica

El temporitzador segueix l’estructura clàssica de la tècnica Pomodoro: 25 minuts de treball, 5 de descans curt i 15 de descans llarg cada quatre cicles. La funció setPomPhase(newPhase) s’encarrega de configurar cada fase (durada, colors, so i imatge central) i de posar en marxa el comptador.

En cada fotograma de p5.js, la funció updatePomodoro() calcula el temps transcorregut i obté un percentatge de progrés entre 0 i 1. Aquest valor s’utilitza per dibuixar l’arc exterior del rellotge i, quan arriba a 1, es crida nextPomPhase() per passar automàticament a la fase següent. Paral·lelament, els punts orbitals continuen mostrant l’hora real del sistema, de manera que el rellotge combina informació funcional i estètica.

Un dels punts més delicats va ser la gestió de la pausa i la represa. Per resoldre-ho, vaig introduir la variable pomPausedElapsed, que acumula el temps ja consumit de la fase. Quan es reprèn el temporitzador, aquest valor es té en compte per no tornar a començar des de zero.

5. Persistència d’estat amb storeItem() i getItem()

Com que les popups d’extensions Manifest V3 es destrueixen quan es tanquen, era necessari guardar l’estat del Pomodoro per no perdre el progrés. Per això he utilitzat storeItem() i getItem() de p5.js, que internament fan servir localStorage.

• savePomodoroState() desa un objecte amb la fase actual, la durada de la fase, el temps acumulat, el nombre de cicles i si el temporitzador està en marxa o no. També guarda un lastUpdate per saber quan es va fer l’últim guardat.

• loadPomodoroState() es crida al setup() i recupera aquest objecte. Si el temporitzador estava actiu, calcula quant de temps real ha passat des de llavors i ajusta el comptador perquè continuï on tocaria.

Gràcies a aquest mecanisme, si tanco la popup en mig d’una sessió i la torno a obrir al cap d’uns minuts, el temps està actualitzat i la fase continua sense haver-se de reiniciar manualment.

6. Problemes trobats i solucions

Al llarg del desenvolupament han aparegut diversos problemes interessants:

• Compatibilitat d’àudio amb Manifest V3:
  Inicialment vaig provar d’utilitzar la biblioteca p5.sound, però dins d’una extensió Firefox amb Manifest V3 no es carregava correctament. La solució va ser substituir-la per l’API nativa d’HTML5 (new Audio()), que funciona bé en el context del popup.

• Pausa i represa del temporitzador:
  A les primeres versions, en pausar i tornar a iniciar, el temporitzador es desquadrava o es reiniciava. Ho vaig solucionar desant el temps acumulat en pomPausedElapsed i recalculant el temps transcorregut a cada represa.

• Sincronització del temps en reobrir la popup:
  Com que millis() es reinicia cada vegada que es carrega el canvas, calia saber quant temps real havia passat des de l’últim guardat. Per això guardo també lastUpdate i, en carregar l’estat, calculo la diferència amb el millis() actual.

• Espai limitat al popup:
  Treballar amb 300 × 150 píxels obliga a simplificar molt el disseny. He ajustat la mida de les òrbites i dels botons per evitar solapaments i mantenir una jerarquia visual clara.

7. Reflexió i aprenentatges

Aquest repte m’ha ajudat a entendre millor com funcionen les extensions de navegador i quines són les diferències entre una pàgina web normal i un popup d’extensió. També he après a treballar amb l’API de localStorage a través de p5.js, i a pensar en termes d’estat persistent, no només de variables en memòria.

A nivell de disseny, m’ha servit per veure com un projecte més “artístic” (el rellotge creatiu) es pot convertir en una eina funcional afegint-hi controls, fases i persistència. El procés d’anar ajustant colors, sons i animacions fins que el feedback fos coherent ha estat molt útil per entendre la importància de la UX, fins i tot en interfícies tan petites com una popup.

De cara al futur, m’agradaria afegir funcionalitats com ara estadístiques de sessions completades, notificacions del navegador quan s’acaba una fase, i la possibilitat de personalitzar les durades dels intervals. Tot i això, considero que la versió actual compleix els objectius del repte i proporciona una bona base per seguir evolucionant el projecte.

• Repositori GitHub:
  https://github.com/Javime85/rellotge-orbital-pomodoro

Introducció i context

Aquest projecte forma part de l’activitat R3 on es proposa transformar el rellotge creatiu de la R1 en una extensió funcional del navegador Firefox.

L’objectiu era aprofitar l’animació creada i convertir-la en una eina útil relacionada amb el temps mentre es mantenia la coherència visual i aportant funcionalitat real.

Per aquest motiu he desenvolupat un temporitzador de treball i descans (tipus pommodoro) integrat dins la extensió web feta amb Manifest V3.

Concepte de l’extensió

L’extensió és una combinació entre temporitzador Pomodoro i rellotge visual abstracte, on l’usuari pot iniciar períodes de treball i descans. I una vegada iniciat pot pausar, aturar o reiniciar. També es pot veure el temps restant o el temps excedit en el cas que finalitzi la sessió i no s’aturi el temporitzador. L’estat del temps es manté tot i que es tanqui el popup gràcias a localStorage.

Esbossos del procés i wireframes

Aquí veiem la idea inicial abans de començar el codi.

Aquí les proves de color quan els botons estan actius, tant en mode dia com en mode nit.

També era important la mida i la posició del temps excedit una vegada acabat el timer.

I finalment, es va desenvolupar l’opció de que l’usuari pogués editar el temps que volia en cada sessió en el panell lateral del navegador.

La interfície

La interfície del popup está formada pel rellotge abstracte, sis botons SVG (WORK, REST, PLAY, PAUSE, STOP i RELOAD), un text digital que mostra el temps de sessió i un secundari que mostra el temps excedit (si cal). S’ha estilitzat tot fent un CSS extern.

Funcionament tècnic

L’extensió utilitza p5.js per al dibuix del rellotge i les animacions, el càlcul del temps  i l’ús de storeItem() i getItem() per guardar l’estat en el storage. Es fa servir Vanilla JavaScript per gestionar els botons i l’àudio (donat que p5.sound era bloquejat per l’extensió) i es fa servir el localStorage perquè l’usuari pugui editar els temps del timer. I finalment Manifest V3 per gestionar l’extensió.

Documentació del procés i dificultats

Es van trobar problemes amb Content Security Policy, incompatibilitat de p5.sound CDN amb manifest, la substitució de millis() pel temps absolut del sistema, la col·locació dels botons a sobre del canvas i la consistència del temps excedit.

De tot aixó es van extreure aprenentatges com: com funciona realment una extensió de navegador, com persisteix l’estat a localStorage i organitzar un projecte amb canvas p5.js i DOM alhora.

La proposta de millora

Com a proposta de millora en poso dos:

Registre d’activitats

Crear un historial de treball i descans, guardant cada sessió en un array a localStorage, amb la possibilitat de visualitzar estadístiques.

Icona dinàmica

Fer una icona de l’extensió que canvïi segons l’estat del temporitzador.

Enllaç a Github

https://github.com/elecinas/time-rings-clock-extension

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

Autoria: Queralt Borrell
Enllaç al sketch: https://editor.p5js.org/qborrell/full/fIDQx4gkn

Concepte

El relotge que he diseñat es una reinterpretació digital d’un rellotge analògic, creada amb la intenció de simplificar-ne la lectura i destacar-ne l’essència visual.
L’objectiu no és trencar amb la forma clàssica del rellotge, sinó reduir-la als elements bàsics perquè el pas del temps sigui fàcil d’interpretar i alhora estèticament net.

La composició es basa en tres capes clares:

• Les hores, representades amb un número central gran, aporten estabilitat i jerarquia visual.

• Els minuts, co

• nvertits en una corona de cercles, permeten identificar d’un cop d’ull quant ha avançat l’hora.

• Els segons, amb una agulla vermella precisa, mantenen la sensació de moviment constant i la connexió amb el rellotge tradicional.

El disseny busca l’equilibri entre funció i forma: eliminar tot el que és innecessari sense perdre la capacitat d’indicar el temps de manera intuïtiva.
Aquesta simplicitat tr

ansmet calma, claredat i un sentit d’ordre.

Paleta de colors

La paleta escollida és freda, neta i harmònica.

• Blanc (#ffffff): fons neutre i lluminós que dona espai i equilibri a la composició.

• Blau fosc (#1f3c88): color principal de referència; utilitzat tant per al número central de les hores com per a l’agulla dels segons.

• Blau cian (#03CBF4

• ): to més viu i dinàmic que aporta contrast visual i energia; s’aplica als cercles dels minuts per marcar el progrés dins de cada hora.

Aquesta combinació manté una estètica minimalista i clara, facilitant la lectura del rellotge i reforçant la seva coherència visual sense distraccions innecessàries.

Tipografia

S’utilitza una tipografia sans-serif, escollida per la seva claredat i simplicitat visual.
Aporta un aire contemporani i reforça l’aspecte minimalista de la composició digital.

Bona tarda,

El meu treball s’ha basat en la situació actual en la que es troba Gaza, sense ànim de ofendre a cap persona ni Hamas ni genocidi. E u un principi volia fer algo pretenciós però en mancava temps, era una modificaci amb la bandera palestina como ara això.

Després he sigut més pràctic i he mirat el que demanava el exercici. He carregat una font amb loadfont().

A continuació he declarat i assignat variables per utilitzar les funcions second() minut() hour().

També he he declarat i assignat variable per utilitzar map() per definir límits i direcció.

He utilitzar rect() i triangle() per fer la bandera donat-li color forma i direcció.

I per últim he carregat els segons, minuts i hora amb tex(h) utilitzant la font descarregada he ficat tamanya amb fontSize() i el collor amb fill().

Resultat final.

Espero que us agrada molt bona feina tots els que he vist