pisakhov/x-motion-sumi

X Motion: Sumi

Tusche, Papier, Atem. Dieses Thema übersetzt die materiale Logik der Tuschemalerei in Zeit: Kohletusche, verdünnt durch viele Graustufen, warmes, faseriges Papier, nasse Ränder, die verlaufen, trockene Borsten, die überspringen, und Leere als Hauptmaterial. Es erweitert x-motion; führen Sie diese Methode zuerst aus (These, Storyboard, Kritik-Schleife) und verwenden Sie diese Datei für die Art Direction und die Rezepte.

Visuelle These

Sorge dafür, dass sich eine Geste nach der anderen unvermeidlich anfühlt, indem Tusche sich wie Tusche verhält (diffundierend, verlaufend, austrocknend) auf einem großen Feld aus stillem Papier, sodass der Betrachter die Stille vor und nach dem entscheidenden Moment spürt.

• Eine Geste pro Takt. Ein Tropfen, ein Strich, ein Grat, ein Vogel. Niemals zwei fokale Ereignisse gleichzeitig.
• Leere trägt Gewicht. 60 bis 80 Prozent des Bildes bleiben unbemaltes Papier, Nebel oder Wasser. Leerer Raum ist komponiert, kein Rest.
• Materialtreue über Illustration. Der Look entsteht durch die Simulation, wie Tusche Licht absorbiert und Papier Tusche aufnimmt, nicht durch Umrisse oder flache Füllungen.
• Respekt und Originalität. Keine Kalligraphie, keine Pseudo-Schrift, keine echten oder falschen Zeichen, keine Kostüme, Tempel oder Laternen-Requisiten, kein Sonne-plus-Kranich-Emblem. Siegel sind abstrakte geometrische Markierungen.

Palette

Arbeiten Sie in linearem Licht; dies sind sRGB-Hex-Ankerpunkte.

Rolle	Hex	Anmerkungen
Papier (beleuchtet)	#f1e9d8	Warmes Washi; niemals reines Weiß
Papier (Schatten)	#e0d3ba	Vignette, Lichtfalte, Marmorierung
Papier (tief)	#cbbb9c	Nur an Bildrändern oder in Nebelschatten
Tusche, volle Stärke	#14120f	Warmes Carbon; niemals #000
Tusche, mittlere Lasur	#5d5b57	Leicht kühl gegen warmes Papier
Tusche, helle Lasur	#a9a69f	Ferne Berge, diffuse Wolken
Zinnoberrot	#c8372d	Die einzige Farbe. Höchstens eine Markierung, höchstens etwa 1,5 Prozent der Pixel
Zinnober im Dunst	#d7735f	Zinnober, durch Atmosphäre zum Papier hin gemischt

Tusche ist keine Farbe, die man aufträgt; sie ist eine Absorption. Compositen Sie mit Beer-Lambert: rgb = paper * exp(-density * absorb), mit absorb etwas größer im Blau (z. B. vec3(1.0, 1.04, 1.1)), damit dünne Lasuren leicht kühl und dichte Tusche warm schwarz wirken.

Licht und Material

• Papier wird weich von einer Seite beleuchtet: niederfrequente Marmorierung (plus/minus 3 Prozent), sichtbare Kozo-Fasern (lange dünne durchscheinende Stränge, 1 bis 2 Pixel breit) und eine feine Zahnung, an der trockene Tusche haftet. Backen Sie es einmal; es ist statisch.
• Nasse Tusche hat einen dunkleren Rand, wo das Pigment an den Rand gewandert ist, einen gefiederten Verlauf in die Fasern und einen schwachen Glanz, der beim Trocknen verschwindet.
• Trockene Tusche bricht in parallele Borstenspuren auf und überspringt die Tiefpunkte des Papiers (Schwellwert der Zahnung).
• Tusche in Wasser ist ein von hinten beleuchtetes Volumen: dichte Kerne, laminare Schichten, die von der Seite als feine dunkle Linien sichtbar sind, und ein weicher Schleier um alles herum.
• Atmosphäre ist papierfarben. Entfernung und Nebel heben die Werte in Richtung Papier an, niemals in Richtung Blau oder Weiß.

Komposition

