Mit einem Doppelklick auf das Programmsymbol startet Ihr die Programmierumgebung:

Transkript

1 Processing für Künstler Teil 1. Programme, die Ihr zwingend braucht (ist alles kostenlos): Aktuelle Quicktime-Version Aktuelle Processing-Version Einführung Die digitale Welt erschließt sich in der Regel Künstlern nur selten. Da die Vermutung wohl nahe liegt, das Programmierung nur etwas für ausgesprochene Mathe-Freaks ist. Mit diesem Tutorial wollen wir Euch das Gegenteil beweisen und Euch zeigen wie man tolle interaktive Designs mit wenigen Zeilen Code auf den Bildschirm bringt. Was ist denn nun Processing? Processing ist ein Projekt von Ben Frey und Casey Reas, das 2001 am MIT erstellt wurde. Basierend auf der Idee, visuelle Designs schnell und unkompliziert erstellen zu können, um so neue Denkstrukturen jenseits der klassischen Informatik möglich zu machen. Für die, die es interessiert, Processing beruht auf der Programmiersprache JAVA. Im Gegensatz zu Java wird allerdings eine extrem vereinfachte Schreibweise zur Verfügung gestellt, das macht es für Einsteiger sehr einfach erste Erfolge sichtbar auf den Monitor zu bringen. Wer sich später tiefer in Materie der Programmierung trauen möchte, wird sehen, dass alle Programmiersprachen sich doch stark ähneln. Hat man einmal das Grundverständnis für den Aufbau und die Logik von Programmabläufen verstanden ist der Umstieg relativ einfach. Und wie funktioniert nun Processing? Erst einmal solltet Ihr Euch den Compiler(die Programmierumgebung) auf kostenlos herunterladen. Im Download-Bereich findet Ihr Processing für eine Reihe von unterschiedlichen Betriebssystemen. Wir beschränken uns in diesem Tutorial auf die Windows-Version. Nach dem Download des ZIP- Archives, (zum Zeitpunkt der Erstellung dieses Tutorials Version 1.2.1) entpackt Ihr einfach das Archiv in ein Verzeichnis Eurer Wahl. Danach sollte es so aussehen: Mit einem Doppelklick auf das Programmsymbol startet Ihr die Programmierumgebung:

2 Der wichtigste Teil ist der Texteditor, in den geben wir unseren Code ein. Die Schnellstart-Symbole ermöglichen, wie der Name schon sagt, Funktionen, wie das Starten und Stoppen, das Anlegen neuer Projekte usw. Für in Processing geschriebene Programme hat sich der Ausdruck Sketch eingebürgert. Startet einen Sketch Stoppt einen Sketch Erstellt einen neuen Sketch Öffnet einen vorhandenen Sketch Speichert einen Sketch Exportiert einen Sketch Wenn Ihr einen Sketch startet, erscheint ein zweites Fenster, in dem der Sketch ausgeführt und angezeigt wird.

3 Ein wenig Theorie Um am Anfang nicht vollkommen verwirrt zu werden, gibt es jetzt erst einmal ein bisschen Theorie. Die Zeichenfläche in Processing ist in ein kartesisches Koordinatensystem unterteilt (keine Angst hört sich wilder an als es ist). Im Grunde genommen ist es einfach eine Unterteilung der Zeichenfläche in X- und Y-Koordinaten. Wie Ihr oben in der schematischen Zeichnung sehen könnt befindet sich Horizontal die X- Achse und Vertikal die Y-Achse. In unserem Sketch-Fenster ist der obere Fensterrand die X-Achse und der linke Fensterrand ist die Y-Achse. Wie Ihr seht ist es gar nicht so kompliziert. Die Größen- und Positionsangaben in Processing werden immer in Pixel (Bildschirmpunkt) angegeben.

4 Jetzt geht s los Die Größe des Zeichenfensters (Sketchfenster) Um die Größe des Zeichenfensters festzulegen, dient der Befehl size(). Wird ein Sketch ohne size-angabe gemacht nimmt Processing automatisch die Größe 100 x 100. Wir brauchen für den Befehl size() zwei Angaben: die Breite des Fensters und die Höhe. Die Angabe erfolgt immer in dieser Reihenfolge, erst die Breite und dann die Höhe. size(breite,höhe) size(640,480) legt also ein Ausgabefenster an, das 640 Pixel breit und 480 Pixel hoch ist. Die Zeichenelemente von Processing Der einfache Punkt Einen Punkt zu zeichnen, ist recht einfach. Mit dem Befehl point(), gefolgt von einer X- und einer Y- Koordinate, wird an dieser Stelle ein Punkt gezeichnet. point(x,y); point(0,0) ; ist die obere linke Ecke point(100,100);

