In diesem ersten Tutorial werden wir uns wieder in die Programmierung mit Processing einarbeiten. Dazu werden wir drei Beispiele betrachten, welche uns Schritt für Schritt an die Programmierung mit Hilfe von Vektoren und Klassen heranführen. Die Beispiele sind auf GitHub zu finden.
"Bouncing Ball" ohne Vektoren
Um den Einstieg in Proecessing Processing zu schaffen schauen wir uns zunächst ein einfaches kleines Beispiel an (BouncingBall/S1_Base). In diesem Beispiel sehen wir die uns vertraute Umgebung, sowie die grundlegende Programmstruktur von Processing:
...
Wenn wir das Beispiel laufen lassen, sehen wir einen Ball, welcher sich innerhalb der mit size(width, heigthheight) festgelegten festgelegten Grenzen bewegt. In der draw() Routine Routine sind dafür drei wesentliche Schritte nötig:
...
Links: x < 0 + size / 2
Rechts: x > width - size / 2
Oben: y < 0 + size / 2
Unten: y > height - size / 2
3) Ball darstellen
Zuletzt legen wir fest, wie unser Ball dargestellt werden soll. Dazu geben wir ihm eine Farbe für die Umrandung stroke(0), legen fest, wie dick diese sein soll strokeWeight(2) und legen eine Füllfarbe fest fill(127). Danach zeichnen wir eine Ellipse an der Position, welche wir vorher berechnet haben ellipse(x,y,size,size).
Wichtig
- Position ist eine x und y Koordinate auf dem Screen
- Geschwindigkeit ist die Veränderung einer Position (Richtung und Betrag)
...
Das obige Beispiel lässt sich mit Hilfe von Vektoren vereinfachen. Vektoren erlauben uns die Position und die Geschwindigkeit anders zu schreiben:
| Code Block | ||
|---|---|---|
| ||
float x; |
...
float y; |
...
float xspeed; |
...
float yspeed; |
wird zu:
Pvector
| Code Block | ||
|---|---|---|
| ||
PVector location; |
...
PVector velocity; |
Vektoren erlauben es uns also zwei Werte in einer Variablen zu speichern – bewegen wir uns im 3D Raum können auch drei Werte gespeichert werden. Vektoren sind also die Bezeichnung für eine Differenz zwischen sei Punkten in einem Raum.
Ein Vektor gibt uns also an, wie wir von einem Punkt zum nächsten gelangen. Zum Beispiel: Gehe in x-Richtung 10 Schritte und in y-Richtung -10 Schritte…
...
Dazu deklarieren wir die Variablen PVector location und PVector velocity. Im setup()initialisieren wir dann die zuvor festgelegten Variablen und weisen ihnen Startwerte zu:
| Code Block | ||
|---|---|---|
| ||
location = new PVector(100,100); |
...
velocity = new PVector(2,2); |
2) Position berechnen
Wie im ersten Beispiel müssen wir auch jetzt die neue Position anhand der letzten Position location und der Geschwindigkeit velocity berechnen. Dazu hilft es zu wissen, dass sich Vektoren sehr einfach miteinander addieren und subtrahieren lassen. Dies geschieht immer Komponentenweise, also separat für x-Werte und y-Werte
Um den Vektor w zu berechnen, welcher durch Addition von u und v zu erhalten ist, gilt folgendes Vorgehen:w = u + v
Auflösung nach Komponenten:wx = ux + vx
wy = uy + vy
In unserem Beispiel also:wx = 10 + 4 = 14
wy = -10 + 6 = -4
...
Die Darstellung bleibt auch gleich, bis auf die Schreibweise. Leider ist es nicht möglich ellipse(x,y,size,size) mit ellipse(location,size,size) zu ersetzen. Stattdessen schreiben wir wieder komponentenweise ellipse(location.x,location.y,size,size).
Wichtig
- Ein Vektor beschreibt die Differenz zwischen zwei Punkten
- Vektoren können zweidimensional (x,y) oder dreidimensional (x,y,z) sein.
- Vektoren lassen sich untereinander verrechnen (addieren, subtrahieren, dividieren, usw.)
Aufgaben
...
- Schaut euch die Beispiele 3 bis 6 an und versteht das Vorgehen.
Weiteres
...
- PVector – Referenz auf processing.org
- PVector – Tutorial mit Darstellungen
- Nature Of Code – Shiffman Seiten 47-83