¡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:

1. Actividad: pasos, calorías quemadas y minutos de entrenamiento.
2. Ritmo cardíaco: pulsaciones altas, pulsaciones en reposo y variabilidad del ritmo cardíaco.
3. Descanso: horas de sueño, calidad del sueño e interrupciones del sueño.
4. 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:

1. 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.

1. 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)
2. 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.
3. Esfera de fondo:
   • Cada logo se encuentra dentro de una esfera translúcida que unifica visualmente todos los elementos y mantiene consistencia de color.
4. 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:

1. 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.
2. 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.
3. 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

 

Introducción

La realidad aumentada (RA) se ha convertido en una de las tecnologías más influyentes del siglo XXI debido a su capacidad para transformar la manera en que las personas interactúan con su entorno y para mejorar y cambiar la forma en que se realizan diversas actividades en ámbitos como la industria, la educación, la salud o el comercio, entre otros (Infofuturo, 2025; Realidad Aumentada: El Futuro de la Fabricación | SAP, s. f.; Benito, 2023). A diferencia de la realidad virtual, que sustituye por completo el entorno físico por uno digital, la RA integra elementos virtuales dentro del mundo real, creando una experiencia híbrida e interactiva (Benito, 2023; Realidad Aumentada: El Futuro de la Fabricación | SAP, s. f.). La RA puede utilizarse a través de dispositivos como teléfonos móviles y tablets, aunque el desarrollo de gafas inteligentes está impulsando experiencias más inmersivas y prácticas al permitir su uso sin necesidad de las manos (Realidad Aumentada, Presente y Futuro de Esta Tecnología, 2022; Wolfenstein, 2025).

Fuente 1. Imagen extraída de Pixabay.

 

Aplicaciones actuales

Consumo y entretenimiento

En el ámbito del consumo, la RA ha demostrado su alcance a través de aplicaciones como Pokémon Go, que integró la geolocalización con elementos virtuales para ofrecer experiencias de juego mucho más inmersivas (Realidad Aumentada, Presente y Futuro de Esta Tecnología, 2022). De manera similar, en el sector del marketing y la publicidad, numerosas marcas han incorporado propuestas interactivas que permiten a los usuarios visualizar productos directamente en su entorno, lo que incrementa la confianza en la compra y favorece que más personas decidan adquirirlos (Infofuturo, 2025; Benito, 2023).

Fuente 2. Imagen extraída de Pixabay.

Educación

En el ámbito educativo, la RA permite explorar y manipular modelos en 3D, realizar simulaciones científicas y observar estructuras complejas, como órganos del cuerpo humano o moléculas, lo que facilita la comprensión y mejora la retención del contenido (Infofuturo, 2025; Benito, 2023). La incorporación de esta tecnología en dispositivos de uso cotidiano y en diversas plataformas educativas promueve un aprendizaje más dinámico, flexible y accesible, y podría transformar la manera en que se enseña en todos los niveles educativos.

Fuente 3. Imagen extraída de Pixabay.

Industria y fabricación

El impacto de la RA se vuelve especialmente notable en los entornos de industria, donde trabaja de manera conjunta con tecnologías como los gemelos digitales, el IoT y la inteligencia artificial para mejorar procesos de diseño, producción, mantenimiento y logística (Realidad Aumentada: El Futuro de la Fabricación | SAP, s. f.; Wolfenstein, 2025). Gracias a esta integración, los operarios pueden acceder y manipular información digital en tiempo real, lo que facilita tareas como el mantenimiento remoto, la supervisión de calidad, la formación del personal y la gestión de inventarios. De acuerdo con las estimaciones, el uso de RA en estos contextos puede elevar la productividad industrial en torno a un 32 % (Realidad Aumentada: El Futuro de la Fabricación | SAP, s. f.).

Fuente 4. Imagen extraída de Pixabay.

 

Aplicaciones futuras

