pisakhov/x-motion-prism

X Motion: Prism

Prism ist ein Thema für die Kernmethode x-motion. Folge dieser Methode (Kurzbeschreibung, These, Storyboard, Animatic, Produktion, begrenzte Kritik). Diese Datei fügt die künstlerische Leitung, Physik und den Sound hinzu, die das Thema erkennbar und authentisch machen.

Visuelle These

Sorge dafür, dass sich ein optisches Phänomen präzise und still wundersam anfühlt, indem du es wie ein Stillleben in einem blassen Studio fotografierst, so dass der Betrachter bemerkt, wie sich Licht tatsächlich verhält.

• Ein Heldenphänomen pro Film. Dispersion, Kaustik, ein Linsenbild, Totalreflexion, eine Fresnel-Kante. Alles andere ist eine ruhige Oberfläche, auf der es landen kann.
• Die Physik entscheidet, wohin die Farbe geht. Die Welt ist achromatisch: Papier, Stein, Graphit. Spektralfarbe erscheint nur dort, wo Wellenlängen getrennt werden (ein Fächer, der ein Prisma verlässt, der Rand einer Linse, der Rand einer Kaustik) und sonst nirgendwo.
• Helligkeit ist die Stimmung. Dies ist das Gegenteil eines dunklen Raumthemas. Schatten sind weiches Graphit, niemals schwarz; Lichter sind hell, niemals Neon.
• Die Kamera ist ein Stativ. Fixiert oder eine kaum wahrnehmbare Schiebefahrt. Das Phänomen bewegt sich; der Betrachter nicht.

Palette

Rolle	Hex	Verwendung
Papier	#f2efe9	Dominierende Oberfläche, Umgebungs-Tageslicht
Papier im Schatten	#d9d4cb	Bereiche außerhalb des Hauptlichtkegels
Blasser Stein	#e6e1d8	Böden, Becken, Sockel (variiere ±3% mit niederfrequentem Rauschen)
Graphit	#5d5b57	Gedruckte Linien, Kontaktschatten (bei 20–60% Deckkraft)
Tiefes Graphit	#3a3936	Dunkelster erlaubter Wert, nur in Kontaktfalten
Wassertönung	#d8e6e4	Multiplizieren über Stein für flaches, klares Wasser
Spektrum	berechnet	Nur aus einer Wellenlängen-zu-RGB-Funktion, niemals ein handverlesener Regenbogen

Arbeite in linearem Licht, füge Lichtenergien hinzu, tone-mappe dann und konvertiere einmal nach sRGB. Additives Spektralfarbe auf hellem Grund wäscht aus, senke daher den Grund lokal ab (ein weicher schattiger Pool um das Heldenphänomen herum, etwa 45–60% linear), wo die Farbe gesättigt erscheinen muss, und halte den Rest des Bildes luftig.

Licht und Material

• Hauptlicht: eine weiche Tageslichtquelle von oben links, etwa 30–45° von der Bildachse entfernt. Schatten sind lang, weich und leicht warmgrau.
• Glas: klar, farblos, makellos. Seine Anwesenheit wird nur durch vier Dinge angezeigt: Brechung dessen, was dahinter liegt, eine dünne Fresnel-Kante, eine weiche Fensterreflexion und die Kaustik oder das Spektrallicht, das es wirft. Keine Abschrägungsglühen, kein getöntes Glas, keine Blüten-Halos.
• Brechungsindex: Cauchy, n(λ) = A + B/λ² mit λ in µm. Kronglas: A = 1,5046, B = 0,0042. Übertreibe B bis zu etwa 3×, wenn die Dispersion auf dem Bildschirm lesbar sein muss, und vermerke dies in deinen Notizen.
• Papier und Stein: matt, sehr kontrastarme Textur (2–4% Leuchtdichtevariation), zeitlich statisch. Feine Drucklinien sind Graphit bei 1,2–2 px mit weichem Abfall.
• Kontakt: Jedes Objekt, das eine Oberfläche berührt, erhält einen engen, dunkleren Kontaktschatten plus einen breiten, weichen. Das ist es, was Glas sitzen lässt, statt zu schweben.

Komposition

