7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Das Mathematik- und ActionScript von Kurven: Zeichnen von quadratischen und kubischen Kurven

Read Time: 16 mins
This post is part of a series called You Do The Math.
Understanding Affine Transformations With Matrix Mathematics
The Math and ActionScript of Curves: Roots

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wir sehen Linien, die in vielen Szenarien verwendet werden. Kurven werden auch verwendet, wenn auch vielleicht nicht so häufig - aber das untergräbt ihre Bedeutung nicht! In diesem Tutorial werden wir uns die Kurven, insbesondere die quadratische und die kubische Kurve, sowie einige ihrer häufig verwendeten mathematischen Merkmale genauer ansehen.


Vorschau des Endergebnisses

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden. Ziehen Sie die roten Punkte und sehen Sie, wie sich die Farbverläufe in der Position ändern.

Und hier ist eine weitere Demo mit kubischen Kurven ohne Farbverläufe:


Schritt 1: Kurven

Quadratisch und kubisch werden in jedem dieser Abschnitte vorgestellt. Schauen wir uns also zuerst die Kurvengleichung an. Diese Gleichungen werden in Polynomform geschrieben, beginnend mit dem Term höchsten Grades. Die erste ist die quadratische Gleichung (höchster Grad ist 2); Die zweite ist die kubische Gleichung (der höchste Grad ist 3). \[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\] \[g(x) = Ax^3 + Bx^2 + Cx + D\ ... (eq\ 2)\]

Beachten Sie, dass A, B, C und D reelle Zahlen sind. Nachdem wir uns damit vertraut gemacht haben, versuchen wir, es zu visualisieren. Die grafische Darstellung von Kurven wird unser nächster Versuch sein.


Schritt 2: Kurven zeichnen

Lassen Sie uns zunächst eine quadratische Kurve grafisch darstellen. Ich bin sicher, dass alle Leser in der Matheklasse der High School eine quadratische Kurve grafisch dargestellt haben, aber nur um Ihr Gedächtnis aufzufrischen, präsentiere ich unten Grafiken. Sie werden nebeneinander platziert, um den Vergleich zu erleichtern.

  • Das linke Diagramm verwendet den kartesischen Koordinatenraum
  • Das rechte Diagramm verwendet den Flash-Koordinatenraum
Graphing onto Cartesian and Flash coordinate spaces.Graphing onto Cartesian and Flash coordinate spaces.Graphing onto Cartesian and Flash coordinate spaces.

Der offensichtliche Unterschied ist die invertierte y-Achse im Flash-Koordinatenraum. Sie sehen insgesamt einfach aus, oder? Okay, jetzt können wir auf den Flash-Koordinatenraum zeichnen.


Schritt 3: Quadratische Koeffizienten

Um quadratische Kurven an der richtigen Stelle zu positionieren, müssen wir die entsprechenden Gleichungen verstehen. Die gezeichnete Kurve hängt wirklich von den Koeffizienten der Gleichung ab (im Fall von quadratisch sind dies A, B und C).

Ich habe unten eine Flash-Präsentation eingefügt, damit Sie diese Koeffizienten einfach anpassen und sofortiges Feedback erhalten können.

Um die Auswirkungen einzelner Koeffizienten auf die Gesamtkurve zu untersuchen, schlage ich vor, die folgenden Schritte auszuführen, um mit der obigen Flash-Präsentation zu experimentieren.

  1. Während Sie A und B auf 0 setzen, stellen Sie den Wert von C sowohl auf positive als auch auf negative Werte ein. Sie werden sehen, wie sich die Höhe der Linie ändert.
  2. Stellen Sie nun den Wert von B zwischen positiven und negativen Werten ein. Beobachten Sie, was mit dem Linienverlauf passiert.
  3. Stellen Sie nun den Wert von A zwischen positiven und negativen Werten ein und vergleichen Sie die Ergebnisse.
  4. Stellen Sie dann B wieder zwischen positiv und negativ ein. Beachten Sie, dass die Kurve immer durch den Ursprung schneidet.
  5. Zum Schluss C anpassen. Beobachten Sie die gesamte Kurvenverschiebung entlang der y-Achse.

Eine weitere interessante Beobachtung ist, dass während des zweiten und dritten Schritts des Obigen der Wendepunkt (d. H. Der Wendepunkt) am gleichen Punkt auf der y-Achse bleibt.


Schritt 4: Alternative Gleichung Eins

Sie sehen schnell, dass das Positionieren einer Kurve etwas schwierig ist. Die verwendete Gleichung ist unpraktisch, wenn wir beispielsweise die Koordinaten des niedrigsten Punkts auf einer Kurve lokalisieren möchten.

Lösung? Wir werden die Gleichung in eine gewünschte Form umschreiben. Überprüfen Sie die folgende Gleichung:

