youtube/remotion/src/baukasten/drachen.tsx

import React from 'react';
import {Easing, interpolate, useCurrentFrame} from 'remotion';

// Noas roter Papierdrachen („Lulu und der Drachen“): Raute mit Holzkreuz,
// langer Schwanz mit drei Schleifen (gelb, grün, blau).
// (x, y) = Kreuzungspunkt der Leisten auf dem Bildschirm, s = Größe (1 ≈ 120 px hoch).
// Der Körper dreht sich mit `drehung`, der Schwanz hängt immer nach unten bzw. weht
// mit dem Wind (`schwanz`: Winkel aus der Senkrechten, + = nach rechts).

// Raute in Drachen-Koordinaten (Kreuzungspunkt = 0,0)
const OBEN = {x: 0, y: -42};
const LINKS = {x: -40, y: 0};
const RECHTS = {x: 40, y: 0};
const UNTEN = {x: 0, y: 78};
const SCHWANZ_LAENGE = 230;
// Lage der Schleifen auf dem Schwanz (Anteil der Länge) und ihre Farben
export const SCHLEIFEN = [
	{t: 0.3, farbe: '#f2c84b', rand: '#c9952a'}, // gelb
	{t: 0.6, farbe: '#7fb069', rand: '#4f7f3d'}, // grün
	{t: 0.9, farbe: '#5b8fd1', rand: '#335f99'}, // blau
] as const;

const dreh = (p: {x: number; y: number}, grad: number, s: number) => {
	const w = (grad * Math.PI) / 180;
	return {x: (p.x * Math.cos(w) - p.y * Math.sin(w)) * s, y: (p.x * Math.sin(w) + p.y * Math.cos(w)) * s};
};

// Punkt, an dem die Schnur am Drachen festgeknotet ist (Waage, knapp unter dem Kreuz).
export const drachenHalt = (x: number, y: number, s = 1, drehung = 0) => {
	const p = dreh({x: 0, y: 14}, drehung, s);
	return {x: x + p.x, y: y + p.y};
};

type DrachenProps = {
	x: number;
	y: number;
	s?: number;
	drehung?: number;
	schwanz?: number; // Winkel des Schwanzes aus der Senkrechten (Grad), Wind von links ≈ 25
	flattern?: number; // Stärke der Schwanzwelle (px), 0 = hängt ruhig
	liegt?: boolean; // liegt im Gras (drehung 90): Schwanz flach zur Seite
	boden?: number; // y des Grases auf dem Bildschirm: der Schwanz geht nicht darunter
	leuchten?: [number, number, number]; // je Schleife 0…1 (Zählen)
	deckkraft?: number;
	frame?: number;
};

