pisakhov/x-motion-prism

X Motion: Prism

Prism es un tema para el método central x-motion. Sigue ese método (resumen, tesis, guión gráfico, animática, producción, crítica con límites). Este archivo añade la dirección artística, la física y el sonido que hacen que el tema sea reconocible y se mantenga fiel.

Tesis visual

Haz que un fenómeno óptico se sienta preciso y silenciosamente milagroso fotografiándolo como un bodegón en un estudio pálido, para que el espectador note cómo se comporta realmente la luz.

• Un fenómeno héroe por película. Dispersión, cáusticas, una imagen de lente, reflexión interna total, un borde de Fresnel. Todo lo demás es una superficie tranquila para que aterrice.
• La física decide dónde va el color. El mundo es acromático: papel, piedra, grafito. El color espectral aparece solo donde las longitudes de onda se separan (un abanico saliendo de un prisma, el borde de una lente, el borde de una cáustica) y en ningún otro lugar.
• El brillo es el estado de ánimo. Esto es lo opuesto a un tema de espacio oscuro. Las sombras son grafito suave, nunca negro; los brillos son claros, nunca neón.
• La cámara es un trípode. Fija o un avance apenas perceptible. El fenómeno se mueve; el observador no.

Paleta

Rol	Hex	Uso
Papel	#f2efe9	Superficie dominante, luz diurna ambiental
Papel en sombra	#d9d4cb	Áreas fuera del foco de luz principal
Piedra pálida	#e6e1d8	Pisos, piscinas, pedestales (variar ±3% con ruido de baja frecuencia)
Grafito	#5d5b57	Líneas impresas, sombras de contacto (al 20–60% de opacidad)
Grafito profundo	#3a3936	Valor más oscuro permitido, solo en arrugas de contacto
Tinte de agua	#d8e6e4	Multiplicar sobre piedra para agua clara y poco profunda
Espectro	calculado	Solo de una función de longitud de onda a RGB, nunca un arcoíris elegido a mano

Trabaja en luz lineal, añade energías de luz, luego mapea tonos y convierte a sRGB una vez. El color espectral aditivo sobre un fondo brillante se desvanece, así que reduce el fondo localmente (un área sombreada suave alrededor del héroe, alrededor del 45–60% lineal) donde el color debe leerse saturado, y mantén el resto del encuadre aireado.

Luz y material

• Luz principal: una fuente de luz diurna suave desde la parte superior izquierda, aproximadamente 30–45° fuera del eje del encuadre. Las sombras son largas, suaves y ligeramente gris-cálido.
• Vidrio: claro, incoloro, sin imperfecciones. Su presencia se cuenta por solo cuatro cosas: la refracción de lo que hay detrás, un borde fino de Fresnel, un reflejo suave de ventana, y la luz cáustica o espectral que proyecta. Sin brillos de bisel, vidrio tintado, halos de floración.
• Índice de refracción: Cauchy, n(λ) = A + B/λ² con λ en µm. Vidrio crown: A = 1.5046, B = 0.0042. Exagera B hasta aproximadamente 3× cuando la dispersión deba leerse en pantalla, y dilo en tus notas.
• Papel y piedra: mate, textura de muy bajo contraste (variación de luminancia del 2–4%), estática en el tiempo. Las líneas finas impresas son grafito de 1.2–2 px con caída suave.
• Contacto: cada objeto que toca una superficie recibe una sombra de contacto ajustada y más oscura más una sombra suave y amplia. Esto es lo que hace que el vidrio se asiente en lugar de flotar.

Composición

• Espacio negativo generoso: el héroe ocupa aproximadamente un tercio del encuadre; el resto es papel o piedra con un suave gradiente de luz.
• Coloca el evento en una línea de tercios o el punto áureo, nunca en el centro exacto a menos que la película trate sobre simetría.
• Guía el ojo con luz: el haz, la dirección de rodadura o la onda deben viajar hacia donde ocurrirá la recompensa.
• Mantén los bordes del encuadre tranquilos y ligeramente más oscuros (una viñeta del 6–10% hecha con la iluminación, no un anillo negro).
• Sin texto, interfaz de usuario, logotipos ni partículas decorativas. Si el fenómeno necesita una referencia de escala, usa una cuadrícula impresa, una junta de piedra o una sombra.