• Großzügiger Negativraum: Das Heldenphänomen nimmt etwa ein Drittel des Bildes ein; der Rest ist Papier oder Stein mit einem sanften Lichtverlauf.
• Platziere das Ereignis auf einer Drittellinie oder dem Goldenen Schnitt, niemals exakt in der Mitte, es sei denn, der Film handelt von Symmetrie.
• Führe das Auge mit Licht: Der Strahl, die Rollrichtung oder die Welle sollten in die Richtung reisen, in der sich die Auflösung ereignen wird.
• Halte die Ränder des Bildes ruhig und etwas dunkler (eine 6–10% Vignette, die aus der Beleuchtung stammt, kein schwarzer Ring).
• Kein Text, keine Benutzeroberfläche, Logos oder dekorative Partikel. Wenn das Phänomen einen Größenbezug benötigt, verwende ein gedrucktes Raster, eine Steinfuge oder einen Schatten.

Bewegungsvokabular und Timing

Verben: eintreten, biegen, fächern, schwenken, fokussieren, kräuseln, beruhigen. Substantive, die sich bewegen: Licht, Wasser, ein einzelnes Objekt. Niemals die Kamera und das Subjekt gleichzeitig.

Takt	Typischer Anteil eines 9–10 s Films	Verhalten
Ruhe	10–15%	Der leere, beleuchtete Set. Lass den Betrachter die Oberfläche lesen.
Ankunft	15–20%	Licht oder Objekt tritt auf einem klaren Pfad mit einer verlangsamenden Erleichterung ein.
Phänomen	35–45%	Der Helden-Effekt entwickelt sich und ändert sich langsam (um ein paar Grad drehen, rollen, kräuseln).
Beruhigung	20–25%	Die Bewegung klingt physikalisch ab (Reibung, Dämpfung, Wellenausbreitung) und hält an.
Loslassen	5–8%	Licht dimmt oder das Bild erstarrt, so dass die Schleife und der Audio-Ausklang schließen können.

• Verwende physikalische, geschlossene Bewegungsformen: konstante Verzögerung für Rollen, gedämpfte Cosinus für Beruhigung, 1/sqrt(r) Amplitude für sich ausbreitende Ringe, erleichterte Winkel für Drehung.
• Licht bewegt sich in Glas sichtbar langsamer als in Luft, wenn du einen Strahlenkopf animierst (v_glas = v_luft / n). Es ist eine kleine Wahrheit, die Zuschauer fühlen.
• Bevorzuge eine lange Geste gegenüber mehreren kurzen. Eine vollständige Drehung ist zu viel; 4–10° reichen aus, damit ein Spektrum schwenkt.

Sound-Palette und Mischung

Sound ist Glas, Luft und Wasser, abgestimmt. Es sollte sich wie ein Raum mit harten, sauberen Oberflächen anfühlen.

• Glas-Partials: modale Synthese mit einigen unharmonischen Teiltönen (für ein angeschlagenes Glas, Verhältnisse nahe 1, 2,32, 4,25, 6,63), jeder mit eigenem exponentiellem Abfall; höhere Teiltöne sterben schneller.
• Finger-auf-Glas: ein oder zwei Sinustöne mit einem langsamen 0,3–0,6 s Anschwellen, 4–5 Hz Vibrato bei ±0,15% und ein Hauch von bandpassgefiltertem Rauschen auf derselben Tonhöhe.
• Luft: rosa-artiges gesätes Rauschen durch einen Bandpass (300–2500 Hz), sehr leise, langsam atmend. Es ist der Raum, nicht der Wind.
• Wasser: Blasen-,Plinks' sind Sinustöne, deren Frequenz über 30–80 ms exponentiell um etwa 30–60% ansteigt; weicher Waschgang ist tiefpassgefiltertes Rauschen.
• Harmonie: Wähle eine Tonart und bleibe darin (offene Quinten, hinzugefügte Nonen, lydische Farben). Bilde das Phänomen auf Tonhöhe ab: Spektrumposition auf Tonleiterstufe, Geschwindigkeit auf Filtergrenzfrequenz, ein Stopp auf einen auflösenden Glockenton.
• Raum: ein gesäter synthetischer Faltungs-Hall (2,5–4,5 s, abdunkelnder Ausklang), der von jeder Stimme geteilt wird, Trocken/Nass etwa 60/40.
• Zielwerte: etwa -18 LUFS integriert, wahrer Spitzenwert bei oder unter -1,5 dBFS, ein 0,3 s Einblendung, und jeder Ausklang klingt 0,4 s vor dem Ende ab.

Technik-Rezepte

Reine Funktion der Zeit. Jeder Frame berechnet die gesamte Szene von t neu: Objektpose, Strahlenkopf, Wellenphasen. Nur gesäte Zufälligkeit.

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; };