• Platzieren Sie das Motiv auf einem asymmetrischen Drittel; lassen Sie einen großen, ruhigen Bereich (oben oder eine Seite) als Gegengewicht.
• Halten Sie eine klare Werthierarchie: ein Fast-Schwarz, einige Mittelgrautöne, alles andere ist Papier.
• Die Bildränder bleiben ruhig. Eine weiche Vignette in Richtung #e0d3ba hält das Auge im Bild.
• Der zinnoberrote Akzent sitzt weit entfernt von der Hauptmasse, klein, tief und spät. Er antwortet auf die Geste; er konkurriert nicht.
• Prüfen Sie die Miniaturansicht: Die Silhouette der einen Geste muss bei 320 Pixeln Breite lesbar sein.

Bewegungsvokabular und Timing

Verb	Charakter	Typische Kurve
Atmen (halten)	Nichts bewegt sich außer Licht oder Nebel	0,8 bis 1,5 s Stille vor der Geste
Fallen / schlagen	Entscheidend, schnell, kein Überschwingen	ease-in, 0,3 bis 0,6 s
Zeichnen	Pinsel beschleunigt und löst sich dann	langsames Drücken, schnelle Mitte, leichtes Abheben
Blühen / diffundieren	Schnell, dann exponentielle Verlangsamung	1 - exp(-t / tau), tau 1 bis 2 s
Verlaufen / setzen	Kleines Wachstum nach dem Ereignis	sqrt der Zeit seit Kontakt, begrenzt
Treiben	Kamera oder Nebel, konstant und langsam	linear oder sehr langes Ease, unter 2 Prozent des Bildes pro Sekunde
Auflösen	Kontrast fällt, Ränder weiten sich	2 bis 3 s am Ende, niemals ein Schnitt auf Schwarz

• Rhythmus ist Atem: Stille, ein entscheidendes Ereignis, ein langes Setzen. Füllen Sie das Setzen nicht mit neuen Ereignissen.
• Die Kamera bewegt sich nur, um der Geste zu folgen (mit Tusche sinken, durch Nebel gleiten). Schübe bleiben unter 8 Prozent.
• Saatfelder und Rauschfelder entwickeln sich langsam: Feldverschiebungen unter 0,05 Einheiten pro Sekunde, sonst wirken sie kochend.

Klangpalette und Mix

Klang ist so sparsam wie das Bild. Stille ist ein Hinweis.

• Materialien: Atem (bandbegrenztes Rauschen mit einem langsamen Filtersweep), Wasser (ein ansteigender Sinus-Chirp für einen Tropfen, gedämpfte Blasen), Papier und Pinsel (bandbegrenztes Rauschen mit spärlichen Kornklicks, die zunehmen, wenn der Pinsel trockener wird), Wind (zwei dekorrelierte Rauschbetten mit gesäten Böenkurven).
• Instrumente: luftige Endblasflöte (Sinuston plus etwas 2. und 3. Oberton, Tonhöhe von unten angeschliffen, Atemgeräusch bandgebunden an den Ton), gezupfte Saite (Karplus-Strong in einen Puffer gerendert, optionaler Tonhöhengleit nach dem Zupfen), tiefer Gong (inharmonische Teiltöne mit schlagenden Paaren, tiefe Teiltöne klingen am längsten).
• Harmonie: wenige Töne mit offenen Intervallen (Quarten, Quinten, Nonen). Vermeiden Sie Standard-„orientalische“ Pentatonik-Riffs; lassen Sie einzelne Töne sprechen.
• Raum: ein langer synthetischer Hall (3 bis 5 s, abdunkelnder Nachhall, 20 bis 40 ms Predelay). Instrumente nass, Texturen trockener.
• Synchronisation: der Tropfenklang trifft den Einschlag; Atem geht einer Geste um 0,3 bis 0,8 s voraus; der Gong trifft das Siegel; melodische Noten folgen visuellen Ereignissen um 0,1 bis 0,3 s.
• Zielwerte: etwa -18 LUFS integriert, True Peak bei oder unter -1,5 dBFS, Nachhall unter -60 dBFS beim letzten Bild, keine Klicks (jede Änderung der Verstärkung wird über mindestens 5 ms überblendet).

Technikrezepte

1. Rauschen und Papier einmal backen. Laden Sie eine kachelbare 256x256 RGBA16F-Textur: RG enthält ein Wirbelfeld (der rotierte Gradient eines periodischen Gradientenrauschens), BA enthalten zwei unabhängige Rauschsignale. Backen Sie das Papier mit gesätem JS (Korn plus Canvas 2D-Faserstriche) in eine RGBA8-Textur mit Mipmaps; sampeln Sie es in jedem Frame, anstatt fbm pro Pixel zu berechnen.

