Graphic Coding — Arrays — Woche 10

Zurück zur Übersicht, Aufgaben

Arrays

Mit Hilfe von Variablen können wir Informationen an einem Schritt im Programm speichern, um diese an einem späteren wieder zu benutzen. Wir speichern pro Variable einen einzelnen Wert. Mit Arrays können wir nun mehrere Werte auf einmal zwischen speichern. Ein Array ist eine Liste von Variablen, bei der jedes Element den gleichen Datentyp hat. Ein Array ist eine Datenstruktur.

(Ich hatte Variablen als Schubladen bezeichnet, und um in diesem Bild zu bleiben, kann man ein Array als mehrere Schubladen oder als einen Schubladenschrank sehen.)

Deklaration eines Arrays

Arrays müssen vor Benutzung wie Variablen deklariert werden, nur dass hinter dem Datentyp noch eckige Klammern stehen:

	// Deklaration einer Ganzzahl-Variable
	int zahl;
	
	// Deklaration eines Ganzzahl-Arrays 
	int[] zahlen;

Um ein Array zu initialisieren, müssen wir die Länge des Arrays definieren. Die Länge bestimmt, wieviele Elemente in dem Array gespeichert werden können. Im folgenden Beispiel definieren wir unser Array zahlen so, dass fünf Elemente (vom Typ int) darin gespeichert werden können, und das andere Array positionen so, dass wir darin 30 Elemente, d.h. 30 float-Werte speichern können.

	// Array mit fünf Ganzzahl-Elementen
	int[] zahlen = new int[5];
	
	// Array mit dreißig Kommazahl-Elementen
	float[] positionen = new float[30];

Ein Array wird demnach so initialisiert: new datentyp[länge]; also beispielsweise new float[4];

Zugriff auf einzelne Elemente

Wir können auf die einzelnen Elemente über einen Index zugreifen. Dieser Index ist immer ganzzahlig und beginnt mit 0. Jedes Element ist dabei vom gleichen Datentyp, und kann wie eine normale Variable verwendet werden. Wenn wir auf ein einzelnes Element des Arrays zugreifen, können wir dessen Wert lesen und schreiben.

Hier sehen wir, wie man den Elementen eines Arrays neue Werte zuweist (siehe Zuweisung).

	int x = 5;
	int[] zahlen = new int[5];
	zahlen[0] = 100;
	zahlen[1] = 255;
	zahlen[2] = 2;
	zahlen[3] = width;          
	zahlen[4] = 10 * x;

Wir können die einzelnen Elemente ebenso wie Variablen verwenden:

	int x = new zahlen[4];
	int y = 4;
	y = y + zahlen[3];
	
	line(x, y, zahlen[1], zahlen[2]);

Und natürlich können wir auch für den Index eine Variable oder Ausdrücke einsetzen:

	int number = 10;
	// Sei es bei der Initialisierung
	char[] zeichen = new char[number];
	
	// Oder beim Zugriff
	int i = 5;
	zahlen[i] = zahlen[2 + 1];

Links

Verwendung von Arrays

Werden viele ähnliche Daten verwenden oder berechnet, sind Arrays sehr nützlich.
Wenn wir beispielsweise einen Ball animieren wollen (siehe Übung E2), so mussten wir die Position und die Geschwindigkeit in Variablen speichern: x, y, vx, vy. Sollen nun nicht nur ein sondern mehrere Bälle dargestellt werden, müsste man pro Ball vier Variablen einsetzen (x2, y2, vx2, vy2, x3, y3, ...), was sehr mühsam wäre. Statt dessen können wir Arrays verwenden.
Der Zweck von Arrays ist also, dass wir viele gleichartige Variablen gemeinsam speichern können — und uns dadurch viel unnötige Tipp- und Programmierarbeit erspart bleibt.

Schleifen

Um nun auf jedes Element zuzugreifen, können wir entweder jede Position einzeln angeben (zahlen[3]), oder mittels einer for-Schleifen auf alle zugreifen. Die Zählervariable einer for-Schleife können wir dann direkt als Index verwenden:

	int[] zahlen = new int[5];
	for (int i = 0; i < 5; i++) {
		zahlen[i] = i * 10;
	}

Dank Einsatz solch einer Schleife durchläuft Processing alle Elemente. Arrays und Schleifen harmonieren besonders gut zusammen. Die Verwendung von Arrays kommt sehr häufig in Kombination mit Schleifen vor.

Im folgenden Beispiel werden zehn Kreise gezeichnet, wobei als Positionen die Werte zweier Arrays verwendet werden.

	float[] x = new float[10];
	float[] y = new float[10];
	
	void setup() {
		size(200, 200);
		
		// Initialisierung aller Elemente beider Arrays
		for (int i = 0; i < 10; i++) {
			x[i] = random(width);
			y[i] = random(height);
		}
	}
	
	void draw() {
		// Zeichnen von Kreisen unter Einsatz einer Schleife und der Arrays
		for (int i = 0; i < 10; i++) {
			ellipse(x[i], y[i], 20, 20);
		}
	]

Beispiel: Mehrere bewegte Kreise

Hierfür wurde die Übung E2 so erweitert, dass durch Einsatz von Arrays mehrere Kreise animiert werden.

[]

Bei Einsatz von Arrays ist zu beachten, dass die eckigen Klammern verschieden verwendet werden und verschiedene Bedeutungen haben: