pisakhov/x-motion-sumi

X Motion: Sumi

Tinta, papel, aliento. Este tema traduce la lógica material de la pintura a la tinta china en el tiempo: tinta de carbón diluida a través de muchos grises, papel fibroso cálido, bordes húmedos que sangran, cerdas secas que saltan y el vacío como material principal. Extiende x-motion; ejecuta ese método primero (bucle breve, tesis, storyboard, crítica) y usa este archivo para la dirección artística y las recetas.

Tesis visual

Haz que un solo gesto a la vez se sienta inevitable a través de la tinta comportándose como tinta (difundiéndose, sangrando, secándose) en un gran campo de papel silencioso, para que el espectador sienta la quietud antes y después del momento decisivo.

• Un gesto por compás. Una gota, un trazo, una cresta, un pájaro. Nunca dos eventos focales a la vez.
• El vacío tiene peso. Del 60 al 80 por ciento del encuadre permanece como papel intacto, niebla o agua. El espacio vacío está compuesto, no es un sobrante.
• Verdad material sobre ilustración. La apariencia proviene de simular cómo la tinta absorbe la luz y el papel absorbe la tinta, no de contornos o rellenos planos.
• Respeto y originalidad. Sin caligrafía, pseudoescritura, caracteres reales o falsos, ni atrezo de vestuario, templo o linterna, ni emblema de sol rojo más grulla. Los sellos son marcas geométricas abstractas.

Paleta

Trabaja en luz lineal; estos son anclajes hex sRGB.

Rol	Hex	Notas
Papel (iluminado)	#f1e9d8	Washi cálido; nunca blanco puro
Papel (sombra)	#e0d3ba	Viñeta, pliegue de luz, moteado
Papel (profundo)	#cbbb9c	Solo en los bordes del encuadre o en sombras de niebla
Tinta, máxima intensidad	#14120f	Carbón cálido; nunca #000
Tinta, lavado medio	#5d5b57	Ligeramente fría contra papel cálido
Tinta, lavado pálido	#a9a69f	Montañas lejanas, nubes difusas
Bermellón	#c8372d	El único color. Como máximo una marca, como máximo alrededor del 1.5 por ciento de los píxeles
Bermellón en niebla	#d7735f	Bermellón mezclado hacia el papel por la atmósfera

La tinta no es un color que pintes; es una absorción. Compone con Beer-Lambert: rgb = paper * exp(-density * absorb), con absorb ligeramente mayor en azul (por ejemplo vec3(1.0, 1.04, 1.1)) para que los lavados finos se lean ligeramente fríos y la tinta densa se lea como negro cálido.

Luz y material

• El papel está iluminado suavemente desde un lado: moteado de baja frecuencia (más o menos 3 por ciento), fibras de kozo visibles (hebras largas, finas y translúcidas, de 1 a 2 píxeles de ancho) y un grano fino en el que la tinta seca se agarra. Hornéalo una vez; es estático.
• La tinta húmeda tiene un borde más oscuro donde el pigmento migró al borde, un sangrado plumoso en las fibras y un brillo tenue que se desvanece al secarse.
• La tinta seca se rompe en surcos de cerdas paralelos y salta los puntos bajos del papel (umbraliza el grano).
• La tinta en agua es un volumen retroiluminado: núcleos densos, láminas laminares vistas de canto como líneas oscuras finas y un velo suave alrededor de todo.
• La atmósfera es del color del papel. La distancia y la niebla elevan los valores hacia el papel, nunca hacia el azul o el blanco.

Composición

• Coloca el sujeto en un tercio asimétrico; deja una gran región tranquila (arriba o un lado) como contrapeso.
• Mantén una jerarquía de valores clara: un casi-negro, unos pocos grises medios, todo lo demás papel.
• Los bordes del encuadre permanecen tranquilos. Una viñeta suave hacia #e0d3ba mantiene la mirada dentro.
• El acento bermellón se sitúa lejos de la masa principal, pequeño, bajo y tardío. Responde al gesto; no compite.
• Verifica la miniatura: la silueta del único gesto debe leerse a 320 píxeles de ancho.