2. Tusche-Composite (lineares Licht).

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. Tusche in Wasser durch inverse Advektion. Nicht simulieren. Beschreiben Sie die Tusche als einige wenige analytische Primitive (Tropfen, Stiel, Wirbelring, Blütenblätter), deren Positionen geschlossene Funktionen der Zeit sind, und werten Sie sie dann an einer verzerrten Koordinate aus. Die Verzerrung ist ein paar Schritte entlang eines Wirbelfelds, dessen Amplitude mit der Zeit seit dem Einschlag wächst, was die Primitive zu kräuselnden Ranken dehnt.

vec2 q = p;
for (int i = 0; i < 4; i++) {
  vec2 c = texture(uNoise, q * freq[i] + drift * t).rg;   // Wirbelfeld
  q += amp[i] * growth * c;
}
float dens = primitives(q, t);              // gaußsche Kerne + weiter Schleier
dens += sheet(q) * veil;                     // geripptes Rauschen: seitliche Schichten

• Halten Sie die Verzerrung niederfrequent (Grundskala 1 bis 3 Zyklen pro Bildhöhe, eine schwache dritte Oktave). Hochfrequente Verzerrung verwandelt Tusche in sich windende Würmer.
• Aufrollen entsteht durch einen lokalen Wirbel (drehen Sie q um jeden Wirbelkern um einen Winkel, der als Gauß-Funktion abfällt), nicht durch mehr Rauschen.
• Blütenblätter, Lappen und Schleier benötigen weiche Ränder (gaußförmig, Breite 0,2 bis 0,3 des Radius). Dünne dunkle Konturlinien innerhalb einer Form lesen sich als topografische Karte.
• Beurteilen Sie die Silhouette, nicht das Detail: Eine radiale Fünflappenform, von vorne gesehen, wirkt wie eine Qualle oder ein Seestern. Neigen Sie sie (projizieren Sie 3D-Lappen für eine Kamera, die etwa 30 Grad nach unten schaut), bevor sie wie eine Blume wirkt.
• Eine Spur, die dünn, scharf und deckend bleibt, wirkt wie ein Faden oder Stiel. Behandeln Sie sie als Kielwasser: Verbreitern Sie sie, weichen Sie sie auf, kräuseln Sie sie und blenden Sie sie innerhalb von etwa einer Sekunde aus, zuerst oben, sodass die Form für sich allein steht.
• Absorbieren Sie Tuschekerne mit einem warmen Koeffizienten (mehr Blau als Rot, z. B. vec3(3.2, 3.6, 4.2)) und verdünnte Ränder mit einem neutralen. Dann wirken die Kerne als Sumi-Schwarz, nicht als flaches Grau.

4. Pinselstrich als Polarkoordinatenfeld. Für einen Ensō verwenden Sie r(theta) = R + wobble(theta). Pro Pixel nehmen Sie den Winkel, wandeln ihn in den Strichfortschritt u und den vorzeichenbehafteten Abstand über den Strich d / width(u). Enthüllen, wo u < brushHead(t). Nässe, Breite und Trockenheit sind Funktionen von u; Verlaufen ist eine Funktion von t - timeTheBrushPassed(u).

float lanes = texture(uNoise, vec2(across * 5.0, u * 0.35)).b;   // Borstenspuren
float dryInk = step(dryness(u), lanes * 0.6 + tooth * 0.5);         // überspringt tiefe Papierstellen
float rim = smoothstep(0.75, 1.0, abs(across)) * wet(u);            // Randverdunklung

5. Geschichtete Tiefe für Landschaften. Jeder Bergkamm ist ein 1D-Höhenprofil auf der Tiefe z. Pro Pixel projizieren Sie auf die Welt-x-Koordinate, schlagen Sie die Höhe nach, vergleichen Sie mit der Bildschirm-y jener Höhe unter Perspektive. Tusche ist am stärksten an der Kammlinie und fällt nach unten in den Nebel ab. Compositen Sie von fern nach nah, mischen Sie in Richtung Papier mit 1 - exp(-depth * k). Nebelbänke sitzen in den Tälern zwischen den Kämmen und treiben mit der Zeit. Blenden Sie einen Kamm aus, wenn die Kamera gerade hindurchfliegen würde.

• Compositen Sie von nah nach fern mit Transmission (acc += T * a * layer; T *= 1.0 - a;) und brechen Sie ab, sobald T nahezu Null ist. Dies ist exakt und halbiert die Kosten, da das untere Bild nach ein oder zwei Schichten aufhört.
• Berechnen Sie Kammlinien mit analytischem 1D-Gradientenrauschen (Hash plus quintischer Fade), nicht mit Texturzugriffen: bilineare Texel zeigen sich als Knicke entlang eines langen Grats.
• Die Atmosphäre benötigt eine steile Kurve (exp(-0.45 * depth)), bevor der fernste Bereich eher als blasses Gespenst denn als ein weiteres Grau erscheint.

