Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 5
Lektion 4: Vektoren- Einführung in die Vektoren
- Challenge: Vektor-Walker
- Mehr Vektormathematik
- Challenge: Lichtschwert
- Größenordnung & Normalisierung von Vektoren
- Challenge: Grafische Darstellung des Betrags
- Vektorbewegung
- Challenge: Bremsendes Auto
- Statische Funktionen vs. Instanzmethoden
- Challenge: Statische Funktionen
- Interaktive Vektorbewegung
- Challenge: Mausverfolger
- Projekt: Computerkreaturen
© 2023 Khan AcademyNutzungsbedingungenDatenschutzerklärungCookie-Meldung
Interaktive Vektorbewegung
Zum Abschluss dieses Kapitels versuchen wir nun etwas komplexeres und viel nützlicheres zu Programmieren. Wir werden die Beschleunigung eine Objektes gemäss der Regel aus Algorithmus #3 berechnen, das Objekt beschleunigt sich in Richtung der Maus.
Jedes Mal, wenn wir einen Vektor anhand einer Regel oder einer Formel berechnen möchten, müssen wir zwei Dinge berechnen: Betrag und Richtung. Beginnen wir mit der Richtung. Wir wissen, dass der Beschleunigungsvektor von der Position des Objekts zur Mausposition zeigt. Nehmen wir an, das Objekt befindet sich beim Punkt
(x,y) und die Maus bei (mouseX,mouseY).In diesem Diagramm sehen wir, dass wir einen Vektor
(dx,dy) erhalten, wenn wir die Position des Objektes von der Mausposition abziehen.:dx = mouseX - xdy = mouseY - y
Schreiben wir den Code oben mit indem wir nun
PVector verwenden. Angenommen unser Code befindet sich in Mover und hat daher Zugriff auf den PVector der Position des Objektes, dann haben wir:var mouse = new PVector(mouseX, mouseY);
// Schau! Wir verwenden die statische Funktion sub() da wir einen neuen PVector brauchen
var dir = PVector.sub(mouse, position);So erhalten wir einen
PVector, welcher von der Position des Movers zur Maus zeigt. Wenn das Objekt tatsächlich mit diesem Vektor beschleunigen würde, würde es sofort an der Mausposition dargestellt. Dies wäre aber keine gute Animation. Logisch! Was wir jetzt entscheiden wollen, ist wie schnell das Objekt in Richtung der Maus beschleunigen soll.Um den Betrag (was immer es auch sein mag) unseres Beschleunigungs-Vectors zu berechnen, müssen wir zuerst diese Vektor zuerst ______. Genau! Du hast es richtig gesagt. Normalisieren. Wenn wir den Vektor auf den Einheitsvektor (der Länge eins) verkürzen, dann haben wir einen Vektor, welcher uns die Richtung gibt und einfach auf irgendeinen Wert skaliert werden kann. Eins multipliziert mit irgendwas gibt immer irgendwas.
var anything = ??;
dir.normalize();
dir.mult(anything);Zusammendfassend führen wir die folgenden Schritte durch:
- Berechne einen Vektor, welcher vom Objekt zur Zielposition (Maus) zeigt
- Normalisiere diesen Vektor (Verkürze in auf Länge 1)
- Skaliere den Vektor auf den richtigen Wert (multipliziere ihn mit einem Wert)
- Weise diesen Vektor der Beschleunigung zu
Und das Programm sieht nun, mit all diesen Schritten ausprogrammiert, so aus:
Vielleicht wunderst du dich, warum der Punkt nicht stoppt, sobald er das Ziel erreicht. Es ist wichtig zu verstehen, dass das Objekt keine Kenntnis davon hat, dass es an einer bestimmten Position stoppen muss. Es weiß nur wo diese Position ist und versucht möglichst schnell dahin zu kommen. So schnell wie möglich dahin zu gelangen bedeutet, dass es irgendwann darüber hinausschießt und umkehren muss, um wiederum so schnell wie möglich zum Ziel zu gelangen, wo es wieder darüber hinausschießt und so weiter und so weiter. Bleib dran! In späteren Kapiteln wirst du lernen wie man ein Objekt programmiert, welches an einem Ziel ankommt, d.h. langsam abbremst wenn es sich nähert.
Dieses Beispiel, wo ein Objekt von der Mausposition angezogen wird, kommt schon erstaunlich nahe an das Konzept der Gravitation (Anziehungskraft) aus der Physik. Die Anziehungskraft behandeln wir detailliert in einem späteren Kapitel. Eine Sache fehlt hier aber noch, denn die Stärke der Gravitation (Betrag der Beschleunigung) ist umgekehrt proportional zum Abstand der Objekte. Dies bedeutet, je näher das Objekt zur Mausposition kommt, umso schneller müsste es beschleunigen.
Schauen wir nun noch kurz wie diese Beispiel mit einem Array von Mover (anstatt nur einem) aussehen würde.
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?
Noch keine Beiträge.