Lernpfad:Einführung in Processing/17

Vorheriger Schritt

Arrays (im Deutschen auch Felder genannt) erlauben es, Gruppen von Daten gleichen Typs in einer Variablen zu speichern. Bei der Initialisierung wird der Datentyp und die Anzahl der Werte (Größe des Arrays) festgelegt. Der Interpreter reserviert dann den nötigen Speicherplatz. Ein Integer-Array der Größe 3 belegt 96 Bit (3 x 32 Bit) plus 16 Bit für Statusinformationen (etwa die Größe des Arrays).

Deklaration

Ein neues Array kann mit dem Schlüsselwort new erzeugt werden:

// Deklaration eines Integer-Arrays der Größe 8
int[] zahlen = new int[8];

// String-Array der Größe 11
String[] worte = new String[11];

Sind die Elemente des Arrays fest und bekannt, dann kann eine Kurzform zur Deklaration genutzt werden:

// Deklaration eines Integer-Arrays der Größe 4 mit den Werten 5,6,7 und 8
int[] zahlen = new int[]{5, 6, 7, 8};

// String-Array der Größe 5
String[] worte = new String[]{"a", "b", "c", "d", "e"};

Soll das Array nicht in einer Variablen gespeichert werden, sondern zum Beispiel nur als Parameter in einem Methodenaufruf genutzt werden, dann kann diese Form genutzt werden:

taschenrechner.addiere(new int[]{5, 6, 7, 8});

Die Größe eines Arrays kann jederzeit über das length Attribut abgefragt werden.

int[] zahlen = new int[7];

zahlen.length; // 7

Zugriffe und Zuweisungen

Der Zugriff auf die Elemente eines Arrays erfolgt über einen Index. Dabei bekommt das erste Element den Index 0, das Zweite den Index 1, und so weiter. In einem Array der Größe n hat das letzte Element also den Index n-1.

Man könnte auch sagen, dass jedes Element in einem Array durch seinen Abstand zum ersten Element beschrieben ist.

Adressierung in einem Array mit Namen "feld"

Element	1	2	3	...	i	...	n-1	n
Index	0	1	2	...	i-1	...	n-2	n-1
Zugriff	feld[0]	feld[1]	feld[2]	...	feld[i-1]	...	feld[feld.length-2]	feld[feld.length-1]

Zuweisungen und Zugriffe erfolgen auch mit eckigen Klammern, wie bei der Deklaration.

int[] zahlen = new int[8];

zahlen[0] = 133; // Zuweisung zum ersten Element mit dem Index 0
zahlen[1] = 501; // Zuweisung zum zweiten Element mit dem Index 1

zahlen[0] + zahlen[1]; // Zugriff auf die Elemente mit Index 0 und 1

Zugriffe mit Indizes außerhalb des gültigen Bereichs (also i < 0 oder i > length) produzieren einen Fehler.

Arbeitsauftrag

Notiere in der ersten Zeile jeder Tabelle die Werte, die nach Ausführung des gezeigten Quelltextes im Array gespeichert sind. Das Ergebnis jedes Schrittes dient als Ausgangssituation für den nächsten.
Falls der Quelltext irgendwo einen Fehler enthält, dann wird der gesamte Code nicht ausgeführt (auch korrekte Zeilen nicht). Das Array ändert sich also nicht.

int[] zahlen = new int[6];

Inhalt	0()	0()	0()	0()	0()	0()
Index	0	1	2	3	4	5

zahlen[4] = 4;

Inhalt	0()	0()	0()	0()	4()	0()
Index	0	1	2	3	4	5

zahlen[5] = 5;
zahlen[6] = 6;

Inhalt	0()	0()	0()	0()	4()	0()
Index	0	1	2	3	4	5

zahlen[2] = zahlen[4] + 6;
zahlen[1] = zahlen[2] - 1;
zahlen[0] = zahlen[1] - 1;

Inhalt	8()	9()	10()	0()	4()	0()
Index	0	1	2	3	4	5

if( zahlen[3] == 0 && zahlen[0] == 0 ) {
    zahlen[5] = zahlen[2] / 2;
} else {
    zahlen[5] = zahlen[0] + zahlen[3];
}

Inhalt	8()	9()	10()	0()	4()	8()
Index	0	1	2	3	4	5

