Desenvolupament d'aplicacions interactives - Aula 1

Públic

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