Erste Schritte mit Processing

Was ist Processing?

Processing funktioniert als ein flexibles Software-Skizzenbuch und wurde speziell als Sprache entwickelt um Programmieren zu lernen. Seit 2001 fördert Processing die Software-Kompetenz in der bildenden Kunst und die visuelle Kompetenz in der Technologie. Zehntausende von Studenten, Künstlern, Designern, Forschern und Hobbyisten nutzen Processing zum Lernen und für Prototypen. In Processing kann in den Sprachen Java, Python und JavaScript programmiert werden.

— übersetzt aus: https://processing.org/

Umgebung

Processing kommt mit einem Editor und einer Laufzeitumgebung. Diese können lokal installiert werden. Wer lieber nichts installieren möchte, kann den Webeditor benutzen.

Processing wurde entwickelt, möglichst einfach grafische Elemente darstellen zu können und mit Freude programmieren zu lernen.

Koordinatensystem

Processing funktioniert mit einem Koordinatensystem, das wahrscheinlich aus der Schule bekannt ist. Es gibt eine x-Achse (horizontal) und eine y-Achse (vertikal). In einem Koordinatensystem können nun durch Bestimmung von x und y Punkte gesetzt werden.

Im Unterschied zu den bekannten Koordinatensystemen aus der Schule ist der Nullpunkt (0|0) in der oberen linken Ecke. Wenn x grösser wird, bewegt sich der Punkt nach rechts und wenn y grösser wird, bewegt sich der Punkt nach unten.

Formen

Processing bietet Methoden an, um verschiedene Formen zu zeichnen. Mit rect(x,y,l,b) kann z. B. ein Rechteck gezeichnet werden. Die vier Parameter sind alles Zahlen. x und y bestimmen den Startpunkt, welcher, analog zum Koordinatensystem, an der oberen linken Ecke liegt. l ist die Ausdehnung in Richtung x-Achse, b die Ausdehnung in Richtung y-Achse.

rect(3,3,4,2) dargestellt im (vergrösserten) Koordinatensystem: Es beginnt bei Punkt (3|3) und hat in x-Richtung eine Ausdehnung von 4 und in y-Richtung eine Ausdehnung von 2.

In Realität sind die Pixel viel kleiner, der folgende Code zeigt ein weisses Rechteck ausgehend von Punkt (170|100) mit einer Länge von 200 in x-Richtung und einer Breite in y-Richtung von 100. Standardmässig wird es mit einem schwarzen Rand dargestellt.

Damit das Zeichenfenster nicht zu klein ist, wird die Grösse des Zeichenfensters mit der Methode size(400,400); auf 400x400 Pixel gesetzt.

1 2 3 size(400,400); fill(255); // weiss rect(170,100,200,100);

Ein weiteres Element sich Kreise bzw. Ellipsen:

ellipse(x, y, laenge, breite); zeichnet eine Ellipse der gewünschten Länge und Breite von dem Startpunkt (x|y) aus. Der Startpunkt liegt hier allerdings in der Mitte der Ellipse, wie auf dem nächsten Bild ersichtlich wird.

Ein Kreis ist eine Ellipse mit gleicher Länge und Breite. Wir ergänzen also unseren Code mit einer Ellipse der gleichen Länge und Breite wie das Rechteck und einem Kreis.

1 2 3 4 5 size(400,400); fill(255); rect(170,100,200,100); ellipse(100,100,100,50); ellipse(100,200,100,100);

Natürlich können bei einem auf Graphik spezialisierten Programm noch mehr Elemente gezeichnet werden.

Form	Methode	Beschreibung
Linie	line(x1,y1,x2,y2)	Zeichnet eine Line vom Punkt (x1|y1) zum Punkt (x2|y2).
Punkt	point(x,y)	Zeichnet einen Punkt an der Position (x|y).
Text	text(buchstaben, x,y)	Hier wird zuerst der Text angegeben und dann die Position (unten links des Textfeldes).

Farbe

Wir haben bereits im vorherigen Beispiel gesehen, dass wenn wir die Methode fill(255); vor dem Zeichnen der Formen aufrufen, werden diese weiss gefüllt und nicht schwarz (Standardwert).

Für Grautöne haben wir eine Farbtiefe von acht Bit zur Verfügung. Das bedeutet, wir haben acht Stellen, die jeweils 0 oder 1 sein können. Das ergibt insgesamt 256 (2⁸) Möglichkeiten. Die Grautöne beginnen bei 0 (= Schwarz) und geht bis zu 255 (= Weiss). Wenn wir fill(); mit nur einem Parameter aufrufen, wird ein Grauton erzeugt.

Für Farben haben wir dreimal acht Bit zur Verfügung. einmal für Rot, einmal für Grün und einmal für Blau (RGB). Das ergibt insgesamt eine Farbtiefe von 24Bit. D. h. wir brauchen auch mind. drei Parameter (rot, grün, blau) für fill().

fill(255,0,0); ergibt daher ein reines, leuchtendes Rot, während fill(0,255,0) ein Grün darstellt.

Im RGB Spektrum funktioniert Mischen anders als auf Papier, Rot und Grün gibt Gelb und für Weiss werden alle Farben auf 255 gesetzt, wie auf diesem Bild ersichtlich wird.

Bild von https://processing.org/tutorials/color

Wenn wir unsere Formen von vorher mit Farbe füllen, sieht das dann so aus.

