Arrays in Processing

Am Ende des Kapitels solltest du

• wissen, was eine Array ist,
• wissen, wie man Arrays deklariert, erzeugt und initialisiert,
• in der Lage sein, Arrays mit Hilfe von Schleifen zu initialisieren bzw. damit Werte aus einem Array auszulesen,
• den Begriff der Referenz einer Variable im Zusammenhang mit Arrays verstehen,
• in der Lage sein, Arrays für die Lösung von graphischen Aufgaben zu nutzen,
• Arrays mit Objekten als Elementen erstellen und mit ihnen umgehen können.

Ein Array oder Feld ist ein Container, der dazu dient, mehrere Elemente (Komponenten) des gleichen Typs aufzunehmen. Dabei können die Variablen über einen gemeinsamen Namen angesprochen werden und unterscheiden sich lediglich durch einen Index. Man kann sich das Array als eine lange Reihe gleichartiger Schubladen vorstellen, die durchnummeriert sind und deren Nummerierung mit 0 beginnt. Nach der Deklaration und Erzeugung des Arrays steht eine festgelegte Anzahl von Schubladen zur Verfügung, die nicht mehr geändert werden kann. Der festgelegte Datentyp ist sozusagen der Schlüssel um diese Schubladen zu öffnen und einen bestimmten Wert oder eine Referenz auf ein Objekt darin abzulegen. Der Vorteil von Arrays gegenüber einer entsprechenden Anzahl einfacher Variablen ist, dass Arrays sich leicht mit Schleifen bearbeiten lassen, da der Index einer Array-Komponente eine Variable sein kann und als Laufvariable in einer Schleife benutzt werden kann.

Deklaration, Erzeugung und Initialisierung eines Arrays

Die Definition einer Array-Variablen bedeutet in Processing nicht das Anlegen eines Arrays, sondern die Definition einer Referenzvariablen, die auf ein Array-Objekt zeigen kann.

Die allgemeine Form der Definition einer Referenzvariablen zum Zugriff auf ein Array lautet:

Datentyp [ ] Arrayname;

Beispiele: int [ ] fibonacci, double [ ] messwert, String [ ] wort

Zum Erzeugen des Array-Objekts gibt es zwei Möglichkeiten:

• das Array mit new dynamisch erzeugen und anschließend die Elemente mit den gewünschten Werten initialisieren:

//Deklaration der Arrayvariable
int [] evenNumber;
 
void setup(){
//Erzeugung des Arrays
evenNumber = new int [5];
 
 //Initialisierung des Arrays
evenNumber[0] = 2;
evenNumber[1] = 4;
evenNumber[2] = 6;
evenNumber[3] = 8;
evenNumber[4] = 10;
 
//Ausgabe des Arrays auf der Konsole
for(int i=0; i<5; i++){
  println(evenNumber[i]);
}
}

• das Array über eine Initialisierungsliste anlegen und gleichzeitig initialisieren:

int [] evenNumber = {2,4,6,8,10};

Beachte: Eine Array-Variable ist eine Referenz auf ein Array-Objekt. Mit der Deklaration einer Array-Variable ist aber das Array-Objekt selbst noch nicht angelegt.

Arrays und Schleifen

Felder und Schleifen sind in der Programmierung eng verbunden. Wir verwenden Felder um die Vielzahl von Werten, die beim Durchlauf einer Schleife entstehen, zu speichern. Oder wir benutzen Schleifen um Felder zu initialisieren oder um Werte aus einem Array auszulesen.

Beispiel für die Initialisierung:

In einem Array sollen alle geraden Zahlen bis 100 abgespeichert werden.

//Deklarieren der Arrayvariable
int [ ] gerade;
 
void setup(){
//Erzeugung des Arrays
int [ ] gerade = new int [50];
 
//Initialisieren des Arrays mittels einer Schleife
for(int i=0; i<gerade.length; i++) { gerade[i] = 2+ i*2;}
 
}

Beispiele für das Auslesen:

Mit einer weiteren Schleife können wir das erzeugte Array auf der Konsole ausgeben:

//Deklarieren der Arrayvariable
int [ ] gerade;
 
void setup(){
//Erzeugung des Arrays
int [ ] gerade = new int [50];
 
//Initialisieren des Arrays mittels einer Schleife
for(int i=0; i<gerade.length; i++) { gerade[i] = 2+ i*2;}
 
//Ausgabe des Arrays auf der Konsole
for(int i=0; i<gerade.length; i++) { println(gerade[i]);}
}

