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: Verläufe und Normalen

Read Time: 12 mins

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

Wir haben uns mit dem Zeichnen von Kurven und dem Finden ihrer quadratischen und kubischen Wurzeln sowie praktischen Anwendungen für die Verwendung quadratischer Wurzeln in Spielen befasst. Wie versprochen werden wir uns nun Anwendungen zum Auffinden von Kubikwurzeln sowie von Verläufen und Normalen von Kurven ansehen, z. B. das Abprallen von Objekten von gekrümmten Oberflächen. Lass uns gehen!


Beispiel

Werfen wir einen Blick auf eine praktische Anwendung dieser Mathematik:

In dieser Demo prallt das "Schiff" von den Rändern des SWF und der Kurve ab. Der gelbe Punkt repräsentiert den nächstgelegenen Punkt zum Schiff, das auf der Kurve liegt. Sie können die Form der Kurve anpassen, indem Sie die roten Punkte ziehen und die Bewegung des Schiffes mit den Pfeiltasten anpassen.


Schritt 1: Kürzester Abstand zu einer Kurve

Betrachten wir das Szenario, in dem sich ein Punkt in der Nähe einer quadratischen Kurve befindet. Wie berechnet man den kürzesten Abstand zwischen Punkt und Kurve?

point to quadratic distance

Beginnen wir mit dem Satz von Pythagoras.

\ [
Sei\der\Punkt \ (x_p, \ y_p) \\
und\rufe\den\nächsten\Punkt\auf\der\Kurve\ (x_c, \ y_c)\\auf
Dann:\\
z^2=x^2 + y^2\\
z^2=(x_c-x_p)^2 + (y_c-y_p)^2\\
Gegeben\y_c=ax_c^2 + bx_c + c,\\
z^2=(x_c-x_p)^2 + [(ax_c^2 + bx_c + c) -y_p]^2
\]

Sie können sehen, dass wir \(y_c \) durch die quadratische Gleichung ersetzt haben. Auf einen Blick sehen wir, dass die höchste Potenz 4 ist. Wir haben also eine quartische Gleichung. Alles, was wir tun müssen, ist, einen Mindestpunkt in dieser Gleichung zu finden, um den kürzesten Abstand von einem Punkt zu einer quadratischen Kurve zu erhalten.

Aber vorher müssen wir die Verläufe auf einer Kurve verstehen...


Schritt 2: Verlauf einer Kurve

Bevor wir uns mit dem Problem der Minimierung einer Quarzgleichung befassen, versuchen wir, die Gradienten einer Kurve zu verstehen. Eine gerade Linie hat nur einen Gradienten. Der Gradient einer quadratischen Kurve hängt jedoch davon ab, auf welchen Punkt der Kurve wir uns beziehen. Schauen Sie sich die folgende Flash-Präsentation an:

Ziehen Sie die roten Punkte, um die quadratische Kurve zu ändern. Sie können auch mit dem Griff des Schiebereglers spielen, um die Position des blauen Punkts entlang x zu ändern. Wenn sich der blaue Punkt ändert, ändert sich auch der gezeichnete Farbverlauf.


Schritt 3: Verlauf durch Kalkül

Hier wird Kalkül nützlich sein. Sie haben vielleicht vermutet, dass die Differenzierung einer quadratischen Gleichung den Gradienten der Kurve ergibt.

\[
f(x) =ax^2+bx+c\\
\frac{df(x)}{dx} = 2ax+b
\]

Also \(\frac{df(x)}{dx}\) ist der Gradient einer quadratischen Kurve und hängt von der \(x\)-Koordinate ab. Gut, dass wir eine Methode haben, um damit umzugehen: diff1(x:Number) gibt den Wert nach einer einzelnen Differenzierung zurück.

Um den Gradienten zu zeichnen, benötigen wir eine Gleichung zur Darstellung der Linie \(y=mx+c\). Die Koordinate des blauen Punktes \((x_p, y_p)\) wird in \(x\) und \(y\) eingesetzt, und der Gradient der durch Differenzierung gefundenen Linie geht in \(m\) über. Somit kann der y-Achsenabschnitt der Linie \(c\) durch einige Algebraarbeiten berechnet werden.

Schauen Sie sich den AS3 an:


Schritt 4: Koordinatensysteme

Beachten Sie immer die invertierte y-Achse des Flash-Koordinatenraums, wie in der Abbildung unten gezeigt. Auf den ersten Blick mag das Diagramm rechts wie ein negativer Gradient erscheinen - aber aufgrund der invertierten y-Achse ist es tatsächlich ein positiver Gradient.

Positive gradient.

