Mathematik und ActionScript von Kurven Zeichnen von quadratischen und kubischen Kurven

Wir sehen Linien, die in vielen Szenarien verwendet werden. Kurven werden auch verwendet, wenn auch vielleicht nicht so häufig - was jedoch ihre Bedeutung nicht beeinträchtigt! In diesem Tutorial werden Kurven näher betrachtet, insbesondere die quadratische und die kubische Kurve sowie einige ihrer häufig verwendeten mathematischen Merkmale.


Endergebnisvorschau

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 ändern.

Und hier ist eine weitere Demo, die kubische Kurven ohne die Farbverläufe verwendet:


Schritt 1: Kurven

Quadratisch und Kubisch werden in jedem dieser Abschnitte vorgestellt. Schauen wir uns zuerst die Kurvengleichung an. Diese Gleichungen werden in Polynomform geschrieben, beginnend mit dem Ausdruck höchsten Grades. Die erste ist die quadratische Gleichung (der höchste Grad ist 2); die zweite ist kubische Gleichung (höchster 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. Nun, da wir uns damit auskennen, versuchen wir, es zu visualisieren. Die grafische Darstellung von Kurven wird unser nächster Versuch sein.


Schritt 2: Kurven grafisch darstellen

Lassen Sie uns zunächst eine quadratische Kurve darstellen. Ich bin mir sicher, dass alle Leser eine quadratische Kurve im Mathematikunterricht der High School gezeichnet haben, aber um Ihr Gedächtnis aufzufrischen, stelle ich unten Diagramme vor. Sie sind nebeneinander angeordnet, um den Vergleich zu erleichtern.

  • Das linke Diagramm verwendet einen kartesischen Koordinatenraum
  • Der rechte Graph verwendet den Flash-Koordinatenraum

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


Schritt 3: Quadratische Koeffizienten

Um quadratische Kurven an der richtigen Stelle zu positionieren, müssen wir ihre 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).

Im Folgenden finden Sie eine Flash-Präsentation, mit der Sie diese Koeffizienten leicht anpassen und sofort Feedback erhalten können.

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

  1. Stellen Sie A und B auf 0 und stellen Sie den Wert von C auf positive und negative Werte ein. Sie werden sehen, wie sich die Höhe der Linie ändert.
  2. Passen Sie nun den Wert von B zwischen positiven und negativen Werten an. Beobachten Sie, was mit dem Gradienten der Linie passiert.
  3. Passen Sie nun den Wert von A zwischen positiven und negativen Werten an und vergleichen Sie die Ergebnisse.
  4. Dann optimieren Sie B zwischen positiv und negativ. Beachten Sie, dass die Kurve immer den Ursprung durchschneidet.
  5. Zum Schluss Tweak C. Beobachten Sie die Verschiebung der gesamten Kurve entlang der y-Achse.

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


Schritt 4: Alternative Gleichung 1

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

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

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

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

Hier eine kurze Erklärung der Rollen der Koeffizienten:

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

Trotzdem ist es immer noch eine schwierige Aufgabe, die Kurve durch eine gegebene Menge von Punkten ziehen zu lassen. Wir müssen auf dem Papier streng vorberechnen, bevor wir es in Code übersetzen können.

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


Schritt 5: ActionScript-Implementierung

Hier sind die Gleichungen, die als ActionScript-Funktionen geschrieben wurden Grafische Darstellung im Quelldownload).

 private Funktion quadratisch1 (x: Nummer, A: Nummer, B: Nummer, C: Nummer): Anzahl // y = A (x ^ 2) + B (x) + C gibt A * x * x + B * x + zurück C private Funktion quadratisch2 (x: Zahl, P: Zahl, Q: Zahl, R: Zahl): Zahl // y = P * (x + Q) ^ 2 + R gibt P * (x + Q) * zurück ( x + Q) + R

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