zahlen[3] = zahlen.length;

Inhalt	8()	9()	10()	6()	4()	8()
Index	0	1	2	3	4	5

Lösung

1.

Inhalt	0	0	0	0	0	0
Index	0	1	2	3	4	5

2.

Inhalt	0	0	0	0	4	0
Index	0	1	2	3	4	5

3. Das Array hat die Größe 6 und gültige Indizes für die Elemente sind 0,1,2,3,4,5. Die Zuweisung zahlen[6] = 6 erzeugt einen Fehler, da 6 kein gültiger Index ist.

4.

Inhalt	8	9	10	0	4	0
Index	0	1	2	3	4	5

5.

Inhalt	8	9	10	0	4	8
Index	0	1	2	3	4	5

6.

Inhalt	8	9	10	6	4	8
Index	0	1	2	3	4	5

Über ein Array iterieren

Da man oft die Größe eines Arrays im Vorfeld nicht kennt, muss man häufig mit einer Zählschleife über das Array iterieren, um Aktionen auf oder mit den Elementen auszuführen. Iterieren bedeutet hier, auf die Elemente des Arrays vom ersten bis zum letzten Schritt für Schritt zuzugreifen (es zu "durchlaufen"). Dazu kann man jedes Schleifenkonstrukt benutzen, üblich ist aber eine Zählschleife, da sie direkt einen Zähler für den Index bereitstellt.

// Zählschleife von 0 bis zahlen.length
// Die Zählvariable i durchläuft alle Indizes des Arrays
// Das Attribut "length" eines Arrays enthält seine Größe
for( int i = 0; i < zahlen.length; i += 1 ) {
	System.out.println(zahlen[i]);
}

Arbeitsauftrag

Notiere in der ersten Zeile jeder Tabelle die Werte, die nach Ausführung des gezeigten Quelltextes im Array gespeichert sind. Das Ergebnis jedes Schrittes dient als Ausgangssituation für den nächsten.
Falls der Quelltext irgendwo einen Fehler enthält, dann wird der gesamte Code nicht ausgeführt (auch korrekte Zeilen nicht). Das Array ändert sich also nicht.

Inhalt	8	9	10	6	4	8
Index	0	1	2	3	4	5

for( int i = 0; i < zahlen.length; i++ ) {
    zahlen[i] = 10 + zahlen[i];
}

Inhalt	18()	19()	20()	16()	14()	18()
Index	0	1	2	3	4	5

for( int i = 0; i < zahlen.length; i++ ) {
    zahlen[i] = 10 + i;
}

Inhalt	10()	11()	12()	13()	14()	15()
Index	0	1	2	3	4	5

for( int i = 0; i < zahlen.length; i++ ) {
    zahlen[i] = zahlen[2] + i;
}

Inhalt	12()	13()	14()	17()	18()	19()
Index	0	1	2	3	4	5

for( int i = zahlen.length; i > 0; i-- ) {
    zahlen[i-1] = zahlen[i];
}

Inhalt	12()	13()	14()	17()	18()	19()
Index	0	1	2	3	4	5

for( int i = 1; i < zahlen.length; i += 2 ) {
    zahlen[i] = zahlen[i-1];
}

Inhalt	12()	12()	14()	14()	18()	18()
Index	0	1	2	3	4	5

for( int i = zahlen.length-1; i > 0; i -= 1 ) {
    zahlen[i] = zahlen[i]/2;
}

Inhalt	12()	6()	7()	7()	9()	9()
Index	0	1	2	3	4	5

Lösung

1.

Inhalt	18	19	20	16	14	18
Index	0	1	2	3	4	5

2.

Inhalt	10	11	12	13	14	15
Index	0	1	2	3	4	5

3.

Inhalt	12	13	14	17	18	19
Index	0	1	2	3	4	5

4.

Inhalt	12	13	14	17	18	19
Index	0	1	2	3	4	5

5.

Inhalt	12	12	14	14	18	18
Index	0	1	2	3	4	5

6.

Inhalt	12	6	7	7	9	9
Index	0	1	2	3	4	5

Übungen

Arbeitsauftrag

1. Erstelle in Processing einen int-Array namensbar mit den Zahlen 2, 4, 6 (in dieser Reihenfolge).

   Multipliziere die ersten zwei Zahlen und speichere das Ergebnis in der dritten Zelle des Arrays ab. Du solltest also {2, 4, 8} in bar haben. Schreibe bar mit println() auf die Konsole, um dies zu prüfen.

