Hi,

so, Ich hab im letzten Artikel eigentlich Klassen angekündigt, aber dann dachte ich mir ist es sicherlich klüger wenn zuerst die Arrays zu sprache kommen. Außerdem sind Arrays ebenso wichtig. Arrays also .. aber was ist das? Eigentlich dasselbe wie eine Variable, nur dass mehrere Werte gespeichert werden können. Wir haben uns Variablen damals als Schachteln vorgestellt, stellen wir uns Arrays also eher als Regal vor in welches mehrere Werte abgelegt werden können. Zur Veranschaulichung:

Eine Variable hat also einen Namen, einen Datentyp und einen Wert:

Es gibt noch was das eine Variable hat. Es ist nicht sichtbar und wird nicht (direkt) mit dazugeschrieben. Kommst du drauf? Es ist der Modifier, also der Gültigkeitsbereich einer Variable. Bei Arrays ist das übrigens genauso. Eine Variable die in einer Funktion deklariert wurde ist auch nur in dieser Funktion gültig. Eine Variable die innerhalb einer Klasse deklariert wurde ist Klassenweit gültig und kann Klassenübergreifend nur über eine Objektinstanz der Klasse angesprochen werden, dazu aber im nächsten Artikel mehr. Zurück zum Thema, eine Variable die außerhalb von Funktionen (also innerhalb der Klasse, so wie du es bisher gemacht hast) deklariert wurden können auch von überall aus (auch in einer Funktion) verändert werden, die Änderung wirkt sich auf die globale Variable aus und jede Funktion die auf diese Variable zurückgreift arbeitet mit der geänderten Variable weiter. Und wie gesagt, mit Arrays verhält es sich genauso.

Jetzt hast du bis jetzt noch kein Stück Code gesehen, wollen wir also in die Praxis übergehen ;-) Zuerst stellt sich natürlich die Frage wie man ein Array deklariert. Schauen wir uns das einmal an:

Gar nicht so schwer oder =) Das Array in diesem Beispiel kann insgesamt 13 Werte speichern, da der Index bei 0 beginnt. An einem Beispiel welches ohne Arrays gar nicht möglich wäre will Ich dir das demonstrieren. Stell dir vor du klickst in einem Sketch an irgendeinem Punkt und es erscheint eine ellipse. Dann klickst du nochmal an anderer Stelle, noch eine Ellipse erscheint und beide Ellipsen werden durch eine Linie verbunden. Dann klickst du nochmals irgendwohin, eine neue ellipse erscheint und eine Linie vom letzten und vom ersten Kreis werden zum neuen gezeichnet. Und das immer so weiter, verstehst du worauf das hinausläuft? Zwischen allen Punkten werden Linien verbunden, sodass immer jeder Punkt mit jedem anderen durch eine Linie miteinander verbunden wird. Das werden bei 3 Punkten 3 Linien, bei vier Punkten schon 6 Linien (die Diagnoalen nicht vergessen ;-) ) und so weiter. Das werden mit der Zeit ziemlich viele werden =) Egal, jedenfalls braucht es dafür ein Array. In dieses werden alle Mauskoordinaten gespeichert, jedes mal wenn du klickst. So kann eine Schleife durchlaufen werden in der noch eine Schleife durchlaufen wird, in der alle Punkte (die Koordinaten also) abgefragt und demnach Linien gezeigt werden. 2 Schleifen? Sicher, wir haben ja x und y Koordinaten, also hab Ich dafür auch 2 Arrays hergenommen. Dazu brauchen wir einen counter der jedesmal um 1 hochgezählt wird, damit wir immer wissen welches der letzte Punkt war.

Schau dir das einfach mal an:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(#000000); <span style="color: #CC6600;">strokeWeight</span>(1); } <span style="color: #CC6600;">int</span>[] x = <span style="color: #CC6600;">new</span> <span style="color: #CC6600;">int</span>[10000]; <span style="color: #CC6600;">int</span>[] y = <span style="color: #CC6600;">new</span> <span style="color: #CC6600;">int</span>[10000]; <span style="color: #CC6600;">int</span> c = 0; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseClicked</span>() { x[c] = <span style="color: #006699;">mouseX</span>; y[c] = <span style="color: #006699;">mouseY</span>; <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">if</span>(c != 0) { <span style="color: #CC6600;">line</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, x[c-1], y[c-1]); <span style="color: #CC6600;">for</span>(<span style="color: #CC6600;">int</span> i = 0; i < c+1; i++) { <span style="color: #CC6600;">for</span>(<span style="color: #CC6600;">int</span> j = 0; j < c+1; j++) { <span style="color: #CC6600;">line</span>(x[i], y[i], x[j], y[j]); } } } <span style="color: #CC6600;">stroke</span>(0); <span style="color: #CC6600;">ellipse</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, 10, 10); c++; } </pre>

Wenn du diese Verbindungen der Punkte untereinander nicht willst sondern einfach nur die Linien zum jeweils nächsten Punkt, kannst du die Schleifen raus lassen, also so:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(#000000); <span style="color: #CC6600;">strokeWeight</span>(1); } <span style="color: #CC6600;">int</span>[] x = <span style="color: #CC6600;">new</span> <span style="color: #CC6600;">int</span>[10000]; <span style="color: #CC6600;">int</span>[] y = <span style="color: #CC6600;">new</span> <span style="color: #CC6600;">int</span>[10000]; <span style="color: #CC6600;">int</span> c = 0; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseClicked</span>() { x[c] = <span style="color: #006699;">mouseX</span>; y[c] = <span style="color: #006699;">mouseY</span>; <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">if</span> (c != 0) { <span style="color: #CC6600;">line</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, x[c-1], y[c-1]); } <span style="color: #CC6600;">stroke</span>(0); <span style="color: #CC6600;">ellipse</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, 10, 10); c++; } </pre>

Ich habe als maximale Anzahl an Werten für das Array 10.000 angegeben, noch schöner ist es natürlich wenn wir zuerst mit weniger deklarieren (zum Beispiel nur 5) und dann nach jedem Klick das Array erweitern, aber das ist wieder eine andere Sache. Mit Arrays kann man in Verbindung mit Klassen noch viel tollere Sachen anstellen. Dazu mehr im kommenden Artikel =)

Bis dahin Marius