71 lines
3 KiB
TypeScript
71 lines
3 KiB
TypeScript
import React from 'react';
|
||
import {interpolate, useCurrentFrame} from 'remotion';
|
||
import {Figur, Kamera} from '../baukasten/figur';
|
||
import {Drachen} from '../baukasten/drachen';
|
||
import {Blende, Vignette, atmen, huepfer, kamFahrt, punkt} from '../baukasten/helfer';
|
||
import {BODEN} from '../baukasten/orte';
|
||
import {Untertitel} from '../baukasten/untertitel';
|
||
import {plane} from './plan';
|
||
import {LuluImWind, PLATZ, WindGarten} from './teile';
|
||
|
||
// Szene 2: Mein Drachen. Windiger Nachmittag; Noa hält ihren roten Papierdrachen an den Seitenspitzen vor der
|
||
// Brust (Higgsfield-Pose noa_A_drachen-vorn, der Drachenkörper ist mitgemalt). Den Schwanz mit den drei
|
||
// Schleifen zeichnet Remotion an die untere Spitze – die Schleifen leuchten beim Zählen nacheinander auf.
|
||
|
||
export const S2 = plane('s2', [
|
||
{id: 'bild0', dauer: 2.6},
|
||
{id: 'n1', wer: 'NOA'},
|
||
{id: 'p1', wer: 'PINO'},
|
||
{id: 'n2', wer: 'NOA'},
|
||
{id: 'e1', wer: 'ERZ'},
|
||
{id: 'z1', wer: 'ERZ', pause: 1.5},
|
||
{id: 'z2', wer: 'ERZ', pause: 1.5},
|
||
{id: 'z3', wer: 'ERZ', pause: 1.0},
|
||
{id: 'e2', wer: 'ERZ'},
|
||
{id: 'bild1', dauer: 1.2},
|
||
]);
|
||
|
||
const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
|
||
|
||
// Drachen in noa_A_drachen-vorn (Leinwand, gemessen): obere Spitze 686/336, Kreuz 686/441, untere Spitze 686/651
|
||
const OBEN = {cx: 686, cy: 336};
|
||
const KREUZ = {cx: 686, cy: 441};
|
||
const UNTEN = {cx: 686, cy: 651};
|
||
|
||
export const Szene2: React.FC = () => {
|
||
const f = useCurrentFrame();
|
||
const {z, dauer} = S2;
|
||
const p = (q: typeof OBEN) => punkt('noa', PLATZ.noa, BODEN, q.cx, q.cy);
|
||
const oben = p(OBEN);
|
||
const unten = p(UNTEN);
|
||
const d = p(KREUZ);
|
||
// Remotion-Drachen genau deckungsgleich (1 = 120 px hoch, Spitze 78 px unter dem Kreuz); sichtbar ist
|
||
// nur, was unter der unteren Spitze liegt: der Schwanz.
|
||
const groesse = (unten.y - oben.y) / 120;
|
||
const nurSchwanz = `polygon(0 ${unten.y - 2}px, 100% ${unten.y - 2}px, 100% 100%, 0 100%)`;
|
||
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, [
|
||
[0, 1060, 540, 1.0],
|
||
[z.bild0.ende, 1060, 600, 1.15],
|
||
[z.n2.ende, 1000, 560, 1.2],
|
||
[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 + 140, BODEN - 70, 1.5],
|
||
[dauer, 1060, 600, 1.15],
|
||
]);
|
||
return (
|
||
<>
|
||
<Kamera {...kam}>
|
||
<WindGarten />
|
||
<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="noa_A_drachen-vorn" x={PLATZ.noa} y={BODEN} />
|
||
<div style={{position: 'absolute', inset: 0, clipPath: nurSchwanz}}>
|
||
<Drachen x={d.x} y={unten.y - 78 * groesse} s={groesse} schwanz={72} flattern={8} boden={BODEN} leuchten={[leuchte('z1'), leuchte('z2'), leuchte('z3')]} />
|
||
</div>
|
||
</Kamera>
|
||
<Vignette />
|
||
<Untertitel zeilen={S2.liste} />
|
||
<Blende dauer={dauer} rein={14} raus={8} />
|
||
</>
|
||
);
|
||
};
|