Bézier-Kurven-Explorer

Erkunde Bézier-Kurven interaktiv. Ziehe Kontrollpunkte und beobachte die de-Casteljau-Konstruktion.

Interaktive Simulation wird geladen...

Kein mittlerer Kontrollpunkt wird je erreicht 🖖

Zieh einen inneren Kontrollpunkt weit weg: Die Kurve neigt sich dorthin, kommt aber nie an. Das Bernstein-Gewicht eines inneren Punktes hat eine harte Obergrenze – bei den kubischen Voreinstellungen ist es b₁,₃(t) = 3t(1−t)², mit einem Maximum bei t = 1/3 von nur 4/9. Die Endpunkte tragen dagegen bei t = 0 und t = 1 genau das Gewicht 1, weshalb die Kurve exakt auf ihnen beginnt und endet. Mit höherem Grad sinkt der Einfluss der inneren Punkte weiter: Bei der Voreinstellung vom Grad 5 liegen die Grenzen bei 0,410 und 0,346. Deshalb verketten Designer kurze kubische Stücke statt eine Kurve hohen Grades anzupassen – je mehr Kontrollpunkte, desto weniger kann jeder einzelne bewirken.

Ecken abschneiden durch wiederholte Mittelwerte 🖖

Hinter der glatten Kurve steckt eine einzige bescheidene Operation, immer wieder ausgeführt: der geradlinige Mittelwert zweier Punkte. Der Algorithmus von de Casteljau nimmt deine Kontrollpunkte, bestimmt auf jeder Verbindungsstrecke den Punkt im Bruchteil t und wiederholt dies mit den neuen Punkten, bis ein einziger Punkt übrig bleibt — das ist B(t). Zieh den Regler und sieh zu, wie das ganze Gerüst zu einem Punkt zusammenfällt, der die Kurve nachzeichnet.

Nach dem falschen Erfinder benannt 🖖

Der Algorithmus, den dieses Tool animiert, wurde 1959 von Paul de Casteljau bei Citroën entwickelt — drei Jahre bevor Pierre Bézier ähnliche Arbeiten beim Konkurrenten Renault veröffentlichte. Citroën behandelte de Casteljaus Forschung als Betriebsgeheimnis und ließ sie unveröffentlicht, sodass die Kurven stattdessen Béziers Namen erhielten. Beide Ingenieure formten Blech für Autos — die Mathematik von Schriften und Animation entstand in der Fabrikhalle.

BÉZIER-KURVEN — WAS DIE KONTROLLPUNKTE ERZWINGEN KÖNNEN UND WAS NICHT

Welchen Bézier-Fall zeichnest du?

Wie viele Kontrollpunkte du verwendest, entscheidet, welche Formen überhaupt erreichbar sind; wo du sie hinsetzt, entscheidet, welche davon du bekommst. Drei Punkte können nur ein Stück einer Parabel zeichnen — kein S, keine Spitze, keine Schleife, ganz gleich, was du mit dem mittleren tust. Mit einem vierten wird alles dreies möglich, getrennt durch Grenzen, die man ausrechnen kann. Die drei Kubiken unten teilen P0, P1 und P2 und unterscheiden sich nur in P3 — genau dem Punkt, der eine Kubik von der Schleife über die Spitze bis zum gewöhnlichen S trägt.

Quadratisch — drei Punkte, und immer eine Parabel κ ≠ 0 ∀t
Kubisch mit Wendepunkt — das S, das eine Quadratik nicht kann κ(0.5) = 0
Spitze — wo die Kurve stehen bleibt und umkehrt B′(0.5) = (0, 0)
Schleife — ein Punkt, zweimal besucht B(0.211) = B(0.789)
Grad 5 — mehr Punkte, weniger Kontrolle min |B − P₃| = 134

01

Quadratisch — drei Punkte, und immer eine Parabel

Was du weißt: Drei Kontrollpunkte, Grad 2. Die Kurve verlässt P0 genau in Richtung P1 und erreicht P2 genau aus Richtung P1; der einzige mittlere Punkt ist der ganze Hebel, den du hast.

Woran du es erkennst: κ ≠ 0 ∀t

Rechenbeispiel: P0 (50, 250), P1 (250, 30), P2 (450, 250) → B(0,50) = (250, 140), genau in der Mitte zwischen P1 und dem Mittelpunkt der Sehne (250, 250). Näher als 110 px kommt die Kurve an P1 nie heran.

Diesen Fall öffnen: Quadratisch
Quadratisch — drei Punkte, und immer eine Parabel. Der Scheitel liegt bei (250, 140) — genau in der Mitte zwischen Kontrollpunkt und Sehne. Drei Kontrollpunkte, Grad 2. Die Kurve verlässt P0 genau in Richtung P1 und erreicht P2 genau aus Richtung P1; der einzige mittlere Punkt ist der ganze Hebel, den du hast.
Der Scheitel liegt bei (250, 140) — genau in der Mitte zwischen Kontrollpunkt und Sehne.

