Hauptinhalt

In die Richtung von Bewegung zeigen

Schauen wir uns nochmals eines unserer ersten Beispiele an, in welchem ein Mover in Richtung der Maus beschleunigt.

Du hast sicher festgestellt, dass die Formen die wir dargestellt haben meistens Kreise waren. Aus eine Reihe von Gründen ist dies sehr praktisch. Einer davon ist der, dass wir das Problem der Drehung ignorieren können. Drehe mal einen Kreis und du wirst erkennen, dass er genau gleich aussieht. Im Leben eines Programmieres von Bewegungen kommt einmal der Punkt, an dem er etwas zeichnen will, was in die Richtung der Bewegung zeigt. Vielleicht möchtest du eine Ameise, ein Auto oder ein Raumschiff zeichnen. Und wenn wir "zeigt in die Richtung der Bewegung" sagen, heißt dies "gemäß dem Geschwindigkeitsvektor gedreht." Geschwindigkeit ist ein Vektor mit einer x- und einer y-Komponente, aber um in ProcessingJS zu rotieren, brauchen wir einen Winkel. Zeichnen wir unsere Abbildung aus der Trigonometrie noch einmal mit dem Geschwindigkeitsvektor eines Objektes.

Gut. Wir kennen die Definition der Tangente:

t a n g e n t (a n g l e) = \frac{v e l o c i t y_{y}}{v e l o c i t y_{x}}

Das Problem ist, dass wir zwar die Geschwindigkeit kennen, aber nicht den Winkel. Wir müssen nach dem Winkel auflösen. Hier kommt eine besondere Funktion, die Umkehrfunktion von Tangens in Spiel. Sie wird auch Arkustangens oder arctan genannt. (Es gibt ebenfalls Umkehrfunktionen von Sinus und Cosinus)

Wenn der Tangens eines Wertes a gleich b ist, dann ist die Umkehrfunktion des Tangens von b gleich a. Zum Beispiel:


if	$t a n g e n t (a) = b$ ‍
then	$a = a r c t a n g e n t (b)$ ‍

Siehst du warum das die Umkehrfunktion ist? Dies erlaubt uns nun nach dem Winkel aufzulösen:


if	$t a n g e n t (a n g l e) = v e l o c i t y_{y} / v e l o c i t y_{x}$ ‍
then	$a n g l e = a r c t a n g e n t (v e l o c i t y_{y} / v e l o c i t y_{x}$ ‍)

Nun da wir die Formel haben, schauen wir uns an, wo sie in die Funktion display() in unserem Mover passt. Beachte, dass in ProcessingJS die Funktion für den Arkustangens atan() heißt. JavaScript stellt auch die native Funktion Math.atan() (genau wie alle anderen trigonometrischen Funktionen) zur Verfügung. Aber wir werden weiter die Funktionen von ProcessingJS verwenden.

Mover.prototype.display = function () {
  var angle = atan(this.velocity.y / this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

Nun ist der Code oben schon ziemlich nah dran und funktioniert fast perfekt. Wir haben aber immer noch ein Problem. Betrachten wir die beiden unten dargestellten Geschwindigkeitsvektoren.

Obwohl beide zunächst ähnlich aussehen, zeigen sie in unterschiedliche Richtungen, nämlich in entgegengesetzte! Wenn wir aber die Formel für den Winkel bei beiden Vektoren verwenden…

V1 ⇒ angle = atan(3/-4) = atan(-0.75) = -0.644 radians = -57 degrees
V2 ⇒ angle = atan(-3/4) = atan(-0.75) = -0.644 radians = -57 degrees

…erhalten wir für beide Vektoren den gleichen Winkel. Das kann nicht für beide korrekt sein, denn die Vektoren zeigen ja in entgegengesetzte Richtungen! Dies ist aber ein ziemlich häufiges Problem in Computergrafiken. Anstatt einfach atan() mit ein paar Bedingungen für die positiven/negativen Szenarien zu verwenden, besitzt ProcessingJS (genau wie JavaScript und die meisten anderen Programmiersprachen) eine nette Funktion atan2() welche all dies für dich tut.

Mover.prototype.display = function () {
  var angle = atan2(this.velocity.y, this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

Um dies noch weiter zu vereinfachen, besitzt das Objekt PVector eine Funktion heading(), welche für dich atan2() aufruft und dir für jeden PVector den Winkel für die 2D-Richtung im Bogenmaß zurückgibt.

So sieht schließlich das Programm aus. Bewege deine Maus über den Canvas und sieh wie sich der Balken dreht!

Der Kurs "Natürliche Simulationen" ist eine Bearbeitung von "The Nature of Code" von Daniel Shiffman, und wird unter der Creative Commons Attribution-NonCommercial 3,0 Unported Lizenz verwendet.

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.

Programmierung

Kurs: Programmierung > Lerneinheit 5

Willst du an der Diskussion teilnehmen?