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

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

1. Concepte i Objectiu

El projecte “Rellotge Orbital” neix de la voluntat de reinterpretar la representació del temps, allunyant-se de les convencions analògiques i digitals. L’objectiu principal ha estat transformar una dada purament funcional —l’hora— en una experiència visual, artística i contemplativa. La inspiració fonamental prové dels moviments celestes, concebent el pas del temps com un sistema d’òrbites planetàries on cada element té el seu propi cicle i ritme, però conviu en un mateix univers harmònic. Es busca que l’espectador no només “llegeixi” l’hora, sinó que “senti” el flux constant i cíclic del temps.

2. Procés Creatiu i Referències

La fase d’ideació va començar explorant referents d’art generatiu i visualitzacions de dades abstractes. Projectes com “About Time” de Louie Rigano van ser una inspiració clau per entendre com es pot representar el temps sense números, utilitzant únicament la posició, la forma i el color.

El procés d’esbós ha estat iteratiu i ha passat per diverses etapes, documentades a les imatges adjuntes:

• Esbossos inicials a mà (esbos_1.jpg, esbos_2.jpg): Les primeres idees van ser explorades sobre paper amb llapis. Aquests esbossos buscaven definir l’estructura bàsica de les òrbites concèntriques i la disposició jeràrquica dels tres elements principals que representarien les hores, els minuts i els segons. L’objectiu era trobar un equilibri visual i una composició neta.

• Esbossos digitals i proves de color (Esbos_3.jpg, Esbos_4.jpg): Un cop definida l’estructura, el procés va passar a un format digital. En aquesta fase es va experimentar amb la paleta de colors sobre un fons neutre per assignar una personalitat a cada unitat de temps i validar l’harmonia cromàtica, tal com es mostra a Esbos_3.jpg (amb el punt ja corregit a groc) i Esbos_4.jpg, que representa la fusió entre el concepte original i l’execució digital.

3. Implementació i Desenvolupament Tècnic

El projecte s’ha desenvolupat íntegrament amb la llibreria p5.js, aprofitant el seu potencial per a la creació gràfica i la interactivitat.

• Lògica temporal: El nucli del rellotge utilitza les funcions hour(), minute() i second() de p5.js per mapejar el temps actual a la posició angular de cada un dels tres punts sobre les seves respectives òrbites.

• Paleta de colors: Es va definir una paleta de colors càlids per diferenciar clarament cada unitat temporal i dotar-la de caràcter:

  • Segons: Un groc lluminós (RGB: 255, 230, 100) per transmetre rapidesa.

  • Minuts: Un taronja vibrant (RGB: 255, 160, 60) que actua com a pont cromàtic.

  • Hores: Un vermell intens (RGB: 255, 80, 80) per a l’element amb més pes temporal.

• Tipografia: La font Roboto s’ha utilitzat de manera minimalista, només per mostrar el títol i l’autoria a la part inferior dreta. Aquesta decisió manté el llenç principal lliure de text, centrant tota l’atenció en l’experiència visual.

• Disseny responsive: El disseny s’ha programat per adaptar-se a diferents mides de pantalla, assegurant que la composició es mantingui centrada i proporcionada, tal com es demostra a les captures finals.

Esbossos Visuals del Procés

Esbós a mà (Fase 1)	Esbós a mà (Fase 2)	Esbós digital (Color)	Concepte-Resultat

5. Resultat Final i Captures

(Aquí pots inserir les teves captures de pantalla del projecte final dins del Folio)

Resolució 1920×1080	Resolució 1280×720

6. Enllaç al Projecte en Pantalla Completa

https://editor.p5js.org/javivillalon8/full/LXmfu3XRe

7. Valoració i Aprenentatges

El principal repte d’aquest projecte ha estat l’equilibri entre l’abstracció artística i la funcionalitat comunicativa. Aconseguir que una representació no convencional del temps fos intuïtiva i estèticament agradable ha requerit un procés continu de prova i error, especialment en l’ajust de la velocitat, el color i la jerarquia visual.

A nivell tècnic, aquest repte m’ha permès aprofundir en conceptes d’animació amb p5.js, la implementació de disseny responsive i la gestió d’una estructura de codi modular i ordenada. Creativament, ha estat un exercici molt enriquidor per explorar com la tecnologia pot servir per crear metàfores visuals i experiències poètiques a partir de dades quotidianes.