Processing Codeschnipsel: Ball

float xPos, yPos, xSpeed, ySpeed;

void setup(){
  size(400, 300);
  frameRate(20);
  xPos = width/2;
  yPos = height/2;
  xSpeed = random(-20, 20);
  ySpeed = random(-20, 20);
}

void draw(){
  background(0);
  ellipse(xPos, yPos, 20, 20);
  xPos = xPos + xSpeed;
  yPos = yPos + ySpeed;
  if (xPos < 0 | xPos > width) {
    xSpeed = xSpeed * -1;
  }
  if (yPos < 0| yPos > height) {
    ySpeed = ySpeed * -1;
  }
}

Das Beispiel erzeugt einen „Ball“, der auf der Bildfläche hin- und herspringt und an den Rändern abprallt.

Da die erzeugte Animation zweidimensional ist, braucht man für die Beschreibung der Position des Balls auch zwei Variablen: die x- und die y-Position. Das gleiche gilt für die Geschwindigkeit: xSpeed = 10; und ySpeed = -5; würde zum Beispiel bedeuten, dass der Wert für die x-Position des Balls sich mit jedem Schritt um 10 erhöht, jener für die y-Position um 5 vermindert wird. Für die Simulation eines Balls in einem dreidimensionalen Raumes bräuchte man übrigens entsprechend je 3 Variablen für Position und Geschwindigkeit.

In Zeile 1 müssen also jeweils zwei Variablen für die aktuelle Position (xPos und yPos) und die Geschwindigkeit (xSpeed und ySpeed) deklariert werden. Deklarieren heißt: Man teilt dem Rechner mit, dass es diese Variablen gibt, wie sie heißen und welchen Typ sie haben. Die Variablen sind vom Typ float, d.h. sie können Fließkommazahlen (=Dezimalzahlen) speichern.

Die Zeilen 4-9 stehen in der Methode setup(), d.h. dieser Code wird ein einziges Mal beim Programmstart ausgeführt:
– In Zeile 4 wird die Größe des Programmfensters festgelegt. Es soll 400 Pixel breit und 300 Pixel hoch sein.
– In Zeile 5 wird die frameRate auf 20 gesetzt, d.h.: Das Programmfenster wird zwanzigmal pro Sekunde neu gezeichnet.
– In den Zeilen 6 und 7 wird die Startposition des Balls auf die Hälfte der Breite und Höhe des Programmfensters festgelegt. d.h. der Ball befindet sich mit dem Programmstart genau in der Mitte des Programmfensters. Die Variablen width (Breite) und height (Höhe) liefern die Informationen über die Größe des Programmfensters.
– In Zeile 8 und 9 werden die x- und y-Geschwindigkeiten mit je einem zufälligen Wert zwischen -20 und 20 festgelegt. Diese zufälligen Werte liefert die Methode random(min, max).

Die Zeilen 13-22 stehen in der Methode draw(). Das bedeutet: Sie werden jedes Mal, wenn das Programmfenster neu gezeichnet wird ausgeführt und sorgen damit für die Bewegung des Balls. Das geschieht wegen frameRate(20); in Zeile 5 zwanzigmal pro Sekunde.
– In Zeile 13 wird die Bildfläche schwarz gemacht.
– In Zeile 14 wird der Ball gezeichnet. Die Methode ellipse erwartet vier Argumente: die x- und die y-Position sowie den Durchmesser der Ellipse.
– Die Zeilen 15 und 16 berechnen die neue Position des Balls.
– Die Zeilen 17-19 sorgen für das Abprallen an der linken und rechten Begrenzung des Programmfensters: Wenn der Wert für die X-Position kleiner 0 oder größer der Breite des Programmfensters ist, soll der Wert für xSpeed umgekehrt werden.
– Analog erledigen Zeile 20-22 für das Abprallen an der oberen und unteren Begrenzung des Programmfensters.

Wenn Sie die Zeile 12 löschen oder mit vorgestellten // auskommentieren, dann wird die Bildfläche nicht bei jedem neuzeichnen schwarz gefüllt, dann sieht die Bildfläche nach kurzer Zeit in etwa so aus: