Vektoren sind auch nur Punkte....

Übersicht

Sonstiges

Smalltalk

	Farbfinsternis Betreff: Vektoren sind auch nur Punkte....	Mi, Feb 01, 2012 21:35 Antworten mit Zitat
Da ich nicht weiß ob das hier relevant ist poste ich es erstmal in den Smalltalk.... Vektoren aus DAU Sicht Dieses Tutorial soll, im Gegensatz zu so ziemlich allem was da draussen rumfliegt, zeigen wie man Vektoren praktisch einsetzt und wie sie helfen können komplexe Bewegungen umzusetzen. Die Mathematik dahinter ist eigentlich recht leicht, wenngleich viele Anleitungen das unnötig kompliziert erläutern. Beachte: Dieses Tutorial verwendet zwar hier und dort ein paar Bezeichnungen die auch in der "Vectorscene" (voll krass drauf das Volk) verwendet werden, aber in der Regel setze ich Begriffe ein die nachvollziehbar sind. Ich habe keinen Plan wie dieser ganze Kram exakt mathematisch funktioniert, ich erkläre hier was funktioniert und wie man es verwenden kann. Also praktisch ein "Vektor Tutorial für die die das auch benutzen wollen". Außerdem wiederspreche ich einigen anderen Autoren was Euch aber nicht verwirren sollte (bspw. behaupte ich dass ein Vektor ein Punkt ist). Wenn ihr die mathematisch korrekte Beschreibung haben wollt solltet ihr Euch den entsprechenden Stuff reinziehen. In diesem Text wird alles so beschrieben wie man es hinterher auf dem Monitor auch wahr nimmt. 1. Was ist ein Vektor? Ein Vektor ist ein eigentlich nichts weiter als ein Punkt der durch die Koordinaten X und Y beschrieben wird. Theoretisch hat ein Vektor auch eine Länge und eine Richtung aber das ist praktisch nicht von Nutzen und fällt in diesem Text unter den Tisch. Für uns ist ein Vektor erstmal nur ein Type welches die Fields X und Y besitzt. Wenn ihr im Netz nach dem Vektor sucht der ein Punkt ist werdet ihr schnell feststellen dass man so einen Vektor "Ortsvektor" nennt. Er beschreibt halt einen Ort irgendwo auf Eurem Bildschirm. Ortsvektoren sollen auch das Erste sein womit wir uns beschäftigen. Nun wird der Eine oder Andere fragen: "Wenn das so easy ist, warum kann ich meinem Player dann nicht einfach die Werte X und Y verpassen?" Die Antwort: Wenn Du Deinen Player um 5 Pixel nach rechts und 10 Pixel nach oben bewegen willst musst Du die 5 und 10 in separaten Variablen sichern, den ganzen Kram verrechen und zurückschreiben und überhaupt wirst Du sehen dass das mit Vektoren viel einfacher geht (obwohl es eigentlich fast genauso funktioniert). In diesem Tutorial ist ein Vektor ein Punkt auf dem Bildschirm der eine Position an X, Y besitzt. 1.1 Einen Vektor erstellen Lasst uns ein Type erstellen dass wir Vector2F nennen. "Vector" ist klar, das Type beschreibt einen Vektor. "2" sagt an dass es sich um einen zweidimensionalen Vektor handelt und das "F" definiert dass wir Fließkommazahlen (Floats) verwenden. Code: [AUSKLAPPEN] [EINKLAPPEN] Type Vector2F Field x:Float Field y:Float End Type In Monkey könnten wir nun direkt mit New(x:Float, y:Float) die Koordinaten des Vektors angeben, in BlitzMax setzen wir die Koordinaten erstmal auf Null und definieren eine Methode die den Vektor platziert (ja, ja darth ... er wird nicht platziert, er wird verschoben pff) Code: [AUSKLAPPEN] [EINKLAPPEN] Type Vector2F Field x:Float Field y:Float Method New() Self.x = 0.0 Self.y = 0.0 End Method Method setPosition(x:Float, y:Float) Self.x = x Self.y = y End Method End Type Damit hätten wir schonmal den Grundstock um einen Vektor zu erzeugen und ihn zu platzieren. 1.2 Einen Vektor bewegen Um diesen Punkt nun zu bewegen müssen wir seine Komponenten x und y verändern. Dies geschieht durch Addition und Substraktion. Das Ziel ist es dass wir eine Position, nennen wir sie "playerPos", durch die Angabe eines zweiten Vektors verändern. Logischerweise können wir weder in Monkey noch in BlitzMax einfach ein Type (eine Klasse) mit einer anderen addieren oder substrahieren, also führen wir Methoden ein die dies bewerkstelligen. Bevor wir das tun noch ein kleines bisschen Theorie: Einen Vektor addiert oder subtrahiert man mit einem weiteren Vektor über die Komponenten der Vektoren. Das klingt jetzt irre kompliziert und der Eine oder Andere möchte jetzt schon wieder abschalten, habe ich recht? Aber so schwer ist das nicht. Die Komponenten sind einfach nur die Fields x und y in unserem Type Vector2F. Man nennt es halt Komponenten und ich denke dass jeder hier im Hinterkopf behalten kann dass wir damit die Fields meinen. Ich führe das extra aus weil einige Vektor-Operationen anders gehandhabt werden als eine Addition oder Substraktion. Aber hier wollen wir ja erstmal nur einen Punkt über den Bildschirm bewegen. Nehmen wir an unser Player befindet sich gerade in der Mitte des Bildschirms und wir wollen ihn um 5 Pixel nach rechts und 10 Pixel nach unten bewegen. In diesem Fall addieren wir einfach die Position des Players mit den Zielkoordinaten Code: [AUSKLAPPEN] [EINKLAPPEN] Type Vector2F Field x:Float Field y:Float Method New() Self.x = 0.0 Self.y = 0.0 End Method Method setPosition(x:Float, y:Float) Self.x = x Self.y = y End Method Method add(vec:Vector2F) Self.x = Self.x + vec.x Self.y = Self.y + vec.y End Method End Type Die Methode add() macht also nichts weiter als die eigenen Koordinaten mit denen von vec zu addieren. Das bewirkt eine Verschiebung des Vektors um vec:Vector2F. Um nun den Vektor Player zu bewegen müssen wir also der Methode add() einen anderen Vektor übergeben der festlegt um wieviel der Player bewegt werden soll. Code: [AUSKLAPPEN] [EINKLAPPEN] player:Vector2F = New Vector2F() player.setPosition(320, 240) ' Mitte in einem 640x480 Screen moveby:Vector2F = New Vector2F() moveby.setPosition(5, 10) ' der Player ändert seine Position um 5 Pixel nach rechts und 10 Pixel nach unten player.add(moveby) Wie wir sehen kann man mit add() den Spieler scheinbar nur nach rechts unten verschieben, aber probiert einmal den Vektor moveby(New Vector2F(-5, -10))* und ihr werdet sehen dass sich der Spieler nach links oben bewegt. Das heißt dass ihr mit dem Vorzeichen die Richtung angeben könnt um wieviel sich der Spieler in welche Richtung bewegen soll. Werte kleiner als Null sagen dass sich die Figur in Richtung Nullpunkt (0, 0) bewegen soll, positive Werte sagen dass die Figur sich vom Nullpunkt weg bewegen soll. Der Nullpunkt ist die linke obere Ecke des Bildschirms wenn man BlitzMax oder Monkey zu rate zieht. BlitzMax kennt keine Parameter für den Konstruktor, dieses Beispiel ist nur mit Monkey anwendbar Die Substraktion eines Vektors sollte hier nur Makulatur sein, sie funktioniert genauso wie die Addition: Code:* [AUSKLAPPEN] [EINKLAPPEN] Type Vector2F Field x:Float Field y:Float Method New() Self.x = 0.0 Self.y = 0.0 End Method Method setPosition(x:Float, y:Float) Self.x = x Self.y = y End Method Method add(vec:Vector2F) Self.x = Self.x + vec.x Self.y = Self.y + vec.y End Method Method sub(vec:Vector2F) Self.x = Self.x - vec.x Self.y = Self.y - vec.y End Method End Type Zu beachten ist dass Ihr mit einer Substraktion nicht automatisch die Richtung des Players ändert. Das Resultat ist eher eine Verlangsamung der Bewegung bis die Werte negativ werden und der Spieler die Richtung wechselt. Zum Abschluss dieses ersten Teils will ich noch ein kleines Type zeigen welches den Vektor-Type verwendet. Code: [AUSKLAPPEN] [EINKLAPPEN] Type Player Field pos:Vector2F Method New() Self.pos = New Vector2F() Self.dir = New Vector2F() End Method Method setPosition(x:Float, y:Float) Self.pos.setPosition(x, y) End Method Method moveTo(x:Float, y:Float) Local v:Vector2F = New Vector2F() v.setPosition(x, y) Self.pos.add(v) End Method End Type Ich weiß dass das alles noch sehr holperig aussieht und im Moment noch keine wirklichen Vorteile bietet gegenüber der klassischen Methode einfach X und Y Werte zu verwenden. Aber im nächsten Teil werden wir Vektoren verwenden die den Spieler beschleunigen und wir werden sehen warum wir eine Richtung benötigen (ein weiterer Vektor) um wirklich coole Sachen zu zaubern. DAU ... over and out.
Farbfinsternis.tv

