Iridiscencias Latentes

Título	Iridiscencias Latentes - Exposición IE 2025
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	expo
Período	2025-2025
Asignatura	Imagen Escrita
Del Curso	Imagen Escrita 2025
Carreras	Diseño
Alumno(s)	Francisco Daniou, Matilde Orellana
Profesor	Javiera Ruiz
PDF	Archivo:Expo IE Lámina FDMO.pdf

Introducción

Proceso de diseño

Inspiración

El diseño se estructura a partir de la proporción áurea (φ) como principio de organización formal. Este número, presente en conchas, remolinos y formaciones galácticas, orienta un crecimiento espiral que mantiene continuidad, equilibrio y coherencia estructural a distintas escalas. Dichas cualidades se trasladan al concepto de túnel, entendido como una estructura de densidad gradual, con una percepción de infinitud y una convergencia limpia hacia el centro, evocando el fenómeno perceptual conocido como “tunnel vision”, donde el campo visual se condensa y dirige hacia un punto focal profundo.

En paralelo, la propuesta incorpora la oscilación ondulatoria observada en cuerpos de agua, inspirándose directamente en el ripple effect. Las funciones seno y coseno modelan el comportamiento de estas ondas, representando el ritmo alternante de crestas y valles, así como sus interferencias armónicas, otorgando a la espiral un movimiento continuo y orgánico. Sobre esta base, se integran pulsaciones y microvariaciones temporizadas que actúan como latidos o anillos de propagación, reforzando la idea de expansión energética y resonancia natural.

La elección cromática, tonos navy, azules y blanco sobre fondo negro, establece un alto contraste y una lectura clara de superposiciones, articulando lo que se definió como “iridescencias latentes”: un carácter visual impactante que enfatiza la profundidad luminosa y la presencia dinámica del túnel.

En conjunto, la propuesta sintetiza reglas simples de la naturaleza, proporción, onda y percepción focal, en una experiencia visual digital que explora la expansión, la continuidad y la vitalidad orgánica como principios de diseño.

Tunnel vision.
Ripple effect.
Ondas.

Iteraciones

Grupo 1 (Exploración inicial)

Idea base: uso de la proporción áurea (φ) para un espiral que rota en un centro común.
Juego formal: variaciones de excentricidad (de circular a elíptica) buscando sensación de túnel y continuidad.
Lenguaje visual: paleta en azules y blanco sobre fondo negro; incorporación de capas con una capa central como guía.
Interactividad temprana: pruebas con partículas atraídas al espiral para sugerir movimiento orgánico.
Resultado: rota y responde, pero aún no logra la profundidad y “tunnel vision” proyectada.
Aprendizajes: mantener centro común, enfatizar espesor por capas y ajustar excentricidad para una lectura más clara del túnel.

Grupo 2 (Capas densas y desfase controlado)

Idea base: extender la proporción áurea con más capas y mayor densidad para profundizar el efecto túnel.
Desarrollo formal: espirales múltiples, levemente desfasados entre sí para evidenciar el movimiento.
Color y capas: azules y blanco en contraste alto; una capa central estable y capas auxiliares que orbitan/desfasan.
Hallazgo visual: riqueza de superposiciones e instantes cambiantes en pantalla; resultado estéticamente muy atractivo.
Problema detectado: el inicio/fin de cada espiral no cerraba limpio; el desfase generaba líneas y formas no deseadas.
Aprendizajes: mejorar el cierre geométrico del trazo, alinear convergencias al centro y mantener el desfase sin artefactos.

Grupo 3 (Ondas seno–coseno e interacción)

Cambio de enfoque: se sustituye la construcción áurea por espirales basadas en seno y coseno.
Trazos limpios: las terminaciones e inicios del espiral mejoran, con convergencia más controlada al centro.
Iluminación y materialidad: uso de superposición suave (lighter) y alfas para leer capas y brillos sin saturar.
Interacción: se incorporan pulsaciones (latidos con réplicas temporizadas) y control por puntero: Rotación en eje X, excentricidad en Y y respuesta orgánica al tap/click.
Lectura final: túnel más estable, dinámico y legible; capas azules/blancas con contraste alto e iridesencias latentes.

Lógica del código +

Variables globales

COLORS, STYLE_BASE: Paleta (navy–azules–blanco) y parámetros por capa (w = grosor; aFar/aNear = opacidades lejano/cercano).
IS_MOBILE, CFG: Perfil móvil/escritorio (capas visibles, paso angular, alpha de mezcla, FPS, parámetros de pulso y anillos).
STYLE: Copia de STYLE_BASE escalada según pantalla (strokeScale).
t: Tiempo global para animación (rotación/fase).
invertedTime / INVERT_DURATION: Ventana temporal del “flash” de inversión de color tras un pulso.
FIXED_LAYERS, MIN_SCALE, MAX_SCALE: Nº de capas internas y límites de escala por “momento”.
pulses, scheduledBursts: Pulsos activos y sus réplicas programadas (timestamps futuros).
eccCurrent, hasPointer: Excentricidad actual (1.0 fuera del canvas) y bandera de puntero/touch activo.
cnv: Referencia al canvas p5.