Zuerst die Variablen…

 Private Var-Punkte: Vektor. = neuer Vektor.; private var drawCommand: Vector. = neuer Vektor.;

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

 Privater Funktionsaufbau (A: Number, B: Number, C: Number): void for (var i: int = 0; i < 400; i++)  var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; if (isApproach1) Punkte [i * 2 + 1] = quadratisch1 (x, A, B, C) + stage.stageHeight >> 1 else Punkte [i * 2 + 1] = quadratisch2 (x, A, B) , C) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2;  graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, Punkte); 

(Verwirrt über die >> Operator? Sehen Sie sich dieses Tutorial an.)


Schritt 6: Alternative Gleichung 2

Nehmen wir an, wir haben drei Punkte, die die quadratische Kurve durchqueren muss. Wie bilden wir die entsprechende Gleichung? Wie können wir die Koeffizientenwerte der Gleichung genauer bestimmen? Lineare Algebra kommt zur Rettung. Lassen Sie uns dieses Problem analysieren.

Wir wissen, dass quadratische Gleichungen immer die Form haben, die 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 erfüllen, mit den gleichen Koeffizienten wie die Gleichung der gesuchten Kurve. Schreiben wir dies in Form einer Gleichung auf.

Drei Coodinate gegeben:

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

Ersetzen Sie diese Werte in (Gleichung 1). Beachten Sie, dass A, B, C im Moment Unbekannte 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 jetzt 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
= Ich
\ 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 sich mit der J-Matrix, um L zu erhalten. Nachdem wir A, B, C erfolgreich gelöst haben, ersetzen wir sie einfach in die quadratische Gleichung. Wir haben also eine quadratische Kurve, die alle drei Punkte durchläuft.


Schritt 7: Koralle importieren

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

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


Schritt 8: ActionScript-Implementierung

Hier ist ein Beispiel für das Ergebnis. Versuchen Sie, die roten Punkte neu zu positionieren, und sehen Sie, wie die quadratische Kurve neu gezeichnet wird, um alle drei Punkte zu kreuzen.


Schritt 9: Implementierung erklärt

Das vollständige Skript finden Sie in Draw_curve.as. Der folgende ActionScript-Code dient nur zum Aktivieren der Maussteuerung für die kleinen Punkte.

 public function Draw_Curve () // Steuerelemente einrichten c1 = new Circle (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0,2; c1.y = stage.stageHeight >> 1; c2 = neuer Kreis (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0,5; c2.y = stage.stageHeight >> 1; c3 = neuer Kreis (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0,8; c3.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c1.addEventListener (MouseEvent.MOUSE_UP, verschieben); c2.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c2.addEventListener (MouseEvent.MOUSE_UP, verschieben); c3.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c3.addEventListener (MouseEvent.MOUSE_UP, verschieben); redraw () private Funktion bewegen (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, update);  else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, Aktualisierung);  Aktualisierung privater Funktionen (e: MouseEvent): void redraw (); 

Der Kern liegt im neu zeichnen Funktion. Ich habe die Matrixoperationen und die quadratische Funktion für den Neuzeichnungsvorgang hervorgehoben.

 Wiederherstellen privater Funktionen (): void K = new Matrix3d ​​(c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3.x * c3 x, c3.x, 1, 0, 0, 0, 0, 1); K.invert () L = new Matrix3d ​​(c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0); L.append (K); graphics.clear (); Var-Punkte: Vektor. = neuer Vektor.; var cmd: Vektor. = neuer Vektor.; für (var i: int = 0; i < 200; i++)  //current x var x:Number = i * 2; //f(x) = A (x^2) + B (x) + C var y:Number = L.n11* x* x + L.n21 * x + L.n31 ; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2);  graphics.lineStyle(1); graphics.drawPath(cmd, points); 

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

Das anhängen () Funktion multipliziert die aktuelle Matrix J mit der Eingabematrix 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 bei einer quadratischen Matrix vorkommen kann, müssen Sie die vierte Zeile, das vierte Spaltenelement von K, mit 1 füllen. (Dies ist für J nicht erforderlich, da wir in unserer Berechnung keine Invertierung benötigen. ) Sie können also sehen, dass alle anderen Elemente außer der ersten Spalte 0 sind.