El futuro de la RA apunta hacia una integración cada vez más estrecha con la inteligencia artificial y con dispositivos portátiles más avanzados (Wolfenstein, 2025). Se prevé que las gafas inteligentes (más ligeras, compactas y conectadas mediante redes 5G) puedan llegar a sustituir parcialmente a los teléfonos móviles, pasando a ser el principal medio para interactuar con el mundo digital (Realidad Aumentada, Presente y Futuro de Esta Tecnología, 2022; Wolfenstein, 2025). Su adopción dependerá de factores fundamentales como la reducción del tamaño de los componentes, la duración de la batería, la resolución de las pantallas y la aceptación por parte de los usuarios.

En cuanto a su evolución, se espera un crecimiento acelerado de la RA en múltiples sectores:

• Educación: potenciará experiencias de aprendizaje más inmersivas, colaborativas y adaptadas a las necesidades del estudiantado.
• Salud: podría integrarse a herramientas de diagnóstico, procedimientos quirúrgicos asistidos y sistemas avanzados de telemedicina (Infofuturo, 2025)
• Comercio y marketing: permitirá que los consumidores interactúen de forma personalizada con los productos antes de adquirirlos, ofreciendo experiencias adaptadas a sus necesidades y contexto (Infofuturo, 2025).
• Industria: seguirá impulsando la fabricación inteligente, haciendo que los procesos operativos sean más eficientes y la gestión de la cadena de suministro más ágil (Realidad Aumentada: El Futuro de la Fabricación | SAP, s. f.).

Fuente 5. Imágenes extraída de Pixabay.

 

No obstante, a pesar de su potencial, la RA enfrenta diversos desafíos que podrían afectar su adopción:

• Privacidad y seguridad: la captura constante de datos puede derivar en riesgos de vigilancia y conflictos legales (Wolfenstein, 2025).
• Aceptación social y usabilidad: cuestiones como la comodidad, el diseño, la duración de la batería o el desconocimiento sobre sus beneficios siguen limitando su expansión en el mercado general (Wolfenstein, 2025).
• Impacto ambiental: la fabricación de dispositivos avanzados implica un consumo elevado de recursos y un aumento de residuos electrónicos (Wolfenstein, 2025).

 

Futuros posibles según Wolfenstein (2025)

Teniendo en cuenta la convergencia entre la IA, la RA y la expansión de la conectividad a gran escala, es razonable prever que, en los próximos años, la RA transforme de manera profunda la relación entre lo digital y lo físico. Entre los escenarios que podrían darse se encuentran:

• Coexistencia gradual: las gafas inteligentes funcionarían como un complemento de los smartphones, empleándose para tareas o contextos específicos (Wolfenstein, 2025).
• Sustitución disruptiva: los dispositivos basados en RA podrían llegar a reemplazar al smartphone como la principal interfaz de interacción digital (Wolfenstein, 2025).
• Fragmentación del mercado: la operación simultánea de varias plataformas está generando soluciones independientes en lugar de un ecosistema unificado. Mientras algunos consumidores continúan usando teléfonos inteligentes, el sector industrial está creando soluciones por separado (Wolfenstein, 2025).

 

Perspectivas especulativas de la realidad aumentada

Teniendo en cuenta lo anteriormente expuesto y que la realidad aumentada avanza con otras tecnologías como la inteligencia artificial o la conectividad avanzada, es posible imaginar un futuro en el que la RA no solo complemente lo que vemos, sino que cambie profundamente la forma en que vivimos e interactuamos con nuestro entorno.

• Incorporación de sensores e inteligencia artificial junto a la RA: En el futuro, los dispositivos de RA podrían incorporar sensores e inteligencia artificial capaces de seleccionar y mostrar solo la información realmente útil para cada persona, según su situación o incluso su estado emocional. Por ejemplo, un médico podría ver los signos vitales de un paciente proyectados directamente sobre su cuerpo durante una cirugía, lo que facilitaría el trabajo y aumentaría la seguridad.
• Reconocimiento de gestos y patrones: La RA podría llegar a reconocer gestos, movimientos e incluso patrones de pensamiento mediante tecnologías avanzadas. Esto permitiría dejar de depender de controles físicos tradicionales y usar formas de interacción más intuitivas, parecidas a cómo nos relacionamos con el mundo real.
• Incorporación de capas digitales: La RA podría permitir el uso de “capas” digitales sobre el entorno real del usuario, visibles para cualquier persona que use dispositivos compatibles. Estas capas incluirían información útil como, por ejemplo, indicaciones de navegación. Por ejemplo, un peatón podría recibir datos sobre transporte público, sin necesidad de consultar una pantalla aparte.
• Desafíos sociales y culturales: La RA también traerá desafíos importantes como, por ejemplo, las inquietudes sobre la privacidad, la desigualdad en el acceso a la tecnología o la posible dependencia de estos sistemas para procesar información. Algunas series, como Black Mirror, ya muestran cómo una vida fuertemente mediada por lo digital podría modificar nuestras relaciones y nuestra identidad, señalando riesgos que deberán tomarse en cuenta al desarrollar estas tecnologías.