Wir können den Inhalt des Arrays jedoch auch für Berechnungen nutzen.

Aus einem Array sollen Zahlen ausgelesen werden und ihr Mittelwert errechnet werden.

Hinweis: Mit der Methode Arrayname.length kann auf die Länge des Arrays zugegriffen werden.

//Deklarieren der Arrayvariable
int [ ] zahlen;
 
void setup(){
 
//Initialisierung des Arrays
int [ ] zahlen = {3, 2, 5, 4, 1, 6};
 
//Einführung einer Hilfsvariable für die Summe
float summe = 0;
 
//Berechnung der Summe
for (int i=0; i<zahlen.length; i++){summe = summe+zahlen[ i ];}
 
//Berechnung des Mittelwerts
float mittelwert = summe / zahlen.length;
 
//Ausgabe des Ergebnisses auf der Konsole
print(mittelwert);
}

Aufgabe 1

Die ersten 20 Fibonacci-Zahlen sollen mit Hilfe eines Arrays erzeugt und ausgegeben werden. Dazu benötigen wir ein Array vom Typ long (geeignet für große (ganze) Zahlen). Die ersten beiden Fibonacci-Zahlen (0; 1) müssen "von Hand" eingegeben werden. Anschließend können wir die restlichen Elemente des Feldes mit Hilfe einer Schleife, die die weiteren Zahlen berechnet, belegen. Wir brauchen nun keine eigenen Variablen mehr, die sich bei jedem Durchlauf verändern, sondern wir greifen einfach auf die bereits belegten Elemente zu (Fibonacci (i)=Fibonacci(i-1)+Fibonacci(i-2) !!). Anschließend verwenden wir wiederum eine Schleife um die Inhalte des Feldes auf der Konsole auszugeben.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Deklarieren der Arrayvariable
long [ ] fibonacci;
 
void setup(){
//Erzeugung des Arrays
fibonacci = new long [20];
 
//Initialisierung des Arrays
  fibonacci[0]=1;
  fibonacci[1]=1;
  for (int i=2;i<20;i++){fibonacci[i]=fibonacci[i-1]+fibonacci[i-2];};
 
//Ausgabe des Arrays auf der Konsole
for (int j=0;j<20;j++){println(fibonacci[j]);};
}

Aufgabe 2

Gesucht ist eine Methode, die die ersten 10 Potenzen einer Zahl, die in einer Variable basis festgehalten wird, in einem Array abspeichert. Als Datentyp sollte long verwendet werden. Zusätzlich ist folgender Zusammenhang zu beachten: pot [0]=1; pot [ i ] = pot [i-1]*Basis. Die zehn Zahlen sollen anschließend auf der Konsole ausgegeben werden.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Deklarieren der Arrayvariable
long [ ] pot;
 
void setup(){
 
//Deklaration des Arrays
  pot = new long [10];
 
//Deklaration und Initialisierung der Variablen (Beispiel: basis=2)
  int basis=23;
 
//Initialisierung des Arrays
  pot[0]=1;
  for(int i=1; i<pot.length; i++) {pot[ i ]=pot[ i-1 ]*basis;}
 
//Ausgabe auf Konsole
  for(int j=0; j<pot.length; j++){println(pot[ j ]);}
}

Arrays in Graphikaufgaben

Arrays eignen sich natürlich auch hervorragend für die Lösung von graphischen Problemen in Processing. Sehen wir uns dazu folgendes Programm an, in dem ein Geist dem Mauszeiger folgt.

int[] xPos = new int[50];
int[] yPos = new int[50];
 
void setup(){
 size(400, 400);
 frameRate(100);
 
 //Initialisierung der Arrays
 for(int i = 0; i < xPos.length; i++){
 xPos[i] = 0;
 yPos[i] = 0;
}
 
}
 
void draw(){
 background(0);
 
 //Bei jeder Aktualisierung bekommt ein Kreis als neue Position die des ursprünglich folgenden
 for(int i = 0; i < xPos.length-1; i++){
  xPos[i] = xPos[i + 1];
  yPos[i] = yPos[i + 1];
 }
 
 //Der letzte (= vorderste) Kreis bekommt als Mittelpunkt die Mausposition
 xPos[xPos.length - 1] = mouseX;
 yPos[yPos.length - 1] = mouseY;
 
 
 //Die Kreis werden mit der jeweils aktuellen Position gezeichnet
 for(int i = 0; i < xPos.length; i++){
  //Kopf bzw. Rumpf
  noStroke();
  fill(255);
  ellipse(xPos[i], yPos[i], 50, 60);
  //Augen
  stroke(0);
  strokeWeight(5);
  point(xPos[i]-10, yPos[i]-5);
  point(xPos[i]+10, yPos[i]-5);
  //Mund
  ellipse(xPos[i], yPos[i]+15, 4, 7);
 }
}