export const Drachen: React.FC<DrachenProps> = ({
	x,
	y,
	s = 1,
	drehung = 0,
	schwanz = 20,
	flattern = 14,
	liegt = false,
	boden,
	leuchten = [0, 0, 0],
	deckkraft = 1,
	frame,
}) => {
	const jetzt = useCurrentFrame();
	const f = frame ?? jetzt;
	const id = `drachen-${Math.round(x)}-${Math.round(y)}`;

	// Schwanz in Bildschirm-Koordinaten: beginnt an der unteren Spitze, läuft in Richtung
	// `schwanz` (liegend: flach nach rechts) und schlägt eine wandernde Welle.
	const start = dreh(UNTEN, drehung, s);
	const richtung = ((liegt ? -84 : schwanz) * Math.PI) / 180; // liegend: von der Spitze flach nach links
	const ax = Math.sin(richtung);
	const ay = Math.cos(richtung);
	const welle = liegt ? 0 : flattern;
	const schwanzPunkt = (t: number) => {
		const l = t * SCHWANZ_LAENGE * s;
		const quer = Math.sin(t * 7 - f * 0.35) * welle * s * (0.25 + t); // nach hinten stärker
		const sackt = liegt ? 0 : t * t * 30 * s * Math.sin(richtung); // weht er seitlich, hängt das Ende etwas
		// Erreicht der Schwanz das Gras, liegt der Rest flach darauf (mit dem Wind nach rechts).
		const grund = boden === undefined ? Infinity : boden - y - 2;
		const lAuf = ay > 0.05 ? (grund - start.y) / ay : Infinity;
		if (l > lAuf) return {x: start.x + ax * lAuf + (l - lAuf) * 0.95, y: grund - Math.abs(Math.sin(t * 9)) * 2 * s};
		return {x: start.x + ax * l + ay * quer, y: Math.min(grund, start.y + ay * l - ax * quer + sackt)};
	};
	const punkte = Array.from({length: 25}, (_, i) => schwanzPunkt(i / 24));
	const schwanzPfad = punkte.map((p, i) => `${i ? 'L' : 'M'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');

	const r = (p: {x: number; y: number}) => dreh(p, drehung, s);
	const [o, li, re, u] = [r(OBEN), r(LINKS), r(RECHTS), r(UNTEN)];

	return (
		<svg
			style={{position: 'absolute', left: x, top: y, width: 1, height: 1, overflow: 'visible', pointerEvents: 'none', opacity: deckkraft}}
		>
			<defs>
				<linearGradient id={`${id}-papier`} x1="0" y1="0" x2="1" y2="1">
					<stop offset="0" stopColor="#e2584a" />
					<stop offset="0.55" stopColor="#c8402c" />
					<stop offset="1" stopColor="#a8352a" />
				</linearGradient>
				<filter id={`${id}-stift`} x="-20%" y="-20%" width="140%" height="140%">
					<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" seed="4" result="r" />
					<feDisplacementMap in="SourceGraphic" in2="r" scale={2.5} xChannelSelector="R" yChannelSelector="G" />
				</filter>
				<radialGradient id={`${id}-glanz`}>
					<stop offset="0" stopColor="#fffbe0" stopOpacity="0.95" />
					<stop offset="1" stopColor="#fff3b0" stopOpacity="0" />
				</radialGradient>
			</defs>
			{/* Schwanz: Kordel */}
			<path d={schwanzPfad} fill="none" stroke="#6b4a32" strokeWidth={1.8 * s} strokeLinecap="round" opacity={0.85} />
			{/* Schleifen */}
			{SCHLEIFEN.map((sl, i) => {
				const p = schwanzPunkt(sl.t);
				const q = schwanzPunkt(Math.min(1, sl.t + 0.03));
				const winkel = (Math.atan2(q.y - p.y, q.x - p.x) * 180) / Math.PI;
				const g = leuchten[i] ?? 0;
				const k = s * (1 + 0.25 * g);
				return (
					<g key={i} transform={`translate(${p.x} ${p.y}) rotate(${winkel + 90}) scale(${k})`}>
						{g > 0 && <circle r={26} fill={`url(#${id}-glanz)`} opacity={g} />}
						<g filter={`url(#${id}-stift)`}>
							<path d="M 0 0 L -14 -8 Q -17 0 -14 8 Z" fill={sl.farbe} stroke={sl.rand} strokeWidth={1.2} strokeLinejoin="round" />
							<path d="M 0 0 L 14 -8 Q 17 0 14 8 Z" fill={sl.farbe} stroke={sl.rand} strokeWidth={1.2} strokeLinejoin="round" />
							<circle r={2.6} fill={sl.rand} />
						</g>
					</g>
				);
			})}
			{/* Körper */}
			<g filter={`url(#${id}-stift)`}>
				<polygon
					points={`${o.x},${o.y} ${re.x},${re.y} ${u.x},${u.y} ${li.x},${li.y}`}
					fill={`url(#${id}-papier)`}
					stroke="#8e2f22"
					strokeWidth={2.2 * s}
					strokeLinejoin="round"
				/>
				{/* helleres oberes Feld wie aufgeklebtes zweites Papier */}
				<polygon points={`${o.x},${o.y} ${re.x},${re.y} 0,0 ${li.x},${li.y}`} fill="#f07a5e" opacity={0.35} />
				{/* Holzleisten */}
				<line x1={o.x} y1={o.y} x2={u.x} y2={u.y} stroke="#8a6040" strokeWidth={2.6 * s} strokeLinecap="round" opacity={0.9} />
				<line x1={li.x} y1={li.y} x2={re.x} y2={re.y} stroke="#8a6040" strokeWidth={2.6 * s} strokeLinecap="round" opacity={0.9} />
			</g>
		</svg>
	);
};

