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:
...
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.
...
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
...
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