Lineare Bewegung mit Arrays (2D) in Processing

Hinzugefügt am von Stephan Thiel

Powered by Processing.js

Beispiel Nummer zwei treibt das oben Durchgeführte auf die Spitze (siehe 1D Version). Wir legen für alle Attribute: Position, Geschwindigkeit, Durchmesser und Farbe jeweils ein Array mit 100 Feldern an. Jedem Kreis gehört demnach ein Wert aus jedem Array. Die Startposition ist bei allen die Selbe (Sketchmitte). Durch die unterschiedlichen Geschwindigkeiten (können auch negativ sein) springt die Gruppe sofort auseinander und beginnt sich auf der Zeichenfläche zu verteilen. Wir setzen den Hintergrund nie mit background() zurück und erhalt deshalb diese komplex anmutende Collage.

Der Sketch

// gloable Variable für
// die Ablage aller Positionen
float[] xpos = new float[100];
float[] ypos = new float[100];

// Positionsänderung pro Einzelbild
float[] xGeschwindigkeit = new float[100];
float[] yGeschwindigkeit = new float[100];

// Farbe der Kreise
color[] farbe = new color[100];
// Kreisdurchmesser der Kreise
float[] durchmesser = new float[100];

void setup () {
  size(550, 200);
  smooth ();
  noStroke ();
  background (76);

  // einmaliges Festlegen aller benötigten
  // Werte zu Beginn des Programms
  for (int i=0; i < xpos.length; i++) {
    xpos[i] = width / 2;
    ypos[i] = height / 2;
    xGeschwindigkeit[i] = random (-1, 1);
    yGeschwindigkeit[i] = random (-1, 1);
    durchmesser[i] = random (10, 40);
    farbe[i] = color (random (90, 250), 170, 178);
  }
}

void draw () {
  // 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++) {
    // rechter Fensterrand
    if (xpos[i] > width - durchmesser[i] / 2) {
      xGeschwindigkeit[i] *= -1;
    }
    // linker Fensterrand
    if (xpos[i] < durchmesser[i] / 2) {
      xGeschwindigkeit[i] *= -1;
    }
    // unterer Fensterrand
    if (ypos[i] > height - durchmesser[i] / 2) {
      yGeschwindigkeit[i] *= -1;
    }
    // oberer Fensterrand
    if (ypos[i] < durchmesser[i] / 2) {
      yGeschwindigkeit[i] *= -1;
    }

    // Position modifizieren, 'geschwindigkeit'
    // kann positiv oder negativ sein (siehe: * -1)
    xpos[i] = xpos[i] + xGeschwindigkeit[i];
    ypos[i] = ypos[i] + yGeschwindigkeit[i];

    // Zeichnen des Kreises an die aktuelle Position
    fill (farbe[i]);
    ellipse (xpos[i], ypos[i], durchmesser[i], durchmesser[i]);
  }
}