Vocabulario de movimiento y temporización

Verbos: entrar, doblar, abanicar, barrer, enfocar, ondular, asentarse. Sustantivos que se mueven: luz, agua, un solo objeto. Nunca la cámara y el sujeto a la vez.

Tiempo	Proporción típica de una película de 9–10 s	Comportamiento
Reposo	10–15%	El set vacío e iluminado. Deja que el espectador lea la superficie.
Llegada	15–20%	La luz o el objeto entran por un camino claro con una desaceleración suave.
Fenómeno	35–45%	El efecto héroe se desarrolla y cambia lentamente (girar unos pocos grados, rodar, ondular).
Asentamiento	20–25%	El movimiento decae físicamente (fricción, amortiguación, dispersión de ondas) y se mantiene.
Liberación	5–8%	La luz se atenúa o la imagen se detiene para que el bucle y la cola de audio puedan cerrarse.

• Usa movimiento físico de forma cerrada: desaceleración constante para rodar, cosenos amortiguados para asentarse, amplitud 1/sqrt(r) para anillos en expansión, ángulos suavizados para rotación.
• La luz dentro del vidrio viaja visiblemente más lento que en el aire cuando animas un frente de haz (v_vidrio = v_aire / n). Es una pequeña verdad que los espectadores sienten.
• Prefiere un gesto largo sobre varios cortos. Una rotación completa es demasiado; 4–10° son suficientes para que un espectro barra.

Paleta de sonido y mezcla

El sonido es vidrio, aire y agua, afinado. Debe sentirse como una habitación con superficies duras y limpias.

• Parciales de vidrio: síntesis modal con algunos parciales inarmónicos (para un vidrio golpeado, proporciones cercanas a 1, 2.32, 4.25, 6.63), cada uno con su propia caída exponencial; los parciales más altos mueren más rápido.
• Dedo sobre vidrio: uno o dos senos con un aumento lento de 0.3–0.6 s, vibrato de 4–5 Hz a ±0.15% y un susurro de ruido pasabanda a la misma afinación.
• Aire: ruido sembrado de tipo rosa a través de un pasabanda (300–2500 Hz), muy bajo, respirando lentamente. Es la habitación, no el viento.
• Agua: los "chasquidos" de burbujas son senos cuya frecuencia aumenta exponencialmente aproximadamente un 30–60% en 30–80 ms; el lavado suave es ruido pasabajo.
• Armonía: elige una tonalidad y quédate en ella (quintas abiertas, novenas añadidas, colores lidios). Mapea el fenómeno al tono: posición del espectro al grado de la escala, velocidad al corte del filtro, una parada a un carillón resolutivo.
• Espacio: una reverberación sintética de convolución sembrada (2.5–4.5 s, cola oscurecedora) compartida por todas las voces, seco/húmedo alrededor de 60/40.
• Objetivos: aproximadamente -18 LUFS integrado, pico verdadero en o por debajo de -1.5 dBFS, un fundido de entrada de 0.3 s, y cada cola decaída 0.4 s antes del final.

Recetas técnicas

Función pura del tiempo. Cada fotograma recalcula toda la escena desde t: pose del objeto, frente de haz, fases de onda. Solo aleatoriedad sembrada.

const mulberry32 = s => () => { s |= 0; s = s + 0x6D2B79F5 | 0;
  let t = Math.imul(s ^ s >>> 15, 1 | s); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
  return ((t ^ t >>> 14) >>> 0) / 4294967296; };

Escena analítica, pocos pases. Intersecciona algunas formas analíticas (plano, esfera, prisma convexo como un conjunto de planos) en lugar de raymarching. Pasa el estado derivado del tiempo (ángulos, posiciones, trayectorias de rayos) como uniformes calculados en JavaScript. Divide el fotograma en pequeños pases de un solo propósito (suelo, campo de luz a media resolución en un objetivo RGBA16F, vidrio encima) en lugar de un shader con ramas.