Farbfinsternis

Betreff: Vektoren sind auch nur Punkte....

Mi, Feb 01, 2012 21:35
Antworten mit Zitat

Da ich nicht weiß ob das hier relevant ist poste ich es erstmal in den Smalltalk....

Vektoren aus DAU Sicht

Dieses Tutorial soll, im Gegensatz zu so ziemlich allem was da draussen rumfliegt, zeigen wie man Vektoren praktisch einsetzt und wie sie helfen können komplexe Bewegungen umzusetzen. Die Mathematik dahinter ist eigentlich recht leicht, wenngleich viele Anleitungen das unnötig kompliziert erläutern.

Beachte: Dieses Tutorial verwendet zwar hier und dort ein paar Bezeichnungen die auch in der "Vectorscene" (voll krass drauf das Volk) verwendet werden, aber in der Regel setze ich Begriffe ein die nachvollziehbar sind. Ich habe keinen Plan wie dieser ganze Kram exakt mathematisch funktioniert, ich erkläre hier was funktioniert und wie man es verwenden kann. Also praktisch ein "Vektor Tutorial für die die das auch benutzen wollen". Außerdem wiederspreche ich einigen anderen Autoren was Euch aber nicht verwirren sollte (bspw. behaupte ich dass ein Vektor ein Punkt ist). Wenn ihr die mathematisch korrekte Beschreibung haben wollt solltet ihr Euch den entsprechenden Stuff reinziehen. In diesem Text wird alles so beschrieben wie man es hinterher auf dem Monitor auch wahr nimmt.

