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

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.

Per la creació del meu rellotge vaig plantejar-me la idea dels cicles:
El temps és cíclic, els cercles representen el temps, els planetes són esferes que són cercles amb volum i les òrbites dels planetes són cícliques.
Així doncs vaig partir d’una idea de representar els cicles temporals de manera circular, una per a cada part del temps:

Amb la idea plantejada vaig mesurar, fent servir illustrator, la millor manera de distribuir els espais (seccions) i els segments; cada cercle te 6 subcercles que són proporcionals a 24 i 60

L’elecció de la paleta era clara, el dia amb tons de cel de dia i la nit fosca. I el color dels cercles llampants per contrastar.
Així doncs, el programa detecta quin mes estem i, el rellotge és diürn o nocturn. Diürn, pinta un sol i cel blau (encara no detecta si està núvol ^^U) i nocturn pinta la lluna i cel negre.
En conseqüència s’adapta tota la paleta de colors.
La tipografia, obtinguda de Google Fonts, havia de ser digital, ja que evoca els rellotges digitals vintage.j
El podreu trobar aquí:
https://editor.p5js.org/elecinas/full/R8xMMmG7E

NOTA: S’ha fet servir l’eina d’IA ChatGPT per la creació de la funció que detecta si és de dia o de nit segons on som i el mes que som, a més de revisar el codi quan no funcionava per detectar on eren els errors.