Fuente 6. Imágenes extraída de Pixabay.

 

Referencias

¡Hola a todos!

Mi propuesta para este proyecto se basa en la creación de un sistema generativo para etiquetas de café instantáneo, tomando como punto de partida el ejemplo de Sottosopra y aplicando técnicas de diseño generativo mediante Processing. En este proyecto, el programa tiene en cuenta los datos disponibles de la base de datos de la marca (ficticia) los cuales constan de tres variables fundamentales del producto:

1. Tipo de café (cafeinado o descafeinado)
2. Sabor (vainilla, chocolate, avellana, caramelo, etc.)
3. Intensidad (nivel del 1 al 7)

A partir de estos datos, el programa exporta diferentes etiquetas teniendo en cuenta, formas, texturas, etc., para cada variable, siendo coherente con la imagen de la marca.

El objetivo principal es obtener diversas etiquetas teniendo en cuenta las variables anteriores y que sean reconocibles para cada tipo. Se busca un equilibrio entre orden y variación orgánica, de modo que cada etiqueta sea reconocible dentro de una misma familia pero mantenga su propia identidad.

 

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 de la etiqueta	Color de fondo	Código	Relaciona cada sabor a través de un color	Variable  (color según sabor y tipo)
	Patrón del fondo	data/formas	Genera un patrón único para cada sabor de café	Variable (escala, posición y rotación)
Elementos textuales	Textos (marca, tipo, sabor)	Código	Proporcionan información y jerarquía visual	Fijo (contenido y posición)
Indicadores	Formas geométricas (“gotas de café”)	Código	Proporcionan información sobre la intensidad del café	Variable (según intensidad indicada en el CSV)
Estructura	Composición por capas	Código	Ordena fondo, formas, recuadro informativo y texto, asegurando equilibrio y jerarquía visual	Fija (orden de capas y composición)

 

Reglas generativas

El programa traduce las tres variables del CSV en decisiones visuales teniendo en cuenta las siguientes reglas:

1. Tipo de café: El tipo de café determina el carácter visual y la paleta de colores del fondo:
   1. Cafeinado: colores más contrastados y vivos.
   2. Descafeinado: tonos suaves y desaturados.
2. Intensidad: La intensidad se representa mediante gotas generadas automáticamente por el programa. La cantidad de gotas refleja el nivel de intensidad indicado en la base de datos, proporcionando un indicador visual inmediato del producto.
3. Color de formas y fondo: El color de las formas se genera de manera controladamente aleatoria, considerando el tipo de café y garantizando que un mismo sabor pueda variar según esté cafeinado o descafeinado:
   1. Cafeinado: formas de tonalidad clara.
   2. Descafeinado: formas de tonalidad oscura.
4. Orden de los elementos: El programa organiza los elementos de la etiqueta en capas, asegurando claridad y jerarquía visual:
   1. Fondo generativo
   2. Formas geométricas asociadas al sabor
   3. Recuadro central que contiene la información del café: nombre de la marca, tipo, sabor e intensidad

5. Exportación automática: Cada ejecución genera automáticamente una etiqueta por cada línea del CSV. Los archivos se exportan en formato JPG.

 

Resultados

Fuente 1. Ejemplo de 4 etiquetas generadas con la propuesta comentada. Elaboración propia.

 

Variaciones y valoración reflexiva

