bc807312a1
- baukasten/drachen.tsx: <Drachen> als SVG (Raute mit Holzkreuz, leichter Stift-Rand), Schwanz mit wandernder Welle, weht mit `schwanz` zur Seite, liegt im Gras flach (`liegt`) und knickt an der Graskante um (`boden`); Schleifen gelb, grün, blau leuchten einzeln (`leuchten`, zum Zählen) - drachenHalt(): Knotenpunkt für die Drachenschnur, dreht mit - Flugbahnen: pendeln, steigen (auch aus dem Gras), trudeln (zwei Runden ins Gras), plumps (Windstoß hebt ihn kurz an); LIEGE_HOEHE für den liegenden Drachen - DrachenschnurTest zeigt die ganze Folge (14 s) mit Noa und Schnur Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
|
|
import {Figur, NOA_HOEHE} from '../baukasten/figur';
|
|
import {Drachen, type DrachenLage, LIEGE_HOEHE, drachenHalt, pendeln, plumps, steigen, trudeln} from '../baukasten/drachen';
|
|
import {Drachenschnur, spulenPunkt} from '../baukasten/drachenschnur';
|
|
|
|
// Prüfszene Drachen (14 s): Noa hält die Spule; der Drachen liegt im Gras, plumpst,
|
|
// steigt, tanzt, trudelt zurück. Oben links ein zweiter Drachen zum Zählen der Schleifen.
|
|
const BODEN = 900;
|
|
const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
|
|
|
|
export const DrachenschnurTest: React.FC = () => {
|
|
const f = useCurrentFrame();
|
|
const noa = {x: 420, y: BODEN, hoehe: NOA_HOEHE};
|
|
const himmel = {x: 1150, y: 230};
|
|
|
|
let lage: DrachenLage;
|
|
if (f < 100) lage = plumps(f, 30, 60, 980, BODEN);
|
|
else if (f < 300) lage = steigen(f, 100, 120, {x: 980, y: BODEN - LIEGE_HOEHE}, himmel, 90);
|
|
else {
|
|
const ab = pendeln(300, himmel);
|
|
lage = trudeln(f, 300, 80, ab, BODEN);
|
|
}
|
|
// Wind von links: Schwanz weht nach rechts, am Boden kaum
|
|
const schwanz = interpolate(lage.y, [300, BODEN - 120], [30, 5], klemm);
|
|
|
|
// Zählen: Schleifen leuchten nacheinander auf
|
|
const zaehl = (i: number) => interpolate(f % 120, [i * 30 + 10, i * 30 + 18, i * 30 + 34, i * 30 + 44], [0, 1, 1, 0], klemm);
|
|
|
|
return (
|
|
<AbsoluteFill style={{background: '#f4ead8'}}>
|
|
<div style={{position: 'absolute', left: 0, top: BODEN - 10, width: 1920, height: 200, background: '#a9c27a'}} />
|
|
<Drachen x={260} y={260} s={1.3} leuchten={[zaehl(0), zaehl(1), zaehl(2)]} schwanz={8} flattern={8} />
|
|
<Figur pose="noa_A_drachenschnur" {...noa} />
|
|
<Drachen {...lage} schwanz={schwanz} flattern={lage.liegt ? 0 : 14} boden={BODEN} />
|
|
<Drachenschnur
|
|
von={spulenPunkt(noa.x, noa.y, noa.hoehe)}
|
|
nach={drachenHalt(lage.x, lage.y, 1, lage.drehung)}
|
|
durchhang={lage.y > BODEN - 200 ? 0.12 : 0.05}
|
|
/>
|
|
</AbsoluteFill>
|
|
);
|
|
};
|