Color espectral a partir de longitud de onda. Usa un ajuste analítico suave para que el abanico se lea como luz, no como un degradado. Suma varias muestras de longitud de onda y normaliza para que el total sea blanco neutro.

float gauss(float x, float m, float s) { float u = (x - m) / s; return exp(-u * u); }
vec3 spectral(float nm) {             // ajuste suave, RGB lineal, ventana visible 372-712 nm
  float w = smoothstep(372., 392., nm) * (1. - smoothstep(690., 712., nm));
  return w * vec3(gauss(nm, 606., 46.) + 0.14 * gauss(nm, 420., 22.),  // el rojo vuelve en violeta
                  gauss(nm, 543., 44.),
                  gauss(nm, 452., 34.));
}

En un fondo brillante el extremo violeta se lee como lavanda pálido; eso es honesto, así que dale una zona local más oscura en lugar de amplificarlo.

Refracción por longitud de onda. Traza el mismo rayo dos o tres veces con diferentes índices (rojo, verde, azul o más). Donde los resultados coinciden obtienes detalle neutro nítido; donde divergen obtienes franjas cromáticas exactamente donde la física las coloca.

vec3 col;
for (int k = 0; k < 3; k++) {
  float n = 1.5046 + B * 3.0 / pow(LAMBDA[k], 2.0);
  col[k] = traceThroughGlass(ro, rd, n)[k];  // refractar dentro, refractar fuera, muestrear el suelo
}

Cáusticas sin simulación. Para una superficie de agua h(x, t) construida a partir de unas pocas ondas analíticas, la luz que llega al suelo debajo de un punto escala con 1 / |det(I + d · Hess h)| donde d es la profundidad sobre el índice de refracción. Calcula la Hessiana analíticamente (las sinusoides y los paquetes de anillos radiales tienen formas cerradas), suaviza la singularidad con 1 / sqrt(det² + ε²), y evalúa con tres d ligeramente diferentes para un borde espectral fino.

Líneas de luz sobre un plano. Un haz que roza el papel es una gaussiana 1D a través de su eje, exp(-(dist/w)²), más un resplandor más amplio y tenue. Los frentes de haz avanzan con una distancia suavizada a lo largo del camino; corta con un smoothstep corto, no con un borde duro.

Impresión de banda limitada. Dibuja líneas de cuadrícula desde la distancia a la línea más cercana contra la huella en espacio de pantalla (fwidth del punto de impacto), para que las líneas se mantengan suaves de 1.5–2 px en cualquier aumento, incluso dentro de una lente. Cuando las celdas se reducen por debajo de unos pocos píxeles, desvanece al tono medio de la impresión, no al papel en blanco. Dale a la tinta ampliada una suavidad mínima (aproximadamente la mitad de su ancho) o una línea bajo una lente de bola se convierte en una cuña de borde afilado.

float lines(vec2 p, float s, float w, vec2 fw) {
  vec2 d = abs(fract(p / s + .5) - .5) * s, a = max(fw * .8, vec2(w * .55)), wd = max(vec2(w), a);
  vec2 l = (1. - smoothstep(wd - a, wd + a, d)) * clamp(vec2(w) / wd, 0., 1.);
  return mix(max(l.x, l.y), 4. * w / s, smoothstep(.18, .42, max(fw.x, fw.y) / s));
}

El vidrio necesita algo oscuro para refractar. En un estudio blanco, una esfera perfecta se vuelve lechosa. Dale al entorno paredes grises cerca del horizonte, un softbox compacto y una bandera oscura; el horizonte invertido y la ventana dentro de la bola dibujan su forma. Calcula todos los caminos sin ramas para que fwidth siga siendo válido, y genera cobertura analítica (distancia del rayo al centro contra el radio, en píxeles) como alfa.

