DE 
English
Українська
Polski🎯 Bézierkurven
Interaktiver Bézierkurven-Explorer mit dem De-Casteljau-Algorithmus. Ziehen Sie Kontrollpunkte, animieren Sie die Konstruktion, wählen Sie Grad 1–5 und vergleichen Sie mit B-Spline-Interpolation.
Über Bézierkurven & Splines
Eine Bézierkurve ist eine glatte parametrische Kurve, die durch eine Reihe von Kontrollpunkten definiert wird. Sie wurde in den 1960er Jahren unabhängig voneinander von Pierre Bézier bei Renault und Paul de Casteljau bei Citroën für die Konstruktion von Karosserieformen erfunden. Die Kurve vom Grad n ist gegeben durch das Bernstein-Polynom B(t) = Σ Pᵢ ⋅ C(n,i) ⋅ (1−t)ⁿ⁻ᶦ ⋅ tᶦ, wobei t ∈ [0,1] und C(n,i) die Binomialkoeffizienten sind. Der De-Casteljau-Algorithmus wertet dies geometrisch aus, indem wiederholt linear zwischen Punktpaaren interpoliert wird — eine elegante rekursive Konstruktion, die numerisch stabil und visuell intuitiv ist.
Der Simulator lässt Sie Kontrollpunkte durch Klicken platzieren, sie zum Umformen der Kurve in Echtzeit ziehen, kubische Bézier-Segmente zu glatten Splines verketten (C¹- oder G¹-Stetigkeit) und das Unterteilungspolygon bei jedem Schritt der De-Casteljau-Konstruktion animiert beobachten, während der Parameter t von 0 auf 1 läuft.
Häufig gestellte Fragen
Was ist der De-Casteljau-Algorithmus?
Der De-Casteljau-Algorithmus wertet eine Bézierkurve am Parameter t aus, indem wiederholt linear zwischen benachbarten Kontrollpunkten interpoliert wird. Für eine kubische Kurve (4 Kontrollpunkte P₀–P₃) ergibt die erste Runde 3 Zwischenpunkte, die zweite 2, und die dritte den einzelnen Kurvenpunkt B(t). Die Zwischenpunkte bilden ein Dreieck aus Liniensegmenten, dessen Hypotenuse tangential zur Kurve verläuft — sichtbar in der Animation als das bewegte „Unterteilungspolygon“.
Warum werden kubische Bézierkurven so häufig verwendet?
Kubische Kurven (Grad 3, 4 Kontrollpunkte) bieten den minimalen Grad, der nötig ist, um beide Endpunkte und beide Tangentenrichtungen unabhängig festzulegen, und geben so volle Formkontrolle mit den wenigsten Parametern. Kurven höheren Grades können oszillieren (Runge-Phänomen) und sind schwerer intuitiv zu bearbeiten. Praktisch jedes Vektorgrafikformat — SVG, PDF, PostScript, TrueType/OpenType-Schriften und CSS-Animationen — verwendet kubische Bézierkurven als grundlegendes Form-Primitiv.
Was ist ein B-Spline, und wie unterscheidet er sich von einer Bézierkurve?
Ein B-Spline (Basis-Spline) ist eine stückweise polynomiale Kurve, die durch einen Knotenvektor definiert wird, der festlegt, wo Polynomsegmente zusammentreffen. Anders als bei einer Bézierkurve beeinflusst jeder Kontrollpunkt eines B-Splines nur einen lokalen Bereich der Kurve (der Träger ist endlich), sodass das Verschieben eines Punktes nicht die gesamte Kurve umformt — eine Eigenschaft namens lokale Kontrolle. NURBS (Non-Uniform Rational B-Splines) erweitern B-Splines mit Gewichten und sind die Standarddarstellung in CAD-Software wie AutoCAD und SolidWorks.
Wie stellt man glatte Übergänge zwischen kubischen Segmenten sicher?
Für C¹-Stetigkeit (übereinstimmende erste Ableitungen) müssen der letzte Kontrollpunkt von Segment k, der erste Kontrollpunkt von Segment k+1 und der gemeinsame Endpunkt kollinear sein, wobei die Abstände vom Endpunkt gleich sind. Dies stellt sicher, dass Tangentenrichtung und -betrag am Übergang übereinstimmen. Für G¹-Stetigkeit (übereinstimmende Tangentenrichtung, aber nicht notwendigerweise Betrag) ist nur Kollinearität erforderlich — eine schwächere, aber visuell glatte Bedingung, die im Schriftdesign verwendet wird.
Was sind Bernstein-Basispolynome?
Die Bernstein-Polynome B(i,n,t) = C(n,i)⋅tᶦ⋅(1−t)ⁿ⁻ᶦ bilden eine Basis für Polynome vom Grad n auf [0,1]. Sie sind nicht-negativ, summieren sich zu 1, und jedes erreicht ein eindeutiges Maximum bei t = i/n. Da die Kurve ein gewichteter Durchschnitt der Kontrollpunkte ist (Gewichte = Bernstein-Polynome), liegt die Kurve stets innerhalb der konvexen Hülle des Kontrollpolygons — eine wichtige geometrische Eigenschaft, die Bézierkurven leicht zu schneiden und zu klippen macht.
Wie werden Bézierkurven in der Typografie verwendet?
TrueType-Schriften verwenden quadratische Bézierkurven (3 Kontrollpunkte pro Segment), die als kompakte numerische Daten gespeichert werden, um Glyphen-Umrisse zu definieren. OpenType-Schriften können entweder quadratische (wie in TrueType) oder kubische (wie in PostScript Type 1) Bézier-Segmente verwenden. Bei der Anzeige wertet der Rasterisierer die Kurven bei der jeweiligen Auflösung aus und füllt das Innere — deshalb sehen skalierbare Schriften bei jeder Größe scharf aus. Ein einzelnes ASCII-Zeichen kann aus 10–30 Bézier-Segmenten bestehen.
Was ist die Eigenschaft der konvexen Hülle?
Die konvexe Hülle einer Punktmenge ist der kleinste konvexe Bereich, der alle Punkte enthält — man kann sie sich als die Form vorstellen, die entsteht, wenn man ein Gummiband um die Punkte spannt. Da Bézierkurven konvexe Kombinationen ihrer Kontrollpunkte sind (Bernstein-Gewichte sind nicht-negativ und summieren sich zu 1), bleibt die Kurve stets innerhalb der konvexen Hülle ihres Kontrollpolygons. Diese Eigenschaft wird in Kollisionserkennungs- und Strahl-Kurve-Schnittalgorithmen genutzt: Wenn ein Strahl die konvexe Hülle verfehlt, kann er die Kurve nicht treffen.
Wie hängt die Bézierkurve mit Animations-Easing zusammen?
CSS und SVG verwenden kubische Bézierkurven, um Animations-Easing-Funktionen zu definieren, angegeben als cubic-bezier(x₁, y₁, x₂, y₂), wobei die beiden Kontrollpunkte (mit festen Endpunkten bei (0,0) und (1,1)) bestimmen, wie schnell sich der animierte Wert über die Zeit ändert. Die bekannte Funktion „ease-in-out“ entspricht ungefähr cubic-bezier(0.42, 0, 0.58, 1). Die Kurve bildet normalisierte Zeit (t) auf normalisierten Fortschritt ab, sodass ein steiler Abschnitt eine schnelle Änderung bedeutet, während ein flacher Abschnitt eine langsame Änderung bedeutet.
Können Bézierkurven Kreise exakt darstellen?
Nein — rationale Bézierkurven (NURBS mit von 1 abweichenden Gewichten) können Kegelschnitte einschließlich Kreisen exakt darstellen, polynomiale Bézierkurven jedoch nicht. Ein einzelner Kreisquadrant lässt sich jedoch sehr genau durch eine kubische Bézierkurve mit Kontrollpunkten bei (R, kR) und (kR, R) annähern, wobei k ≈ 0,5523. Der maximale Fehler dieser Näherung beträgt etwa 0,00027R, was bei typischen Bildschirmauflösungen nicht wahrnehmbar ist.
Was ist Graderhöhung bei Bézierkurven?
Graderhöhung ist der Prozess, dieselbe geometrische Kurve mit einem zusätzlichen Kontrollpunkt (und höherem Grad) darzustellen, ohne die Form der Kurve zu verändern. Ein lineares Segment kann zu einem quadratischen erhöht werden, dann zu einem kubischen usw. Dies ist nützlich bei Algorithmen, die verlangen, dass alle Kurven denselben Grad haben — etwa beim Zusammenführen von Kurven aus verschiedenen Quellen. Die neuen Kontrollpunkte werden als gewichtete Durchschnitte der ursprünglichen berechnet, und der Prozess ist stets exakt (keine Näherung nötig).
Über diese Simulation
Dieser Simulator visualisiert, wie eine Bézierkurve aus einer Handvoll Kontrollpunkte mit dem De-Casteljau-Algorithmus konstruiert wird — derselben rekursiven Interpolationsmethode, die überall in der Computergrafik verwendet wird. Sie können einen Kurvengrad von 1 (linear) bis 5 (quintisch) wählen, jeden Kontrollpunkt auf der Zeichenfläche ziehen und den Parameter t durchlaufen, um zu beobachten, wie die Konstruktionslinien auf der Kurve konvergieren. Ein Schalter legt zusätzlich einen uniformen kubischen B-Spline darüber, damit Sie die beiden Techniken direkt vergleichen können. Alles auf dem Bildschirm wird live aus derselben Bernstein-Polynom-Mathematik gezeichnet, die auch Schriften, SVG-Pfaden und CAD-Software zugrunde liegt.
🔬 Was gezeigt wird
Die blauen Punkte sind die Kontrollpunkte P₀…Pₙ, und die gestrichelte graue Linie ist das sie verbindende Kontrollpolygon. Beim gewählten Parameter t zeigen farbige Konstruktionslinien jede Runde der linearen Interpolation des De-Casteljau-Algorithmus, die auf einen einzelnen orangefarbenen Punkt konvergieren, der die orangefarbene Bézierkurve zeichnet, während t von 0 auf 1 läuft. Die Kurve beginnt stets bei P₀, endet bei Pₙ und verlässt nie die konvexe Hülle des Kontrollpolygons.
🎮 Bedienung
Ziehen Sie einen beliebigen blauen Kontrollpunkt, um die Kurve in Echtzeit umzuformen. Der Grad-Auswahlschalter wechselt zwischen 2 und 6 Kontrollpunkten (linear bis quintisch); der t-Regler bewegt einen einzelnen Punkt entlang der Kurve, und „Abspielen“ animiert t automatisch vor und zurück. „Konstruktion“ schaltet die gelben De-Casteljau-Linien ein oder aus, die Kontrollkästchen blenden das Kontrollpolygon oder die Kurve selbst aus, und „B-Spline vergleichen“ legt einen grünen uniformen kubischen B-Spline über dieselben Punkte. „Zurücksetzen“ stellt das Standardlayout für den gewählten Grad wieder her.
💡 Wussten Sie schon?
Bézierkurven wurden Anfang der 1960er Jahre unabhängig voneinander von Pierre Bézier bei Renault und Paul de Casteljau bei Citroën entwickelt, beide auf der Suche nach einer Möglichkeit, Karosserieformen mathematisch für die computergestützte Konstruktion zu beschreiben — Jahrzehnte bevor dieselbe Mathematik die Buchstabenformen auf dieser Seite definierte.
Häufig gestellte Fragen
Was ist der De-Casteljau-Algorithmus?
Der De-Casteljau-Algorithmus wertet eine Bézierkurve an einem gegebenen t aus, indem wiederholt linear zwischen benachbarten Kontrollpunkten interpoliert wird. Für eine kubische Kurve (4 Punkte) sind drei Interpolationsrunden nötig, um die Punkte auf den einzelnen Punkt B(t) auf der Kurve zu reduzieren; die farbigen Linien in der Simulation zeigen jede dieser Runden, während sie geschehen.
Warum verläuft die Kurve durch den ersten und letzten Kontrollpunkt, aber nicht durch die mittleren?
Die Kurve ist ein gewichteter Durchschnitt aller Kontrollpunkte, und diese Gewichte (die Bernstein-Polynome) fallen an jedem Punkt außer P₀ bei t=0 und Pₙ bei t=1 auf null ab. Jeder andere Kontrollpunkt zieht die Kurve nur zu sich hin, ohne dass die Kurve ihn je direkt berührt, weshalb P₁ bis Pₙ₋₁ abseits der Kurve liegen, während P₀ und Pₙ auf ihr liegen.
Was bewirkt eine Änderung des Grades tatsächlich?
Der Grad-Auswahlschalter legt fest, wie viele Kontrollpunkte die Kurve definieren: Grad 1 verwendet 2 Punkte und zeichnet eine gerade Linie, Grad 2 verwendet 3 Punkte für einen sanften Bogen, und die Grade 3 bis 5 fügen zunehmend mehr Punkte und mehr mögliche Biegungen hinzu. Kurven höheren Grades können stärker schwingen, sind aber schwerer vorhersehbar zu formen — einer der Gründe, warum kubische Kurven (Grad 3) zum Industriestandard wurden.
Wie unterscheidet sich die Bézierkurve vom hier gezeigten B-Spline?
Die orangefarbene Kurve ist eine echte Bézierkurve, bei der jeder Kontrollpunkt die gesamte Form beeinflusst — eine Eigenschaft namens globale Kontrolle. Der grüne B-Spline, der über den Vergleichsschalter angezeigt wird, wird aus denselben Punkten mit einer anderen Technik konstruiert, einem uniformen kubischen B-Spline, bei dem jeder Punkt nur einen lokalen Abschnitt der Kurve beeinflusst, sodass das Verschieben eines Punktes den Rest weitgehend unverändert lässt.
Was stellt der Parameter t eigentlich dar?
t ist der Parameter der Kurve und läuft von 0 bis 1. Er ist weder Zeit noch die entlang der Kurve zurückgelegte Strecke; er ist einfach eine Eingabe für die Interpolationsformel. Das Bewegen des Reglers von 0 auf 1 lässt den Punkt B(t) vom ersten zum letzten Kontrollpunkt wandern, wenngleich nicht notwendigerweise mit konstanter Geschwindigkeit entlang der Kurve selbst.
Ziehen Sie Kontrollpunkte und schreiten Sie durch die De-Casteljau-Konstruktion, um zu sehen, wie eine Bézierkurve aufgebaut wird, und vergleichen Sie sie dann mit einem B-Spline desselben Grades.
3D · Three.js / WebGL-Renderer · Ziel: 60 FPS · läuft vollständig clientseitig, keine Installation nötig