Analytische Szene, wenige Durchgänge. Schneide ein paar analytische Formen (Ebene, Kugel, konvexes Prisma als Menge von Ebenen) statt Raymarching. Übergebe zeitabgeleitete Zustände (Winkel, Positionen, Strahlpfade) als Uniforms, die in JavaScript berechnet werden. Teile den Frame in kleine, einzelne Durchgänge auf (Boden, Lichtfeld in halber Auflösung in ein RGBA16F-Ziel, Glas obenauf), anstatt einen Shader mit Verzweigungen zu verwenden.

Spektrale Farbe aus Wellenlänge. Verwende eine glatte analytische Anpassung, so dass der Fächer als Licht und nicht als Farbverlaufsmuster gelesen wird. Summiere mehrere Wellenlängenproben und normalisiere, so dass die Summe neutrales Weiß ist.

float gauss(float x, float m, float s) { float u = (x - m) / s; return exp(-u * u); }
vec3 spectral(float nm) {             // glatte Anpassung, lineares RGB, sichtbares Fenster 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.),  // rot kehrt in violett zurück
                  gauss(nm, 543., 44.),
                  gauss(nm, 452., 34.));
}

Auf hellem Grund erscheint das violette Ende als blasses Lavendel; das ist ehrlich, gib ihm also einen dunkleren lokalen Pool, anstatt es zu verstärken.

Brechung pro Wellenlänge. Verfolge denselben Strahl zwei- oder dreimal mit unterschiedlichen Indizes (rot, grün, blau oder mehr). Wo die Ergebnisse übereinstimmen, erhältst du knackige, neutrale Details; wo sie abweichen, erhältst du chromatische Ränder genau dort, wo die Physik sie platziert.

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];  // breche ein, breche aus, taste den Boden ab
}

Kaustik ohne Simulation. Für eine Wasseroberfläche h(x,t), die aus einigen analytischen Wellen aufgebaut ist, skaliert das Licht, das den Boden unter einem Punkt erreicht, mit 1 / |det(I + d · Hess h)| wobei d die Tiefe geteilt durch den Brechungsindex ist. Berechne die Hesse-Matrix analytisch (Sinuskurven und radiale Ringpakete haben beide geschlossene Formen), mildere die Singularität mit 1 / sqrt(det² + ε²) und werte sie mit drei geringfügig unterschiedlichen d für einen dünnen spektralen Rand aus.

Lichtlinien auf einer Ebene. Ein Strahl, der Papier streift, ist eine 1D-Gaußkurve quer zu seiner Achse, exp(-(dist/w)²), plus ein breiteres, schwächeres Leuchten. Strahlenköpfe rücken mit einer erleichterten Distanz entlang des Pfades vor; schneide mit einem kurzen smoothstep ab, nicht mit einer harten Kante.

Bandbegrenzter Druck. Zeichne Gitterlinien aus der Entfernung zur nächsten Linie gegen den Bildschirm-Fußabdruck (fwidth des Auftreffpunktes), so dass Linien bei jeder Vergrößerung, auch innerhalb einer Linse, weiche 1,5–2 px bleiben. Wenn Zellen unter ein paar Pixel schrumpfen, blende zum Mittelton des Drucks über, nicht zu leerem Papier. Gib vergrößerter Tinte eine minimale Weichheit (etwa die halbe Breite), sonst wird eine Linie unter einer Kugellinse zu einem rasiermesserscharfen Keil.

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));
}

Glas braucht etwas Dunkles zum Brechen. In einem weißen Studio wird eine perfekte Kugel milchig. Gib der Umgebung graue Wände nahe dem Horizont, ein kompaktes Softbox und eine dunkle Flagge; der invertierte Horizont und das Fenster innerhalb der Kugel zeichnen dann ihre Form. Berechne alle Pfade ohne Verzweigungen, so dass fwidth gültig bleibt, und gib analytische Deckkraft (Strahl-zu-Zentrum-Distanz gegen den Radius, in Pixeln) als Alpha aus.

Ton und Nachbearbeitung. Exponentielle Schulter 1 - exp(-1,85 x) hält Papier nahe #f2efe9, während Kaustikspitzen weich abrollen; dann sRGB. Kanalspezifische Schultern bleichen helle Spektralbänder zu Pastell aus, mische daher für farbiges Licht etwa zur Hälfte zu einer farbtonerhaltenden Kurve (tone-mappe den maximalen Kanal und skaliere), gesteuert durch Chroma, so dass Papier unberührt bleibt. Vollständig farbtonerhaltend zu sein oder Bandfarben zu schärfen, kollabiert Orange, Gelb und Cyan zu flachen roten, grünen und blauen Streifen. Überprüfe den Fächer numerisch: Taste eine Spalte darüber ab und bestätige, dass der Farbton einmal ansteigt, von Rot (ca. 10°) zu Violett (ca. 270°), ohne Wrap. Füge ein statisches Sub-LSB-Dither (±0,6/255) nur hinzu, um Banding in blassen Farbverläufen zu brechen; animiere es niemals pro Frame.