Respecto a las variaciones, el programa ha pasado por diferentes versiones. En un primer momento, el fondo era uniforme y, según el sabor, se añadía una línea horizontal con un patrón aleatorio de formas:

Fuente 2. Ejemplo de la propuesta de la línea horizontal con un patrón de formas.

Sin embargo, este resultado resultó demasiado básico, por lo que se ajustó para que cada sabor tuviera un fondo de color propio y un patrón de formas distribuidas, rotadas y escaladas de manera diferente en cada diseño.

Tras esta mejora, se detectó la necesidad de diferenciar las etiquetas de los cafés con cafeína y los descafeinados. Para ello, se readaptó el código y se modificaron los nombres de los archivos, estableciendo la siguiente regla:

• Cafeinado: colores más contrastados y vivos, con formas en tonos claros.
• Descafeinado: colores de tonos suaves y desaturados, con formas más oscuras.

Por otro lado, se definió un color fijo para los elementos de la etiqueta.

Finalmente, el indicador de intensidad, que inicialmente se mostraba en formato texto, pasó a representarse como una barra. Más adelante, se optó por un diseño de “gotas” de café generadas mediante código, aportando mayor coherencia con el producto.

Fuente 3. Ejemplo de una de las propuestas de indicación de las características del café.

 

 

 

¡Hola a todos!

Partiendo de los ejemplos analizados en la PEC2, mi propuesta consiste en el desarrollo de un cartel generativo usando Processing como herramienta principal. El objetivo es explorar nuevas relaciones entre forma, color y estructura, aprovechando los materiales disponibles en las carpetas de los diferentes proyectos (altos, bajos, copy, fonts, medios, static, formas, círculos, líneas).
A diferencia de los ejemplos analizados, que se enfocan principalmente en la disposición regular de imágenes dentro de cuadrículas, este proyecto busca romper la rigidez compositiva introduciendo reglas que generen tensión entre orden y caos, así como dinamismo y variación.

 

Ontología

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

Categoría Ontológica	Elemento	Carpeta	Función en el diseño	Carácter (Fijo / Variable)
Elementos primarios	Imágenes principales	altos, bajos, medios, static	Base visual del cartel	Variable (se seleccionan aleatoriamente)
Elementos secundarios	Formas geométricas simples (líneas, círculos, polígonos)	formas, líneas, círculos	Aportan dinamismo visual	Variable en tamaño, posición y color
Elementos textuales	Textos	copy	Elemento informativo y compositivo	Variable (posición)
Colorimetría	Paleta de color generada por el programa	—	Determina la colorimetría del cartel	Variable (basada en combinaciones controladas)
Estructura	Rejilla invisible de referencia	—	Guía la disposición, pero no se muestra	Fija

Reglas generativas

El programa se ejecuta en base a una serie de reglas que establecen cómo interactúan los distintos elementos. Estas normas delimitan la acción de la aleatoriedad, asegurando al mismo tiempo coherencia y variedad en los resultados:

1. Rejilla flexible: El cartel se organiza sobre una rejilla flexible que combina bloques regulares, similares a los de los ejemplos 3 y 4, con zonas libres donde los elementos pueden salirse de los límites, creando composiciones más orgánicas.
2. Superposición: Las capas se ordenan de la siguiente manera: fondo cromático → formas geométricas → imágenes principales → texto. Se aplican transparencias de manera aleatoria dentro de un rango del 30–70 %, permitiendo que los elementos interactúen visualmente sin perder legibilidad.
3. Color dinámico: La paleta parte de cinco tonos base (rojo, azul, verde, rosa y naranja). Cada ejecución genera variaciones dentro de la misma gama.
4. Escala: Las imágenes de las carpetas “altos” y “bajos” varían su tamaño entre un 80 % y un 120 % de su escala original, adaptándose a la composición sin perder sus proporciones.
5. Tipografía: Los textos (copy) varían en posición, contribuyendo a la dinamización del diseño.
6. Equilibrio: Se evalúa la densidad de elementos en cada cuadrante del cartel para evitar concentraciones excesivas en una sola zona. Si se detecta un desequilibrio, algunos objetos se reubican automáticamente.
7. Exportación: Cada ejecución genera una serie de 10 carteles en formato JPG.

