pisakhov/x-motion-prism

X Motion : Prisme

Prisme est un thème pour la méthode de base x-motion. Suivez cette méthode (résumé, thèse, storyboard, animatique, production, critique encadrée). Ce fichier ajoute la direction artistique, la physique et le son qui rendent le thème reconnaissable et honnête.

Thèse visuelle

Faire en sorte qu'un phénomène optique paraisse précis et discrètement miraculeux en le photographiant comme une nature morte dans un studio pâle, afin que le spectateur remarque comment la lumière se comporte réellement.

• Un phénomène héroïque par film. Dispersion, caustiques, image de lentille, réflexion totale interne, bord de Fresnel. Tout le reste est une surface calme sur laquelle il atterrit.
• La physique décide où va la couleur. Le monde est achromatique : papier, pierre, graphite. La couleur spectrale n'apparaît que là où les longueurs d'onde se séparent (un éventail sortant d'un prisme, la frange d'une lentille, le bord d'une caustique) et nulle part ailleurs.
• La luminosité est l'ambiance. C'est l'inverse d'un thème spatial sombre. Les ombres sont un graphite doux, jamais noir ; les hautes lumières sont claires, jamais néon.
• La caméra est un trépied. Verrouillée ou une poussée à peine perceptible. Le phénomène bouge ; l'observateur, non.

Palette

Rôle	Hex	Utilisation
Papier	#f2efe9	Surface dominante, lumière ambiante du jour
Papier à l'ombre	#d9d4cb	Zones en dehors du cône de lumière clé
Pierre pâle	#e6e1d8	Sols, bassins, socles (varier ±3% avec un bruit basse fréquence)
Graphite	#5d5b57	Lignes imprimées, ombres de contact (à 20–60% d'opacité)
Graphite foncé	#3a3936	Valeur la plus sombre autorisée, uniquement dans les plis de contact
Teinte d'eau	#d8e6e4	Multiplier sur la pierre pour une eau claire et peu profonde
Spectre	calculé	Uniquement à partir d'une fonction longueur d'onde → RVB, jamais un arc-en-ciel choisi à la main

Travaillez en lumière linéaire, ajoutez des énergies lumineuses, puis effectuez un mappage de tons et convertissez en sRGB une fois. La couleur spectrale additive sur un fond clair se délaie, alors abaissez localement le fond (une zone d'ombre douce autour du héros, environ 45–60% linéaire) là où la couleur doit paraître saturée, et gardez le reste du cadre aéré.

Lumière et matériau

• Lumière clé : une source douce de lumière du jour depuis le haut à gauche, environ 30–45° par rapport à l'axe du cadre. Les ombres sont longues, douces et légèrement gris chaud.
• Verre : clair, incolore, parfait. Sa présence se manifeste par seulement quatre choses : la réfraction de ce qui se trouve derrière lui, un mince bord de Fresnel, un reflet de fenêtre doux, et la caustique ou la lumière spectrale qu'il projette. Pas de lueurs de biseau, de verre teinté, de halos de bloom.
• Indice de réfraction : Cauchy, n(λ) = A + B/λ² avec λ en µm. Verre crown : A = 1,5046, B = 0,0042. Exagérez B jusqu'à environ 3× quand la dispersion doit être lisible à l'écran, et mentionnez-le dans vos notes.
• Papier et pierre : mats, texture à très faible contraste (2–4% de variation de luminance), statique dans le temps. Les lignes d'impression fines sont en graphite de 1,2 à 2 px avec un dégradé doux.
• Contact : chaque objet touchant une surface reçoit une ombre de contact sombre et serrée ainsi qu'une ombre large et douce. C'est ce qui fait reposer le verre plutôt que flotter.

Composition

• Espace négatif généreux : le héros occupe environ un tiers du cadre ; le reste est du papier ou de la pierre avec un léger dégradé de lumière.
• Placez l'événement sur une ligne de tiers ou le point d'or, jamais au centre mort, sauf si le film parle de symétrie.
• Guidez l'œil par la lumière : le faisceau, la direction de roulement ou l'ondulation doivent se diriger vers l'endroit où se produira la récompense.
• Gardez les bords du cadre calmes et légèrement plus sombres (une vignette de 6–10% provenant de l'éclairage, pas d'un anneau noir).
• Pas de texte, d'interface utilisateur, de logos ou de particules décoratives. Si le phénomène a besoin d'une référence d'échelle, utilisez une grille imprimée, un joint de pierre ou une ombre.

Vocabulaire du mouvement et timing

Verbes : entrer, courber, s'évaser, balayer, se concentrer, onduler, se stabiliser. Noms qui bougent : lumière, eau, un seul objet. Jamais la caméra et le sujet à la fois.

Temps	Part typique d'un film de 9–10 s	Comportement
Repos	10–15%	Le décor vide et éclairé. Laissez le spectateur lire la surface.
Arrivée	15–20%	La lumière ou l'objet entre le long d'un chemin clair avec une décélération progressive.
Phénomène	35–45%	L'effet héros se développe et change lentement (rotation de quelques degrés, roulement, ondulation).
Stabilisation	20–25%	Le mouvement décroît physiquement (friction, amortissement, dispersion des vagues) puis se maintient.
Libération	5–8%	La lumière diminue ou l'image se fige pour que la boucle et la queue audio puissent se fermer.

• Utilisez un mouvement physique en forme fermée : décélération constante pour le roulement, cosinus amortis pour la stabilisation, amplitude 1/sqrt(r) pour les anneaux qui se propagent, angles avec adoucissement pour la rotation.
• La lumière dans le verre se déplace visiblement plus lentement que dans l'air lorsque vous animez une tête de faisceau (v_verre = v_air / n). C'est une petite vérité que les spectateurs ressentent.
• Préférez un long geste à plusieurs gestes courts. Une rotation complète est trop ; 4–10° suffit pour qu'un spectre balaye.

Palette sonore et mixage

Le son est du verre, de l'air et de l'eau, accordé. Il doit évoquer une pièce aux surfaces dures et propres.

• Partiels de verre : synthèse modale avec quelques partiels inharmoniques (pour un verre frappé, rapports proches de 1, 2,32, 4,25, 6,63), chacun avec sa propre décroissance exponentielle ; les partiels plus aigus meurent plus vite.
• Doigt sur le verre : une ou deux sinusoïdes avec une lente augmentation de 0,3–0,6 s, un vibrato de 4–5 Hz à ±0,15% et un murmure de bruit passe-bande à la même hauteur.
• Air : bruit pseudo-blanc ensemencé passé dans un filtre passe-bande (300–2500 Hz), très bas, respirant lentement. C'est la pièce, pas le vent.
• Eau : les « plinks » de bulles sont des sinusoïdes dont la fréquence augmente exponentiellement d'environ 30–60% sur 30–80 ms ; le lavis doux est un bruit passé-bas.
• Harmonie : choisissez une tonalité et restez-y (quintes justes, neuvièmes ajoutées, couleurs lydiennes). Mappez le phénomène à la hauteur : position du spectre au degré de la gamme, vitesse à la coupure du filtre, un arrêt à une carillon de résolution.
• Espace : une réverbération à convolution synthétique ensemencée (2,5–4,5 s, queue assombrie) partagée par toutes les voix, sec/humide environ 60/40.
• Objectifs : environ -18 LUFS intégrés, pic vrai à -1,5 dBFS ou moins, fondu d'entrée de 0,3 s, et chaque queue atténuée 0,4 s avant la fin.

Recettes techniques

Fonction pure du temps. Chaque image recalcule toute la scène à partir de t : pose des objets, tête du faisceau, phases des ondes. Aléa ensemencé uniquement.

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

Scène analytique, peu de passes. Intersectez quelques formes analytiques (plan, sphère, prisme convexe comme un ensemble de plans) au lieu de raymarching. Passez l'état dérivé du temps (angles, positions, trajets des rayons) comme des uniforms calculés en JavaScript. Divisez l'image en petites passes dédiées (sol, champ lumineux à mi-résolution dans une cible RGBA16F, verre par-dessus) plutôt qu'un shader avec des branches.

Couleur spectrale à partir de la longueur d'onde. Utilisez un ajustement analytique lisse pour que l'éventail lise comme de la lumière, pas comme un échantillon de dégradé. Additionnez plusieurs échantillons de longueurs d'onde et normalisez pour que le total soit un blanc neutre.

float gauss(float x, float m, float s) { float u = (x - m) / s; return exp(-u * u); }
vec3 spectral(float nm) {             // ajustement lisse, RVB linéaire, fenêtre 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.),  // le rouge revient dans le violet
                  gauss(nm, 543., 44.),
                  gauss(nm, 452., 34.));
}

Sur un fond clair, l'extrémité violette se lit comme un lavande pâle ; c'est honnête, donnez-lui donc une zone sombre locale au lieu de la booster.

Réfraction par longueur d'onde. Tracez le même rayon deux ou trois fois avec des indices différents (rouge, vert, bleu ou plus). Là où les résultats concordent, vous obtenez des détails neutres nets ; là où ils divergent, vous obtenez des franges chromatiques exactement là où la physique les place.

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];  // réfraction entrante, réfraction sortante, échantillonnage du sol
}

