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.

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.