Nerding Out mit Bezier-Kurven

Seit einigen Tagen versuche ich, meine eigene kleine JavaScript-Animationsbibliothek zu schreiben. Ich weiß, dass ich weiß, dass sich niemand wirklich für eine neue Animationsbibliothek interessiert, aber hey, der Punkt ist, dass ich dabei auf Bezier-Kurven gestoßen bin. Ich habe ein paar Stunden lang recherchiert und versucht, sie zu verstehen. Dabei bin ich auf diesen neuen Artikel gestoßen - „Mathematische Intuition hinter Bezier-Kurven“, der auch die Inspiration für diesen Artikel ist. Es ist mathematisch und richtet sich anscheinend an kluge Leute, daher hatte ich es ziemlich schwer, mich mit dem Konzept zu beschäftigen. Aber zum Glück habe ich es am Ende getan und dies führte dazu, dass ich eine Reihe cooler neuer Dinge über Bezier-Kurven lernte, die ich sehr freue, mit Ihnen zu teilen.

Was du lernen wirst

Ich beginne mit einer Einführung in Kurven, was sie sind, warum sie cool sind, ihre mathematische Darstellung. Mach dir aber keine Sorgen um die Mathematik, um ehrlich zu sein, ich lutsche irgendwie an der Mathematik, also muss ich Wege finden, um es mir selbst zu erklären, und ich bin mir sicher, dass „die Wege“ auch für dich funktionieren werden :).

Als nächstes gehen wir zu den Bezier-Kurven über. Was sie sind und was sie anders macht. Ihre mathematische Formel.

Gegen Ende werden wir unsere eigene kleine Bezier-Kurvenzeichnungs-Engine in JavaScript und SVG erstellen. Wie cool ist das?

Kurven

Ich muss hier keine formale Definition der Kurve geben, oder? Alle diese Linien sind Kurven, sehen Sie sie sich an

Kurven sind ziemlich süß, sie können eine Reihe von Dingen darstellen. Wie zum Beispiel zeigt die folgende Kurve die Anzahl meiner Twitter-Follower im Zeitverlauf.

Okay, okay, das sieht aus wie eine zufällig gekritzelte Linie. Lassen Sie mich einen Kontext hinzufügen.

Es sollte jetzt eine bessere Vorstellung davon geben, was es darstellt. Auf der horizontalen Achse ist die Anzahl der Tage seit meinem Beitritt zu Twitter und auf der vertikalen Achse die Anzahl der Follower, die ich gewonnen habe.

An meinem ersten Tag auf Twitter hatte ich 0 Follower, dann nahm es langsam zu, ich verlor einige, gewann einige und in der zweiten Hälfte, wie Sie sehen, habe ich eine Reihe neuer Follower gewonnen. Dies ist nicht die einzige Information, die wir aus dieser Kurve entschlüsseln können. Ich kann auch die genaue Anzahl der Follower herausfinden, die ich an einem bestimmten Tag hatte. Es geht nur darum, zwei Linien zu zeichnen.

Angenommen, ich möchte wissen, wie viele Follower ich am 60. Tag hatte.

Ich zeichne eine vertikale Linie von 60 auf der horizontalen Achse und dann von dem Punkt, an dem diese Linie die Kurve schneidet, eine horizontale Linie. Diese horizontale Linie schneidet die vertikale Achse (Achse mit Anzahl der Follower) an einem Punkt. Der Wert dieses Punktes auf der vertikalen Achse gibt mir die genaue Anzahl der Follower an, die ich am 60. Tag hatte, nämlich 126.

Wo sich nun die beiden roten Linien schneiden, wird ein Punkt genannt . In einem zweidimensionalen Diagramm wird ein Punkt wie in unserem Twitter-Follower-Diagramm eindeutig durch zwei Werte identifiziert, seine horizontale Koordinate ( x ) und seine vertikale Koordinate ( y ). Daher reicht das Schreiben (x, y) aus , um einen Punkt darzustellen. In unserem Fall kann der rote Punkt, an dem sich die beiden roten Linien schneiden, als (60, 126) geschrieben werden.