Der Schlüssel der Darstellung ist die Zuweisung der neuen Position für die Einzelkreise, die den Geist bilden. Dabei erhält jeder Kreis den Mittelpunkt des Kreises, der ursprünglich vor ihm lag, wodurch in der Summe die Schlange entsteht, die dem Mauszeiger folgt.

Arrays aus Objekten

Besonders interessant werden Arrays dort, wo ihre Elemente Objekte sind. Wir können das Programm "Ufo Attack" aus dem letzten Kapitel dadurch deutlich kürzer gestalten. In der Klasse Ufo sind dabei nur kleinere Anpassungen, die die Datentypen betreffen, notwendig.

//Deklarieren der Arrayvariable
Ufo [] attack;
 
void setup(){
    size(600, 400);
    background(255);
 
    //Erzeugen des Arrays
    attack = new Ufo[5];
 
    //Initialisieren des Arrays über eine Schleife. Die Ufos erhalten eine zufällige Position, Größe und Bewegungsrichtung
    for(int j=0; j<attack.length; j++){
    attack[j] = new Ufo(random(300)+150, random(200)+100, random(70), color(random(256), random(256), random(256)), random(4));};
    }
 
void draw(){
  background(0);
 
  //Darstellen und Bewegen der Ufos. Geschwindigkeit wird zufällig auf einen Wert zwischen 2 und 7 gesetzt.
  for(int i=0; i<attack.length; i++){
          attack[i].display();
          attack[i].move(random(5)+2);
 
    }
}
 
 
 
class Ufo {
 
 //Attribute
 float xPos;
 float yPos;
 float b;
 color farbe;
 //Datentyp float für r, da r im Konstruktoraufruf im Hauptprogramm zufällig erzeugt wird und ein Randomwert vom Typ float ist
 float r;
 
 
 //Konstuktor
 Ufo(float xPos, float yPos, float b, color farbe, float r){
   this.xPos = xPos;
   this.yPos = yPos;
   this.b = b;
   this.farbe = farbe;
   this.r = r;
 }
 
 void display(){
   noStroke();
   //Rumpf
    fill(farbe);
    ellipse(xPos, yPos, b, 4*b/5);
    ellipse(xPos, yPos, b*2.5, b/4);
    //Fenster
    fill(255);
    ellipse(xPos-b/5-2, yPos-b/5, b/5, b/5);
    ellipse(xPos, yPos-b/5, b/5, b/5);
    ellipse(xPos+b/5+2, yPos-b/5, b/5, b/5);
}
 
 void move(float v){
   b +=v;
 
   //Die Funktion floor() rundet r auf einen ganzzahligen Wert ab
       if(floor(r)==0){xPos -=7;  b = b + xPos/b;};
       if(floor(r)==1){xPos +=8;  b = b + xPos/b;};
       if(floor(r)==2){yPos -=7;  b = b + yPos/b;};
       if(floor(r)==3){yPos +=9;  b = b + yPos/b;};
 
 
   if(xPos<0||xPos>width||yPos<0||yPos>height){xPos = width/2; yPos = random(300)+100; b=0; farbe = color(random(256), random(256), random(256));};
 }
}

Aufgabe 3

Auf der Zeichenfläche erscheint eine festgelegte Anzahl von Kreisen, die zunehmend größer und transparenter werden. Sobald sie nicht mehr sichtbar sind, tauchen sie an anderer Position wieder auf und das Spiel beginnt von Neuem. Die Attribute und Methoden der Kreise werden in einer eigenen Klasse Kreis festgelegt (Klassendiagramm siehe unten). Im Hauptprogramm wird die Aufgabe mit einem Array von Kreis-Objekten gelöst.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Deklaration der Arrayvariable
Kreis [] k;
 
void setup(){
  size(400, 400);
 
  //Erzeugen des Arrays
  k = new Kreis[20];
 
  //Initialisierung des Arrays mittels einer Schleife
  for(int i=0; i<k.length; i++){
    k[i] = new Kreis(random(width), random(height));
  }
}
 