Resultado

Fuente 1. Ejemplo de 3 carteles generados con la propuesta comentada. Elaboración propia.

Variaciones y valoración reflexiva

Al principio, en el desarrollo del código, se había establecido que el elemento static estuviera en sintonía con el copy, sin una restricción fija, buscando mayor flexibilidad. Sin embargo, al observar los resultados, se notó que esto rompía significativamente la armonía visual del diseño. Por esta razón, se decidió finalmente tratar static como un elemento estático, siguiendo el ejemplo de los casos analizados previamente, donde la idea funcionaba de manera más coherente.

En cuanto a la gama cromática, se exploraron varias alternativas de color con el objetivo de encontrar combinaciones que mantuvieran la legibilidad y la armonía visual. No se trató solo de escoger colores agradables, sino de asegurar que los cambios aportaran claridad y cohesión al conjunto.

Además, se hicieron pruebas con las proporciones y la disposición de los elementos dentro de la cuadrícula. La idea era encontrar un equilibrio entre mantener un orden claro y permitir cierta libertad creativa: aunque se permitieran pequeñas variaciones que rompieran ligeramente la estructura, se buscaba que todo siguiera teniendo sentido visual y no generara sensación de caos. 

En resumen, este proceso ayudó a encontrar un punto medio entre creatividad y coherencia, logrando que el diseño fuera flexible y dinámico, pero sin perder su armonía y coherencia.

Ejemplo 1(Realidad virtual)

Cabecera

• Nombre de la aplicación: YouTube VR
• Autoría: YouTube
• Año: 2016
• Página web: https://www.youtube.com/@360
• Imágenes:

Fuente 1. Imagen extraída de la página CNET (Hollister, 2016).

• Enlace a vídeo: https://www.youtube.com/watch?v=H9r8CTsSf4U

Tecnología

1. IMU-inertial
2. Sensor
3. Controlador
4. Estereoscopio
5. Agencia y correspondencia
6. HMD (head-mounted display)
7. Tiempo real
8. Interfaz física
9. Interfaz lógica
10. Entorno virtual

Descripción

YouTube VR es una aplicación de realidad virtual donde los usuarios poder vivir una experiencia inmersiva viendo vídeos de la plataforma en formato 360º. La aplicación se puede usar tanto con gafas de realidad virtual como desde el propio ordenador, disfrutando de experiencias diferentes.

En cuanto a las tecnologías usadas, YouTube VR utiliza un HMD (head-mounted display) como dispositivo principal de visualización. Este dispositivo permite ver los videos directamente frente a los ojos del usuario.

Respecto a la IMU – inertial, esta se encuentra integrada en el visor para que este pueda registrar de manera continua los movimientos y giros de la cabeza del usuario. Gracias a esto, la aplicación puede actualizar el entorno virtual en tiempo real. Por ejemplo, cuando el usuario gira la cabeza hacia un lado, el video se adapta inmediatamente hacia esa orientación.

Relacionado con lo anterior, los sensores incorporados en el dispositivo permiten realizar el seguimiento de la orientación del usuario dentro del entorno virtual. Además, gracias a los controladores, el usuario puede seleccionar videos, desplazarse por los menús, etc.

El estereoscópico es el que permite la percepción de profundidad dentro del visor de realidad virtual.

En cuanto a la agencia y correspondencia, estas también se ven reflejadas en YouTube VR ya que el usuario puede elegir qué vídeo reproducir, avanzarlo o retrocederlo, pausarlo, etc. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El entorno virtual de YouTube VR se compone tanto de vídeos en formato 360° como de espacios simulados por la propia aplicación. En este entorno, los videos se proyectan alrededor del usuario, recreando la interfaz habitual de YouTube, pero dentro de una experiencia inmersiva de realidad virtual.

Finalmente, la interfaz física está compuesta por el visor (HMD) y los controladores, es decir, los dispositivos que el usuario manipula directamente. Por otro lado, la interfaz lógica procesa las acciones y movimientos captados por estos dispositivos, interpretándolos para ejecutar funciones dentro del entorno virtual, como reproducir, pausar o cambiar de video.