Caustiques sans simulation. Pour une surface d'eau h(x, t) construite à partir de quelques ondes analytiques, la lumière atteignant le sol en dessous d'un point évolue comme 1 / |det(I + d · Hess h)| où d est la profondeur divisée par l'indice de réfraction. Calculez la hessienne analytiquement (sinusoïdes et paquets d'anneaux radiaux ont tous une forme fermée), adoucissez la singularité avec 1 / sqrt(det² + ε²), et évaluez-la avec trois d légèrement différents pour un mince bord spectral.

Lignes de lumière sur un plan. Un faisceau effleurant le papier est une gaussienne 1D sur son axe, exp(-(dist/w)²), plus une lueur plus large et plus faible. Les têtes de faisceau avancent avec une distance adoucie le long du chemin ; coupez avec un court smoothstep, pas un bord dur.

Impression à bande limitée. Dessinez les lignes de la grille à partir de la distance à la ligne la plus proche par rapport à l'empreinte dans l'espace écran (fwidth du point d'impact), afin que les lignes restent douces de 1,5 à 2 px à n'importe quel grossissement, y compris à l'intérieur d'une lentille. Lorsque les cellules rétrécissent en dessous de quelques pixels, fondez vers le ton moyen de l'impression, pas vers le papier vierge. Donnez à l'encre agrandie une douceur minimale (environ la moitié de sa largeur), sinon une ligne sous une lentille sphérique devient un coin tranchant comme un rasoir.

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

Le verre a besoin de quelque chose de sombre à réfracter. Dans un studio blanc, une sphère parfaite devient laiteuse. Donnez à l'environnement des murs gris près de l'horizon, une boîte à lumière compacte et un drapeau sombre ; l'horizon inversé et la fenêtre à l'intérieur de la sphère dessinent alors sa forme. Calculez tous les chemins sans branches pour que fwidth reste valide, et sortez une couverture analytique (distance du rayon au centre par rapport au rayon, en pixels) comme alpha.

Ton et finition. Épaule exponentielle 1 - exp(-1,85 x) maintient le papier proche de #f2efe9 tandis que les pics caustiques s'atténuent doucement ; puis sRGB. Les épaules par canal décolorent les bandes spectrales brillantes vers le pastel, donc pour la lumière colorée, mélangez environ à mi-chemin vers une courbe préservant la teinte (mappage de tons du canal max et mise à l'échelle), limitée par la chroma pour que le papier ne soit pas touché. Aller complètement vers une préservation de la teinte, ou renforcer les couleurs des bandes, effondre l'orange, le jaune et le cyan en bandes rouges, vertes et bleues plates. Vérifiez numériquement l'éventail : échantillonnez une colonne à travers lui et confirmez que la teinte augmente une fois, du rouge (environ 10°) au violet (environ 270°), sans repliement. Ajoutez un tramage statique sous-LSB (±0,6/255) uniquement pour briser le banding dans les dégradés pâles ; ne l'animez jamais par image.

Vitesse. SwiftShader est un rendu logiciel et paie pour chaque instruction d'un shader, y compris les branches qu'aucun pixel ne prend. Gardez chaque passe dédiée, rendez les champs lumineux doux à mi-résolution, et découpez les passes coûteuses (verre, intérieurs de prisme) à la boîte englobante projetée de l'objet, en mélangeant par-dessus le sol avec SRC_ALPHA, ONE_MINUS_SRC_ALPHA. Mesurez les secondes par image à 1920×1080 avant de polir ; fbm à 5 octaves maximum.

Graphe audio déterministe. Chromium additionne trois connexions ou plus dans un seul AudioNode dans un ordre non spécifié, donc deux rendus diffèrent d'environ 1e-6 et échouent à une vérification d'octets. Synthétisez chaque voix en JavaScript dans un seul mixage stéréo Float32 (sinusoïdes accumulées en phase, biquads RBJ sur bruit ensemencé, enveloppes à échantillon exact), puis utilisez le graphe uniquement pour une source unique dans un gain sec et un convolveur, tous deux dans un filtre passe-haut (deux entrées commutent), puis un compresseur doux (environ 2,5:1, seuil -20 dB) et un fondu linéaire.

const M = A.mix(sr, D);                                   // { L, R } Float32Arrays
A.glass(M, 6.6, hz(81), 0.15, { decay: 2.8, pan: 0.2 }); // partiels modaux, additionnés 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 });

Matriçage dans la page. Après startRendering(), mesurez le tampon (pondéré K, intensité intégrée avec porte et pic suréchantillonné 4×), appliquez un gain pour atteindre la cible et un gain plus faible si le plafond de pic l'exige. Déterministe et simple.

Liste de vérification du rendu déterministe

• window.motion déclare largeur, hauteur, durée, fps et un temps d'affiche sur l'image la plus belle.
• renderFrame(t) définit chaque uniforme uniquement à partir de t ; pas de Date, performance.now, Math.random, minuteries ou état accumulé en mode rendu.
• Chercher tard puis tôt reproduit des pixels identiques ; la première et la dernière image capturée sont valides.
• Le mode aperçu (pas de ?render=1) boucle avec requestAnimationFrame ; un clic joue le même tampon audio rendu en synchronisation.
• renderAudio mélange les voix en JavaScript, puis rend une source unique via un convolveur ensemencé dans un OfflineAudioContext ; deux appels retournent des échantillons identiques octet par octet (aucun nœud n'a trois entrées ou plus).
• La carte de repères est un tableau de temps dans le code partagé par l'image et le son (impact, arrêt, libération), et la queue de réverbération est en dessous de -45 dB dans les dernières 0,3 s.
• Pas de réseau, polices, images ou échantillons ; chaque texture et son est procédural.

Éviter

• Dégradés arc-en-ciel peints sur tout le cadre, texte arc-en-ciel, surfaces « holographiques » irisées.
• Dégradés néon, violet-à-bleu « IA », fonds noirs, flares de lentille et traînées anamorphiques.
• Verre de rendu 3D brillant : biseaux épais et lumineux, verre teinté, reflets chromés HDRI, bloom sur tout.
• Objets flottants sans ombre de contact ; couleur qui ne provient pas d'une cause physique.
• Orbits de caméra, coupures rapides, particules, étincelles, whooshes et risers.
• Grain aléatoire par image et lignes d'un pixel qui scintillent après la compression H.264.
• Sons qui écrêtent, empilements d'accords qui combattent la tonalité, queues de réverbération coupées à la fin.