size(400,400); fill(255,0,0); //rot rect(170,100,200, 100); fill(0,255,0); //grün ellipse(100,100,100,50); fill(255,255,0, 100); //gelb (1) ellipse(100,200,100, 100); 1 Es gibt noch einen vierten Parameter, den sogenannten Alpha-Kanal. Damit können wir die Deckkraft einer Farbe bestimmen. 0 ist vollständig transparent (0% der Farbe) und 255 vollständig deckend und die Default-Einstellung. Aktuell gewählt wurde eine Deckkraft von 100.

Methoden von Processing

Damit das Programm nicht nur einmalig zeichnet, gibt es in Processing eine Methode, welche sich immer wieder wiederholt und im Prinzip jedes Mal etwas neues zeichnet. Das wirkt dann wie ein Daumenkino. Will man diese Methode verwenden muss auch der Start des Programms, der aktuell nur die Definition der Fenstergrösse beinhaltet, in eine Methode geschrieben werden.

void setup(){  (1)
    size(400,400);
}
void draw(){ (2)
    ellipse(200,200,100,100);
}

1	In dieser Methode werden die Startwerte gesetzt.
2	Diese Methode wird so lange wiederholt bis das Programm geschlossen wird.

Variablen

Ein Grundkonzept der Programmierung ist das Speichern und Verarbeiten von Daten. In unserem kleinen Programm werden wir die Daten in Variablen vom Typ int speichern. Es gibt aber noch andere Typen.

int x=1; (1)
void setup(){
    size(400,400);
}
void draw(){
    x=x+2; (2)
    ellipse(200,200,x,x); (3)
}

1	Deklaration der Variablen x und Setzen des Startwerts auf 1.
2	Erhöhen des Wertes von x um 2.
3	Verwenden des Wertes von x.

Verzweigungen (Tests)

Meistens muss in einem Programm ein Test durchgeführt werden. z.B. ob eine bestimmte Taste gedrückt wurde. Je nach Tastendruck wird dann etwas anderes ausgeführt. In Processing kann abgefragt werden, ob eine Taste gedrückt wurde (Wahr oder Falsch) und welche Taste gedrückt wurde.

Wurde eine Taste gedrückt?

Mit dem Wort if (wenn) kann ein Test eingeführt werden. Nach dem if folgen dann ()-Klammern. In diesen Klammern steht der Ausdruck, der wahr (true) oder falsch (false) ist.

int x=1;
void setup(){
    size(400,400);
}
void draw(){
    x=x+2;
    if (keyPressed){ (1)
      x=1;
    }
    ellipse(200,200,x,x);
}

1	keyPressed gibt an, ob eine Taste gedrückt wurde. Wenn ja, dann wird x wieder auf den Wert 1 gesetzt.

Welche Taste wurde gedrückt

Die Variable key beinhaltet den Wert der aktuell gedrückten oder als letztes gedrückten Taste.

int x=1;
void setup(){
    size(400,400);
}
void draw(){
    x=x+2;
    if (keyPressed){
        if (key == '1') { (1)
            x=1;
        }
        if (key == 'r') { (2)
            fill(255,0,0);
        }
    }
    ellipse(200,200,x,x);
}

1	Wenn key den Wert '1' hat, dann wird x auf 1 gesetzt.
2	Wenn key den Wert 'r' hat, dann wird die Füllfarbe auf Rot gesetzt.

Schleife

Auch wenn die Methode draw endlos ausgeführt wird, kann es sein, dass man noch eine weitere Schleife braucht. Oft braucht man das nur für eine bestimmte Anzahl. Eine dieser Schleifen ist die for-Schleife.

void setup(){
    size(400,400);
}
void draw(){
    background(0);
    if (key=='1'){
      for (int i=0; i<100; i=i+40){ (1)
        rect(i,40,40,40);
      }
    }
    if (key=='2'){
      for (int i=0; i<200; i=i+20){ (2)
        rect(i,40,40,40);
      }
    }
    if (key=='3'){
      for (int i=0; i<300; i=i+10){ (3)
        rect(i,40,40,40);
      }
    }
    if (key=='4'){
      for (int i=200; i<400; i=i+10){ (4)
        rect(i,40,40,40);
      }
    }
}

1	Die erste Schleife geht von 0 bis 100 in 40er Schritten.
2	Die zweite Schleife geht von 0 bis 200 in 20er Schritten.
3	Die dritte Schleife geht von 0 bis 300 in 10er Schritten.
4	Die vierte Schleife geht von 200 bis 400 in 10er Schritten.

Bei der for-Schleife kann bestimmt werden, bei welcher Zahl gestartet wird, und bis zu welcher Zahl die Schleife laufen soll. Auch kann bestimmt werden, wie gross die Schritte dazwischen sind.

for (int i= Startwert ; i< Endwert ; i=i+ Schrittgroesse ) {}

Ausprobieren

Die Programme zu diesen Beispielen können hier heruntergeladen werden. Die zip Datei entpacken und die PDE Dateien in den einzelnen Verzeichnissen starten.

Damit die PDE Dateien lokal ausgeführt werden können, muss Processing auf dem Rechner installiert sein. Alternativ können die Textbeispiele in den Webeditor kopiert werden.

Weitere Informationen

Mehr zu Processing, Interaction Design und Softwareentwicklung gibt es unter dem Abschnitt Weitere Informationen.

Weiterführende Links zum Studium an der Hochschule Informatik gibt es unter diesem Abschnitt Links zum Studium.