Lineare Bewegung mit Arrays (1D) in Processing

Hinzugefügt am von Stephan Thiel

Powered by Processing.js

Eines der ersten Beispiele zum Thema Animation war die Lineare, ohne jegliche Beschleunigung auf der x-Achse von links nach rechts. Dieses kleine Projekt dient uns als Basis um 150 Kreise die selbe Aktion ausführen zu lassen. Wir übernehmen also den kompletten Quelltext und modifizieren als Erstes die Deklaration unserer globalen Variable xpos zum Speichern der Kreisposition - float xpos wird zu float[] xpos. Dieses Array ermöglicht uns mehrere Werte in einer Variable ablegen zu können - jeweils eine pro Kreis. Gleiche Form, andere Name für die y-Achse, damit sich die Kreise nicht überlagern. 
float xpos[] = new float[150];
float ypos[] = new float[150];
Im setup() -Block durchlaufen wir mit einer for-Schleife beide Arrays und legen mittels random() eine zufällige Startposition in xpos und ypos für jeden Kreis fest: 
for (int i=0; i < xpos.length; i++) {
  xpos[i] = random (width);
  ypos[i] = random (durchmesser / 2, height - durchmesser);
}
Die Struktur des draw() bleibt bestehen. Eine weitere for-Schleife bewirkt die Positionsabfragen und Änderungen auf alle Kreise anzuwenden.

Der Sketch

// gloable Arrays für die Ablage der Position
float xpos[] = new float[60];
float ypos[] = new float[60];
 
float durchmesser = 30;
 
void setup () {
  size(550, 200);
  smooth ();
  noStroke ();
  background (76);
   
  // Einmaliges Festlegen der x- und y-Position
  for (int i=0; i < xpos.length; i++) {
    xpos[i] = random (width);
    ypos[i] = random (durchmesser / 2, height - durchmesser / 2);
  }
}
 
void draw () {
  // Hintergrund leeren
  noStroke ();
  fill (76, 20);
  rect (0, 0, width, height);
   
  // Führe die Schleife für jeden einzelnen 
  // Kreis aus, angegeben durch die Länge von 'xpos'
  for (int i=0; i < xpos.length; i++) {
    // Position modifiziere
    xpos[i] = xpos[i] + 1;
 
    // Zurücksetzen der Kreisposition auf die linke 
    // Bildschirmseite wenn die Position größer als 
    // Bildschrimbreite + Durchmesser ist
    if (xpos[i] > width) {
      xpos[i] = 0;
    }
     
    stroke (236);
     
    // Zeichnen des Kreises an die aktuelle Position
    ellipse (xpos[i], ypos[i], durchmesser, durchmesser);
  }
}