void draw(){
  background(0);
  noStroke();
 
  //Darstellung der wachsenden Kreise auf der Zeichenfläche
  for(int i=0; i<k.length; i++){
    k[i].display();
    k[i].grow();
}
}
 
 
 
class Kreis{
 
 //Position
 float x;
 float y;
 
 //Farbe und Transparenz
 color c = color(random(256), random(256), random(256)); 
 int opacity = 255;
 
 //Startwert für Radius
 int r = 1;
 
 
//Konstruktor Kreis(float x, float y){
   this.x = x;
   this.y = y;  
 }
 
 void display(){
   //Fülleigenschaften (Farbe und Transparenz); Zugriff auf die Farbbestandteile durch Farbfunktionen
   //Berechnung z.B. 255-red(c) garantiert vollere Farben
   fill(color(255-red(c), 255-green(c), 255-blue(c)), opacity);
   ellipse(x, y, r, r);
 }
 
 void grow(){
   //Wachsen und zunehmende Transparenz
   r++;
   opacity--;
   //Ab einem gewissen Radius werden Radius und Transparenz zurückgesetzt und der Kreis erhält eine neue Position
   if(r>220){r=1; opacity = 255; x= random(width); y = random (height);};
 }
}

Aufgabe 4

Ausgehend von Aufgabe 4b) aus dem Kapitel "Bedingungen" soll sich nun eine größere Zahl von Bällen auf der Zeichenfläche bewegen. Dabei sollen die Bälle nicht nur vom Rand abprallen, sondern auch bei der Kollision mit anderen Bällen. Diese Kollision mit anderen Bällen wird in der draw()-Funktion des Hauptprogramms realisiert und benötigt die bereits bekannte dist()-Funktion.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

Ball [] bouncer = new Ball[10];
 
void setup() {
  size(400,400);
 
  for(int i=0; i<bouncer.length; i++){
    bouncer[i] = new Ball(random(width-10), random(height-10), random(6), random(6));
  }
}
 
void draw() {
 
  background(255);
 
  for(int i=0; i<bouncer.length; i++){
   bouncer[i].display(); 
   bouncer[i].move();
   bouncer[i].bounce();
 
 
    for(int j=0; j<bouncer.length; j++){
      if ((dist(bouncer[i].x, bouncer[i].y, bouncer[j].x, bouncer[j].y) < 15)) {
    bouncer[i].vX = -bouncer[i].vX;
    bouncer[i].vY = -bouncer[i].vY;
    bouncer[j].vX = -bouncer[j].vX;
    bouncer[j].vY = -bouncer[j].vY;
      }
  }  
}
}
 
 
 
class Ball{
 
//Startposition des Balles
float x;
float y;
 
//Geschwindigkeit des Balles in x- bzw. y-Richtung
float vX;
float vY;
 
//Farbe (Grauwert) des Balles
color c;
 
Ball(float x, float y, float vX, float vY){
  this.x = x;
  this.y = y;
  this.vX = vX;
  this.vY = vY;
  c = color(random(256));
}
 
void display(){
  noStroke();
  fill(c);
  ellipse(x,y,20,20);
}
 
void move(){
   x = x + vX;
   y = y + vY;
}
 
void bounce(){
  if ((x > width-10) || (x < 10)) {vX = -vX;};
  if ((y > height-10) || (y < 10)) {vY = -vY;};
}
}

Aufgabe 5

Drei aus Punkten gebildete Kreise rotieren um einen gemeinsamen Mittelpunkt. Zum Erstellen der Kreise nutzen wir jeweils ein Array aus Punkten. Jeder dieser Punkte besitzt eine Position auf der Kreisbahn, die von seinem Anfangswinkel abhängt, der bei der Initialisierung der Arrays festgelegt wird. (Hinweis: Die Punkte müssen gleichmässig auf 360 Grad verteilt werden.). Als Ausgangspunkt nutzt man am besten das Beispiel zur Bewegung auf der Kreisbahn aus dem Kapitel "Methoden".

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

Punkt [] p;
Punkt [] q;
Punkt [] r;
 
 
void setup () {
  size (550, 500); 
 
 //Erzeugen und Initialisieren der drei Arrays 
  p = new Punkt[30];
 
  for(int i = 0; i<p.length; i++){
    p[i] = new Punkt(200, i*(360/p.length), 0.03, 10);
  }
 
   q = new Punkt[20];
 
  for(int i = 0; i<q.length; i++){
    q[i] = new Punkt(160, i*(360/q.length), -0.03, 20);
  }
 
  r = new Punkt[40];
 
  for(int i = 0; i<r.length; i++){
    r[i] = new Punkt(110, i*(360/r.length), 0.02, 8);
  }
}
 