5 Die Linie Eine Linie ist eine Reihe von Punkten, die sich zwischen einem Anfangs- und einem Endpunkt erstreckt. Um eine Linie in Processing zu zeichnen, nehmt Ihr den line() Befehl. Der line() Befehl braucht vier Werte, zwei Werte (x1,y1) für den Anfangspunkt und zwei (x2,y2) für den Endpunkt. line(10,10,150,40); Das Rechteck Mit dem Befehl rect() zeichnen wir ein Rechteck. Ab dem oberen linken Punkt breitet sich das Rechteck nach unten aus. Neben der Angabe des X und Y Wertes benötigen wir noch die Breite und die Höhe des Rechtecks. rect(x,y,breite,höhe); rect(10,10,80,50); zeichnet also ein Rechteck beginnend an der Koordinate x=10 und y=10 mit einer Breite von 80 Pixel und einer Höhe von 50 Pixel..

6 Der Kreis/Ellipse Mit dem Befehl ellipse() zeichnen wir einen Kreis bzw. eine Ellipse auf die Zeichenfläche. Wir brauchen wieder einen X und einen Y Wert, sowie die Breite und die Höhe. Anders als z.b. beim Rechteck markiert der X und Y Wert die Mitte des Kreises/Ellipse. Der Wert, der Breite gibt die Ausdehnung auf der X-Achse an und der Wert der Höhe die Ausdehnung auf der Y-Achse. Also wird hier der Durchmesser angegeben und nicht der Radius. Ellipse(x,y,breite,höhe); Das Dreieck Mit dem Befehl triangle() erzeugen wir ein Dreieck. Wir brauchen um ein Dreieck zu zeichnen drei X/Y-Paare, da ein Dreieck eine Fläche ist, die durch drei miteinander verbundene Linien entsteht. triangle(x1,y1,x2,y2,x3,y3);

7 Jetzt wird es bunt Farben in Processing Die Farbbefehle von Processing werden im Prinzip für 3 Befehle verwendet: background() füllt das ganze Zeichenfenster mit der gewählten Farbe. fill() füllt ein gezeichnetes Element mit der gewählten Farbe stroke() umrahmt ein Element in der gewählten Farbe. Processing arbeitet mit dem RGBA Farbraum (Rot, Grün, Blau, Alpha). Für alle Kanäle des Farbraumes steht ein Wert zwischen 0 und 256 zur Verfügung. Wobei 0 angeben würde, dass kein Teil in die Farbmischung gelangt und 255 der komplette Farbwert. Background(R,G,B); Hier ein paar Beispiele: background(255,0,0); färbt den Hintergrund Rot background(0,255,0); färbt den Hintergrund Grün background(0,0,255); färbt den Hintergrund Blau Am besten spielt Ihr mit den Mischungen ein wenig rum und schaut Euch das Ergebnis an. Fill(R,G,B) Mit dem fill() Befehl färben wir alle im Anschluss nach diesem Befehl gezeichneten Elemente in der gewählten Farbe. Aufgehoben wird der Befehl fill() mit dem Befehl nofill().

8 Der stroke() Befehl Mit dem stroke Befehl können wir einen Rahmen um unsere Elemente setzen. In Kombination mit dem fill() oder nofill() Befehl sind beliebige Kombinationen möglich. Einige Beispiele: Element mit Rahmen size(200,200); background(255); fill(255,0,0); stroke(0); ellipse(100,100,50,50); Größe des Zeichenfensters Weißer Hintergrund Jedes Element wird ab hier Rot eingefärbt und bekommt einen schwarzen Rahmen Zeichnet einen Kreis

