Listen & Noise

Verknüpfung von Abfragen

Kombinierte Abfragen sind zum Beispiel sinnvoll, um per Zufall gezeichnete Objekte in der Positionierung mehr zu kontrollieren. So kann man abfragen, ob die berechneten Koordinaten im erlaubten Bereich liegen.

Beispiel:

float x = random( width );
float y = random( height );
 
if( x > 100 && x < 700 && y > 200 && y < 600 )
{
	ellipse( x, y, 200, 200 );
}

Man kann die Abfrage auch umdrehen, indem man den ganzen Bereich einklammert und nicht den true-Zustand abfragt, sondern auf false prüft.

Beispiel:

float x = random( width );
float y = random( height );
 
if( ( x > 100 && x < 700 && y > 200 && y < 600 ) == false )
{
	ellipse( x, y, 200, 200 );
}

Farblisten mit Arrays erstellen

Bis dato überließen wir die Farbwahl oft dem Zufall oder beschränkten uns auf eine Hinter- und eine Vordergrundfarbe. Mit sogenannten Arrays können wir uns eine Liste von Farben anlegen, die wir dann für unsere Grafiken verwenden können.

Arrays sind als Erweiterung zu Variablen zu verstehen. Erweiterung heißt, anstelle von einem Wert kann man in diesen Listen mehrere Werte speichern. Sie sind somit eine Sammelstelle, um auch leichter auf die verschiedenen Werte zuzugreifen.

Der Unterschied zwischen der Deklarierung einer Variable ist, dass man zwischen Datentyp und den Name noch eckige Klammern [] als Indikator für ein Array einsetzt. Wichtig bei der Erstellung ist zusätzlich noch, dass man definiert, wie viele Elemente die Liste beinhalten darf. Das erfolgt über die Verwendung des new-Operators, gefolgt von dem Datentyp und in eckigen Klammern wird die Anzahl angegeben ( int [] ageList = new int[ 2 ]; ). Der Grund für die Initialisierung des Arrays inkl. der Längenangabe ist, dass so festgelegt wird, wie viel Speicherplatz der Computer zum Zwischenspeichern der Werte zur Verfügung stellen muss.

Beispiel:

color  myColor = color( 255, 0, 0 );
 
color [] colorList = new color[3];
 
colorList[ 0 ] = color( 255, 0, 0 );
colorList[ 1 ] = color( 0, 255, 0 );
colorList[ 2 ] = color( 0, 0, 255 );

Zugriff auf Farbwerte

Um Werte in einem Array zu speichern bzw. auszulesen verwendet man einen Index. Der Index beginnt immer bei 0 und ist immer eine Ganzzahl. Sprich, wenn wir 10 Elemente in der Liste haben, dann sind mögliche Werte für den Index 0 bis 9. Der Index ist ein Spiegelbild der Reihenfolge innerhalb der Liste.

Das folgende Beispiel zeigt, wie eine Liste mit drei Farben erstellt wird, der erste Wert dieser Liste dann wieder verändert wird und zum Schluss für die Füllung einer Ellipse verwendet wird.

Beispiel:

color [] colorList = new color[3];
 
colorList[ 0 ] = color( 255, 0, 0 );
colorList[ 1 ] = color( 0, 255, 0 );
colorList[ 2 ] = color( 0, 0, 255 );
 
// Zuweisung inkl. Änderung
colorList[ 0 ] = color( 255, 100, 0 );
// Auslesen
color myColor = colorList[ 0 ];
fill( myColor );
 
ellipse( 0, 0, 100, 100 );

Per Zufall eine Farbe aus einer Liste auswählen

Um zufällig eine Farbe aus der Liste auszuwählen berechnet man zu erst auf Basis der Listen-Länge ( Array.length ) und random() einen Index. Wichtig ist dabei, dass der Rückgabewert von random() als int gecastet wird, was man erreicht indem man int( value ) verwendet. Diesen Index nutzt man, um aus der Farbliste den Farbwert in der Variable colorFromList zwischen zu speichern, bevor er als Füllung gesetzt wird.

Beispiel:

int index = int( random( colorList.length ) );
 
color colorFromList = colorList[ index ]; 
 
fill( colorFromList );

noise() - mehr Kontrolle als mit random()

Tabs

Der Nachteil an dem Einsatz von random() ist, dass die Werte sehr unterschiedlich sind und untereinander in keinem Zusammenhang stehen. Um weniger zufällige Werte zu erhalten und mehr organische Ergebnisse zu erhalten empfiehlt sich der Einsatz von noise().

Heute verwenden wir noise() erst einmal nur eindimensional für die Anordnung auf der Y-Achse. Man initialisiert eine Zeitvariable und zählt diese in einem Loop konstant hoch. Die Variable übergibt man dann jeweils für die Berechnung des Y-Wertes der noise()-Funktion, die immer Werte zwischen 0 und 1 liefert, wobei der Wert immer in der Nähe des Vorgänger-Wertes ist und somit ein organischere Eindruck entsteht.

Beispiel mit random():

float time = 0.0;
 
void draw()
{
  float randomValue = random( 100 );
  println( randomValue); 
  time++;
}

Beispiel mit noise():

float time = 0.0;
 
void draw()
{
  float noiseValue = noise( time );
  println( noiseValue); 
  time++;
}

Mehr zum Thema noise() und der Helfer-Methode noiseDetail() bitte in der Hilfe oder im Buch „Learning Processing“ nachlesen.

Hausaufgabe

Programmiert drei Beispiele, bei denen ihr Euch mit den Funktionen noise() aus dem letzten Beispiel befasst.

Verwendet dabei jeweils Farblisten.

Zu allen Arbeiten sind auch jeweils die Sketch-Dateien abzugeben.

Informationen zum Dateiformat, der Bezeichnung und zum Upload der Dateien sind unter dem Punkt Prüfungsleistung zu finden.

Die Beispiele der Woche können hier herunter geladen werden.