\[f(x) = P(x+Q)^2+R\]

Es ist immer noch eine quadratische Gleichung, aber sie hat eine andere Form angenommen. Jetzt können wir die minimalen und maximalen Punkte auf der Kurve einfach steuern. Klicken Sie in der vorherigen Flash-Präsentation oben rechts auf die Schaltfläche "Ansatz 1" und spielen Sie mit den neuen Werten.

Hier ist eine kurze Erklärung der Rollen der Koeffizienten:

Koeffizient Rolle
P. Kontrollieren Sie die Steilheit der Kurve.
Q Kontrollieren Sie die Verschiebung des Wendepunkts der Kurve entlang der x-Achse.
R Kontrollieren Sie die Verschiebung des Wendepunkts der Kurve entlang der y-Achse.

Trotzdem ist es immer noch eine schwierige Aufgabe, die Kurve durch einen bestimmten Satz von Punkten zu führen. Wir müssten auf Papier rigoros vorberechnen, bevor wir es in Code übersetzen können.

Zum Glück gibt es eine bessere Lösung. Bevor wir uns damit befassen, werfen wir einen Blick auf die ActionScript-Implementierung.


Schritt 5: ActionScript-Implementierung

Hier sind die Gleichungen, die als ActionScript-Funktionen geschrieben wurden (siehe Graphing.as im Quelldownload).

Und hier ist eine Implementierung der Zeichenmethode mit Graphics.drawPath(). Nur eine Anmerkung, dass alle Kurven in diesem Artikel auf ähnliche Weise gezeichnet sind.

Zuerst die Variablen...

Nun werden die y-Positionen basierend auf den x-Positionen und den angegebenen Koeffizienten berechnet.

(Verwirrt über den Operator >>? Schauen Sie sich dieses Tutorial an.)


Schritt 6: Alternative Gleichung Zwei

Angenommen, wir erhalten drei Punkte, durch die sich die quadratische Kurve kreuzen muss. Wie bilden wir die entsprechende Gleichung? Wie können wir insbesondere die Koeffizientenwerte der Gleichung bestimmen? Lineare Algebra kommt zur Rettung. Lassen Sie uns dieses Problem analysieren.

Wir wissen, dass quadratische Gleichungen immer die Form annehmen, wie sie in Gl. 1 in Schritt 1.

\[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\]

Da alle drei angegebenen Koordinaten auf derselben Kurve liegen, müssen sie jeweils diese Gleichung mit denselben Koeffizienten erfüllen wie die Gleichung der Kurve, nach der wir suchen. Schreiben wir dies in Gleichungsform auf.

Bei drei Coodinaten:

  • \(S\ \left(S_x,\ S_y\right)\)
  • \(T\ \left(T_x,\ T_y\right)\)
  • \(U\ \left(U_x,\ U_y\right)\)

Setzen Sie diese Werte in (Gleichung 1) ein. Beachten Sie, dass A, B, C derzeit unbekannt sind.

\[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\]

  • \(S_y = A\left(S_x\right)^2 + B\left(S_x\right) + C\ \)
  • \(T_y = A\left(T_x\right)^2 + B\left(T_x\right) + C\ \)
  • \(U_y = A\left(U_x\right)^2 + B\left(U_x\right) + C\ \)

Schreiben Sie nun in Matrixform um. Beachten Sie, dass A, B, C die Unbekannten sind, nach denen wir suchen.

[latex] \begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} = \begin{bmatrix} \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix} \begin{bmatrix}A \\B \\C\end{bmatrix} \\ [/latex]

[latex] \begin{bmatrix} \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1} \begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} = \begin{bmatrix} \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1} \begin{bmatrix} \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix} \begin{bmatrix}A \\B \\C\end{bmatrix} \\ [/latex] [latex] \begin{bmatrix} \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1} \begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} = I \begin{bmatrix}A \\B \\C\end{bmatrix} \\ K^{-1}J = L [/latex]

Natürlich können wir stattdessen simultane Gleichungen verwenden, aber ich bevorzuge die Verwendung von Matrizen, weil es einfacher ist. (Anmerkung des Herausgebers: Solange Sie Matrizen verstehen, ist das!)

Wir erhalten die Umkehrung von K und multiplizieren mit der J-Matrix, um L zu erhalten. Nachdem wir A, B, C erfolgreich gelöst haben, setzen wir sie einfach in die quadratische Gleichung ein. Wir haben also eine quadratische Kurve, die durch alle drei Punkte verläuft.


Schritt 7: Koralle importieren