9 Element ohne Rahmen size(200,200); background(255); fill(255,0,0); nostroke(); ellipse(100,100,50,50); Größe des Zeichenfensters Weißer Hintergrund Jedes Element wird ab hier Rot eingefärbt Das Element soll keinen Rahmen haben Zeichnet einen Kreis Bewegung in Processing Bis jetzt haben wir nur statische Elemente auf die Zeichenfläche gebracht. Nun wollen wir uns anschauen wie das mit Bewegung aussieht. Dafür müssen wir uns mit zwei neuen Programmbereichen befassen: und void setup(){ Anweisungen void draw(){ Anweisungen Die Klamern { bekommt Ihr wenn Ihr die Taste ALT GR und 7 für die öffnende und Alt Gr und ß für die schließende drückt Mit void setup() definieren wir einen Programmteil, der immer nur einmal durchlaufen wird.

10 Mit void draw() definieren wir einen Programmteil, der bis zum Schließen des Zeichenfensters wiederholt wird. Fangen wir einfach mal an und schreiben ein kleines Programm, mit dem wir im Sketchfenster zeichnen können: Um mit der Maus zeichnen zu können, benötigen wir die aktuelle Position des Mauszeigers. Processing bietet uns eine extrem einfache Möglichkeit, die Position zu ermitteln. Mit mousex und mousey finden wir die aktuelle Position der Maus. Mit pmousex und pmousey die Position der Maus im vorherigen Bild. Alle Angaben sind dabei die Entfernung zum Koordinatenursprung (oben,links) in Pixeln auf der X- und Y- Achse. void setup(){ size(200,200); background(255); void draw(){ stroke(133); line(pmousex,pmousey, 50,50) Alles zwischen der öffnenden Klammer und der schließenden Klammer wird nur einmal ausgeführt) Größe des Zeichenfensters Weißer Hintergrund Anfang des draw Blocks Strichfarbe ist Hellgrau Zeichnet eine Linie. Letzte X und Y Mausposition beginnend bei x = 50 und Y = 50 Wenn Ihr alles richtig eingegeben habt, sollte Euer erster Sketch so aussehen: Jedes Mal, wenn Ihr mit der Maus über das Sketchfenster fahrt, wird ein Strich gezeichnet, der bis zur Ursprungskoordinate geht.

11 Ist ja schon ganz lustig, aber wäre es nicht schöner, wenn der Strich erst gezeichnet würde, wenn wir mit der Maus einen Klick in das Fenster machen? Mit Processing kein Problem. Wir fragen dazu einfach den Zustand der Maus ab. Dazu müssen wir eine Bedingung abfragen. Das Abfragen von Bedingungen geht leicht mit dem IF-Befehl. Der IF-Befehl fragt den Zustand einer Bedingung ab, der entweder JA oder NEIN ist. Also in unserem Fall, ob die Maustaste gedrückt ist oder nicht. Dafür bietet Processing die Eigenschaft mousepressed an. Und so sieht es dann aus: void setup(){ size(200,200); background(255); void draw(){ stroke(133); if (mousepressed){ line(pmousex,pmousey, 50,50) Alles zwischen der öffnenden Klammer und der schließenden Klammer wird nur einmal ausgeführt Größe des Zeichenfensters Weißer Hintergrund Anfang des draw Blocks Strichfarbe ist Hellgrau Abfrage, ob eine Maustaste gedrückt ist, wenn ja zeichnet eine Linie. Letzte X und Y Mausposition beginnend bei x = 50 und Y = 50 Hier wird jetzt erst gezeichnet, wenn eine Maustaste gedrückt wird.

12 Jetzt gehen wir ein Stück weiter. Für Künstler ist es eher interessant, Formen und Farben zu verändern. Dafür bietet uns Processing eine ganze Reihe von Filtern an. Wir werden diese Filter im Kapitel Bildmanipulation wiedersehen. Um unser kleines Zeichenprogramm etwas cooler zu machen, beschränke ich mich hier auf zwei Filter: DILATE BLUR erhöht die hellen Bereiche verwischt die Pixel, die Größe des Effektes wird durch eine Zahl bestimmt. Der filter() Befehl: filter(dilate); filter(blur,4); Und so sieht es dann aus: void setup(){ size(200,200); background(255); void draw(){ stroke(133); if (mousepressed){ line(pmousex,pmousey, 50,50) filter(blur,1); Alles zwischen der öffnenden Klammer und der schließenden Klammer wird nur einmal ausgeführt Größe des Zeichenfensters Weißer Hintergrund Anfang des draw Blocks Strichfarbe ist Hellgrau Abfrage ob eine Maustaste gedrückt ist, wenn ja zeichnet eine Linie. Letzte X und Y Mausposition beginnend bei x = 50 und y = 50

13 Jetzt nehmen wir den DILATE Filter dazu. void setup(){ size(200,200); background(255); void draw(){ stroke(133); if (mousepressed){ line(mousex,mousey, 10,10) filter(blur,1); filter(dilate); Alles zwischen der öffnenden Klammer und der schließenden Klammer wird nur einmal ausgeführt Größe des Zeichenfensters Weißer Hintergrund Anfang des draw Blocks Strichfarbe ist Hellgrau Abfrage, ob eine Maustaste gedrückt ist, wenn ja zeichnet eine Linie von der aktuellen X und Y Position der Maus beginnend bei x = 10 und y = 10 So, wir sind am Ende der Lektion 1 angekommen. Ich hoffe, bis hierhin konntet Ihr mir folgen. Ausblick auf die nächsten Lektionen: Lektion 2: Bewegung Lektion 3: Farben und Formen Lektion 4: Bildmanipulation Lektion 5: Video und Webcam Lektion 6: Sound und Visualisierung von Sound

14 Lektion 7: Bilder verfremden und nach einem Sound ausgeben Lektion 8: Reagieren auf Bewegung und Stimme Lektion 9: Touchsysteme programmieren Bis dahin sei Euch noch ans Herz gelegt, spielt mit Processing herum, Ihr werdet sehen, es macht eine Menge Spaß. Möge die Macht mit Euch sein. Uwe von WERK99