6. Kleine Silhouetten (ein Vogel, ein Siegel) als SDF-Kapseln und -Boxen innerhalb eines Bounding-Box-Tests, mit einer antialiasierten Kante von 1,5 Pixeln. Animieren Sie Flügel mit einer Phasenfunktion, nicht mit Physik.

7. Audio-Bausteine.

// Karplus-Strong Zupfen mit optionalem Gleiten, deterministisch in einen Puffer gerendert
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;
}

Hallimpuls: gesätes Stereorauschen mal exp(-t / decay) durch einen Einpol-Tiefpass, dessen Grenzfrequenz mit der Zeit fällt. Master-Kette: sanfter Kompressor (Ratio 2 bis 3), dann ein schneller Kompressor mit hohem Ratio als Limiter, dann ein gemessener Make-up-Gain, dann ein linearer Master-Fade, der etwa 0,15 s vor dem Ende Null erreicht, sodass der Hall-Nachhall verschwunden ist.

• Bitgenaues Mischen. Chromium summiert die Eingänge eines Knotens in einer unspezifizierten Reihenfolge. Gleitkommaaddition liefert nur für zwei Operanden dieselben Bits, und die Kompressoren verstärken die 1e-7-Rundung zu hörbaren Pegelunterschieden zwischen Aufrufen. Geben Sie jedem Mixpunkt höchstens zwei Eingänge, indem Sie Verstärkungsknoten verketten:

function summer(ctx, target) {        // gibt add(node) zurück; jeder Mixpunkt erhält <= 2 Eingänge
  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 wendet seinen eigenen automatischen Make-up-Gain an, daher macht eine Senkung des Thresholds den Mix lauter. Stellen Sie die Lautstärke stattdessen mit dem Ausgangs-Gain ein.
• Überprüfen Sie die Balance der Stems: Rendern Sie einmal ohne die Melodie. Wenn das Bett allein innerhalb von 2 dB des vollständigen Mixes liegt, ist die Melodie begraben.

Checkliste für deterministisches Rendern

• renderFrame(t) setzt jedes Uniform nur von t aus; keine Akkumulation, kein Date, performance.now oder Math.random.
• Jegliche Zufälligkeit stammt aus einem gesäten PRNG (mulberry32) oder Textur-Hashes, die beim Laden gebacken werden.
• Papier, Rauschen und IR werden synchron beim Laden erstellt und nie geändert.
• Rückwärtssuche liefert identische Pixel; testen Sie t = 0 nach einem späten Frame.
• Framekosten gemessen bei 1920x1080 in Software-WebGL; bleiben Sie unter 1,5 s. Verwenden Sie Bounding Boxes für kleine Details und halten Sie Warp-Schleifen auf vier Schritte.
• Das Korn ist statisch, unter 2 Prozent; kein vollbildweites Rauschen pro Frame.
• Linien und Filamente haben mindestens einen 1,5 Pixel weichen Abfall.
• Audio verwendet gesäte Rauschpuffer, und jeder Mixpunkt hat höchstens zwei Eingänge; zwei Aufrufe müssen byteidentische Puffer liefern.
• Der Vorschaumodus läuft mit requestAnimationFrame; der Rendermodus zeichnet von sich aus nichts.

Vermeiden

• Reines weißes Papier, reine schwarze Tusche, gesättigte Farbe über die einzelne zinnoberrote Markierung hinaus.
• Schriftähnliche Striche, Zeichen, Pseudo-Kalligraphie, Signaturen, Standard-Kulturrequisiten.
• Mehrere konkurrierende Gesten; geschäftige Hintergründe; Tusche, die sich ständig mit gleicher Geschwindigkeit bewegt.
• Glühen, Linsenreflexe, chromatische Aberration, Bokeh; Tusche ist matt.
• Uniforme Weichzeichnung, die Diffusion vorgibt; echte Diffusion hat gleichzeitig scharfe Kerne und weiche Schleier.
• Windspiele, Glöckchen bei jedem Schnitt, konstante Pads, Rauscher, Standard-Pentatonik-Riffs.
• Ende mit einem Schnitt auf Schwarz; lassen Sie das Bild sich setzen oder in Papier oder Grau auflösen.