2. Kopiere die folgende Zeile nach Processing:

   float[] zahlen = {50,80,140,150,180,225,270,350};

   Gib den Inhalt des Arrays in einer Zählschleife einzeln mit println() auf der Konsole aus.

3. Verändere das Programm aus 2 so, dass die Zahlen nicht ausgegeben werden, sondern als x-Koordinate für Kreise verwendet werden. Die y-Koordinate bleibt fest auf 50 gesetzt. Stelle die Zeichenfläche auf 400x400 Pixel ein.
4. Erweitere das Programm aus 3 so, dass nur jedes zweite Element im Array als x-Koordinate verwendet wird und das nachfolgende Element als y-Koordinate. (Der erste Kreis wird also bei (50, 80) gezeichnet.)

Klicken, um das Programm zu starten.

Aufgabe 1

int[] bar = new int[3];
bar[0] = 2;
bar[1] = 4;
bar[2] = 6;
bar[2] = bar[0] + bar[1];
println(bar);

Alternative Lösung:

int[] bar = new int[]{2, 4, 6};
bar[2] = bar[0] + bar[1];
println(bar);

Aufgabe 2

float[] zahlen = {50,80,140,150,180,225,270,350};
for( int i = 0; i < zahlen.length; i++ ) {
  println(zahlen[i]);
}

Aufgabe 3

float[] zahlen = {50,80,140,150,180,225,270,350};

size(400, 400);

for( int i = 0; i < zahlen.length; i++ ) {
  ellipse(zahlen[i], 50, 20, 20);
}

Aufgabe 4

float[] zahlen = {50,80,140,150,180,225,270,350};

size(400, 400);

for( int i = 0; i < zahlen.length; i += 2 ) {
  ellipse(zahlen[i], zahlen[i+1], 20, 20);
}

Arbeitsauftrag

Simuliere Ballons (bunte Ellipsen), die vom unteren Bildschirmrand nach oben steigen. Die Koordinaten der Regentropen werden (als float) in zwei Arrays gespeichert (xcoords und ycoords). Zeige zunächst 10 Ballons an. Sobald die Ballons den oberen Rand erreichen, "platzen" sie und tauchen unten wieder auf.

Du kannst das Ballon-Programm auch selber kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).

Ein Beispiel mit einigen Erweiterungen könnte so aussehen:

Klicken, um das Programm zu starten.

Tipp

Du kannst die nötigen Arrays in dieser Art erstellen:

float[] xcoords = new float[10];

Nutze in void setup() eine for-Schleife, um eine Variable i von 0 bis xcoords.length laufen zu lassen. Setze im Schleifenrumpf in den beiden Arrays die initialen Koordinaten (z.B. Zufallswerte).

for( int i = 0; i < xcoords.length; i++ ) {
    xcoords[i] = random(0, width);
    ycoords[i] = height;
}

Verfahre in void draw() ähnlich und nutze eine Zählschleife, um die Ballons zu zeichnen.

Eine mögliche Lösung

float[] xcoords = new float[10]; float[] ycoords = new float[10]; float[] speeds = new float[10]; color[] colors = new color[10]; float[] deltas = new float[10];

void setup() {

 size(400, 500);
 
 for( int i = 0; i < xcoords.length; i++ ) {
   xcoords[i] = random(width);
   ycoords[i] = height + 10;
   speeds[i] = random(1, 4);
   colors[i] = color(int(random(256)), int(random(256)), int(random(256)));
   deltas[i] = random(1000);
 }

}

void draw() {

 background(93, 160, 185);
 
 for( int i = 0; i < xcoords.length; i++ ) {
   float xd = sin(deltas[i] + millis()/350.0) * speeds[i];
   ycoords[i] -= speeds[i];
   fill(colors[i]);
   ellipse(xcoords[i] + xd, ycoords[i], 20, 40);
   
   if( ycoords[i]+40 < 0 ) {
     xcoords[i] = random(width);
     ycoords[i] = height;
     speeds[i] = random(1, 4);
     colors[i] = color(int(random(256)), int(random(256)), int(random(256)));
     deltas[i] = random(1000);
   }
 }

}