// ---------- Flugbahnen ----------
// Alle liefern {x, y, drehung} für <Drachen> (und damit auch für drachenHalt).
export type DrachenLage = {x: number; y: number; drehung: number; liegt?: boolean};
// Im Gras liegt der Kreuzungspunkt so hoch über dem Boden (Raute auf der Seite, s = 1).
export const LIEGE_HOEHE = 36;
type Punkt = {x: number; y: number};
const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;

// Ruhiges Tanzen am Himmel (z. B. Szene 6): sanftes Auf und Ab, leichtes Kippen.
export const pendeln = (frame: number, ort: Punkt, staerke = 1): DrachenLage => ({
	x: ort.x + Math.sin(frame * 0.045) * 40 * staerke,
	y: ort.y + Math.sin(frame * 0.07 + 0.8) * 18 * staerke,
	drehung: Math.sin(frame * 0.045 + 0.6) * 12 * staerke,
});

// Steigen von `von` nach `nach` in `dauer` Frames, mit kleinen Rucken im Wind;
// danach pendelt er am Ziel weiter. Aus dem Gras: von = {x, boden - LIEGE_HOEHE}, startDrehung = 90.
export const steigen = (frame: number, start: number, dauer: number, von: Punkt, nach: Punkt, startDrehung = 0): DrachenLage => {
	const t = interpolate(frame, [start, start + dauer], [0, 1], {...klemm, easing: Easing.bezier(0.3, 0, 0.25, 1)});
	const ruck = Math.sin(t * Math.PI * 4) * (1 - t) * 18;
	const p = pendeln(frame, {x: von.x + (nach.x - von.x) * t, y: von.y + (nach.y - von.y) * t}, t);
	const aufrichten = startDrehung * Math.max(0, 1 - t * 5); // z. B. aus dem Gras (90) aufrichten
	return {x: p.x + ruck * 0.5, y: p.y + ruck, drehung: p.drehung + (1 - t) * 15 * Math.sin(frame * 0.3) + aufrichten, liegt: frame < start};
};

// Trudeln: dreht sich im Kreis und fällt in einer Spirale ins Gras (`boden` = y des Grases).
export const trudeln = (frame: number, start: number, dauer: number, von: Punkt, boden: number, nachRechts = 160): DrachenLage => {
	const t = interpolate(frame, [start, start + dauer], [0, 1], klemm);
	const fall = Easing.in(Easing.quad)(t);
	const kreis = t * Math.PI * 4; // zwei Runden
	const radius = 45 * (1 - t);
	return {
		x: von.x + nachRechts * t + Math.sin(kreis) * radius,
		y: von.y + (boden - LIEGE_HOEHE - von.y) * fall - Math.cos(kreis) * radius * 0.5,
		drehung: t * 720 + 90 * t * t,
		liegt: t >= 1,
	};
};

// Plumps: liegt im Gras (x = Mitte, `boden` = y des Grases), ein Windstoß hebt ihn kurz an,
// dann fällt er schaukelnd zurück ins Gras.
export const plumps = (frame: number, start: number, dauer: number, x: number, boden: number, hoehe = 140): DrachenLage => {
	const t = interpolate(frame, [start, start + dauer], [0, 1], klemm);
	const hub = Math.sin(t * Math.PI) * hoehe;
	const wackeln = Math.sin(t * Math.PI * 5) * 25 * Math.sin(t * Math.PI);
	const aufrecht = interpolate(t, [0, 0.2, 0.8, 1], [90, 0, 0, 90]);
	return {x: x + Math.sin(t * Math.PI) * 40, y: boden - LIEGE_HOEHE - hub, drehung: aufrecht + wackeln, liegt: t <= 0 || t >= 1};
};