Bibliografía y enlaces

Introducción a YouTube VR – Ayuda de YouTube. (s. f.). https://support.google.com/youtube/answer/7205134?hl=es

Realidad Virtual. (2015, 27 enero). YouTube. https://www.youtube.com/@360

Wikipedia contributors. (2025, 14 marzo). YouTube VR. Wikipedia. https://en.wikipedia.org/wiki/YouTube_VR

Chris Finck. (2023, 28 marzo). Hot air balloon skydives and wingsuit gainer!! GoPro 360 VR [Vídeo]. YouTube. https://www.youtube.com/watch?v=H9r8CTsSf4U

Hollister, S. (2016, 19 mayo). Want to watch YouTube with a VR headset? There’s an app for that. Cnet. https://www.cnet.com/tech/services-and-software/youtube-vr-this-fall/

 

Ejemplo 2 (Realidad virtual)

Cabecera

• Nombre de la aplicación: Google Earth VR
• Autoría: Google Inc.
• Año: 2017
• Página web: https://www.google.com/intl/es_ALL/earth/education/tools/geo-vr/ y https://www.meta.com/es-es/experiences/pcvr/google-earth-vr/1513995308673845/?srsltid=AfmBOor6FNcsKyaZkHTUCxZpxa3X1Td12bTWsZi8nETj6zmjc4qoX7MW (página de descarga)
• Imágenes:
• 

Fuente 2. Imágenes extraídas de Meta (Google Earth VR, s. f.)

• Enlace a video: https://www.youtube.com/watch?v=SCrkZOx5Q1M

Tecnología

1. SLAM
2. IMU – inertial
3. HMD (head-mounted display)
4. Sensor
5. Controlador
6. Estereoscópico
7. Agencia y correspondencia
8. Tiempo real
9. Mapeo
10. Interfaz física
11. Interfaz lógica
12. Entorno virtual

Descripción

Google Earth VR es una aplicación de realidad virtual, ya que su objetivo es que el usuario se sienta sumergido en una simulación 3D del planeta Tierra.

En cuanto a las tecnologías utilizadas, se puede detectar el uso de SLAM ya que permite la localización y el mapeo del entorno del usuario. Respecto al mapeo, Google Earth VR utiliza datos reales para representar el planeta de forma topográfica. A través de modelos 3D de ciudades, montañas, etc., el sistema recrea el mundo físico en un entorno virtual.

El entorno virtual de Google Earth VR es una representación en 3D del planeta Tierra, en la que el usuario puede desplazarse libremente, cambiar la escala de visión o visitar lugares icónicos.

Otra tecnología fundamental es la IMU – inertial ya que esta registra los movimientos y giros del casco/gafas de realidad virtual y de los controladores que usa el usuario. Esto permite que Google Earth VR detecte la orientación del usuario, ajustando como se visualiza el entorno virtual en base a los movimientos y giros reales del usuario en el mundo físico.

El HMD (head-mounted display) es el dispositivo principal mediante el cual el usuario visualiza y experimenta el entorno virtual (son los casos o gafas de realidad virtual). En este caso, el casco o las gafas muestran un modelo 3D del planeta, permitiendo que el usuario se integre en el mundo con una vista inmersiva en 360º.

Los sensores y los controladores también son elementos esenciales para Google Earth VR. Por un lado, los sensores permiten el seguimiento de la posición y los movimientos del usuario. Por otro lado, los controladores funcionan como si fuesen las manos del usuario, facilitando la interacción con el entorno virtual. A través de ellos se pueden seleccionar ubicaciones, acercar o alejar la vista, y desplazarse por diferentes zonas del planeta.

El estereoscópico es el que permite la percepción de profundidad en el HMD de realidad virtual.

En cuanto a la agencia y correspondencia, estas también se ven reflejas en Google Earth VR, ya que el usuario puede decidir qué lugares visitar, qué ver y a qué distancia explorar. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El tiempo real también se encuentra presente, ya que Google Earth VR procesa los movimientos del usuario, las interacciones y los cambios de perspectiva de manera inmediata.