Vocabulario de movimiento y temporización

Verbo	Carácter	Curva típica
Respirar (pausa)	Nada se mueve excepto la luz o la niebla	De 0.8 a 1.5 s de quietud antes del gesto
Caer / golpear	Decisivo, rápido, sin rebasamiento	ease-in, de 0.3 a 0.6 s
Dibujar	El pincel acelera y luego se suelta	presión lenta, medio rápido, levantamiento ligero
Florecer / difundir	Rápido luego desaceleración exponencial	1 - exp(-t / tau), tau de 1 a 2 s
Sangrar / asentarse	Pequeño crecimiento después del evento	sqrt del tiempo desde el contacto, limitado
Deriva	Cámara o niebla, constante y lenta	lineal o ease muy largo, menos del 2 por ciento del encuadre por segundo
Disolver	El contraste cae, los bordes se ensanchan	De 2 a 3 s al final, nunca un corte a negro

• El ritmo es respiración: quietud, un evento decisivo, un largo asentamiento. No llenes el asentamiento con nuevos eventos.
• La cámara se mueve solo para seguir el gesto (hundiéndose con la tinta, deslizándose a través de la niebla). Los acercamientos no superan el 8 por ciento.
• Las semillas y los campos de ruido evolucionan lentamente: desplazamientos de campo inferiores a 0.05 unidades por segundo, o se leen como ebullición.

Paleta de sonido y mezcla

El sonido es tan escaso como la imagen. El silencio es una señal.

• Materiales: aliento (ruido filtrado por paso de banda con un barrido de filtro lento), agua (un chirrido sinusoidal ascendente para una gota, burbujas amortiguadas), papel y pincel (ruido filtrado por paso de banda con clics de grano dispersos que crecen a medida que el pincel se seca), viento (dos lechos de ruido descorrelacionados con curvas de ráfaga sembradas).
• Instrumentos: flauta de aliento (seno más un poco de 2ª y 3ª armónica, tono elevado desde abajo, ruido de aliento encerrado en la nota), cuerda pulsada (Karplus-Strong renderizado en un búfer, deslizamiento de tono opcional después del pulso), gong grave (parciales inarmónicos con pares de batido, parciales graves suenan más tiempo).
• Armonía: pocas notas con intervalos abiertos (cuartas, quintas, novenas). Evita los riff pentatónicos "orientales" de stock; deja que las notas individuales hablen.
• Espacio: una reverberación sintética larga (de 3 a 5 s, cola oscurecida, predelay de 20 a 40 ms). Instrumentos húmedos, texturas más secas.
• Sincronía: el sonido de la gota se encuentra con el impacto; el aliento precede a un gesto por 0.3 a 0.8 s; el gong se encuentra con el sello; las notas melódicas siguen a los eventos visuales por 0.1 a 0.3 s.
• Objetivos: alrededor de -18 LUFS integrados, pico verdadero en o por debajo de -1.5 dBFS, cola por debajo de -60 dBFS en el último fotograma, sin clics (cada cambio de ganancia se desvanece durante al menos 5 ms).

Recetas técnicas

1. Hornear ruido y papel una vez. Sube una textura RGBA16F de 256x256 capaz de teselarse: RG contiene un campo de rizo (el gradiente rotado de un ruido de gradiente periódico), BA contienen dos ruidos independientes. Hornea el papel con JS sembrado (grano más trazos de fibra de Canvas 2D) en una textura RGBA8 con mipmaps; muéstrala en cada fotograma en lugar de calcular fbm por píxel.

2. Compuesto de tinta (luz lineal).

vec3 lin(vec3 c){ return pow(c, vec3(2.2)); }
vec3 inkOver(vec3 paperLin, float density){
  return paperLin * exp(-density * vec3(3.4, 3.55, 3.75));
}

