Advanced Games Physics
2. Kapitel

Darstellung von animierten Objekten

Bitte einen Augenblick Geduld
während das Programm geladen wird!
Alle Themen in diesem Kapitel:

Darstellung von Bewegungen animierter Objekte

Die Darstellung von animierten Objekten beruht auf einer dynamischen Ortszuweisung dieser Objekte auf dem Monitor. Den Bildschirm eines Computers kannst Du Dir wie ein 2-dimensionales (2D) kartesisches Koordinatensystem vorstellen. Das erscheinende Bild wird durch diskrete Bildpunkte (Pixel) dargestellt. Der Ort jedes dieser Pixel wird durch seine Koordinaten festgelegt. Hinzu kommen Informationen über Farbe und Helligkeit des Pixels. Im Augenblick interessieren wir uns aber nur für die Ortskoordinaten des Pixels.

Die nebenstehende zeigt einen Grafen, der durch die Funktion y = f x beschrieben wird. Jedem Wert von x ist ein Wert von y zugeordnet. Diese Funktion scheint für die Darstellung einer Bewegung wenig geeignet, denn wenn die Pixel in Richtung der y-Achse von den Pixeln in Richtung der x-Achse abhängig wären, käme nur ein statisches Bild zustande. Und die Abbildung beliebiger ausgedehnter Objekte (z.B. eines Kreises) wäre nur mit hohem Aufwand möglich.

Graf einer Funktion
Abb. Graf der Funktion y = f x



zeigt eine geeignete Form des kartesischen Koordinatensystems, bei dem die x- bzw. die y-Achse den Ort eines Punktes - ähnlich den Längen- und Breitengraden auf dem Globus den Ort einer Stadt - beschreiben. x- und y-Koordinate sind voneinander unabhängig, was die Darstellung beliebiger Geometrien ermöglicht. Jetzt kommt's: die x- bzw. y-Koordinaten des Punktes sind aber Funktionen der Zeit! Und beide Funktionen sind Funktionen ein und der selben Zeit! Dadurch wird der Punkt beweglich! Die Zeit t wird hier als Parameter bezeichnet, obwohl sie wie die unabhängige Variable einer Zeitfunktion wirkt. Da aber die Zeit selbst im Koordinatensystem nicht in Erscheinung tritt, bekommt sie die Bezeichnung Parameter.

Darstellung eines bewegten Objektes
Abb. Darstellung eines bewegten Objektes


zeigt diese Zusammenhänge am Beispiel des schrägen Wurfs: Nach dem Drücken des START-Buttons wird eine Kugel schräg nach oben geworfen. Zunächst steigt die Kugel, wobei die Höhenbewegung bedingt durch die Wirkung der Schwerkraft immer langsamer wird, bis zu einem Scheitelpunkt, danach beschleunigt die Kugel wieder, aber in umgekehrte Richtung, bis sie auf dem Boden auftrifft und nur noch weiter rollt.

Nun wollen wir nicht nur einzelne Pixel bewegen und beobachten, sondern ganze Objekte. Dies können geometrische Figuren (Rechteck, Kreis, Linie etc.) oder auch Bilder (Images) sein. Aber Objekte sind auch nur aus Pixeln zusammen gesetzt. Allerdings haben diese einen "inneren" Zusammenhang, so dass im Falle einer Bewegung nicht ein einzelnes Pixel, sondern immer ein Ensemble von Pixeln bewegt wird. Handelt es sich hierbei um eine rein translatorische Bewegung, genügt es, das ganze Objekt durch eine im Schwerpunkt konzentrierte Masse zu repräsentieren. Aber darum müssen wir uns nicht kümmern, das macht das OS. Anders liegen die Dinge, wenn sich die Objekte zu ihrer translatorischen Bewegung noch drehen. Dann kommen weitere Rechenoperationen ins Spiel, die wir im Kapitel Rotatorische Bewegung behandeln werden.

Bitte einen Augenblick Geduld
während das Programm geladen wird!

Abb. Darstellung eines bewegten Objektes



Ergebnisdiskussion: In der Darstellung siehst Du in gleichmäßigen zeitlichen Abständen von 0,2 Sekunden Punkte, die sich als Rechenergebnisse aus den beiden Zeitfunktionen, für die y-Richtung und x-Richtung ergeben. Da bei der Berechnung der Bewegung die Punkte aber viel dichter liegen, weil mit jedem Bild-refresh eine neue Berechnung gestartet wird, ergibt sich für den Betrachter der Eindruck einer kontinuierliche Bewegung.

Natürlich gelten diese Überlegungen auch für den 3D Raum, dann kommt noch eine weitere Funktion für die z-Richtung hinzu.

Ziel aller unserer Bemühungen wird also sein, die richtigen Zeitfunktionen für die x-, die y- und ggf. die z-Koordinate zu finden.


download processing-Variante
download p5.js-Variante