pascal/youtube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Folge 9, Szene 2: Higgsfield-Pose noa_A_drachen-vorn, Schwanz mit Schleifen in Remotion, Nahaufnahme zeigt alle drei Schleifen

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lara 2026-11-07 22:49:49 +00:00
parent d452879d1b
commit b74cd4953e
1 changed files with 22 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
remotion/src/folge09/szene2.tsx
View file

@ -8,10 +8,9 @@ import {Untertitel} from '../baukasten/untertitel';
import {plane} from './plan'; import {plane} from './plan';
import {LuluImWind, PLATZ, WindGarten} from './teile'; import {LuluImWind, PLATZ, WindGarten} from './teile';
// Szene 2: Mein Drachen. Windiger Nachmittag; Noa hält ihren roten Papierdrachen vor der Brust an den // Szene 2: Mein Drachen. Windiger Nachmittag; Noa hält ihren roten Papierdrachen an den Seitenspitzen vor der
// beiden Seitenspitzen (Pose noa_A_drachenschnur: die Hände stehen auseinander, der Drachen verdeckt die // Brust (Higgsfield-Pose noa_A_drachen-vorn, der Drachenkörper ist mitgemalt). Den Schwanz mit den drei
// Spule). Die Fäustlinge werden über dem Drachen noch einmal gezeichnet, damit sie ihn sichtbar halten. // Schleifen zeichnet Remotion an die untere Spitze – die Schleifen leuchten beim Zählen nacheinander auf.
// Die drei Schleifen am Schwanz leuchten beim Zählen nacheinander auf.
export const S2 = plane('s2', [ export const S2 = plane('s2', [
{id: 'bild0', dauer: 2.6}, {id: 'bild0', dauer: 2.6},
@ -28,33 +27,30 @@ export const S2 = plane('s2', [
const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const; const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
// Fäustlinge in noa_A_drachenschnur (Leinwand, gemessen) // Drachen in noa_A_drachen-vorn (Leinwand, gemessen): obere Spitze 686/336, Kreuz 686/441, untere Spitze 686/651
const LINKS = {cx: 709, cy: 453, rx: 32, ry: 30}; const OBEN = {cx: 686, cy: 336};
const RECHTS = {cx: 806, cy: 423, rx: 20, ry: 30}; const KREUZ = {cx: 686, cy: 441};
const POSE = 'noa_A_drachenschnur'; const UNTEN = {cx: 686, cy: 651};
export const Szene2: React.FC = () => { export const Szene2: React.FC = () => {
const f = useCurrentFrame(); const f = useCurrentFrame();
const {z, dauer} = S2; const {z, dauer} = S2;
const hand = (h: typeof LINKS) => { const p = (q: typeof OBEN) => punkt('noa', PLATZ.noa, BODEN, q.cx, q.cy);
const m = punkt('noa', PLATZ.noa, BODEN, h.cx, h.cy); const oben = p(OBEN);
const e = punkt('noa', PLATZ.noa, BODEN, h.cx + h.rx, h.cy + h.ry); const unten = p(UNTEN);
return {...m, clip: `ellipse(${e.x - m.x}px ${e.y - m.y}px at ${m.x}px ${m.y}px)`}; const d = p(KREUZ);
}; // Remotion-Drachen genau deckungsgleich (1 = 120 px hoch, Spitze 78 px unter dem Kreuz); sichtbar ist
const l = hand(LINKS); // nur, was unter der unteren Spitze liegt: der Schwanz.
const r = hand(RECHTS); // (im Bild nachgemessen: deckungsgleich mit s = halbe Spitzen-Höhe / 120)
// Leistenkreuz in der Mitte zwischen den Händen, Querleiste von Hand zu Hand (Drachen: ±40 px bei s = 1) const groesse = (unten.y - oben.y) / 120;
const d = {x: (l.x + r.x) / 2, y: (l.y + r.y) / 2}; const nurSchwanz = `polygon(0 ${unten.y - 2}px, 100% ${unten.y - 2}px, 100% 100%, 0 100%)`;
const neigung = (Math.atan2(r.y - l.y, r.x - l.x) * 180) / Math.PI;
const groesse = Math.hypot(r.x - l.x, r.y - l.y) / 80;
const noaPose = <Figur pose={POSE} x={PLATZ.noa} y={BODEN} />;
const leuchte = (id: 'z1' | 'z2' | 'z3') => interpolate(f, [z[id].start, z[id].start + 6, z[id].frei, z[id].frei + 8], [0, 1, 1, 0.25], klemm); const leuchte = (id: 'z1' | 'z2' | 'z3') => interpolate(f, [z[id].start, z[id].start + 6, z[id].frei, z[id].frei + 8], [0, 1, 1, 0.25], klemm);
const kam = kamFahrt(f, [ const kam = kamFahrt(f, [
[0, 1060, 540, 1.0], [0, 1060, 540, 1.0],
[z.bild0.ende, 1060, 600, 1.15], [z.bild0.ende, 1060, 600, 1.15],
[z.n2.ende, 1000, 560, 1.2], [z.n2.ende, 1000, 560, 1.2],
[z.e1.start + 20, d.x, d.y + 30, 2.0], // Nahaufnahme Drachen zum Zählen [z.e1.start + 20, d.x + 140, BODEN - 70, 1.5], // Nahaufnahme Drachen samt Schleifen im Gras zum Zählen
[z.e2.ende, d.x, d.y + 30, 2.0], [z.e2.ende, d.x + 140, BODEN - 70, 1.5],
[dauer, 1060, 600, 1.15], [dauer, 1060, 600, 1.15],
]); ]);
return ( return (
@ -63,10 +59,10 @@ export const Szene2: React.FC = () => {
<WindGarten /> <WindGarten />
<LuluImWind /> <LuluImWind />
<Figur pose={[[0, 'pino_A4_staunen'], [z.n2.start, 'pino_A3_lachen']]} x={PLATZ.pino} y={BODEN + huepfer(f, z.p1.start, 14, 10)} stauchY={atmen(f, 1, 0.015)} /> <Figur pose={[[0, 'pino_A4_staunen'], [z.n2.start, 'pino_A3_lachen']]} x={PLATZ.pino} y={BODEN + huepfer(f, z.p1.start, 14, 10)} stauchY={atmen(f, 1, 0.015)} />
{noaPose} <Figur pose="noa_A_drachen-vorn" x={PLATZ.noa} y={BODEN} />
<Drachen x={d.x} y={d.y} s={groesse} drehung={neigung} schwanz={18} flattern={8} boden={BODEN} leuchten={[leuchte('z1'), leuchte('z2'), leuchte('z3')]} /> <div style={{position: 'absolute', inset: 0, clipPath: nurSchwanz}}>
<div style={{position: 'absolute', inset: 0, clipPath: l.clip}}>{noaPose}</div> <Drachen x={d.x} y={unten.y - 78 * groesse} s={groesse / 2} schwanz={72} flattern={8} boden={BODEN} leuchten={[leuchte('z1'), leuchte('z2'), leuchte('z3')]} />
<div style={{position: 'absolute', inset: 0, clipPath: r.clip}}>{noaPose}</div> </div>
</Kamera> </Kamera>
<Vignette /> <Vignette />
<Untertitel zeilen={S2.liste} /> <Untertitel zeilen={S2.liste} />