(60 = x / horizontale Koordinate, 126 = y / vertikale Koordinate)

Okay, was für ein Punkt ist, das wusstest du schon. Lassen Sie uns über die Kurve sprechen, die eigentlich eine Sammlung vieler solcher Punkte ist, nicht wahr?

Sie nehmen eine Reihe von Daten wie am 0. Tag 0 Follower, 1. Tag 50 Follower… 10. Tag 76 Follower… 100. Tag 500 Follower… und so weiter. Sie konvertieren diese Daten in Punkte (0, 0) (1, 50)… (10, 76)… (100, 500)… Sie zeichnen die Punkte im Diagramm, verbinden sie miteinander und haben dort eine Kurve.

Für eine Kurve benötigen Sie also Punkte und für Punkte entsprechende x- und y-Werte. Achten Sie daher jetzt genau darauf, dass eine Kurve eindeutig durch etwas dargestellt werden kann, das für uns x- und / oder y-Werte ausspucken kann. Dieses „Etwas“ nennen wir in der Mathematik eine Funktion.

In der Mathematik gibt es viele Standardfunktionen. Betrachten Sie die Sinusfunktion .

In solchen Funktionen haben wir die Wahl zwischen x. Wir geben ihm ein x , es gibt uns ein y . Und zusammen bilden wir einen Punkt (x, y). Wir geben ihm ein weiteres x, es gibt uns ein weiteres y, und so weiter erhalten wir eine Sammlung von Punkten, wir zeichnen sie und erhalten eine einzigartige Form.

Eine Funktion kann auch in parametrischer Form dargestellt werden . In parametrischer Form müssen wir keinen Teil der Punktkoordinate wie im vorherigen Beispiel (x) angeben. Stattdessen geben wir einen Parameter / eine Variable an, die im Allgemeinen als t geschrieben wird, und für jedes t erhalten wir sowohl x- als auch y- Koordinaten. Kurz gesagt, wir geben ein t an, wir erhalten einen Punkt.

Sie werden wissen wollen, was parametrische Form ist, wenn wir über die Mathematik hinter Bezier-Kurven sprechen.

Bezierkurven

Bezierkurven sind ganz besondere Kurven. Die Mathematik und die Idee dahinter haben mich umgehauen und du solltest dich darauf vorbereiten, auch umgehauen zu werden.

Da Sie dies lesen, gehe ich davon aus, dass Sie Designer oder Entwickler sind und sich zuvor mit Bezier-Kurven befasst haben, insbesondere mit Cubic Bezier-Kurven. Wir werden in einer Sekunde zu den Cubic Bezier-Kurven gelangen. Jetzt werden diese Kurven an verschiedenen Stellen verwendet, um Vektorgrafiken, Animationspfade, Animationserleichterungskurven usw. zu erstellen, nur weil sie so einfach zu steuern sind . Sie müssen nicht viel Mathe kennen, überhaupt keine, um diese Kurven Ihren Launen anzupassen. Denken Sie, wenn es keine Bezier-Kurven gäbe und die Leute einzigartige mathematische Funktionen für Kurven entwickeln müssten, um beispielsweise Vektorgrafiken wie beispielsweise Schriftarten zu zeichnen, ein Albtraum.

Mathematik ?

Okay, Zeit für etwas Mathe. Ich beginne mit der allgemeinen Formel für Bezier-Kurven, die auf den ersten Blick ziemlich entmutigend ist, aber wir werden uns auf den Weg machen.

„Whoa! Whoa! Whoa! Einstein! ”. Hey, warte, klick nicht weg. Es ist einfach, schau, ich habe es so bunt gemacht?

Lassen Sie uns anfangen, die Formel aufzuschlüsseln. Sie können die bereits bekannten Teile überspringen.

B (t)

B, weil es eine B ezier-Kurve ist. Wie bereits in dem Artikel über die parametrische Form von Kurven erwähnt, ist t ein Parameter. Sie stecken t ein und raus kommt x und y , ein Punkt. Wir werden bald sehen, wie das mit der obigen Gleichung funktioniert. Es ist gut zu erwähnen, dass für Bezier-Kurven der Wert von t zwischen 0 und 1 liegen sollte, beide eingeschlossen.