Wie im vorherigen Schritt erwähnt, müssen wir eine 3x3-Matrixinversion und -multiplikation durchführen. Die flash.geom.matrix-Klasse von ActionScript kann dabei nicht helfen. Natürlich haben wir die Wahl, die Klasse flash.geom.Matrix3D zu verwenden, aber ich bevorzuge die Coral-Bibliothek, da ich in diese benutzerdefinierten Klassen eindringen und untersuchen kann, was unter der Haube passiert. Ich persönlich finde dies sehr nützlich, wenn Zweifel an der ordnungsgemäßen Verwendung von Befehlen bestehen, selbst nachdem ich die API-Dokumentation gelesen habe.

Laden Sie also die entpackten Coral-Dateien herunter und legen Sie sie in Ihrem Projektquellordner ab.

Download Coral
Coral integrated with source folder

Schritt 8: ActionScript-Implementierung

Hier ist ein Beispiel des Ergebnisses. Versuchen Sie, die roten Punkte neu zu positionieren, und sehen Sie, wie die quadratische Kurve neu gezeichnet wird, um alle drei Punkte zu durchqueren.


Schritt 9: Erklärung von der Implementierung

Das vollständige Skript finden Sie in Draw_curve.as. Das folgende ActionScript dient nur dazu, die Maussteuerung für die kleinen Punkte zu aktivieren.

Der Kern liegt in der redraw-Funktion. Ich habe die Matrixoperationen und die quadratische Funktion für den Neuzeichnungsprozess hervorgehoben.

Sie können also sehen, dass die Matrix K initialisiert und invertiert wurde, bevor sie an die Matrix J angehängt wurde.

Die Funktion append() multipliziert die aktuelle Matrix J mit der Eingangsmatrix K links davon. Ein weiteres bemerkenswertes Detail ist, dass wir nicht alle Zeilen und Spalten in K- und J-Matrizen verwenden. Da die Matrixinversion jedoch nur mit einer quadratischen Matrix erfolgen kann, müssen wir das Element der 4. Zeile und 4. Spalte von K mit 1 füllen. (Dies ist für J nicht erforderlich, da wir die Inversion für unsere Berechnung nicht benötigen. ) Sie können also sehen, dass alle anderen Elemente außer der ersten Spalte 0 sind.


Schritt 10: Zeichnen der kubischen Kurve

Das ist also alles zum Zeichnen quadratischer Kurven. Gehen wir weiter zu kubischen Kurven.

Wieder werden wir eine kleine Überarbeitung der grafischen Darstellung dieser Kurven haben. Schauen Sie sich das folgende Bild an:

Cubic graphed on Cartesian and Flash coordinate space.Cubic graphed on Cartesian and Flash coordinate space.Cubic graphed on Cartesian and Flash coordinate space.

Wenn Sie diese Kurve mit der quadratischen Kurve vergleichen, werden Sie feststellen, dass sie steiler ist und dass ein Teil der Kurve unterhalb der x-Achse liegt. Eine Hälfte wird im Vergleich zu einem Quadrat vertikal gespiegelt.


Schritt 11: Kubische Koeffizienten

Ich habe die folgende Flash-Präsentation beigefügt, damit Sie mit den Koeffizienten einer kubischen Gleichung experimentieren können. Versuchen Sie, den Wert von A von positiv auf negativ zu ändern, und beobachten Sie den Unterschied in der erzeugten Kurve.


Schritt 12: ActionScript-Implementierung

Hier ist der wichtige Abschnitt der Implementierung der obigen Grafik:

Auch hier ist es schwierig, die kubische Kurve gemäß einer Reihe von Punkten zu positionieren, die sie durchquert. Wir verweisen erneut auf die lineare Algebra als Alternative.


Schritt 13: Alternative Methode

Wir wissen aus Schritt 6, dass die Koeffizienten einer quadratischen Gleichung basierend auf drei gegebenen Punkten berechnet werden können und die daraus gezogene Kurve diese Punkte durchquert. Ein ähnlicher Ansatz kann mit vier gegebenen Punkten durchgeführt werden, um eine kubische Gleichung zu erhalten:

  • \(S\ \left(S_x,\ S_y\right)\)
  • \(T\ \left(T_x,\ T_y\right)\)
  • \(U\ \left(U_x,\ U_y\right)\)
  • \(V\ \left(V_x,\ V_y\right)\)

Setzen Sie diese Koordinaten in (Gleichung 2) ein. Beachten Sie, dass A, B, C, D unbekannt sind.

\[g(x) = Ax^3 + Bx^2 + Cx + D\ ... (eq\ 2)\]

  • \(S_y = A\left(S_x\right)^3 + B\left(S_x\right)^2 + C\left(S_x\right) + D\)
  • \(T_y = A\left(T_x\right)^3 + B\left(T_x\right)^2 + C\left(T_x\right) + D\)
  • \(U_y = A\left(U_x\right)^3 + B\left(U_x\right)^2 + C\left(U_x\right) + D\)
  • \(V_y = A\left(V_x\right)^3 + B\left(V_x\right)^2 + C\left(V_x\right) + D\)