Geschwindigkeit. SwiftShader ist Software-Rendering und bezahlt für jede Anweisung in einem Shader, einschließlich Verzweigungen, die kein Pixel nimmt. Halte jeden Durchgang für einen einzigen Zweck, rendere weiche Lichtfelder in halber Auflösung und schneide teure Durchgänge (Glas, Prismeninnenseiten) auf die projizierte Begrenzungsbox des Objekts zu, wobei du über den Boden mit SRC_ALPHA, ONE_MINUS_SRC_ALPHA blendest. Messe Sekunden pro Frame bei 1920×1080 vor dem Polieren; fbm höchstens 5 Oktaven.

Deterministischer Audio-Graph. Chromium summiert drei oder mehr Verbindungen in einen AudioNode in einer nicht spezifizierten Reihenfolge, daher unterscheiden sich zwei Renderings um etwa 1e-6 und fallen bei einem Byte-Check durch. Synthetisiere jede Stimme in JavaScript in einen einzelnen Stereo-Float32-Mix (phasenakkumulierte Sinustöne, RBJ-Biquads auf gesätem Rauschen, samplegenaue Hüllkurven), verwende dann den Graphen nur für eine einzelne Quelle in einen Trocken-Gain und einen Faltungs-Hall, beide in einen Hochpass (zwei Eingänge kommutieren), dann einen sanften Kompressor (etwa 2,5:1, -20 dB Schwelle) und eine lineare Einblendung.

const M = A.mix(sr, D);                                   // { L, R } Float32Arrays
A.glass(M, 6.6, hz(81), 0.15, { decay: 2.8, pan: 0.2 }); // modale Partials, in JS summiert
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 });

Mastern auf der Seite. Nach startRendering() messe den Puffer (K-gewichtet, gegatete integrierte Lautstärke und 4× überabgetasteter Spitzenwert), wende eine Verstärkung an, um das Ziel zu erreichen, und eine niedrigere Verstärkung, wenn die Spitzengrenze dies erfordert. Deterministisch und einfach.

Deterministische Rendering-Checkliste

• window.motion deklariert Breite, Höhe, Dauer, fps und eine Poster-Zeit am schönsten Frame.
• renderFrame(t) setzt jedes Uniform nur von t; kein Date, performance.now, Math.random, Timer oder akkumulierter Zustand im Rendermodus.
• Spätes und dann frühes Suchen erzeugt identische Pixel; der erste und letzte aufgezeichnete Frame sind gültig.
• Vorschaumodus (kein ?render=1) loopt mit requestAnimationFrame; ein Klick spielt denselben gerenderten Audio-Puffer synchron ab.
• renderAudio mischt Stimmen in JavaScript, rendert dann eine Quelle durch einen gesäten Faltungs-Hall in einem OfflineAudioContext; zwei Aufrufe geben byte-identische Samples zurück (kein Knoten hat drei oder mehr Eingänge).
• Die Cue-Karte ist eine Tabelle von Zeiten im Code, die von Bild und Ton gemeinsam genutzt wird (Einschlag, Stopp, Loslassen), und der Hall-Ausklang liegt in den letzten 0,3 s unter -45 dB.
• Kein Netzwerk, keine Schriftarten, Bilder oder Samples; jede Textur und jeder Sound ist prozedural.

Vermeiden

• Regenbogenverläufe, die über das Bild gemalt sind, Regenbogen-Text, schillernde „holografische“ Oberflächen.
• Neon, lila-zu-blau „KI“-Verläufe, schwarze Hintergründe, Linsenreflexe und anamorphe Streifen.
• Glänzendes 3D-Rendering-Glas: dicke, helle Abschrägungen, getöntes Glas, HDRI-Chrom-Reflexionen, Bloom auf allem.
• Schwebende Objekte ohne Kontaktschatten; Farbe, die nicht von einer physikalischen Ursache stammt.
• Kamera-Orbits, schnelle Schnitte, Partikel, Glitzer, Whooshes und Steigerungen.
• Pro-Frame-Zufallskörnung und Ein-Pixel-Linien, die nach H.264-Kompression stroboähnlich flackern.
• Töne, die clippen, Akkordstapel, die gegen die Tonart kämpfen, Hall-Ausklänge, die am Ende abgeschnitten werden.