Gleiches gilt für den unten angegebenen Mindestpunkt. Aufgrund der invertierten y-Achse sieht der minimale Punkt im kartesischen Koordinatenraum (bei (0,0)) wie ein Maximum im Flash-Koordinatenraum aus. Wenn Sie sich jedoch auf den Ursprungsort im Flash-Koordinatenraum relativ zur quadratischen Kurve beziehen, handelt es sich tatsächlich um einen Mindestpunkt.

Positive gradient.Positive gradient.Positive gradient.

Schritt 5: Änderungsrate für Gradienten

Angenommen, ich bin daran interessiert, den tiefsten Punkt einer Kurve zu finden. Wie gehe ich vor? Schauen Sie sich das Bild unten an (beide Figuren befinden sich im gleichen Koordinatenraum).

Positive gradient.Positive gradient.Positive gradient.

Um den Minimalpunkt zu erhalten, setzen wir einfach \(\frac {df(x)}{dx} = 0\) gleich, da wir per Definition nach dem Punkt suchen, an dem der Gradient Null ist. Wie oben gezeigt, stellt sich jedoch heraus, dass der maximale Punkt auf einer Kurve auch diese Bedingung erfüllt. Wie unterscheiden wir also zwischen diesen beiden Fällen?

Versuchen wir eine Differenzierung zweiten Grades. Es gibt uns die Änderungsrate des Gradienten.

\ [
\ frac {df (x)} {dx}=2ax + b \\
\ frac {df ^ 2 (x)} {dx ^ 2}=2a
\]

Ich werde mit Bezug auf das Bild unten erklären (gezeichnet im kartesischen Koordinatenraum). Wir können sehen, dass sich der Gradient beim Inkrementieren entlang der x-Achse von negativ nach positiv ändert. Die Änderungsrate sollte also ein positiver Wert sein.

Wir können auch sehen, dass wenn \ (\ frac {df ^ 2 (x)} {dx ^ 2} \) positiv ist, es einen minimalen Punkt auf der Kurve gibt. Umgekehrt ist bei negativer Rate ein Maximalpunkt vorhanden.

Rate of change in gradient.Rate of change in gradient.Rate of change in gradient.

Schritt 6: Zurück zum Problem

Jetzt sind wir bereit, das in Schritt 1 dargestellte Problem zu lösen. Erinnern Sie sich an die Quartalsgleichung (wobei der höchste Grad 4 ist), zu der wir gelangt sind:

\ [
z ^ 2=(x_c-x_p) ^ 2 + [(ax_c ^ 2 + bx_c + c) -y_p] ^ 2
\]

quartic curvequartic curvequartic curve

Dieselbe quartische Gleichung, aufgetragen

Denken Sie daran, dass wir daran interessiert sind, den Mindestpunkt auf dieser Kurve zu finden, da der entsprechende Punkt auf der ursprünglichen quadratischen Kurve der Punkt ist, der sich im Mindestabstand vom roten Punkt befindet.

point to quadratic distance

Lassen Sie uns also die Quartikfunktion differenzieren, um zum Gradienten dieser Kurve zu gelangen, und dann den Gradienten dieser Quartikfunktion mit Null gleichsetzen. Sie werden sehen, dass der Gradient tatsächlich eine kubische Funktion ist. Ich werde interessierte Leser auf Wolframs Seite verweisen. Für dieses Tutorial werde ich nur das Ergebnis ihrer Algebra-Arbeit zupfen:

\ [
\ frac {d (z ^ 2)} {dx} =
2 (x_c-x_p) + 2 (ax_c ^ 2 + bx_c + c - y_p) (2ax_c + b) \\
\ frac {d (z ^ 2)} {dx}=2a ^ 2 (x_c) ^ 3 + 3ab (x_c) ^ 2 + (b ^ 2 + 2ac-2ay_p + 1) (x_c) + (bc-by_p- x_p) \\
Gleichsetzen Sie \ gradient \ mit \ 0 \\
\ frac {d (z ^ 2)} {dx}=0 \\
2a ^ 2 (x_c) ^ 3 + 3ab (x_c) ^ 2 + (b ^ 2 + 2ac-2ay_p + 1) (x_c) + (bc-by_p-x_p)=0 \\
Vergleiche \ mit \ cubic \ Gleichung \\
Ax ^ 3 + Bx ^ 2 + Cx + D=0 \\
A=2a ^ 2 \\
B=3ab \\
C=b ^ 2 + 2ac-2ay_p + 1 \\
D=bc-by_p-x_p
\]

Lösen Sie nach den Wurzeln dieser (ziemlich chaotischen) kubischen Funktion und wir werden zu den Koordinaten der drei blauen Punkte gelangen, wie oben angegeben.

