Bon dia companys

Aquí us deixo la meva pràctica final i l’enllaç al prototip.

https://www.figma.com/proto/jFKDHTWE48E3sTOFcDRo9y/WIREFRAME-APP-PR?node-id=3126-535&p=f&t=TjMqpiksQyzZBwK7-1&scaling=scale-down&content-scaling=fixed&page-id=638%3A912&starting-point-node-id=638%3A964

-Que us sembla la gamma cromàtica relacionada amb l’escut del poble? faríeu algun canvi?

-Creieu que serà una APP fàcil i llaminera pels usuaris?

gràcies

https://editor.p5js.org/montsecm7/full/n_fLG0_cl

Aquí us deixo el PDF informe del treball realitzat i l’enllaç per veure el resultat final.

https://editor.p5js.org/montsecm7/full/q0hI0KeMW

Després de mirar molts estils de scape rooms dedicats a la temàtica vaig començar a pensar i crear el que volia fer:

-Imatge amb profunditat, fosca , amb parets netes per poder afegir lletres i/o imatges.

-El números amb color de sang i una tipogràfica terrorífica.

-Una imatge d’una persona, que apareix del fonts i va acostant-se a la part principal i creixent amb el pas dels segons.

-Com tenim les parets netes podem afegir textos, o sang sortint de les parets a mesura que avança el temps.

-Els últims 10 segons, el rellotge parapdeixa i canvia el so de fons, per un altre per simular aquesta alerta de finalització del temps.

Part tècnica:
he declarat les variables
he utilitzat function preload():
loadImage() per carregar les nostres imatges
loadFont() per la nostra tipografia
loadSound() per la música de fons i d’alerta final.

He hagut de crear contenidors ja que si no tenia problemes amb el HTML de P5.

He utilitzat nf per donar 2 digitis als números.

Quan seleccionaves només segons sense posar cap número als minuts sortia l’alerta de NaN, per solucionar-ho he donat els paràmetres següents:
if(isNaN(timerMinutos)){timerMinutos=0}

També s’ha utilitzat la transparència per que les imatges quan apareixen vagin agafat intensitat.

Com el tint()  donava problemes i feia que tot fos molt lent o no funciones e creat una funció que fes la mateixa feina.
function mostrarManos(imagen,tiempo,x,y,tamañoX,tamañoY){
if (timerSegundos<tiempo && timerMinutos == 0){
image (imagen, x, y, tamañoX, tamañoY)
}

https://editor.p5js.org/montsecm7/full/IPjNqTM2F

El nostre objectiu és dissenyar un rellotge creatiu que representi el temps i cridi l’atenció dels vianants que s’apropin al nostre centre cultural.

Vaig partir de la idea de fer un rellotge pixelat amb una quadrícula.

Un cop vaig aconseguir el funcionament desitjat vaig centrar-me en el que demanava el repte.

Com el rellotge s’ha de mostrar en un centre cultural vaig pensar en la cultura catalana i buscant informació em va aparèixer una imatge de tres torres castelleres i se’m va acudir fer referència als castellers, utilitzant una torre per cada segment, hores, minuts i segons, degut això vaig haver de canviar la quadrícula per una piràmide

Per tal de representar la construcció d’una torra vaig haver d’invertir l’ordre amb què s’omplien els quadres de la piràmide per donar-li més similitud al que volem mostrar.

Part tècnica:

• Declarem les variables per crear el nostre rellotge:

let segundos = second();    let minutos = minute();     let horas = hour();

• Declarem la funció piramideon li donem els valors que necessitem:

function piramide (x,y, files, Columnes,colorpiramides, contador, imagen, tamaño);

• Creem diferents bucles for, un que recorre les files i li sumi una columna en cada volta del bucle i després un que recorri les columnes.
• Creem les nostres tres piràmides una per cada segment, cada una diferenciada en mida i en color fent servir:

Piramide( x, y, columnes, files, color, let(hora, minuts, segonss), imatge, tamany)

• La gamma de colors representen 3 colles castelleres i per poder identificar cada segment amb un color he dibuixat un casteller utilitzant les formes:
  Circle();Line();rect().
• Pels títols i subtítols s’ha fet servir la funció loadFont() i text().
• Per carregar les imatges he fet servir la funció loadImage(), en alguns casos fotos descarregades a l’ordinador en altres he fet servir l’URL.

https://editor.p5js.org/montsecm7/full/m3K1q_wmo