02

Kubisch mit Wendepunkt — das S, das eine Quadratik nicht kann

Was du weißt: Vier Kontrollpunkte, Grad 3, wobei P1 über die Sehne zieht und P2 darunter. Die Kurve krümmt sich erst in die eine, dann in die andere Richtung.

Woran du es erkennst: κ(0.5) = 0

Rechenbeispiel: P0 (50, 250), P1 (150, 50), P2 (350, 250), P3 (450, 50) → das Kreuzprodukt B′ × B″ fällt geradlinig von positiv bei t = 0 auf negativ bei t = 1 und geht bei t = 0,50 durch Null, sodass der einzige Wendepunkt genau bei B(0,50) = (250, 150) liegt.

Diesen Fall öffnen: Kubisches S
Kubisch mit Wendepunkt — das S, das eine Quadratik nicht kann. Die Krümmung geht bei t = 0,50 durch Null: der Bogen kehrt sich bei (250, 150) um. Vier Kontrollpunkte, Grad 3, wobei P1 über die Sehne zieht und P2 darunter. Die Kurve krümmt sich erst in die eine, dann in die andere Richtung.
Die Krümmung geht bei t = 0,50 durch Null: der Bogen kehrt sich bei (250, 150) um.

03

Spitze — wo die Kurve stehen bleibt und umkehrt

Was du weißt: Vier Punkte, bei denen P1 und P2 so übereinander geworfen sind, dass beide Komponenten der Geschwindigkeit im selben Augenblick auslaufen. Grad 3.

Woran du es erkennst: B′(0.5) = (0, 0)

Rechenbeispiel: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (400, 200) → x′(t) = 900(1 − 2t)² und y′(t) = 450(2t − 1), also B′(0,50) = (0, 0). Die Kurve erreicht (250, 87,5), hält an und läuft in die Richtung zurück, aus der sie kam.

Diesen Fall öffnen: Spitze
Spitze — wo die Kurve stehen bleibt und umkehrt. B′(0,5) = (0, 0): der zeichnende Punkt hält bei (250, 87,5) an und kehrt um. Vier Punkte, bei denen P1 und P2 so übereinander geworfen sind, dass beide Komponenten der Geschwindigkeit im selben Augenblick auslaufen. Grad 3.
B′(0,5) = (0, 0): der zeichnende Punkt hält bei (250, 87,5) an und kehrt um.

04

Schleife — ein Punkt, zweimal besucht

Was du weißt: Genau P0, P1 und P2 der Spitze, aber P3 von x = 400 auf x = 280 zurückgezogen, sodass sich das Kontrollpolygon schärfer selbst kreuzt. Grad 3.

Woran du es erkennst: B(0.211) = B(0.789)

Rechenbeispiel: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (280, 200) → B(t) = B(1 − t) bei t = ½ ∓ √3/6, also t ≈ 0,211 und t ≈ 0,789, und beide landen genau auf (220, 125).

Diesen Fall öffnen: Kubische Schleife
Schleife — ein Punkt, zweimal besucht. Zwei Parameter, ein Punkt: t ≈ 0,211 und t ≈ 0,789 ergeben beide (220, 125). Genau P0, P1 und P2 der Spitze, aber P3 von x = 400 auf x = 280 zurückgezogen, sodass sich das Kontrollpolygon schärfer selbst kreuzt. Grad 3.
Zwei Parameter, ein Punkt: t ≈ 0,211 und t ≈ 0,789 ergeben beide (220, 125).

05

Grad 5 — mehr Punkte, weniger Kontrolle

Was du weißt: Sechs Kontrollpunkte, Grad 5. Jeder einzelne hat bei jedem t ein Gewicht ungleich null, ein Anstoßen an einem Punkt verändert also die ganze Kurve.

Woran du es erkennst: min |B − P₃| = 134

Rechenbeispiel: Die sechs Punkte reichen in y von 20 bis 280, die Kurve selbst deckt nur y von 150 bis 250 ab, und an P3 (300, 20) kommt sie nie näher als 134 px heran. Bei t = 0,5 lauten die Gewichte 0,031, 0,156, 0,313, 0,313, 0,156, 0,031 — jeder Punkt zählt, keiner bestimmt.