1. Was ist ein Vektor?
Ein Vektor ist ein eigentlich nichts weiter als ein Punkt der durch die Koordinaten X und Y beschrieben wird. Theoretisch hat ein Vektor auch eine Länge und eine Richtung aber das ist praktisch nicht von Nutzen und fällt in diesem Text unter den Tisch. Für uns ist ein Vektor erstmal nur ein Type welches die Fields X und Y besitzt. Wenn ihr im Netz nach dem Vektor sucht der ein Punkt ist werdet ihr schnell feststellen dass man so einen Vektor "Ortsvektor" nennt. Er beschreibt halt einen Ort irgendwo auf Eurem Bildschirm. Ortsvektoren sollen auch das Erste sein womit wir uns beschäftigen.

Nun wird der Eine oder Andere fragen:
"Wenn das so easy ist, warum kann ich meinem Player dann nicht einfach die Werte X und Y verpassen?"

Die Antwort:
Wenn Du Deinen Player um 5 Pixel nach rechts und 10 Pixel nach oben bewegen willst musst Du die 5 und 10 in separaten Variablen sichern, den ganzen Kram verrechen und zurückschreiben und überhaupt wirst Du sehen dass das mit Vektoren viel einfacher geht (obwohl es eigentlich fast genauso funktioniert). In diesem Tutorial ist ein Vektor ein Punkt auf dem Bildschirm der eine Position an X, Y besitzt.

1.1 Einen Vektor erstellen

Lasst uns ein Type erstellen dass wir Vector2F nennen. "Vector" ist klar, das Type beschreibt einen Vektor. "2" sagt an dass es sich um einen zweidimensionalen Vektor handelt und das "F" definiert dass wir Fließkommazahlen (Floats) verwenden.
Code: [AUSKLAPPEN]

Type Vector2F
Field x:Float
Field y:Float
End Type

In Monkey könnten wir nun direkt mit New(x:Float, y:Float) die Koordinaten des Vektors angeben, in BlitzMax setzen wir die Koordinaten erstmal auf Null und definieren eine Methode die den Vektor platziert (ja, ja darth ... er wird nicht platziert, er wird verschoben *pff*)
Code: [AUSKLAPPEN]

