Desenvolupament d'aplicacions interactives - Aula 1

Públic

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