20.671 - Desarrollo de aplicaciones interactivas - Aula 1

Pública

Concepto

Hola a todos, me llamo Jordi y os muestro mi proyecto de Reto 1 de relojes interactivos.

Para ello pensé en varios modelos y al fina me decidí en algo muy básico que nos indica el final e inicio de un día. El sol y la Luna. En estas dos opciones me decante por usar solo la luna. Ya que es un astro que se ve tanto de día como de noche, no como el Sol.

Para representar esto elegí un ciudad don unas ventanas se irán encendiendo a cada paso del tiempo, esto funcionaría así.

Funcionamiento

Para leer este reloj tenemos que fijarnos en 3 cosas:

Los segundos: La luna avanza en el cielo de izquierda a derecha y vuelve al principio en cada minuto.

Los minutos:  Para los minutos hay 4 edificios con 15 ventanas cada uno, cada ventana es 1 minuto, y cada edificio representa 1 cuarto de hora. A cada minuto una luz de una ventana se enciende.

Las Horas:  El color del cielo representan las horas, a medida que el azul de noche, de medianoche pasa a claro y se vuelve a oscurecer, concuerda con lo que se vería al ser de día y ser de noche. En la leyenda se marca con un cuadrado mas ancho que hora es exactamente y a cual corresponde el color.

Proceso

Mi primera idea era como la un agujero negro que va absorviendo las partícula a cada segundo. Al final la deseche ya que no me aclaraba en como representar las horas y no quedaba muy bien reflejado. No se ajustaba a lo que estaba buscando.

En base a pensar en el espacio y los agujeros negros se me vino la idea el ciclo de día y noche que tenemos y con la Luna de protagonista. Realicé un primer boceto representando un poco como quería hacer este reto.

Paleta de colores

Para la paleta de colores tenemos varias que diferenciar

• Cielo: de azul noche a claro día dependiendo de la hora
• Edificios y suelo: azules muy oscuros para que el cielo y ventanas destacan
• Ventanas encendidas: Amarillo cálido, como una luz de una casa por la noche.
• Ventanas apagadas: azul grisáceo, dando la sensación de vacío
• Luna: blanco crema, para que destaque en los tonos de azules.

Topografia

Para la tipografía elegí la Space Mono, una fuente monoespaciada que me recuerda mucho a los relojes digitales clásicos. La cargo usando loadFont() y la uso con tect(), para el título y mi nombre.

Código

Para el programa dividí el codillo en funciones, una para cada elemento. Como dibujarLuna, dibjuarCiudad, dibujarLeyenda etc. Las ventanas se dibujan con bucles anidados, y el color del cielo se calcula con funciónes que devuelven un valor según la hora.

Enlace del sketch

Aquí tenéis el enlace verlo.

https://editor.p5js.org/jdeleonch/full/FRn2-4l3j

Muchas gracias.