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

Abans de començar a fer esbossos i provatures, primer calia idear la manera en que es presentaria aquest “rellotge creatiu”. A l’enunciat se’ns animava a fugir de mostrar l’hora de forma convencional, i poc a poc anava prenent forma un concepte:

Què tal un rellotge que NO ensenya l’hora exacta a primer cop d’ull?

Amb aquesta idea al cap es va començar a muntar la base de “QUARTS”, que a mesura que s’anava polint, pensava en que la gent, quan ho miri, no ha de llegir números: ha de percebre ràpid si encara és abans del primer quart, si ja ha passat la mitja, o si s’acosta el canvi d’hora.

Però l’esboix inicial va ser aquest, més similar a un histograma:

Els primers esbossos apuntaven cap a una gran taula, on representaríem cada hora com una columna formada per 60 petites tires que simbolitzarien els minuts, i que parpellejarien a cada segon fins completar-se. Això acabava formant una taula bastant gran, que incloent la divisió dels quarts, quedava prou vistós (i inclús recordava vagament les cordes d’una guitarra), però calia simplificar més la idea, fer-ho una mica més abstracte.

Es va optar per utilitzar una única barra i agitada, seguint la mateixa estructura dels minuts. A la part superior tenia un numero indicant l’hora, i dalt a l’esquerra un indicador de AM/PM, però després de mirar-ho durant un parell de dies, es va decidir prescindir d’aquests texts, i convertir el valor de l’hora en petites esferes que s’anirien engegant a mesura que es completin les hores.

Amb aquestes últimes modificacions, es complia amb l’objectiu de fer un rellotge que no indiqui a primer cop d’ull l’hora exacta, i que, a més, fomenta l’ús de “dos quarts de deu” o “un quart i mig de tres”.

Així doncs, ja podia fer un llistat final dels elements:

FORMA: Una sola fila horitzontal amb 60 barres (1 per minut), tres línies verticals als quarts (15/30/45) i 12 esferes blanques alineades a dalt que indiquen l’hora sense números ni lletres.

COLOR: Paleta senzilla i contrastada: fons fosc, verd per a barres actives, gris fosc per a futures i blanc per a esferes/contorns. La idea era recrear la sensació d’un gran rellotge digital, però per molt “digital” que sigui, no mostra l’hora exactament a la primera (sempre s’haurà de comptar per esbrinar-ho exactament), així que un verd sobre negre contrasta molt bé per facilitar la correcta visió, sense més distraccions.

Per la TIPOGRAFIA escollida, es van provar algunes opcions mitjançant Photoshop, i la “Emblem” quedava ben integrada, per la semblança de la Q amb les esferes de les hores, i per donar un punt diferencial a aquest petit text i que no semblés la típica font de sistema.

Com a última anotació, caldria quadrar amb el client el tema de l’hora exacta: hem d’implementar que el rellotge llegeix l’hora del sistema? O bé volen fer algun acte de posada en marxa de l’estil “prémer un botó per arrancar-lo”? Amb això, acabaríem de modificar l’script. De moment, a l’inici es pot posar l’hora desitjada (HH:MM:SS) de forma manual.

Enllaç al Projecte en Pantalla Completa:

https://editor.p5js.org/jsolebarg/full/8LRPs-Iaa

Ja ens veurem cap a quarts de cinc!

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.