Finalmente, en cuanto a la interfaz física, esta es la que está compuesta por los dispositivos que el usuario manipula directamente, como las gafas, los controladores… En cambio, la interfaz lógica es la que se encarga de procesar los datos que provienen de la interacción física, interpretando las órdenes del usuario y generando las respuestas visuales y de movimiento dentro de la simulación.

Bibliografía y enlaces

Google Earth VR en Steam. (s. f.). https://store.steampowered.com/app/348250/Google_Earth_VR/?l=latam

Google Earth VR. (s. f.). Meta. https://www.meta.com/es-es/experiences/pcvr/google-earth-vr/1513995308673845/?srsltid=AfmBOor6FNcsKyaZkHTUCxZpxa3X1Td12bTWsZi8nETj6zmjc4qoX7MW

Google. (2016, 16 noviembre). Google Earth VR — Bringing the whole wide world to virtual reality [Vídeo]. YouTube. https://www.youtube.com/watch?v=SCrkZOx5Q1M

Realidad virtual y geografía. (s. f.). https://www.google.com/intl/es_ALL/earth/education/tools/geo-vr/

Rodriguez, O. (2025, 25 marzo). Google Earth VR: Explora el Mundo en Realidad Virtual con Virtua Barcelona. Virtuabarcelona. https://virtuabarcelona.com/2025/03/25/google-earth-vr-explora-el-mundo-en-realidad-virtual-con-virtua-barcelona/

 

Ejemplo 3 (Realidad aumentada)

Cabecera

• Nombre de la aplicación: Ikea Place (ahora integrada en aplicación de Ikea)
• Autoría: Inter IKEA Systems B.V.
• Año: 2017
• Página web: https://www.ikea.com/es/es/customer-service/mobile-apps/ y https://www.ikea.com/global/en/newsroom/innovation/ikea-launches-ikea-place-a-new-app-that-allows-people-to-virtually-place-furniture-in-their-home-170912/
• Imágenes:

 

Fuente 3. Imagen superior extraída de la página web de Ikea (Launch Of New IKEA Place App – IKEA Global, s. f.) e imagen inferior elaboración propia a través de la app de Ikea.

• Enlace a video: https://www.youtube.com/watch?v=UudV1VdFtuQ

Tecnología

1. SLAM
2. IMU – inertial
3. HUD (head-up display)
4. Sensor
5. Interfaz física
6. Interfaz lógica
7. Mapeo
8. Agencia y correspondencia
9. Tiempo real
10. Entorno virtual

Descripción

Ikea Place es una aplicación de realidad aumentada ya que esta permite superponer muebles virtuales sobre el entorno físico del usuario. Esto se realiza a través de la cámara del dispositivo móvil (generalmente smartphones). Actualmente, la aplicación Ikea Place se encuentra integrada dentro de la propia aplicación de Ikea.

En cuanto a las tecnologías utilizadas, se puede detectar el uso SLAM, que permite que la aplicación identifique y mapee el entorno del usuario en tiempo real. En cuanto al mapeo, este permite detectar la superficie del suelo, las paredes y otros elementos del entorno físico, permitiendo que los elementos virtuales se ajusten a la disposición y forma de la habitación.

La IMU – inertial también se encuentra presente, ya que detecta los movimientos del dispositivo mediante acelerómetros y giroscopios. Esto permite que, cuando la cámara se mueve, los elementos virtuales se posicionen correctamente según la dirección a la que apunta la cámara.

El HUD (head-up display) se ve reflejado en la interfaz gráfica que muestra información adicional mientras se visualizan los muebles como, por ejemplo, las opciones de color de los muebles.

Los sensores del dispositivo, como la cámara y los giroscopios, recopilan datos del espacio físico y permiten que la aplicación determine la distancia, la escala y la orientación de los objetos.

La interfaz física son los elementos físicos del dispositivo, como la pantalla táctil y la cámara, que permiten al usuario manipular los objetos virtuales mediante gestos, toques, etc. La interfaz lógica, por otro lado, es la que se encarga de gestionar el procesamiento de datos.