Schritt 10: Grafische Darstellung der kubischen Kurve

Das ist alles für das Zeichnen von quadratischen Kurven. Gehen wir weiter zu kubischen Kurven.

Wir werden wieder eine kleine Überarbeitung dieser Kurven haben. Schauen Sie sich das folgende Bild an:

Wenn Sie diese Kurve mit der von Quadrat vergleichen, werden Sie feststellen, dass sie steiler ist und dass ein Teil der Kurve unter der X-Achse liegt. Eine Hälfte ist vertikal gespiegelt, verglichen mit einer quadratischen.


Schritt 11: Kubische Koeffizienten

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


Schritt 12: ActionScript-Implementierung

Hier ist der wichtige Abschnitt der Implementierung der Grafik oben:

 Privater Funktionsaufbau (A: Number, B: Number, C: Number, D: Number): void for (var i: int = 0; i < 400; i++)  var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; Punkte [i * 2 + 1] = cubic1 (x, A, B, C, D) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2;  graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, Punkte);  private Funktion cubic1 (x: Number, A: Number, B: Number, C: Number, D: Number): Number // y = A (x ^ 3) + B (x ^ 2) + C (x) + D Rückkehr A * x * x * x + B * x * x + C * x + D

Auch hier ist es schwierig, die kubische Kurve anhand einer Reihe von Punkten zu positionieren, die sie durchquert. Erneut beziehen wir uns auf eine lineare Algebra.


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 wird diese Punkte kreuzen. Ein ähnlicher Ansatz kann mit any durchgeführt werden vier gegebene Punkte, 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) \)

Ersetzen Sie diese Koordinaten in (Gleichung 2). Beachten Sie, dass A, B, C, D Unbekannte sind.

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

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

Aber jetzt beschäftigen wir uns mit einer 4x4-Matrix anstelle von 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 umgekehrt und auf P angewendet.


Schritt 14: ActionScript-Implementierung

Wieder richten wir die Maussteuerelemente ein, um das Ziehen dieser Punkte zu ermöglichen. Wenn einer dieser Punkte gezogen wird, werden die Kurve ständig neu berechnet und neu gezeichnet.

 public function Draw_Curve2 () // Steuerelemente einrichten c1 = new Circle (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0,2; c1.y = stage.stageHeight >> 1; c2 = neuer Kreis (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0,4; c2.y = stage.stageHeight >> 1; c3 = neuer Kreis (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0,6; c3.y = stage.stageHeight >> 1; c4 = neuer Kreis (0xFF0000); addChild (c4); c4.x = stage.stageWidth * 0,8; c4.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c1.addEventListener (MouseEvent.MOUSE_UP, verschieben); c2.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c2.addEventListener (MouseEvent.MOUSE_UP, verschieben); c3.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c3.addEventListener (MouseEvent.MOUSE_UP, verschieben); c4.addEventListener (MouseEvent.MOUSE_DOWN, verschieben); c4.addEventListener (MouseEvent.MOUSE_UP, verschieben); neu zeichnen ();  private Funktion move (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, update);  else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, Aktualisierung);  Aktualisierung privater Funktionen (e: MouseEvent): void redraw (); 

neu zeichnen ist die entscheidende Funktion, bei der alles passiert ist.

 Wiederherstellen der privaten Funktion (): void var left: Matrix3d ​​= new Matrix3d ​​(c1.x * c1.x * c1.x, c1.x * c1.x, c1.x, 1, c2.x * c2.x * c2.x, c2.x * c2.x, c2.x, 1, c3.x * c3.x * c3.x, c3.x * c3.x, c3.x, 1, c4.x * c4. x * c4.x, c4.x * c4.x, c4.x, 1); left.invert () var right: Matrix3d ​​= new Matrix3d ​​(c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, c4.y, 0, 0 0); rechts.append (links); // f (x) = A (x ^ 3) + B (x ^ 2) + C (x) + D graphics.clear (); Var-Punkte: Vektor. = neuer Vektor.; var cmd: Vektor. = neuer Vektor.; für (var i: int = 0; i < 200; i++)  var x:Number = i * 2; var y:Number = right.n11 * x * x * x+ right.n21 * x * x+ right.n31 * x + right.n41; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2);  graphics.lineStyle(1); graphics.drawPath(cmd, points); 