Type Vector2F
Field x:Float
Field y:Float

Method New()
   Self.x = 0.0
   Self.y = 0.0
End Method

Method setPosition(x:Float, y:Float)
   Self.x = x
   Self.y = y
End Method
End Type

Damit hätten wir schonmal den Grundstock um einen Vektor zu erzeugen und ihn zu platzieren.

1.2 Einen Vektor bewegen

Um diesen Punkt nun zu bewegen müssen wir seine Komponenten x und y verändern. Dies geschieht durch Addition und Substraktion. Das Ziel ist es dass wir eine Position, nennen wir sie "playerPos", durch die Angabe eines zweiten Vektors verändern. Logischerweise können wir weder in Monkey noch in BlitzMax einfach ein Type (eine Klasse) mit einer anderen addieren oder substrahieren, also führen wir Methoden ein die dies bewerkstelligen. Bevor wir das tun noch ein kleines bisschen Theorie:

Einen Vektor addiert oder subtrahiert man mit einem weiteren Vektor über die Komponenten der Vektoren. Das klingt jetzt irre kompliziert und der Eine oder Andere möchte jetzt schon wieder abschalten, habe ich recht? Aber so schwer ist das nicht. Die Komponenten sind einfach nur die Fields x und y in unserem Type Vector2F. Man nennt es halt Komponenten und ich denke dass jeder hier im Hinterkopf behalten kann dass wir damit die Fields meinen. Ich führe das extra aus weil einige Vektor-Operationen anders gehandhabt werden als eine Addition oder Substraktion. Aber hier wollen wir ja erstmal nur einen Punkt über den Bildschirm bewegen.
Nehmen wir an unser Player befindet sich gerade in der Mitte des Bildschirms und wir wollen ihn um 5 Pixel nach rechts und 10 Pixel nach unten bewegen. In diesem Fall addieren wir einfach die Position des Players mit den Zielkoordinaten

Code: [AUSKLAPPEN]

Type Vector2F
Field x:Float
Field y:Float

Method New()
   Self.x = 0.0
   Self.y = 0.0
End Method

Method setPosition(x:Float, y:Float)
   Self.x = x
   Self.y = y
End Method

Method add(vec:Vector2F)
   Self.x = Self.x + vec.x
   Self.y = Self.y + vec.y
End Method
End Type

Die Methode add() macht also nichts weiter als die eigenen Koordinaten mit denen von vec zu addieren. Das bewirkt eine Verschiebung des Vektors um vec:Vector2F. Um nun den Vektor Player zu bewegen müssen wir also der Methode add() einen anderen Vektor übergeben der festlegt um wieviel der Player bewegt werden soll.

Code: [AUSKLAPPEN]

player:Vector2F = New Vector2F()
player.setPosition(320, 240) ' Mitte in einem 640x480 Screen

moveby:Vector2F = New Vector2F()
moveby.setPosition(5, 10)

' der Player ändert seine Position um 5 Pixel nach rechts und 10 Pixel nach unten
player.add(moveby)

Wie wir sehen kann man mit add() den Spieler scheinbar nur nach rechts unten verschieben, aber probiert einmal den Vektor moveby(New Vector2F(-5, -10))* und ihr werdet sehen dass sich der Spieler nach links oben bewegt. Das heißt dass ihr mit dem Vorzeichen die Richtung angeben könnt um wieviel sich der Spieler in welche Richtung bewegen soll. Werte kleiner als Null sagen dass sich die Figur in Richtung Nullpunkt (0, 0) bewegen soll, positive Werte sagen dass die Figur sich vom Nullpunkt weg bewegen soll. Der Nullpunkt ist die linke obere Ecke des Bildschirms wenn man BlitzMax oder Monkey zu rate zieht.

*BlitzMax kennt keine Parameter für den Konstruktor, dieses Beispiel ist nur mit Monkey anwendbar

Die Substraktion eines Vektors sollte hier nur Makulatur sein, sie funktioniert genauso wie die Addition:
Code: [AUSKLAPPEN]

Zu beachten ist dass Ihr mit einer Substraktion nicht automatisch die Richtung des Players ändert. Das Resultat ist eher eine Verlangsamung der Bewegung bis die Werte negativ werden und der Spieler die Richtung wechselt.