Diesen Fall öffnen: Grad 5
Grad 5 — mehr Punkte, weniger Kontrolle. Die Kurve steigt nie über y = 150, während ihre eigenen Kontrollpunkte bis y = 20 reichen. Sechs Kontrollpunkte, Grad 5. Jeder einzelne hat bei jedem t ein Gewicht ungleich null, ein Anstoßen an einem Punkt verändert also die ganze Kurve.
Die Kurve steigt nie über y = 150, während ihre eigenen Kontrollpunkte bis y = 20 reichen.
Quellen (3)
  • The Bernstein basis and its weight bounds: Farouki, R. T. (2012). "The Bernstein polynomial basis: A centennial retrospective." Computer Aided Geometric Design 29(6), 379–419.
  • The algorithm the tool animates, and the naming: Farin, G. Curves and Surfaces for CAGD: A Practical Guide, 5th ed. Morgan Kaufmann, 2002 — de Casteljau’s algorithm, the convex-hull property and endpoint interpolation. ISBN 978-1-55860-737-8.
  • De Casteljau’s own account of the unpublished Citroën work: de Casteljau, P. (1999). "De Casteljau’s autobiography: My time at Citroën." Computer Aided Geometric Design 16(7), 583–586. No DOI is linked here because the record could not be resolved to one.