setup()

Crea el canvas cuadrado 1080×1080 y fija pixelDensity(3).
Desactiva gestos del navegador en mobile: cnv.style('touch-action','none').
Fija frameRate según el perfil y estilos de trazo (noFill, strokeCap, strokeJoin).
Enlaza eventos **solo en el canvas**:
- Click izquierdo / Tap: dispara pulso e inversión de color (con réplicas).

Calcula strokeScale y aplica a STYLE para que los grosores sean proporcionales al tamaño.

computeStrokeScale()

Obtiene un factor de escala a partir del menor lado del canvas y mapea a los límites definidos en CFG.STROKE_SCALE_MINMAX.

applyStyleScale()

Clona STYLE_BASE y multiplica cada w por strokeScale.
El dibujo usa siempre STYLE (no la base).

draw()

Fondo con negro translúcido: background(0,22) (persistencia/trail).
Centra el sistema: translate(width/2, height/2).
Define maxR, frecuencia base y velocidad (fija como en “15”).
Detecta puntero y si está dentro del canvas.

Excentricidad:

- Si hay puntero dentro: eccTarget se mapea desde mouse/touchY → lerp suave hacia 0.6–1.35.
- Si no hay puntero o está fuera: eccCurrent = 1.0 (círculo perfecto).
Calcula lerpFactor para la inversión de color mientras dura invertedTime.
Gestiona réplicas programadas (scheduledBursts) y actualiza la suma de pulsos activos → pulseInfluence.
Activa mezcla aditiva suave:

drawingContext.globalCompositeOperation = "lighter" + globalAlpha del perfil.

Por cada “momento” (m en 0..CFG.MOMENTS):
- Oscilación de escala con seno + easeInOutQuad (respiración).
- Pequeña modulación por pulso (más “ancho” y “wobble”).
- scale() + rotate() y llamada a drawSpirals(...).
Dibuja anillos del pulso: drawPulseRings(pulseInfluence, maxR, CFG.RINGS).
Avanza el tiempo t y decrementa invertedTime si corresponde.

drawSpirals(layers, maxR, freq, time, offsetPhase, momentIndex, ecc, lerpFactor)

Para cada capa: decide **color** (interpolado original↔invertido), **alpha** (según profundidad) y **grosor** (más cerca → más grueso).
Llama a drawSpiralFromCorner(...) para trazar la geometría real.

drawSpiralFromCorner(index, maxR, freq, time, offsetPhase, ecc)

Construye la polilínea de la espiral con beginShape/vertex/endShape.
Desfase por “esquina”: cornerAngle = (PI/2) * index.
Fase adicional para evitar simetrías perfectas: phase = index * HALF_PI * 0.7 + offsetPhase * TWO_PI.
Amplitud: si hay puntero dentro, varía levemente con Y; si no, queda en 1.0.
Recorre el ángulo (a de 0 a 6 vueltas, paso CFG.ANG_STEP):
- Radio ondulante por seno: r = maxR * amplitude * map(sin(...), -1, 1, 0.08, 1).
- Ángulo absoluto: ang = a + time*0.38 + cornerAngle.
- Coordenadas: x = cos(ang)*r, y = sin(ang)*r*ecc.

Interacción

mouseMoved / touchMoved: marca hasPointer = true.
Click izquierdo / Tap en canvas: pulso inmediato + réplicas temporizadas.
Click derecho en canvas: exporta PNG.
Fuera del canvas o sin puntero: eccCurrent = 1.0 (mantiene forma circular).

Pulsos

triggerClickEffect(now): activa inversión de color y agrega un pulso (timestamp).
scheduleBurstRepeats(now): programa nuevas activaciones a +1500 ms, +1100 ms y +3100 ms.
En draw(): cada pulso suma una **envolvente** (campana) que modula sutilmente escala y rotación.

windowResized()

Mantiene el canvas en 1080×1080, recalcula strokeScale y reaplica STYLE.

drawPulseRings(influence, maxR, rings)

Si la influencia es mínima, no dibuja.
Traza anillos concéntricos con alpha decreciente para visualizar el eco del pulso.

easeInOutQuad(x)

Easing estándar para escalas suaves (aceleración y desaceleración simétrica).

Sketch

Sketch Dinámico

Sketch formato de impresión

Link Carpeta Proyecto Final P5.JS

Poster