Free Press

Bezierkurven werden in der Computergrafik zum Zeichnen von Formen, für CSS-Animationen und an vielen anderen Stellen verwendet.

Sie sind eine sehr einfache Sache, es lohnt sich, sie einmal zu studieren und sich dann in der Welt der Vektorgrafik und der fortgeschrittenen Animationen wohl zu fühlen.

Kontrollpunkte

Eine Bezierkurve wird durch Kontrollpunkte definiert.

Es können 2, 3, 4 oder mehr sein.

Zum Beispiel, zwei Punkte Kurve:

Drei Punkte Kurve:

Vier Punkte Kurve:

Wenn man sich diese Kurven genau ansieht, fällt einem sofort auf:

1. Die Punkte liegen nicht immer auf der Kurve. Das ist ganz normal, später werden wir sehen, wie die Kurve aufgebaut ist.

2. Die Reihenfolge der Kurven ist gleich der Anzahl der Punkte minus eins.Für zwei Punkte haben wir eine lineare Kurve (das ist eine gerade Linie), für drei Punkte – quadratische Kurve (parabolisch), für vier Punkte – kubische Kurve.

3. Eine Kurve liegt immer innerhalb der konvexen Hülle von Kontrollpunkten:

   

Aufgrund dieser letzten Eigenschaft ist es in der Computergrafik möglich, Schnittpunkttests zu optimieren. Wenn sich konvexe Hüllen nicht schneiden, dann schneiden sich auch Kurven nicht. Wenn man also zuerst prüft, ob sich die konvexen Hüllen schneiden, kann man sehr schnell zu dem Ergebnis „keine Schnittmenge“ kommen. Die Überprüfung des Schnittpunkts von konvexen Hüllen ist viel einfacher, da es sich um Rechtecke, Dreiecke usw. handelt (siehe das Bild oben), also um viel einfachere Figuren als die Kurve.

Der Hauptwert von Bezier-Kurven für das Zeichnen – durch das Verschieben der Punkte ändert sich die Kurve auf intuitiv offensichtliche Weise.

Versuchen Sie im folgenden Beispiel, die Kontrollpunkte mit der Maus zu verschieben:

Wie Sie sehen können, erstreckt sich die Kurve entlang der Tangentiallinien 1 → 2 und 3 → 4.

Nach einiger Übung wird es offensichtlich, wie man die Punkte platziert, um die gewünschte Kurve zu erhalten. Und durch das Verbinden mehrerer Kurven können wir praktisch alles erhalten.

Hier sind einige Beispiele:

De Casteljau’s Algorithmus

Es gibt eine mathematische Formel für Bezier-Kurven, aber darauf gehen wir später ein, dennDe Casteljau’s Algorithmus ist identisch mit der mathematischen Definition und zeigt visuell, wie er konstruiert wird.

Zunächst sehen wir uns das 3-Punkte-Beispiel an.

Hier ist die Demo, und die Erklärung folgt.

Die Kontrollpunkte (1,2 und 3) können mit der Maus bewegt werden. Drücken Sie den „Play“-Knopf, um es auszuführen.

De Casteljau’s Algorithmus zur Erstellung der 3-Punkt Bezier-Kurve:

1. Zeichnen Sie Kontrollpunkte. In der obigen Demo sind sie beschriftet: 1, 2, 3.

2. Baue Segmente zwischen den Kontrollpunkten 1 → 2 → 3. In der obigen Demo sind sie braun.

3. Der Parameter t bewegt sich von 0 nach 1. Im obigen Beispiel wird der Schritt 0.05 verwendet: die Schleife geht über 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Für jeden dieser Werte von t:

   • Auf jedem braunen Segment nehmen wir einen Punkt, der sich im Abstand proportional zu t von seinem Anfang befindet. Da es zwei Segmente gibt, haben wir zwei Punkte.

     Zum Beispiel für t=0 – beide Punkte werden am Anfang der Segmente liegen, und für t=0.25 – auf den 25% der Segmentlänge vom Anfang, für t=0.5 – 50% (die Mitte), für t=1 – am Ende der Segmente.

   • Verbinden Sie die Punkte. In der folgenden Abbildung ist das Verbindungssegment blau dargestellt.

Für t=0.25	Für t=0.5

1. Nun nimm im blauen Segment einen Punkt auf der Strecke, die proportional zum gleichen Wert von t ist. Das heißt, für t=0.25 (das linke Bild) haben wir einen Punkt am Ende des linken Viertels des Segments, und für t=0.5 (das rechte Bild) – in der Mitte des Segments. Auf den Bildern oben ist dieser Punkt rot.

2. Da t von 0 bis 1 verläuft, fügt jeder Wert von t der Kurve einen Punkt hinzu. Die Menge dieser Punkte bildet die Bezier-Kurve. Sie ist rot und parabelförmig auf den Bildern oben.

Das war ein Prozess für 3 Punkte. Aber das gleiche gilt für 4 Punkte.

Die Demo für 4 Punkte (Punkte können mit der Maus verschoben werden):

Der Algorithmus für 4 Punkte:

