Die ersten Programme
1. Was ist Processing?
Ein Werkzeug um Bilder, Animationen und Interaktivität zu programmieren.
Die Hauptzielgruppe für Processing sind Designer, Künstler, Forscher und Studenten, die einen sanften Einstieg in die Programmierwelt suchen.
Processing wird von Designern entwickelt.
2. Papier & Stift
Trotz der digitalen Werkzeuge sollte man analoge Werkzeuge auch mit einbeziehen. So empfiehlt es sich immer Karopapier bzw. Millimeterpapier mitzuführen, um ein paar schnelle Skizzen von vorhandenen Ideen oder Problemen machen zu können.
3. Programmoberfläche von Processing
Die Entwicklungsumgebung für Processing ist Open-Source und kann kostenlos für die drei großen Plattformen ( Pc, Mac und Linux ) unter http://processing.org/download/ herunter geladen werden.
Wir werden im Kurs mit der Version 1.0.3 beginnen. Sollten kommende Updates Verbesserungen bringen, die wir im Kurs benötigen, dann werden die Arbeitsplätze aktualisiert.
Schaltfläche von links nach rechts:
Run: Startet das Programm ( Pc: Strg + R | Mac: CMD + R )
Stop: Stopt das aktuelle Programm
New: Erstellt ein leeres Programmfenster
Open: Öffnet ein vorhandenes Programm
Save: Speichert das aktuelle Programm ( siehe: Prüfungsleistung | Ordnerstruktur für die Vorlesungszeit )
Export: Exportiert das aktuelle Programm
Zu den einzelnen Menü-Einträgen kommen wir in den folgenden Vorlesungen.
Die Reiter-Ebene zeigt an, welche Programm-Dateien gerade geöffnet sind.
Der Hauptbereich ist der Text-Editor, in dem man die Anweisungen für die aktuelle Skizze ( Programm ) definiert.
Der untere schwarze Bereich ist der Ausgabe-Bereich, der auf Fehler hinweist und Informationen zum aktuellen Programmablauf ausgibt.
4. Die ersten Anweisungen
Ein Programm gliedert sich in viele kleine Anweisungen, die Schritt für Schritt von dem Computer ausgeführt werden. Im ersten Teil werden wir die ersten Basis- und Zeichenanweisungen kennenlernen.
4.1. Größe des Zeichenbereiches
Mit dem Befehl size( width, height ) definiert man die Größe des Zeichenbereiches. Dies sollte stets die erste Anweisung jedes Programmes sein bzw. die erste innerhalb der setup-Methode.
Beispiel:
size( 800, 600 );
4.2. Definition der Hintergrundfarbe
Nach der Größe des Zeichenbereiches sollte stehts die Hintergrundfarbe intial definiert werden. Für die Angabe gibt es verschiedene Varianten.
Die Werteskala bewegt sich von 0 - 255, wie z.B. in Photoshop.
Variante 1: background( Graustufe )
Variante 2: background( Graustufe, Alpha )
Variante 3: background( Rot, Grün, Blau )
Variante 4: background( Rot, Grün, Blau, Alpha )
weitere Varianten: Link
Beispiel:
background( 120 );
4.3. Punkte
Mit der Anweisung point( x, y ) zeichnet man einen Punkt. Diese Anweisung kann wie die folgenden Anweisungen mehrfach mit verschiedenen Werten ausgeführt werden. Im späteren Verlauf werden wir auch noch einen Z-Wert für einen Punkt definieren.
Beispiel:
point(20, 20); point(50, 50);
4.4. Linien
Um eine Linie zu zeichnen definiert man jeweils für den Start- und Endpunkt einen Wert für x und y.
Beispiel:
line( 60, 60, 200, 200 );
4.5. Kreise
Um einen Kreis zu zeichnen verwendet man die Anweisung: ellipse( x, y, width, height ). Die ersten beiden Parameter definieren den Ursprung. Das dritte Paramter die Breite und das letzte die Höhe der Ellipse.
Beispiel:
ellipse( 300, 300, 50, 50 );
Mit dem Befehl ellipseMode()kann man den Ursprung der Ellipse definieren. Ohne Angabe ist es immer ellipseMode( CENTER ), sprich der Ursprung ist in der Mitte der Ellipse.
4.6. Hilfe
Um die Hilfe für einen Befehl aufzurufen hat man die Möglichkeit im Kontextmenü
5. Farbe
Standardmäßig ist die Füllung aller Objekte immer 255/255/255, sprich weiß. Die (Rahmen)-Linien werden jeweils in 0/0/0, sprich in schwarz, gezeichnet.
Um das zu ändern, nutzen wir heute die Befehle fill() und stroke(). Die Möglichkeiten der Parameter sind identisch mit der Anweisung background().
Beispiel:
fill( 255, 0, 0 ); stroke( 0, 255, 0 );
6. Anti-Aliasing
Um Ecken mit sanften Rundungen zu zeichnen, muss man das Anti-Aliasing mit dem Befehl smooth() einschalten.
Wichtig: Der Befehl sollte gleich nach dem Befehl size() geschrieben werden, da das Programm immer von oben nach unten abgearbeitet wird.
7. Zufallswert
Mit dem Befehl random( max ) erhält man eine zufällig generierte Gleitkommazahl zwischen Null und dem angegebenen Limit max. Das folgende Beispiel erzeugt immer eine zufällige Farbe für die Füllung der gezeichneten Objekte.
Beispiel:
fill( random( 255 ), random( 255 ), random( 255 ) ); stroke( 0, 255, 0 );
8. setup & draw
Um ein Programm zu ordnen unterteilt man Anweisungen in Processing in einen setup- und einen draw-Block.
Der setup-Bereich wird einmalig zum Beginn eines Programmes ausgeführt. Hier definiert man z.B. die Größe der Zeichenfläche, die Hintergrundfarbe und das Anti-Aliasing für das Programm.
Hingegen wird der draw-Bereich kontinuierlich ausgeführt, sprich in diesem Bereich können sich Formen durch Veränderung der Anweisung, z.B. durch Veränderung der Mausposition, in ihrem Aussehen variieren. Der draw-Bereich wird solange aufs Neue ausgeführt bis das Programm gestoppt wird.
Beispiel:
void setup() { size( 800, 600 ); smooth(); background( 120 ); } void draw() { fill( random( 255 ), random( 255 ), random( 255 ) ); stroke( 0, 255, 0 ); ellipse( 300, 300, 50, 50 ); }
9. framerate
Im setup-Bereich kann man mit der Anweisung frameRate( fps ) angeben mit wie vielen Bilder die Sekunde ( fps ), der draw-Bereich aktualisiert wird.
Beispiel:
frameRate( 40 );
10. Größe des Zeichenbereiches auslesen
Um den ganzen Zeichenbereich mit Objekten zu füllen ist es sinnvoll die Dimensionen des Zeichenbereiches dynamisch auszulesen.
In den vordefinierten wiederverwendbaren Datencontainern, sogenannte Variablen, width und height ist die Breite und Höhe der Zeichenfläche gespeichert.
Beispiel:
ellipse( random( width ), random( height ), 50, 50 );
11. Die Hausaufgabe
Als erste Aufgabe ist mit Hilfe der erlernten Anweisungen eine einseitige Kurzgeschichte mit Strichmännchen / Charakter zu zeichnen.
Mit Hilfe der letzten Beispiele sind zwei Varianten mit verschiedenen Farben und Formen zu erstellen.
Jede Aufgabe ist als Screenshot abzuspeichern. Die erstellten Elementen sind in der Folge für eine fiktive gestalterische Aufgabe einzusetzen.
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.