Σ / Sigma

Dieses Symbol Σ wird in der Mathematik als Summationsoperator bezeichnet. Die Funktionsweise ist wie folgt: Rechts neben diesem Symbol befindet sich ein Ausdruck mit einer Variablen i, und i kann nur ganzzahlige Werte enthalten. Oben und unten auf dem Symbol schreiben wir die Grenzen von i. Für jeden Wert von i wird der Ausdruck rechts ausgewertet und zur Summe addiert, bis i n erreicht.

Hier sind einige Beispiele.

Nur eine kürzere Notation für etwas längeres.

Okay, es sieht so aus, als ob wir mit Sigma klar sind.

nCi

Dieses C hier ist das C aus Permutationen und C- Kombinationen. Lassen Sie uns eine spontane Kombinationsstunde machen. In der Formel ist dieser Teil ein sogenannter Binomialkoeffizient. Die Art und Weise, nCi zu lesen, ist wie folgt: n Wählen Sie i. Das heißt, wenn n Elemente auf wie viele Arten gegeben sind, können Sie i Elemente daraus auswählen (n ist immer größer oder gleich i). Okay, das hätte vielleicht nicht viel Sinn gemacht. Betrachten Sie dieses Beispiel: Ich habe 3 Elemente, einen Kreis, ein Quadrat und ein Dreieck. Daher ist hier n = 3. Auf wie viele Arten kann ich 2 (i = 2) Elemente aus den 3 auswählen. In der Sprache der Mathematik würde dies als 3C2 geschrieben werden (3 Wählen Sie 2). Die Antwort ist 3.

Ähnlich,

Und wenn i 0 ist, gibt es nur eine Möglichkeit, 0 Elemente aus n, 1 auszuwählen, um überhaupt keine auszuwählen.

Anstatt Skizzen zu zeichnen und die Antwort auf einen bestimmten Kombinationsausdruck herauszufinden, gibt es diese verallgemeinerte Formel.

P sub i

Dies ist das wichtige Stück. In der allgemeinen Formel für die Bezier-Kurve gibt es t, i und n. Wir haben nicht wirklich angesprochen, was n ist. n ist der sogenannte Grad der Bezier-Kurve. n entscheidet darüber, ob eine Bezier-Kurve linear oder quadratisch oder kubisch oder etwas anderes ist.

Wenn Sie zuvor das Stiftwerkzeug verwendet haben, klicken Sie auf zwei unterschiedliche Stellen, um zwei unterschiedliche Punkte zu erstellen, und steuern dann die Kurve, die zwischen den beiden Punkten gebildet wird, mithilfe von Ziehpunkten. Eine Bezier-Kurve hat immer mindestens zwei Ankerpunkte, und die verbleibenden sind Kontrollpunkte, mit denen die Form der Kurve gesteuert wird. Was Sie als Handles bezeichnen, sind nur die Kontrollpunkte, die durch eine Linie mit einem Ankerpunkt verbunden sind. Sie dienen lediglich dazu, ein besseres mentales Modell bereitzustellen. Wenn Sie also die Griffe anpassen, ändern Sie in Wirklichkeit einfach die Koordinaten der Kontrollpunkte.

Lassen Sie uns das gesamte Zubehör loswerden und uns auf den Kern konzentrieren.

Die Kurve, die Sie im obigen Bild sehen, ist eine kubische Bezier-Kurve, oder mit anderen Worten, der Grad der oben gezeigten Bezier-Kurve ist 3, oder in der allgemeinen Formel für Bezier-Kurven stecken Sie n = 3 ein.

n = 1 ergibt eine lineare Bezier-Kurve mit zwei Ankerpunkten P0 und P1 und keinen Kontrollpunkten, sodass sie im Wesentlichen eine gerade Linie ist.

n = 2 ergibt eine quadratische Bezierkurve mit zwei Ankerpunkten P0 und P2 und einem Kontrollpunkt P1