Aber jetzt beschäftigen wir uns mit einer 4x4-Matrix anstelle einer 3x3-Matrix:

\( \begin{bmatrix}S_y \\T_y \\U_y \\V_y\end{bmatrix} = \begin{bmatrix} \left(S_x\right)^3 & \left(S_x\right)^2 & \left(S_x\right) & 1\\ \left(T_x\right)^3 & \left(T_x\right)^2 & \left(T_x\right) & 1\\ \left(U_x\right)^3 & \left(U_x\right)^2 & \left(U_x\right) & 1\\ \left(V_x\right)^3 & \left(V_x\right)^2 & \left(V_x\right) & 1\end{bmatrix} \begin{bmatrix}A \\B \\C \\D\end{bmatrix} \\ P = QR \\ Q^{-1}P = Q^{-1}QR \\ Q^{-1}P = IR\\ Q^{-1}P = R \)

Jetzt werden wir alle Elemente in der 4x4-Matrix für Q und die gesamte erste Spalte für P verwenden. Dann wird Q invertiert und auf P angewendet.


Schritt 14: ActionScript-Implementierung

Auch hier haben wir die Maussteuerung so eingerichtet, dass diese Punkte gezogen werden können. Wenn einer dieser Punkte gezogen wird, wird die Kurve ständig neu berechnet und neu gezeichnet.

redraw ist die entscheidende Funktion, bei der alles passiert ist.

Schauen wir uns zum Schluss das Produkt an. Klicken Sie auf die roten Punkte und verschieben Sie sie, um die kubische Kurve zu sehen, die durch alle diese Punkte gezogen wird.


Schritt 15: Polynome höheren Grades

Wir haben gerade Polynome der Grade 2 und 3 (quadratisch und kubisch) gezeichnet. Aus unserer Erfahrung können wir vorhersagen, dass für die Berechnung eines Polynoms vom Grad 4 (Quintic) fünf Punkte erforderlich sind, für die eine 5x5-Matrix erforderlich ist, und so weiter für Polynome mit noch höherem Grad.

Leider erlauben Coral und flash.geom.Matrix3D nur 4x4-Matrizen, sodass Sie bei Bedarf Ihre eigene Klasse schreiben müssen. In Spielen ist dies jedoch selten erforderlich.


Schritt 16: Regionen teilen

Versuchen wir, unser Wissen anzuwenden, um Regionen auf unserer Bühne zu teilen. Dies erfordert eine Überarbeitung der Ungleichungen der Gleichungen. Schauen Sie sich das Bild unten an.

Division of regionsDivision of regionsDivision of regions

Dieses Bild oben zeigt eine Kurve, die die Regionen in zwei Bereiche unterteilt:

  • Blauer Bereich oben, wobei für jeden Punkt y größer ist als die Gleichung der Kurve.
  • Roter Bereich unten, wobei für jeden Punkt y kleiner als die Gleichung der Kurve ist.

Es ist nicht schwer, dieses Konzept zu verstehen. Tatsächlich haben Sie bereits in Schritt 11 damit experimentiert, als Sie die Koeffizienten der kubischen Formel angepasst haben. Stellen Sie sich im Koordinatensystem vor, dass es unendlich viele Kurven gibt, die sich alle durch eine geringfügige Änderung von D unterscheiden:

Infinite curves drawn on graphInfinite curves drawn on graphInfinite curves drawn on graph

Schritt 17: ActionScript-Implementierung

Hier ist also das Beispiel der Ausgabe für die quadratische Kurve. Sie können versuchen, den roten Punkt zu verschieben und die farbigen Bereiche anzuzeigen.

Hier ist das wichtige ActionScript-Snippet. Überprüfen Sie das vollständige Skript in Region_Curve.as

Hier ist das Beispiel in Bezug auf die kubische Kurve.

Und die damit verbundene Implementierung. Wieder vollständige Skripte in Region_Curve2.as


Schritt 18: Variationen

Wie wäre es mit einigen Optimierungen, um die Farbe über verschiedene Kurven hinweg zu ändern? Klicken Sie erneut mit der Maus auf die roten Punkte und sehen Sie, wie sich der Farbverlauf auf dem Bildschirm ändert.


Schritt 19: ActionScript-Implementierung

Hier ist das wichtige ActionScript-Snippet, das aus Region_Curve3.as extrahiert wurde. Zunächst möchten wir den maximalen und minimalen Versatz zur Originalkurve ermitteln.

Sobald dies erledigt ist, wenden wir es auf das Färben der einzelnen Punkte an.


Abschluss

Damit alles zum Zeichnen von Kurven. Als nächstes finden Sie Wurzeln einer quadratischen und kubischen Kurve. Danke fürs Lesen. Teilen Sie diese, wenn Sie einige reale Anwendungen sehen, die dieses Tutorial nutzen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.