Mausverfolger mit Arrays in Processing

Hinzugefügt am von Stephan Thiel

Powered by Processing.js

Ähnlichen Effekt kennen wir schon aus vergangenen Kursstunden. Bei dem Spielen mit der Mausposition hatten wir statt den Hintergrund komplett vollfarbig zu füllen ein semitransparentes Rechteck über die gesamte Zeichenfläche gelegt. Nun, in Kombination mit background(), speichern wir die letzten 70 Koordinaten der Maus und positionieren an ihnen unsere Kreise. Zwei Arrays vom Typ float beinhalten wieder die x- und y-Koordinaten. Bei jedem draw()-Durchlauf verschieben wir alle gespeicherten Werte, in den Arrays xpos und ypos, um einen Index an den Anfang der Liste (Richtung 0). Dadurch vergessen wir die Informationen über die älteste Position. An das Ende der Listen kommen die aktuellen Koordinaten der Maus.

Der Sketch

// globale Variablen zum Ablegen
// der Mausposition(en)
int[] xpos = new int[70];
int[] ypos = new int[70];

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

void draw(){
  background (79);

  /* Wir verschieben in jedem Einzelbild 
   * alle bisher gespeicherten Mauspositionen 
   * um eins nach vorn in unserem Array. In 
   * das letzte Feld kommt später die 
   * aktuelle Position der Maus.
   */
  for (int i=0; i< xpos.length - 1; i++) {
    xpos[i] = xpos[i + 1];
    ypos[i] = ypos[i + 1];
  }
  
  // aktuelle Mausposition in das letzte Feld speichern
  xpos[xpos.length - 1] = mouseX;
  ypos[xpos.length - 1] = mouseY;

  // Zeichnen aller Kreise
  for (int i=0; i < xpos.length; i++) {
    fill (229, 90, 38, 25);
    ellipse (xpos[i], ypos[i], i / 0.85, i / 0.85);
  }
}