Wie filtern wir als nächstes unsere Ergebnisse nach dem Mindestpunkt? Erinnern Sie sich an den vorherigen Schritt, dass ein Mindestpunkt eine positive Änderungsrate aufweist. Um diese Änderungsrate zu erhalten, differenzieren Sie die kubische Funktion, die den Gradienten darstellt. Wenn die Änderungsrate für den angegebenen blauen Punkt positiv ist, ist dies einer der Mindestpunkte. Um den Mindestpunkt zu erhalten, an dem wir interessiert sind, wählen Sie den Punkt mit der höchsten Änderungsrate.


Schritt 7: Beispiel der Ausgabe

Hier ist eine Beispielimplementierung der oben erläuterten Idee. Sie können die roten Punkte ziehen, um Ihre quadratische Kurve anzupassen. Der blaue Punkt kann auch gezogen werden. Wenn Sie den blauen Punkt verschieben, wird der gelbe Punkt neu positioniert, sodass der Abstand zwischen dem blauen und dem gelben Punkt zwischen allen Punkten auf der Kurve minimal ist.

Während Sie mit der Flash-Präsentation interagieren, kann es vorkommen, dass drei gelbe Punkte gleichzeitig angezeigt werden. Zwei davon, ausgeblendet, beziehen sich auf die Wurzeln, die aus der Berechnung erhalten, aber verworfen wurden, weil sie nicht die Punkte auf der Kurve sind, die dem blauen Punkt am nächsten liegen.


Schritt 8: ActionScript-Implementierung

Hier ist die ActionScript-Implementierung der oben genannten. Das vollständige Skript finden Sie in Demo2.as.

Zunächst müssen wir die quadratische Kurve zeichnen. Es ist zu beachten, dass auf die Matrix m2 zur weiteren Berechnung Bezug genommen wird.

Und hier ist derjenige, der das erklärte mathematische Konzept umsetzt. c1 bezieht sich auf einen Punkt, der zufällig auf der Bühne positioniert ist.


Schritt 9: Beispiel: Kollisionserkennung

Verwenden wir dieses Konzept, um die Überlappung zwischen einem Kreis und einer Kurve zu erkennen.

Die Idee ist einfach: Wenn der Abstand zwischen dem blauen und dem gelben Punkt kleiner als der Radius des blauen Punkts ist, haben wir eine Kollision. Schauen Sie sich die Demo unten an. Die interaktiven Elemente sind die roten Punkte (zur Steuerung der Kurve) und der blaue Punkt. Wenn der blaue Punkt mit der Kurve kollidiert, wird er etwas ausgeblendet.


Schritt 10: ActionScript-Implementierung

Nun, der Code ist ziemlich einfach. Überprüfen Sie die vollständige Quelle in CollisionDetection.as.


Schritt 11: Von der Kurve abprallen

Nachdem wir nun wissen, wann eine Kollision auftreten wird, versuchen wir, eine Kollisionsreaktion zu programmieren. Wie wäre es mit einem Sprung von der Oberfläche? Schauen Sie sich die Flash-Präsentation unten an.

Sie können das Schiff sehen (Dreiecksform), das von einem Kreis umgeben ist (durchscheinendes Blau). Sobald der Kreis mit der Kurve kollidiert, prallt das Schiff von der Oberfläche ab.


Schritt 12: Steuern des Schiffes

Hier ist das ActionScript zur Steuerung des Schiffes.

Sie können sehen, dass die Tastatursteuerelemente Flags aktualisieren, um anzuzeigen, ob die linke, obere, rechte oder untere Taste gedrückt wird. Diese Flaggen werden vom Enterframe-Ereignishandler erfasst und aktualisieren die Größe und Richtung des Schiffes.


Schritt 13: Berechnung des Reflexionsvektors

Ich habe die Vektorberechnung des Reflexionsvektors bereits in diesem Beitrag behandelt. Hier werde ich nur beschreiben, wie man den Normalenvektor aus dem Gradienten erhält.

\ [
\ frac {df (x)} {dx}=Gradient \\
line \ gradient=\ frac {y} {x} \\
Angenommen, \ gradient=0.5 \\
y=0,5 \\
x=1 \\
Vektor \ von \ left \ normal =
\ begin {bmatrix} -1 \\ 0.5 \ end {bmatrix} \\
Vektor \ von \ rechts \ normal =
\ begin {bmatrix} 1 \\ - 0.5 \ end {bmatrix}
\]


Schritt 14: ActionScript-Implementierung

Das folgende ActionScript implementiert also das im vorherigen Schritt erläuterte maThemetische Konzept. Schauen Sie sich die hervorgehobenen Linien an:


Abschluss

Nun, danke für Ihre Zeit! Wenn Sie dies nützlich fanden oder Fragen haben, hinterlassen Sie einige Kommentare.

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.