• Verbinden Sie die Kontrollpunkte durch Segmente: 1 → 2, 2 → 3, 3 → 4. Es wird 3 braune Segmente geben.
• Für jedes t im Intervall von 0 bis 1:
  • Wir nehmen Punkte auf diesen Segmenten in der Entfernung proportional zu t vom Anfang. Diese Punkte sind verbunden, so dass wir zwei grüne Segmente haben.
  • Auf diesen Segmenten nehmen wir Punkte proportional zu t. Wir erhalten ein blaues Segment.
  • Auf dem blauen Segment nehmen wir einen Punkt proportional zu t. Im obigen Beispiel ist er rot.
• Diese Punkte bilden zusammen die Kurve.

Der Algorithmus ist rekursiv und kann für eine beliebige Anzahl von Kontrollpunkten verallgemeinert werden.

Gegeben N Kontrollpunkte:

1. Wir verbinden sie, um zunächst N-1 Segmente zu erhalten.
2. Dann nehmen wir für jedes t von 0 bis 1 einen Punkt auf jedem Segment im Abstand proportional zu t und verbinden sie. Es entstehen N-2 Segmente.
3. Wiederhole Schritt 2, bis es nur noch einen Punkt gibt.

Diese Punkte bilden die Kurve.

Laufe die Beispiele und halte sie an, um die Segmente und den Aufbau der Kurve deutlich zu sehen.

Eine Kurve, die wie y=1/t aussieht:

Zickzack-Kontrollpunkte funktionieren auch gut:

Eine Schleife zu machen ist möglich:

Eine nicht-glatte Bezier-Kurve (ja, auch das ist möglich):

Wenn etwas in der Algorithmus-Beschreibung unklar ist, schau dir bitte die Live-Beispiele oben an, um zu sehen, wie die Kurve aufgebaut ist.

Da der Algorithmus rekursiv ist, können wir Bezier-Kurven in beliebiger Reihenfolge erstellen, d.h. mit 5, 6 oder mehr Kontrollpunkten. Aber in der Praxis sind viele Punkte weniger nützlich. Normalerweise nehmen wir 2-3 Punkte und kleben für komplexe Linien mehrere Kurven zusammen. Das ist einfacher zu entwickeln und zu berechnen.

Mathematik

Eine Bezier-Kurve kann mit einer mathematischen Formel beschrieben werden.

Wie wir gesehen haben, ist es eigentlich nicht nötig, sie zu kennen, die meisten Leute zeichnen die Kurve einfach, indem sie Punkte mit der Maus bewegen. Aber wenn du dich für Mathematik interessierst – hier ist sie.

Angegeben die Koordinaten der Kontrollpunkte Pi: der erste Kontrollpunkt hat die Koordinaten P1 = (x1, y1), der zweite: P2 = (x2, y2), und so weiter, werden die Koordinaten der Kurve durch die Gleichung beschrieben, die von dem Parameter t aus dem Segment abhängt.

• Die Formel für eine 2-Punkte-Kurve:

  P = (1-t)P1 + tP2

• Für 3 Kontrollpunkte:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• Für 4 Kontrollpunkte:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Das sind Vektorgleichungen. Mit anderen Worten, wir können x und y anstelle von P einsetzen, um die entsprechenden Koordinaten zu erhalten.

Die 3-Punkt-Kurve wird zum Beispiel von den Punkten (x,y) gebildet, die wie folgt berechnet werden:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Anstelle von x1, y1, x2, y2, x3, y3 sollten wir die Koordinaten von 3 Kontrollpunkten einsetzen, und wenn sich t von 0 nach 1 bewegt, erhalten wir für jeden Wert von t (x,y) der Kurve.

Wenn zum Beispiel die Kontrollpunkte (0,0), (0.5, 1) und (1, 0) sind, werden die Gleichungen zu:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Wenn nun t von 0 bis 1 läuft, bildet die Menge der Werte (x,y) für jeden t die Kurve für diese Kontrollpunkte.

Zusammenfassung

Bezier-Kurven werden durch ihre Kontrollpunkte definiert.

Wir haben zwei Definitionen von Bezier-Kurven gesehen:

1. Mit Hilfe eines Zeichenprozesses: De Casteljau’s algorithm.
2. Using a mathematical formulas.

Good properties of Bezier curves:

• We can draw smooth lines with a mouse by moving control points.
• Komplexe Formen können aus mehreren Bezier-Kurven zusammengesetzt werden.

Verwendung:

• In Computergrafik, Modellierung, Vektorgrafik-Editoren. Schriften werden durch Bezier-Kurven beschrieben.
• In der Webentwicklung – für Grafiken auf Canvas und im SVG-Format. Übrigens, die obigen „Live“-Beispiele sind in SVG geschrieben. Sie sind eigentlich ein einziges SVG-Dokument, dem verschiedene Punkte als Parameter gegeben werden. Sie können es in einem separaten Fenster öffnen und die Quelle sehen: demo.svg.
• In der CSS-Animation, um den Pfad und die Geschwindigkeit der Animation zu beschreiben.