und in ähnlicher Weise ergibt n = 3 eine kubische Bezier-Kurve mit zwei Ankerpunkten P0 und P3 und zwei Kontrollpunkten P1 und P2. Je höher das n, desto komplizierter können Formen gezeichnet werden.

Nun werden wir aus der allgemeinen Gleichung die Gleichung für die kubische Bezier-Kurve bilden, bei der n = 3 in die allgemeine Formel eingesetzt wird. Die Gleichung, die wir erhalten, befindet sich in der Variablen t, die, wie bereits erwähnt, ein Parameter ist, dessen Wert zwischen 0 und 1 variiert. Für die Gleichung benötigen wir außerdem 4 Pis (gelesen: Pipi-Augen) P0, P1, P2 und P3. Die Wahl dieser Punkte liegt bei uns. Wenn wir Vektorgrafiken zeichnen, wählen wir mit dem Stiftwerkzeug die Position der Ankerpunkte und der Kontrollpunkte, nicht wahr? Nach den Änderungen sieht unsere Gleichung für die Cubic Bezier-Kurve ungefähr so ​​aus.

Wir verwenden hier eine kleine Kürze, in Wirklichkeit hat jeder Punkt (P) zwei Koordinaten x und y, und auch wenn wir t an die allgemeine Gleichung übergeben, sollen wir einen Punkt erhalten, der auch x- und y-Koordinaten hat. Daher können wir die obige Gleichung als schreiben

Sie werden etwas ganz Besonderes an diesen Gleichungen erleben.

Zusammenfassend ist die erwähnte Gleichung die parametrische Form der Bezier-Kurve mit dem Parameter t, der Werte zwischen 0 und 1 enthalten kann. Eine Kurve ist eine Sammlung von Punkten. Jedes eindeutige t, das Sie an B übergeben, ergibt einen eindeutigen Punkt, der die gesamte Bezier-Kurve aufbaut.

Das Magische an der Gleichung ist, dass wenn t = 0, B (0) = P0 und wenn t = 1, B (1) = P3, die Extremwerte von t, 0 und 1 die extremsten Punkte der ergeben Kurve, die natürlich die Ankerpunkte sind. Dies gilt nicht nur für kubische Bezier-Kurven für eine Kurve vom Grad n B (0) = P0 und B (1) = Pn.

Für jeden anderen Wert von t zwischen 0 und 1 (z. B. t = 0,2 in der obigen Abbildung) erhalten Sie einen Punkt, der die Kurve aufbaut.

Da die gesamte Gleichung von der Position der Pis (Pee-Augen) abhängt, ändert eine Änderung ihrer Position die Form der Kurve. Und so funktionieren Bezier-Kurven.

Nachdem wir die Mathematik hinter den Bezier-Kurven kennen, können wir dieses Wissen nutzen.

Ich habe ein einfaches JavaScript-Programm erstellt, das eine kubische Bezier-Kurve rendert. Es gibt keine Benutzeroberfläche, mit der ich interagieren kann, weil ich nicht wollte, dass die Logik im gesamten Benutzeroberflächencode verschwindet, und weil ich faul bin. Das heißt aber nicht, dass du nicht damit interagieren kannst :).

War das etwas zu viel, um es aufzunehmen? Wir haben zunächst definiert, was Kurven sind. Von dort sind wir zu Punkten übergegangen und wie sie die Bausteine ​​einer Kurve sind. Dann gingen wir zu den Bezier-Kurven und verstanden die Mathematik, um Punkte zu finden, die eine Bezier-Kurve bilden. Ich hoffe, Sie haben etwas gelernt und diesen Artikel schlauer hinterlassen, als Sie ihn gelesen haben.

Den Code für die kleine benutzerdefinierte Cubic Bezier-Engine finden Sie in diesem GitHub-Repo.

Update: Der Generator kann jetzt eine Bezier-Kurve beliebigen Grades erzeugen und nicht nur kubische Bezier-Kurven :).

Lust auf mehr? Ich veröffentliche regelmäßig auf meinem Blog unter nashvail.me. Wir sehen uns dort, haben Sie einen guten!