Einfache Animationen

Struktur für eine Animation

Eine der Stärken von Processing ist die Einfachheit mit der Animationen erzeugt werden können. Dazu ist es aber notwendig den Sketch in zwei Bereiche aufzuteilen.

void setup(){
  size(500,500);
  /* 
    Weitere Befehle, die grundlegende Einstellungen
    für den Sketch festlegen:
    - Liniendicke,
    - Füllfarbe, 
    - ...
  */
}

void draw(){
  /*
    Alle Befehle in diesem Bereich werden 
    automatisch immer wieder ausgeführt
  */
}

Die erste Animation

Für das Erzeugen einer Animation muss dafür gesorgt werden, dass die Zeichenbefehle in draw-Abschnitt geändert werden. Dadurch entstehen verschiedene Bilder, die dann (wie bei einem Daumenkino) den Eindruck einer Bewegung erzeugen.

In der ersten Animation soll ein Kreis vom oberen Fensterrand nach unten bewegen werden.

int radius, y, schritt;

void setup(){
  size(500,500);
  schritt = 2;
  radius = 20;
  y = radius;
}

void draw(){
  background(255);
  circle(width/2, y, 2*radius);
  y = y + schritt;
  println(y);
}

Erklärung:

• Der Sketch verwendet drei Variable: radius, y und schritt. Variablen können zwar überall innerhalb eines Sketches vereinbart werden, aber da diesen Variablen inerhalb von setup() und draw() verwenden werden sollen, müssen sie außerhalb dieser Bereiche vereinbart werden.

• Die Initialisierung der Variablen (d.h. die erstmalige Zuweisung eines Wertes) erfolgt im setup(). radius steht für den Radius des Kreises, y für die y-Koordinate des Mittelpunkts (als x-Koordinate wird die Mitte des Fenster verwendet (width/2)) und schritt gibt an, wie weit die y-Koordinaten bei jedem Durchlauf von draw() erhöht werden soll.

• Im draw() wird zuerst das Fenster mit weißer Farbe gelöscht, dann der Kreis gezeichnet und anschließend die y-Koordinate erhöht (es wird der Variable einer neuer Wert zugewiesen, der als dem bestehenden Wert plus 2 errechnet wird.)

• der abschließende println(y)-Befehle bewirkt, das der Wert von y an der Konsole ausgegeben wird. So kann man verfolgen, wie sich der Wert von y verändert und auch wenn der Kreis das Fenster verlassen hat, der Sketch weiterläuft.