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"};

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 Regentropfen 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 (werden nicht mehr angezeigt) und tauchen unten wieder auf (die x-Koordinate wird zufällig und die y-Koordinate wird auf den unteren Bildschirmrand gesetzt).

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

Ein Beispiel mit einigen Erweiterungen könnte so aussehen:

Klicken, um das Programm zu starten.

Vorlage für das Ballon-Projekt

// Der i-te Ballon befindet sich am Punkt
// (xCoords[i], yCoords[i]) 
float[] xcoords = new float[10];
float[] ycoords = new float[10];

// Diese Variablen könnten auch Arrays sein, damit die Ballons
// nicht alle in derselben Geschwindigkeit mit derselben Farbe
// angezeigt werden.
float speed = 3;
color clr = color(int(random(256)), int(random(256)), int(random(256)));

void setup() {
  size(400, 500);
  
  // Initialisierung der Startpositionen
  for( int i = 0; i < xcoords.length; i++ ) {
    xcoords[i] = random(width - 20) + 10;  // innerhalb der Fensterbreite
    ycoords[i] = height + 10; // etwas unterhalb des Anzeigebereichs
  }
}


void draw() {
  // blauer Hintergrund (?)
  background(93, 160, 185);
  
  // Ballons zeichnen 
  for( int i = 0; i < xcoords.length; i++ ) {
    ycoords[i] -= speed;
    fill(clr);
    ellipse(xcoords[i], ycoords[i], 20, 40);
    
    if( ycoords[i]+40 < 0 ) {
      // Falls Fensterbereich verlassen, neue Position unten setzen
      // Hinweis: Da die Initialisierung mit Zufallswerten mehrfach benötigt wird,  
      //          könnte sie in eine eigene Funktion "void initBalloon(int i)" 
      //          ausgelagert werden.
      xcoords[i] = random(width - 20) + 10;  // innerhalb der Fensterbreite
      ycoords[i] = height + 10; // etwas unterhalb des Anzeigebereichs
    }
  }
}

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 und die y-Koordinaten so zu verändern, dass die Ballons langsam nach oben steigen. Es ist hilfreich für das Zeichnen zunächst einen neuen Befehl zu erstellen und diesen in der Schleife mit den passenden Koordinaten aufzurufen.

void ballon(int x, int y, int size) {
  // zeichne hier den Ballon
}

Tipps zu Erweiterungen

Hübschere Zufallsfarben lassen sich einfacher in einem anderen Farbraum als RGB erstellen. Schaut euch den HLS Farbraum und den colorMode()-Befehl an.

Damit sich die Ballons leicht hin-und-her bewegen, könnt ihr die Sinus- oder Cosinus-Funktion benutzen. Als Eingabe nutzt ihr den millis()-Befehl, der die Laufzeit des Programms in Miilisekunden angibt.

sin(millis() / 350.0);