void draw(){
  background(0);
 
  //Darstellung der drei rotierenden Kreise aus Punkten
  for(int i = 0; i<p.length; i++){
  p[i].display();
  p[i].move();
  }
 
  for(int i = 0; i<q.length; i++){
  q[i].display();
  q[i].move();
  }
 
  for(int i = 0; i<r.length; i++){
  r[i].display();
  r[i].move();
  }
}
 
 
 
class Punkt{
 
float x;                // x-Position des Punktes
float y;                // y-Position des Punktes
float r;                // Radius der Kreisbahn
float alpha;            // aktueller Rotationswinkel
float da;               // Änderungswert des Rotationswinkels
color c = color(random(256), random(256), random(256));  //Farbe des Punktes
int sw;                 // Dicke des Punktes
 
 
//Konstruktor
Punkt(float r, float alpha, float da, int sw){
  this.r = r;
  this.alpha = radians(alpha);
  this.da = da;
  this.sw = sw;
}
 
void display(){
  // Zeichnen des Kreises
  stroke(c);
  strokeWeight(sw);
  point (x, y);
}
 
void move () {
 
  // Veränderung des Rotationswinkels
  alpha += da; 
 
  // Berechnung der aktuellen Position
  x = width/2 + cos (alpha) * r;
  y = height/2 + sin (alpha) * r;
 
 
  //Zusätzlicher Code für die Variante
 
  //Vergrößerung des Radius
  r+=0.5;
  //Rückstellung des Radius und Änderung der Bewegungsrichtung bei width/3
  if(r>width/3){r=10; da=-da;};
} 
}

Aufgabe 6

Erstelle ein Programm, das die Bläßchen in einem Sektglas animiert. Das Sektglas wird als Hintergrundbild eingefügt. Die Bläßchen sind Arrays aus Objekten einer Klasse Bubble.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Hintergrundbild Sektglas
PImage photo;
 
//Arrays von Bläschen
Bubble [] b1;
Bubble [] b2;
Bubble [] b3;
Bubble [] b4;
Bubble [] b5;
Bubble [] b6;
 
void setup(){
  size(450, 725);
  photo = loadImage("glas.jpg");
 
  b1 = new Bubble[20];
  b2 = new Bubble[20];
  b3 = new Bubble[20];
  b4 = new Bubble[20];
  b5 = new Bubble[20];
  b6 = new Bubble[20];
 
  //Initialisierung der Arrays
  for(int i=0; i< b1.length; i++){
   b1[i] = new Bubble(220, 220-i*8); 
  }  
  for(int i=0; i< b2.length; i++){
   b2[i] = new Bubble(200, 220-i*7); 
  }
  for(int i=0; i< b3.length; i++){
   b3[i] = new Bubble(170, 220-i*8); 
  }
  for(int i=0; i< b4.length; i++){
   b4[i] = new Bubble(230, 220-i*9); 
  }
  for(int i=0; i< b5.length; i++){
   b5[i] = new Bubble(260, 210-i*8); 
  }
  for(int i=0; i< b6.length; i++){
   b6[i] = new Bubble(240, 210-i*8); 
  }  
 
}
 
void draw(){
  image(photo, 0, 0);
 
  moveArray(b1, 240, 140);
  moveArray(b2, 210, 140);
  moveArray(b3, 230, 140);
  moveArray(b4, 240, 140);
  moveArray(b5, 230, 140);
  moveArray(b6, 230, 140);
}
 
 
//Methode erhält ein Array als Übergabewert
void moveArray(Bubble[] b, float start, float limit){
    for(int i=0; i< b.length; i++){
   b[i].display(); 
   b[i].move(start, limit);
  }
  }
 
 
 
class Bubble{
 
  float x;
  float y;  
 
  Bubble(float x, float y){
    this.x = x;
    this.y = y;
  }
 
  void display(){
    noStroke();
    fill(195, 110, 0);
    ellipse(x, y, 2, 2);
  }
 
//Übergabewerte für Start- und Endwert der Bläßchenreihe
  void move(float start, float limit){
    y-=2;
    if(y<limit){y = start;};
  }
}