Pública

¡Hola a todos!

Mi propuesta para este proyecto se centra en la creación de un logotipo generativo para la plataforma Vitalis, una marca ficticia con el objetivo de seguir los datos de salud del usuario. Para ello, se usan JavaScript y la librería p5.js para generar un logotipo que responda de forma dinámica a los datos de salud de cada persona.

El objetivo es que cada sección de la web (Actividad, Ritmo cardíaco, Descanso e Hidratación) tenga una representación visual coherente con las propiedades (variables) de cada métrica, generando una identidad visual propia pero integrada en el estilo general de la marca.

Cada logo se genera a partir de variables clave asociadas a cada apartado:

Actividad: pasos, calorías quemadas y minutos de entrenamiento.
Ritmo cardíaco: pulsaciones altas, pulsaciones en reposo y variabilidad del ritmo cardíaco.
Descanso: horas de sueño, calidad del sueño e interrupciones del sueño.
Hidratación: cantidad de agua ingerida y objetivo.

A partir de estas métricas, el programa genera un logotipo dinámico compuesto por formas orgánicas y partículas en movimiento. Cada métrica influye en:

Color, cada apartado tiene un color característico.
Forma y deformación del blob central, según el valor de la variable principal.
Cantidad, velocidad y radio de las partículas, según las variables secundarias y terciarias.

El resultado es un logotipo por apartado con variación orgánica, reconocible dentro de cada sección y consistente en toda la plataforma.

Ontología

Siguiendo la ontología propuesta por David Casacuberta, podemos clasificar los elementos de la siguiente manera:

Categoría Ontológica	Elemento	Origen	Función en el diseño	Carácter (Fijo / Variable)
Fondo	Esfera central translúcida	Código	Unifica visualmente el logo	Variable (color según apartado)
Elementos orgánicos	Formas orgánicas	Código	Representa la intensidad de la variable principal	Variable (forma según datos)
Partículas	Puntos orbitando	Código	Representan variables secundarias y terciarias	Variable (cantidad y velocidad según datos)
Estructura	Composición por capas	Código	Organiza fondo, blob y partículas asegurando jerarquía visual	Fijo (orden de capas)

Reglas generativas

El programa traduce los valores de cada JSON a decisiones visuales siguiendo estas reglas:

Color base:
- Actividad: tonos naranjas
- Ritmo cardíaco: tonos rojos
- Descanso: tonos azules
- Hidratación: tonos celestes

El color define la esfera de fondo, el blob y las partículas de cada sección.

Blob orgánico:
- Forma central generada mediante ruido Perlin para que no sea un círculo perfecto, sino una figura ondulada que cambia suavemente.
- La intensidad de la deformación y el movimiento depende de la variable principal:
  - Actividad: pasos
  - Ritmo cardíaco: pulsaciones altas
  - Descanso: horas de sueño
  - Hidratación: progreso respecto al objetivo de agua ingerida (hidratación / objetivo)
Partículas orbitando:
- Representan variables secundarias y terciarias:
  - Actividad: calorías (cantidad de partículas) y minutos de entrenamiento (velocidad de las partículas)
  - Ritmo cardíaco: pulsaciones en reposo (cantidad de partículas) y variabilidad (velocidad de las partículas)
  - Descanso: calidad del sueño (cantidad de partículas) e interrupciones (velocidad de las partículas)
  - Hidratación: la misma proporción hidratación / objetivo se usa para cantidad y velocidad, ya que solo hay dos variables. Esto permite que, aunque Hidratación tenga menos métricas, el logo siga siendo dinámico y coherente.
Esfera de fondo:
- Cada logo se encuentra dentro de una esfera translúcida que unifica visualmente todos los elementos y mantiene consistencia de color.
Overview (página principal):
- Combina los cuatro apartados en un solo logo.
- Cada métrica tiene su blob y partículas, rotando a distintas velocidades y capas, creando un logotipo multidimensional y dinámico.

Resultados

Fuente 1. Ejemplo de los 5 logos generados con la propuesta comentada. Elaboración propia.

Variaciones y valoración reflexiva

Durante el desarrollo, se realizaron varias iteraciones:

