...
"Bouncing Ball" ohne Vektoren
Um den Einstieg in Processing Proecessing 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:
...
Die Position wurde zu Beginn mit den Variablen float x=100 und float y=100 festgelegt. Bei jedem Aufruf von draw() wird diese Position neu bestimmt, indem zur Ausgangsposition eine Geschwindigkeit hinzu addiert wird. Die Koordinaten der neuen Position lassen sich also mit x+=x+xspeed bzw. y+=y+yspeed berechnen.
2) Auf Kollision mit den Kanten prüfen
Die Kollision mit den Kanten muss für jede der vier Kanten separat durchgeführt werden. Dazu benötigen wir sowohl die Position des Balls (x,y) und natürlich dessen Radius. Den Radius können wir berechnen indem wir die ursprünglich festgelegte Grösse float size = 50 durch 2 teilen. Also ergibt sich size/2. Diesen Radius testen wir dann zusammen mit der aktuellen Position auf Kollision mit den Rändern und kehren die Geschwindigkeit um z.B. xspeed *-1. Somit bewegt sich der Ball in der nächsten Itteration in die entgegengesetzte Richtung.
Links: x<0x < 0 + size / 2
Rechts: x>widthx > width - size / 2
Oben: y<0y < 0 + size / 2
Unten: y>heighty > 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)
"BouncingBall" mit Vektoren
...
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.)
...