Tono y acabado. Hombro exponencial 1 - exp(-1.85 x) mantiene el papel cerca de #f2efe9 mientras que los picos de cáusticas se suavizan; luego sRGB. Los hombros por canal blanquean las bandas espectrales brillantes hacia pastel, así que para luz coloreada mezcla aproximadamente a mitad de camino hacia una curva que preserva el tono (mapea el canal máximo y escala), controlada por croma para que el papel no se toque. Ir completamente a preservar el tono, o afilar los colores de banda, colapsa el naranja, amarillo y cian en rayas planas rojas, verdes y azules. Verifica el abanico numéricamente: muestra una columna a través de él y confirma que el tono sube una vez, desde rojo (aproximadamente 10°) hasta violeta (aproximadamente 270°), sin giro. Añade un tramado estático sub-LSB (±0.6/255) solo para romper el bandeado en degradados pálidos; nunca lo anime por fotograma.

Velocidad. SwiftShader es renderizado por software y paga por cada instrucción en un shader, incluyendo ramas que ningún píxel toma. Mantén cada pase de un solo propósito, renderiza campos de luz suaves a media resolución, y recorta los pases costosos (vidrio, interiores de prisma) al cuadro delimitador proyectado del objeto, mezclando sobre el suelo con SRC_ALPHA, ONE_MINUS_SRC_ALPHA. Mide segundos por fotograma a 1920×1080 antes de pulir; fbm como máximo 5 octavas.

Grafo de audio determinista. Chromium suma tres o más conexiones en un solo AudioNode en un orden no especificado, por lo que dos renders difieren en aproximadamente 1e-6 y fallan una verificación de bytes. Sintetiza cada voz en JavaScript en una mezcla estéreo Float32 única (senos de fase acumulada, bicuadros RBJ sobre ruido sembrado, envolventes de muestra exacta), luego usa el grafo solo para una fuente única en una ganancia seca y un convolver, ambos en un pasaalto (dos entradas conmutan), luego un compresor suave (aproximadamente 2.5:1, umbral -20 dB) y un fundido lineal.

const M = A.mix(sr, D);                                   // { L, R } Float32Arrays
A.glass(M, 6.6, hz(81), 0.15, { decay: 2.8, pan: 0.2 }); // parciales modales, sumados en JS
const buf = await A.render(M, { seed: 31, room: 3.4, wet: 0.45, fade: [8.25, 8.8] });
return A.master(buf, { lufs: -18, ceiling: -1.7 });

Masterización en la página. Después de startRendering(), mide el búfer (ponderado K, sonoridad integrada con compuerta y pico sobremuestreado 4×), aplica una ganancia para alcanzar el objetivo y una ganancia menor si el techo de pico lo exige. Determinista y simple.

Lista de verificación de renderizado determinista

• window.motion declara ancho, alto, duración, fps y un tiempo de póster en el fotograma más hermoso.
• renderFrame(t) establece cada uniforme solo desde t; sin Date, performance.now, Math.random, temporizadores o estado acumulado en modo de renderizado.
• Buscar tarde y luego temprano reproduce píxeles idénticos; el primer y último fotograma capturado son válidos.
• El modo de vista previa (sin ?render=1) itera con requestAnimationFrame; un clic reproduce el mismo búfer de audio renderizado en sincronía.
• renderAudio mezcla voces en JavaScript, luego renderiza una fuente a través de un convolver sembrado en un OfflineAudioContext; dos llamadas devuelven muestras byte-idénticas (ningún nodo tiene tres o más entradas).
• El mapa de señales es una tabla de tiempos en el código compartida por imagen y sonido (impacto, parada, liberación), y la cola de reverberación está por debajo de -45 dB en los últimos 0.3 s.
• Sin red, fuentes, imágenes ni muestras; cada textura y sonido es procedural.

Evitar

• Degradados de arcoíris pintados en todo el encuadre, texto arcoíris, superficies "holográficas" iridiscentes.
• Neón, degradados púrpura a azul "IA", fondos negros, destellos de lente y rayas anamórficas.
• Vidrio brillante de render 3D: biseles gruesos y brillantes, vidrio tintado, reflejos HDRI-cromo, floración en todo.
• Objetos flotantes sin sombras de contacto; color que no proviene de una causa física.
• Órbitas de cámara, cortes rápidos, partículas, destellos, silbidos y ascensos.
• Grano aleatorio por fotograma y líneas de un píxel que estroboscopian después de la compresión H.264.
• Sonidos que recortan, acumulaciones de acordes que luchan contra la tonalidad, colas de reverberación cortadas al final.