Aufgaben vollständig gelöst

  1. Der Kurvenpunkt bei t = 0,50, an dem die Biegung in eine Richtung endet 6 Schritte

    Die kubische Kurve auf der Seite hat die Kontrollpunkte P0 = (50, 250), P1 = (150, 50), P2 = (350, 250), P3 = (450, 50) in einem Frame der Größe 500 × 300 mit nach unten gemessenem y. Das Bedienfeld gibt den Kurvenpunkt bei t = 0,50 aus. Zeigen Sie, dass dieser Punkt die einzige Stelle ist, an der die Kurve aufhört, sich nach der einen Seite zu krümmen, und beginnt, sich nach der anderen zu krümmen.

    1. Bei t = 1/2 betragen die vier Bernstein-Gewichte 1/8, 3/8, 3/8, 1/8, sodass die beiden inneren Punkte dreimal so stark ins Gewicht fallen wie die Endpunkte. Das ist schon die gesamte Arithmetik: x = (50 + 450 + 1050 + 450)/8 und y = (250 + 150 + 750 + 50)/8.

    2. Die Krümmung entspricht der zweiten Ableitung, und das zweimalige Differenzieren einer kubischen Funktion ergibt einen in t linearen Ausdruck. Jeder der beiden Vektoren, aus denen er aufgebaut ist, ist eine zweite Differenz von drei aufeinanderfolgenden Kontrollpunkten.

    3. Berechnet man diese, erweisen sie sich als gleich groß und entgegengesetzt gerichtet — eine Eigenschaft des Kontrollpolygons, die bereits bekannt ist, bevor irgendeine Kurve gezeichnet wird.

    4. Die zweite Ableitung entspricht also einer festen Richtung, (100, 400), skaliert mit 1 − 2t. Beide ihrer Komponenten erreichen 0 bei t = 1/2 und bei keinem anderen t im Intervall.

    5. Eine Beschleunigung von null allein macht noch keinen Wendepunkt aus; eine Kurve, die abrupt anhält, weist diese ebenfalls auf. Überprüfen Sie daher die Geschwindigkeit. Sie beträgt (450, 0): waagerecht und nachdrücklich nicht null, sodass sich der Punkt durch die Flachstelle hindurchbewegt, anstatt in ihr umzukehren.

    6. Die Krümmung hat das Vorzeichen von x′y″ − y′x″. Multipliziert man dies aus, zieht sich die Klammer zusammen — die beiden von t abhängigen Teile kürzen sich zu einer Konstanten 3 weg —, sodass ein Zähler übrig bleibt, der exakt proportional zu 1 − 2t ist. Eine in t lineare Größe kreuzt die Null genau einmal, sodass diese kubische Kurve exakt einen Wendepunkt besitzt, und dieser liegt bei t = 1/2.

    Antwort

    (250,0; 150,0) ist der einzige Wendepunkt der Kurve. Seine Lage ist kein Zufall dieser speziellen Zahlen. Die Bedingung, die die zweite Ableitung zu Null machte, P3 − P2 = P1 − P0, lässt sich umformen zu P0 + P3 = P1 + P2 = (500, 300) — und B(t) + B(1 − t) ist selbst eine kubische Bézier-Kurve über den umgekehrten und addierten Kontrollpunkten P0+P3, P1+P2, P2+P1, P3+P0. Alle vier sind derselbe Punkt, sodass diese Summe für jedes t konstant (500, 300) beträgt. Überprüfen Sie es bei einer Vierteldrehung: B(0,25) = (140,625; 162,5) und B(0,75) = (359,375; 137,5) summieren sich genau dazu. Die Kurve ist punktsymmetrisch bezüglich (250,0; 150,0), und eine Form, die nach einer halben Drehung um einen Punkt identisch aussieht, kann sich dort in keine der beiden Richtungen krümmen. Das gestrichelte Kontrollpolygon trägt das gesamte Argument: Sein erstes und sein letztes Segment sind derselbe Vektor, (100, −200), sodass sich der Wendepunkt bereits am Mittelpunkt befindet, bevor die Kurve überhaupt existiert.

  2. Eine Ecke, die bei B(0,50) von differenzierbaren Polynomen gezeichnet wird 6 Schritte

    Der Zustand mit Spitze verwendet P0 = (100, 200), P1 = (400, 50), P2 = (100, 50), P3 = (400, 200), und das Bedienfeld gibt B(0,50) = (250,0; 87,5) aus. Beide Koordinaten sind Polynome in t, sodass die Bewegung beliebig oft differenzierbar ist. Zeigen Sie, dass die von ihr gezeichnete Form an diesem Punkt trotzdem eine Ecke aufweist.

    1. Dieselben Gewichte wie bei jeder kubischen Kurve beim Halbwertsparameter: 1/8, 3/8, 3/8, 1/8. x = (100 + 1200 + 300 + 400)/8 und y = (200 + 150 + 150 + 200)/8.

    2. Die Ableitung einer kubischen Bézier-Kurve wird aus den drei Kanten des Kontrollpolygons aufgebaut, gewichtet mit der quadratischen Bernstein-Basis. Zum Differenzieren werden nie die Punkte selbst benötigt, sondern nur die Schritte dazwischen.

    3. Hier verläuft die mittlere Kante rückwärts. P1 − P0 und P3 − P2 zeigen beide nach rechts, während P2 − P1 um 300 nach links zeigt — und sein vertikaler Anteil ist 0, sodass er in y nichts aufheben kann.

    4. Fasst man die Komponenten zusammen, reduzieren sich beide auf einen einzigen Term. Die horizontale Geschwindigkeit ist ein perfektes Quadrat, wird also niemals negativ; die vertikale Geschwindigkeit ist linear und wechselt tatsächlich das Vorzeichen. Sie verschwinden beide bei t = 1/2, was bedeutet, dass der Spurpunkt zu einem vollständigen Stillstand kommt.

    5. Ein Stillstand ist nicht automatisch eine Ecke — die Richtung könnte die Pause überstehen. Bildet man das Verhältnis, strebt es von beiden Seiten gegen 0, sodass die Tangente beim Hineinlaufen vertikal steht und beim Herauslaufen ebenfalls vertikal steht, wobei y′ sein Vorzeichen darüber wechselt. Die Richtung kehrt sich um 180° um.

    6. Wie bei der zweiten Ableitung ist der Stillstand eine Aussage über das Polygon. B′(1/2) ergibt drei Viertel von (P2 + P3) − (P0 + P1), was genau dann verschwindet, wenn der Mittelpunkt der ersten Kante und der Mittelpunkt der letzten Kante derselbe Punkt sind. Beide sind (250, 125).

    Antwort

    Der Spurpunkt kommt bei (250,0; 87,5) abrupt zum Stillstand und läuft in die entgegengesetzte Richtung wieder heraus. An der Parametrisierung ist nichts rau — x(t) und y(t) sind kubische Funktionen, unendlich oft differenzierbar —, und dennoch weist die Spur eine scharfe Ecke auf. Aus diesem Grund wird die Stetigkeit von Kurven zweifach eingestuft: C¹ fragt, ob die Geschwindigkeit stetig ist, G¹ fragt, ob die Richtung es ist, und eine Geschwindigkeit von null erfüllt das erste, während sie das zweite zerstört. Es gibt auch eine messbare Konsequenz. Da y′ = 450(2t − 1) vor dem Stillstand negativ und danach positiv ist, ist y = 87,5 der kleinste Wert, den die Kurve jemals annimmt, sodass die Spitze der höchste Punkt auf dem Bildschirm ist und die gesamte Kurve darunter gefangen ist. P1 und P2 liegen bei y = 50; die Kurve nähert sich ihnen bis auf 37,5 an und nicht weiter, was der Preis dafür ist, an einer kubischen Kurve mit nur zwei inneren Griffen zu ziehen.

Beispielaufgaben

  • Quadratisch - Quadratisch: Grad 2, Scheitel bei B(0,50) = (250, 140)
  • Kubisches S - Kubisches S: Wendepunkt bei B(0,50) = (250, 150)
  • Spitze - Spitze: die Tangente verschwindet bei B(0,50) = (250, 87,5)
  • Kubische Schleife - Kubische Schleife: Grad-3-Kurve, die sich selbst kreuzt
  • Grad 5 - Grad 5 aus 6 Kontrollpunkten