Seite 2: Malen nach Zahlen

Inhaltsverzeichnis

Drei Programmzeilen reichen Processing aus, um ein neues Bildschirmfenster zu öffnen und die im Bild gezeigten Formen hineinzuzeichnen (Datei Linien.pde im Beispielcode):

size(400, 250);
rect(150, 80, 100, 100);
line(50, 50, 350, 200);

Die erste Zeile öffnet das Programmfenster mit einer Breite von 400 Pixeln und 250 Pixeln Höhe. Die zweite Zeile zeichnet ein Rechteck. Die vier Zahlen in der Klammer legen der Reihenfolge nach die x- und die y-Koordinate der linken oberen Ecke sowie die Breite und die Höhe fest.

Der Nullpunkt des Koordinatensystems liegt dabei stets in der linken oberen Ecke des Fensters (siehe Grafik). Das erste Pixel links oben trägt die Koordinaten (0,0), das letzte rechts unten (399, 249). Die schräge Linie schließlich wird durch die dritte Zeile definiert, sie beginnt beim Punkt mit den Koordinaten (50, 50) und endet bei (350, 200).

Jede Anweisung endet mit einem Semikolon. Text zwischen einem doppelten Schrägstrich und dem Zeilenende gilt als Kommentar und wird beim Ausführen des Programms einfach übersprungen. Die Anweisungen werden streng nach Reihenfolge im Programm abgearbeitet. Vertauscht man die zweite und dritte Zeile, verdeckt das Quadrat den Mittelteil der Linie.

Das nächste Programm namens Linien_1 zeichnet nacheinander 300 Linien. Dank einer Schleife, die Anweisungen mehrmals ausführt, kommt es dennoch mit vier Zeilen Code aus:

for (int i=0; i<300; i++){
  line(random(width), random(height),
  random(width), random(height));
}

Innerhalb der ersten runden Klammer definiert die erste Anweisung den Zähler namens i. Dieser ist vom Typ int, was für ganze Zahlen steht. Sein Startwert ist 0. Nach dem Semikolon folgt als zweite Anweisung ein Test, dessen Ergebnis bestimmt, ob die Schleife noch weiterlaufen soll. Hier ist dies der Fall, solange der Zähler kleiner als 300 ist. Er wird allerdings bei jedem Durchgang um eins erhöht, was die dritte Anweisung innerhalb der runden Klammer festlegt: i++ ist die in vielen Programmiersprachen übliche Kurzschreibweise für "addiere eins zu i hinzu".

Bei jedem Durchlauf der Schleife führt das Programm die Anweisungen zwischen den folgenden geschweiften Klammern einmal aus. Hier zeichnet es jeweils eine neue Linie, deren Anfangs- und Endpunkte die Funktion random() zufällig bestimmt. Die Zahl in der Klammer legt die Obergrenze der Zufallswerte fest, die Untergrenze ist 0. Die Zufallszahl kann dabei den Wert der Untergrenze tragen, aber sie ist stets kleiner als die obere Grenze.

Als Obergrenze der Zufallszahlen dienen hier die Variablen width und height. In sie setzt Processing automatisch die Breite und die Höhe des Programmfensters ein. Die zufälligen Linien liegen damit stets innerhalb des Fensters.

Farbkasten

Standardmäßig zeichnet Processing alle Linien und Konturen schwarz und die Flächen weiß auf einen grauen Hintergrund. Auf Dauer ist das langweilig. Der Befehl background(x) färbt den Hintergrund um, für Flächen und Linien sind fill(x) und stroke(x) zuständig. Der Platzhalter x steht dabei für eine Farbe, die wahlweise eine, zwei, drei oder vier Zahlen zwischen 0 und 255 festlegen: Eine einzelne Zahl bestimmt eine Graustufe, bei zweien steht die erste für den Grauwert, die zweite definiert die Deckkraft. Drei Zahlen stehen für die Farbkanäle Rot, Grün und Blau des RGB-Modells. Vier Zahlen schließlich legen eine RGB-Farbe und deren Deckkraft fest. Bei der Farbwahl hilft eine Palette, die Tools/Farbauswahl öffnet.

Das Programm Linien_2 funktioniert im Prinzip genauso wie Linien_1. Die Programmzeilen

background(255);
stroke(0, 100);
strokeWeight(2);
smooth();

stellen die Linien lediglich attraktiver dar. Sie erscheinen halb transparent vor weißem Hintergrund, ihre Breite beträgt zwei Pixel, und smooth() glättet die zuvor sichtbaren Pixeltreppen mittels Anti-Aliasing. Der Startpunkt der Linien liegt wie gehabt an einem beliebigen Ort im Programmfenster, die Koordinaten der Linien-Endpunkte beschränkt das Programm allerdings auf Werte zwischen einem Viertel und drei Vierteln der Fensterhöhe und -breite. Dadurch verdichten sich die Linien zum Zentrum hin. Zu diesem Zweck übergibt man random() zwei Werte, von denen der erste als Unter- und der zweite als Obergrenze zählt.

Dank des Zufallselements zaubert Processing bei jedem Programmstart ein neues Bild auf den Schirm. Spielt man mit Parametern wie Zahl der Schleifendurchläufe, Linientransparenz und -breite, Fenstergröße oder Farben, ändert das Ergebnis seinen Charakter.

Linien_3 zeichnet 20.000 Linien (was je nach Hardware etwas dauern kann), die deutlich transparenter sind als in der vorigen Skizze. Der Bildcharakter wandelt sich dadurch von einem zur Mitte hin verdichteten Liniengespinst zu einem Farbrechteck, das am Rand wellig ausfranst – dank eines Moiré-Effekts.