Primera versión: cada variable de cada apartado tenía reglas independientes, lo que dificultaba que el usuario comprendiera fácilmente el logotipo y su relación con los datos.
Segunda versión: en la primera versión no existía una esfera de fondo; solo se mostraban el blob y las partículas. Se añadió la esfera para unificar visualmente todos los elementos y mejorar la legibilidad del logo.
Tercera versión: se implementó un logo integrado que agrupa todos los apartados, convirtiéndose en el logo principal de la plataforma, dinámico según las métricas de cada usuario. La composición es más rica y muestra todas las métricas simultáneamente sin perder la identidad de cada sección.

Cada iteración ha buscado equilibrar coherencia visual y dinamismo, logrando logos reconocibles, informativos y visualmente atractivos para el usuario.

Bibliografía

async function – JavaScript | MDN. (s. f.). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Blob by mcpecommander -p5.js Web Editor. (s. f.). https://editor.p5js.org/mcpecommander/sketches/GPDsjtaXD

canvas parent by cassie -p5.js Web Editor. (s. f.). https://editor.p5js.org/cassie/sketches/Tad2eI9j3

Casacuberta, D. (2019). En qué consiste el diseño generativo (1.^a ed.). FUOC.

Casos de diseño generativo. (s. f.). https://materials.campus.uoc.edu/daisy/Materials/PID_00267127/html5/PID_00267127.html

document.body – API web | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/API/Document/body

document.getElementById – API web | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/API/Document/getElementById

Eduardo. (2024, 6 junio). Pasar datos via POST con Async/Await. Stack Overflow En Español. https://es.stackoverflow.com/questions/621404/pasar-datos-via-post-con-async-await

element.innerHTML – API web | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML

Estructura de un diseño generativo. (s. f.). https://materials.campus.uoc.edu/daisy/Materials/PID_00267126/html5/PID_00267126.html#w31aac11

get – JavaScript | MDN. (s. f.). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

Gimenez, L. (2022, 10 diciembre). Propiedades de objetos en JavaScript. Stack Overflow En Español. https://es.stackoverflow.com/questions/573088/propiedades-de-objetos-en-javascript

Guía de JavaScript – JavaScript | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/JavaScript/Guide

Interactividad. (s. f.). https://materials.campus.uoc.edu/daisy/Materials/PID_00268941/html5/PID_00268941.html

Isarch Borja, A. (2019). Estructura de un diseño generativo (1.^a ed.). FUOC.

Kantor, I. (s. f.). Objects. https://javascript.info/object

Mitas1c. (s. f.). How to implement Offset on Perlin noise? Stack Overflow. https://stackoverflow.com/questions/70450794/how-to-implement-offset-on-perlin-noise

Noise. (s. f.). https://p5js.org/es/examples/repetition-noise/

NoStroke. (s. f.). https://p5js.org/reference/p5/noStroke/

Referencia CSS – CSS | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/CSS/Reference

Rivas, D. (2022, 28 octubre). Mostrar datos de un foreach en una tabla HTML. Stack Overflow En Español. https://es.stackoverflow.com/questions/564971/mostrar-datos-de-un-foreach-en-una-tabla-html

Tornado_Code. (2022, 20 junio). Converting custom javascript noise/offset functions to p5’s native functions. Stack Overflow. https://stackoverflow.com/questions/72692234/converting-custom-javascript-noise-offset-functions-to-p5s-native-functions

Trabajando con JSON – Aprende desarrollo web | MDN. (s. f.). https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/JSON

Trabajando con objetos – JavaScript | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_objects

Try. . .Catch – JavaScript | MDN. (s. f.). https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/try. . .catch

Using HTML form validation and the Constraint Validation API – HTML | MDN. (s. f.). https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation

Using the Fetch API – Web APIs | MDN. (s. f.). https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

W3Schools.com. (s. f.). https://www.w3schools.com/js/js_const.asp

Wen, A. K. Q. (s. f.). How to work with multiple datasets in p5.js? Stack Overflow. https://stackoverflow.com/questions/69986666/how-to-work-with-multiple-datasets-in-p5-js

LOGO GENERATIVO – PROPUESTA DE JENNIFER MOLANO NAVARRO