Einführung in die Programmierung mit Processing (Seite 2)

Den Code von Partikel01 finden Sie hier komplett abgedruckt, den der weiteren Versionen nur in Auszügen. Alle Programme stehen vollständig als Download auf unserer Webseite zur Verfügung. Sie öffnen ein Programm, indem Sie in der IDE über File | Open in den jeweiligen Ordner wechseln und eine beliebige PDE-Datei darin auswählen. Möchten Sie schon einmal wissen, wohin die Reise geht, starten Sie Partikel03 und klicken Sie in das Programmfenster.

Die Klasse <c>Particle<C>

Das Programm Partikel01 besteht wie alle Versionen aus drei Codedateien: Partikel0X.pde, Particle.pde und ParticleSystem.pde. In der IDE verteilen sich die Codedateien auf Tabs: Der Reiter ganz links heißt immer genauso wie das Programm; hier gehören die Definitionen von setup() und draw() hin. Über das Dreieck-Symbol in der Reiterleiste können Sie Tabs hinzufügen, löschen und umbenennen.

Bei Processing handelt es sich um eine objektorientierte Sprache. Objekte fassen Eigenschaften und Funktionen zusammen; sogenannte Klassen dienen dabei quasi als Bauplan für ein Objekt. In unserem Projekt beschreibt die Klasse Particle kreisförmige, bewegliche Grafikobjekte.

In Listing 2 deklarieren die Zeilen 4 und 5 zwei Variablen für den Radius und die Position jedes Partikels. Die Variable radius speichert den Halbmesser des Partikels. Anstatt die X- und Y-Koordinaten separat zu behandeln, verwenden wir dafür den Vektor pos. Das hilft später bei der Simulation der Physik, denn die Zusammenhänge zwischen Position, Geschwindigkeit, Anziehung und Abstoßung lassen sich mit Vektoren gut berechnen.

// Partikel01/Particle.pde
class Particle {
  float radius;
  PVector pos;
  Particle() {
    pos = new PVector(mouseX, mouseY);
    radius = 15;
  }
  void display() {
    fill(100, 60, 200, 100);
    strokeWeight(3);
    ellipse(pos.x, pos.y, 2*radius, 2*radius);
  }
}

Die Variablen für Position und Durchmesser bekommen im sogenannten Konstruktor (Zeile 7) einen Wert der Funktion, die für das Erzeugen von Partikeln zuständig ist. Der Aufruf new PVector(mouseX, mouseY) liefert einen Vektor und speichert ihn in pos. Das Partikel erscheint damit an der aktuellen Position des Mauszeigers, die Zeile 9 setzt seinen Radius auf 15 Pixel.

Die Funktion display() in Zeile 12 sorgt für die Darstellung des Partikels. Sie setzt die X- und Y-Werte des Positionsvektors sowie den Radius in einen Aufruf der Funktion ellipse() ein. Als Füllfarbe dient ein zartes Blau, die Strichdicke beträgt 3 Pixel.

Ein Behälter für Partikel

Das Programm soll beliebig viele Partikel behandeln. Dafür schreiben wir eine eigene Behälter-Klasse mit dem Namen ParticleSystem (Listing 3, Zeile 3). Zum Speichern der Partikel dient dabei eine ArrayList, ein sogenannter generischer Container (Zeile 4). Container speichern Objekte, ein generischer Container vermag jede Art von Objekt aufzunehmen. <Particle> zeigt an, dass der konkret verwendete Container ausschließlich Particle-Objekte enthalten darf.

// Partikel01/ParticleSystem.pde
class ParticleSystem {
  ArrayList<Particle> particles;
  ParticleSystem() {
    particles = new ArrayList<Particle>();
  }
  void addParticle() {
    particles.add(new Particle());
  }
  void display() {
    for (Particle p : particles) {
      p.display();
    }
  }
}

Wie kommen nun die Partikel in die ArrayList? Das erledigt die Funktion addParticle() (Zeile 10), die bei Aufruf ein neues Partikel erzeugt und es per add() an die ArrayList anhängt.

Für die Darstellung verwenden wir eine For-each-Schleife. Deren Aufruf mit for (Particle p : particles) bedeutet im Klartext: Nimm jedes Element aus particles und übergibt es als p an den folgenden Codeabschnitt. Der wiederum ruft für jedes Partikel die Funktion display() auf.

Zusammenspiel

In der Datei Partikel01.pde greift alles ineinander (Listing 4). Zeile 3 deklariert eine Variable vom Typ ParticleSystem. Die Funktion setup() setzt die Größe des Programmfensters und initialisiert den Partikelbehälter. Die Funktion draw() macht die Partikel per display() sichtbar. Die Funktion mousePressed() wird automatisch bei jedem Mausklick aufgerufen und setzt ein neues Partikel an die Position des Mauszeigers.

// Partikel01/Partikel01.pde
ParticleSystem system;
void setup() {
  size(1000, 600);
  system = new ParticleSystem();
}
void draw() {
  background(255);
  system.display();
}
void mousePressed() {
  system.addParticle();
}