Zum Schluss wollen wir uns das Produkt ansehen. Klicken Sie auf die roten Punkte und verschieben Sie sie, um die kubische Kurve zu sehen, die durch alle diese Punkte verläuft.


Schritt 15: Polynome höheren Grades

Wir haben gerade Polynome der Stufen 2 und 3 (quadratisch und kubisch) gezeichnet. Aus unserer Erfahrung können wir vorhersagen, dass die Berechnung für ein Polynom 4 (Quintin) fünf Punkte erfordert, was eine 5 × 5-Matrix erforderlich macht, usw. für Polynome mit noch höherem Grad.

Unglücklicherweise, Koralle und flash.geom.Matrix3D Lassen Sie nur 4x4-Matrizen zu, so dass Sie bei Bedarf eine eigene Klasse schreiben können. Es ist jedoch selten in Spielen erforderlich.


Schritt 16: Regionen teilen

Versuchen wir unser Wissen anzuwenden, um Regionen auf unserer Bühne zu teilen. Dies erfordert einige Überarbeitungen von Gleichungenungleichheiten. Schauen Sie sich das Bild unten an.

Dieses Bild oben zeigt eine Kurve, die die Regionen in zwei Teile teilt:

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

Es ist nicht schwer, dieses Konzept zu verstehen. Tatsächlich haben Sie dies bereits in Schritt 11 experimentiert, während 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:


Schritt 17: ActionScript-Implementierung

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

Hier ist das wichtige ActionScript-Snippet. Schauen Sie sich das vollständige Skript an Region_Curve.as

 Wiederherstellen privater Funktionen (): void var left: Matrix3d ​​= new Matrix3d ​​(c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3. x * c3.x, c3.x, 1, 0, 0, 0, 0, 1); left.invert () var right: Matrix3d ​​= new Matrix3d ​​(c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0, 0) ); rechts.append (links); // D = A (x ^ 2) + B (x) + C für jeden (var item: Kreis im Hintergrund) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + rechts.n31; //trace(backgroundioneii.y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA; 

Hier ist das Beispiel in Bezug auf die kubische Kurve.

Und die damit verbundene Umsetzung. Wieder ist das vollständige Skript in Region_Curve2.as

 // D = A + B (x) + C (x ^ 2) für jeden (var item: Kreis im Hintergrund) var D: Number = right.n11 * item.x * item.x * item.x; + right.n21 * item.x * item.x + right.n31 * item.x + right.n41 //trace(backgroundionei.y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA; 

Schritt 18: Variationen

Wie wäre es mit einigen Verbesserungen, 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 Verlauf auf dem Bildschirm ändert.


Schritt 19: ActionScript-Implementierung

Hier ist das wichtige ActionScript-Snippet, aus dem extrahiert wurde Region_Curve3.as. Zunächst wollen wir den maximalen und minimalen Versatz der Originalkurve ermitteln.

 var max: Anzahl = 0; var min: Anzahl = 0; var Ds: Vector. = neuer Vektor.; // D = A (x ^ 2) + B (x) + C für jeden (var item: Kreis im Hintergrund) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + rechts.n31; var offset: Anzahl = item.y - D; Ds.push (Offset); if (item.y> D && Versatz> max) max = Versatz; sonst wenn (item.y < D && offset < min) min = offset; 

Wenn Sie fertig sind, wenden wir es an, um die einzelnen Punkte zu färben.

 // Farbabweichungen basierend auf dem Offset var color: Zahl für (var i: int = 0; i < background.length; i++)  if (Ds[i] > 0) color = Ds [i] / max * 255 // Berechnung der Farbe für den Slot im Hintergrund [i] .color = color<<16 | color<<8 | color; //define a grayscale  else if (Ds[i] < 0)  color = Ds[i] / min * 255; background[i].color = color<<16; //define a gradient of red  

Fazit

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