En cuanto a la agencia y correspondencia, estas también se ven reflejadas en IKEA Place ya que el usuario tiene la capacidad de decidir dónde colocar, rotar o cambiar los muebles virtuales. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El funcionamiento en tiempo real también es importante, ya que la aplicación actualiza constantemente la posición de los muebles virtuales mientras el usuario mueve el dispositivo, ajustando la perspectiva y la escala para mantener la coherencia con el entorno físico.

Finalmente, el entorno virtual está compuesto por los elementos virtuales (muebles) que se proyectan sobre el entorno físico. Estos objetos virtuales se integran en la habitación del usuario permitiendo visualizar cómo quedarían los productos de IKEA antes de realizar una compra.

 

Bibliografía y enlaces

App Store. (2019, 11 noviembre). IKEA. App Store. https://apps.apple.com/es/app/ikea/id1452164827

IKEA App por un mejor día a día. (s. f.). [Vídeo]. IKEA. https://www.ikea.com/es/es/customer-service/mobile-apps/

Launch of new IKEA Place app – IKEA Global. (s. f.). IKEA. https://www.ikea.com/global/en/newsroom/innovation/ikea-launches-ikea-place-a-new-app-that-allows-people-to-virtually-place-furniture-in-their-home-170912/

 

Bibliografía

App Store. (2019, 11 noviembre). IKEA. App Store. https://apps.apple.com/es/app/ikea/id1452164827

Chris Finck. (2023, 28 marzo). Hot air balloon skydives and wingsuit gainer!! GoPro 360 VR [Vídeo]. YouTube. https://www.youtube.com/watch?v=H9r8CTsSf4U

Ferrer, J. (2018, 9 marzo). El continuo de la realidad mixta – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/2018/03/09/catala-el-continu-de-la-realitat-mixta/

Ferrer, J. (s. f.-a). Glosario – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/category/glossari/

Ferrer, J. (s. f.-b). Tecnología – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/category/tecnologia/

Google Earth VR en Steam. (s. f.). https://store.steampowered.com/app/348250/Google_Earth_VR/?l=latam

Google Earth VR. (s. f.). Meta. https://www.meta.com/es-es/experiences/pcvr/google-earth-vr/1513995308673845/?srsltid=AfmBOor6FNcsKyaZkHTUCxZpxa3X1Td12bTWsZi8nETj6zmjc4qoX7MW

Google. (2016, 16 noviembre). Google Earth VR — Bringing the whole wide world to virtual reality [Vídeo]. YouTube. https://www.youtube.com/watch?v=SCrkZOx5Q1M

Hollister, S. (2016, 19 mayo). Want to watch YouTube with a VR headset? There’s an app for that. Cnet. https://www.cnet.com/tech/services-and-software/youtube-vr-this-fall/

IKEA App por un mejor día a día. (s. f.). [Vídeo]. IKEA. https://www.ikea.com/es/es/customer-service/mobile-apps/

Introducción a YouTube VR – Ayuda de YouTube. (s. f.). https://support.google.com/youtube/answer/7205134?hl=es

Launch of new IKEA Place app – IKEA Global. (s. f.). IKEA. https://www.ikea.com/global/en/newsroom/innovation/ikea-launches-ikea-place-a-new-app-that-allows-people-to-virtually-place-furniture-in-their-home-170912/

Realidad mixta – Otro sitio más de Blogs asignaturas GMMD. (s. f.). https://multimedia.uoc.edu/blogs/rx/es/

Realidad virtual y geografía. (s. f.). https://www.google.com/intl/es_ALL/earth/education/tools/geo-vr/

Realidad Virtual. (2015, 27 enero). YouTube. https://www.youtube.com/@360

Rodriguez, O. (2025, 25 marzo). Google Earth VR: Explora el Mundo en Realidad Virtual con Virtua Barcelona. Virtuabarcelona. https://virtuabarcelona.com/2025/03/25/google-earth-vr-explora-el-mundo-en-realidad-virtual-con-virtua-barcelona/

Wikipedia contributors. (2025, 14 marzo). YouTube VR. Wikipedia. https://en.wikipedia.org/wiki/YouTube_VR