Zum Abschluss dieses ersten Teils will ich noch ein kleines Type zeigen welches den Vektor-Type verwendet.
Code: [AUSKLAPPEN]

Type Player
Field pos:Vector2F

Method New()
   Self.pos = New Vector2F()
   Self.dir = New Vector2F()
End Method

Method setPosition(x:Float, y:Float)
   Self.pos.setPosition(x, y)
End Method

Method moveTo(x:Float, y:Float)
   Local v:Vector2F = New Vector2F()
   v.setPosition(x, y)
   Self.pos.add(v)
End Method
End Type

Ich weiß dass das alles noch sehr holperig aussieht und im Moment noch keine wirklichen Vorteile bietet gegenüber der klassischen Methode einfach X und Y Werte zu verwenden. Aber im nächsten Teil werden wir Vektoren verwenden die den Spieler beschleunigen und wir werden sehen warum wir eine Richtung benötigen (ein weiterer Vektor) um wirklich coole Sachen zu zaubern.

DAU ... over and out.

Farbfinsternis.tv

	gameworx	Sa, Feb 04, 2012 0:29 Antworten mit Zitat
Hab es noch nicht vollständig gelesen (ist schon spät und bin müde), will aber trotzdem schonmal mein Lob aussprechen. Ich finde es super, dass du dir die Mühe gemacht hast, dieses Tutorial zu schreiben. Insbesondere auch, weil du hierbei auf die Benutzung unnötige Fachtermini verzichtest und dich auf das Wesentliche beschränkst. Werde es mir auf jeden Fall nochmal in Ruhe durchlesen. Vielen Dank dafür, Farbfinsternis. zwei Daumen hoch
AMD Athlon II X3 440 (3 GHz), 4GB Ram, ATI Radeon HD 5450, Win 7

gameworx

Sa, Feb 04, 2012 0:29
Antworten mit Zitat

Hab es noch nicht vollständig gelesen (ist schon spät und bin müde), will aber trotzdem schonmal mein Lob aussprechen. Ich finde es super, dass du dir die Mühe gemacht hast, dieses Tutorial zu schreiben. Insbesondere auch, weil du hierbei auf die Benutzung unnötige Fachtermini verzichtest und dich auf das Wesentliche beschränkst. Werde es mir auf jeden Fall nochmal in Ruhe durchlesen. Vielen Dank dafür, Farbfinsternis. *zwei Daumen hoch*

AMD Athlon II X3 440 (3 GHz), 4GB Ram, ATI Radeon HD 5450, Win 7

	BladeRunner Moderator	Sa, Feb 04, 2012 12:00 Antworten mit Zitat
Code: [AUSKLAPPEN] [EINKLAPPEN] moveby(New Vector2F(-5, -10)) Für Bmax: Code: [AUSKLAPPEN] [EINKLAPPEN] moveby(New Vector2F.setPosition(-5, -10)) Auch nicht viel umständlicher Nebenbei finde ich die Tatsache dass man einen Vektor als Richtungsangabe beziwhungswiese Längeninformation interpretieren kann durchaus für bedeutsam im Nutzen, denn dann und wann ist es genau diese Info die ich brauche
Zu Diensten, Bürger. Intel T2300, 2.5GB DDR 533, Mobility Radeon X1600 Win XP Home SP3 Intel T8400, 4GB DDR3, Nvidia GF9700M GTS Win 7/64 B3D BMax MaxGUI Stolzer Gewinner des BAC#48, #52 & #92

BladeRunner

Moderator

Sa, Feb 04, 2012 12:00
Antworten mit Zitat

Code: [AUSKLAPPEN]

moveby(New Vector2F(-5, -10))

Für Bmax:
Code: [AUSKLAPPEN]

moveby(New Vector2F.setPosition(-5, -10))

Auch nicht viel umständlicher Wink

Nebenbei finde ich die Tatsache dass man einen Vektor als Richtungsangabe beziwhungswiese Längeninformation interpretieren kann durchaus für bedeutsam im Nutzen, denn dann und wann ist es genau diese Info die ich brauche Wink

Zu Diensten, Bürger.
Intel T2300, 2.5GB DDR 533, Mobility Radeon X1600 Win XP Home SP3
Intel T8400, 4GB DDR3, Nvidia GF9700M GTS Win 7/64
B3D BMax MaxGUI
Stolzer Gewinner des BAC#48, #52 & #92