3. Tinta en agua por advección inversa. No simules. Describe la tinta como unos pocos primitivos analíticos (gota, tallo, anillo de vórtice, lóbulos de pétalo) cuyas posiciones son funciones de forma cerrada del tiempo, luego evalúalos en una coordenada deformada. La deformación son unos pocos pasos a lo largo de un campo de rizo con amplitud que crece con el tiempo desde el impacto, que estira los primitivos en zarcillos rizados.

vec2 q = p;
for (int i = 0; i < 4; i++) {
  vec2 c = texture(uNoise, q * freq[i] + drift * t).rg;   // campo de rizo
  q += amp[i] * growth * c;
}
float dens = primitives(q, t);              // núcleos gaussianos + velo amplio
dens += sheet(q) * veil;                     // ruido acanalado: láminas de canto

• Mantén la deformación de baja frecuencia (escala base de 1 a 3 ciclos por altura del fotograma, una tercera octava débil). La deformación de alta frecuencia convierte la tinta en gusanos retorcidos.
• El enrollamiento proviene de un remolino local (gira q alrededor de cada núcleo de vórtice por un ángulo que disminuye como una gaussiana), no de más ruido.
• Los pétalos, lóbulos y velos necesitan bordes suaves (gaussiana, ancho de 0.2 a 0.3 del radio). Las líneas de contorno oscuras y finas dentro de una forma se leen como un mapa topográfico.
• Juzga la silueta, no el detalle: una forma radial de cinco lóbulos vista de frente se lee como una medusa o estrella de mar. Inclínala (proyecta lóbulos 3D para una cámara mirando hacia abajo unos 30 grados) antes de que se lea como una flor.
• Un rastro que se mantiene fino, nítido y opaco se lee como una cuerda o tallo. Trátalo como una estela: ensánchalo, suavízalo, rizalo y desvanece en aproximadamente un segundo, primero la parte superior, para que la forma se sostenga sola.
• Absorbe los núcleos de tinta con un coeficiente cálido (más azul que rojo, por ejemplo vec3(3.2, 3.6, 4.2)) y los bordes diluidos con uno neutro. Entonces los núcleos se leen como negro sumi, no gris plano.

4. Pincelada como campo polar. Para un ensō, usa r(theta) = R + wobble(theta). Por píxel, toma el ángulo, conviértelo en progreso de trazo u y la distancia con signo a través del trazo d / width(u). Revela donde u < brushHead(t). La humedad, el ancho y la sequedad son funciones de u; el sangrado es una función de t - timeTheBrushPassed(u).

float lanes = texture(uNoise, vec2(across * 5.0, u * 0.35)).b;   // surcos de cerdas
float dryInk = step(dryness(u), lanes * 0.6 + tooth * 0.5);         // salta puntos bajos del papel
float rim = smoothstep(0.75, 1.0, abs(across)) * wet(u);            // oscurecimiento del borde

5. Profundidad en capas para paisajes. Cada cresta es un perfil de altura 1D en profundidad z. Por píxel, proyecta a mundo x, busca la altura, compara con la y de pantalla de esa altura bajo perspectiva. La tinta es más fuerte en la línea de la cresta y disminuye hacia abajo en la niebla. Compone de lejos a cerca, mezclando hacia el papel por 1 - exp(-depth * k). Las capas de niebla se asientan en los valles entre crestas y se desplazan con el tiempo. Desvanece una cresta cuando la cámara está a punto de atravesarla.

• Compón de cerca a lejos con transmitancia (acc += T * a * layer; T *= 1.0 - a;) y rompe una vez que T sea casi cero. Esto es exacto y reduce el costo a la mitad porque el fotograma inferior se detiene después de una o dos capas.
• Calcula las líneas de cresta con ruido de gradiente 1D analítico (hash más desvanecimiento quíntico), no con búsquedas de textura: los texels bilineales se muestran como torceduras a lo largo de una cresta larga.
• La atmósfera necesita una curva pronunciada (exp(-0.45 * depth)) antes de que el rango más lejano se lea como un fantasma pálido en lugar de un gris más.

6. Siluetas pequeñas (un pájaro, un sello) como cápsulas y cajas SDF dentro de una prueba de cuadro delimitador, con un borde suavizado de 1.5 píxeles. Anima las alas con una función de fase, no con física.

7. Bloques de construcción de audio.

// Pulso Karplus-Strong con deslizamiento opcional, renderizado deterministamente a un búfer
for (let n = 0; n < len; n++) {
  const d = sr / freqAt(n) - 0.5, r = w - d;
  const a = read(r), b = read(r - 1);
  y = exc[n] + g * 0.5 * (a + b); write(y); out[n] = y;
}

Impulso de reverberación: ruido estéreo sembrado multiplicado por exp(-t / decay) a través de un paso bajo de un polo cuyo corte cae con el tiempo. Cadena maestra: compresor suave (relación 2 a 3), luego un compresor de alta relación rápido como limitador, luego una ganancia de maquillaje medida, luego un desvanecimiento maestro lineal que llega a cero aproximadamente 0.15 s antes del final para que la cola de reverberación desaparezca.

• Mezcla bit-exacta. Chromium suma las entradas de un nodo en un orden no especificado. La suma de flotantes solo da los mismos bits para dos operandos, y los compresores amplifican el redondeo de 1e-7 en diferencias audibles entre llamadas. Da a cada punto de mezcla como máximo dos entradas encadenando nodos de ganancia:

function summer(ctx, target) {        // devuelve add(node); cada punto de mezcla obtiene <= 2 entradas
  let open = target, count = 0;
  return node => { if (count === 1) { const j = ctx.createGain(); j.connect(open); open = j; count = 0; } node.connect(open); count++; };
}

• DynamicsCompressorNode aplica su propia ganancia de maquillaje automática, por lo que bajar el umbral hace que la mezcla sea más fuerte. Ajusta la sonoridad con la ganancia de salida en su lugar.
• Verifica el balance de las pistas: renderiza una vez sin la melodía. Si la base sola está dentro de 2 dB de la mezcla completa, la melodía está enterrada.

Lista de verificación de renderizado determinista

• renderFrame(t) establece cada uniforme solo a partir de t; sin acumulación, Date, performance.now o Math.random.
• Toda la aleatoriedad proviene de un PRNG sembrado (mulberry32) o hashes de textura horneados al cargar.
• El papel, el ruido y la IR se construyen sincrónicamente al cargar y nunca cambian.
• La búsqueda hacia atrás da píxeles idénticos; prueba t = 0 después de un fotograma tardío.
• El costo del fotograma medido a 1920x1080 en WebGL de software; mantente por debajo de 1.5 s. Usa cuadros delimitadores para detalles pequeños y mantén los bucles de deformación en cuatro pasos.
• El grano es estático, por debajo del 2 por ciento; sin ruido de pantalla completa por fotograma.
• Las líneas y filamentos tienen al menos una caída suave de 1.5 píxeles.
• El audio usa búferes de ruido sembrados, y cada punto de mezcla tiene como máximo dos entradas; dos llamadas deben devolver búferes de bytes idénticos.
• El modo de previsualización se repite con requestAnimationFrame; el modo de renderizado no dibuja nada por sí mismo.

Evitar

• Papel blanco puro, tinta negra pura, color saturado más allá de la única marca bermellón.
• Trazos que parecen escritura, caracteres, caligrafía falsa, firmas, accesorios culturales de stock.
• Varios gestos compitiendo; fondos ocupados; tinta que se mueve constantemente a la misma velocidad.
• Brillo, destellos de lente, aberración cromática, bokeh; la tinta es mate.
• Desenfoque uniforme fingiendo ser difusión; la difusión real tiene núcleos nítidos y velos suaves a la vez.
• Campanillas de viento, campanas en cada corte, pads constantes, whooshes, riff pentatónicos de stock.
• Terminar con un corte a negro; deja que la imagen se asiente o se disuelva en papel o gris.