Eine schnelle Processing-Einführung. von Thomas Rau

Transkript

1 Eine schnelle Processing-Einführung von Thomas Rau

2 Inhaltsverzeichnis 1 Was Processing ist 3 2 Der Sketch Die setup()-methode Die draw()-methode Ein vollständiger Sketch Überblick über ein paar wichtige Methoden Was man in der setup()-methode gerne mal festlegt, aber meist auch später aufrufen kann Ein kurzer Überblick über Methoden beim 2D-Zeichnen Mit der Maus arbeiten Mauswerte Mausmethoden Alles über Farben 6 6 Bildschirm löschen 7 7 Der Zufall 7 8 Mit der Tastatur arbeiten Die Methode, die beim Tastendruck aufgerufen wird Die Frage, ob eine Taste gedrückt ist Die Frage, welche Taste gedrückt worden ist Wie man das mit der Tastatur am saubersten macht Textausgabe im Sketch Kurzes Beispiel Längeres Beispiel Was noch fehlt Processing im Internet 11 2

3 1 Was Processing ist Mit Processing kann man Bilder bearbeiten, indem man jedes Pixel einer Vorlage der Reihe nach verändert. Man kann damit auch Grafiken neu erzeugen. Das geht auch interaktiv über Maus und Tastatur, so dass man eigentlich auch Spiele damit programmieren kann. Das alles geschieht in Java-Syntax, wobei die Programmierumgebung viele leidige Java-Aspekte dem Benutzer transparent macht. Und man kann das alles auch noch auf Android-Handys übertragen. 2 Der Sketch So heißen Programme in Processing. Ein Sketch besteht meistens aus mindestens zwei Methoden: Der Methode setup() und der Methode draw(). 2.1 Die setup()-methode Diese Methode wird einmal am Anfang des Programms aufgerufen. In ihr kann man andere Methoden aufrufen (selbst definierte oder vorgegebene), die zum Beispiel die Größe des Fenster bestimmen, oder andere Festlegungen treffen, die am Anfang der Programmausführung gelten sollen. 2.2 Die draw()-methode Diese Methode wird von einer übergeordneten (vor dem Benutzer verborgen gehaltenen) Schleife immer und immer wieder aufgerufen. ellipse(50, 50, 160, 80); Im Beispiel wird mit der Methode ellipse() eine Ellipse gezeichnet. Die vier Zahlen sind die Argumente des Funktionsaufrufs, sie geben an: die x-koordinate der Ellipse auf der Zeichenebene, die y-koordinate, die Breite der Ellipse, ihre Höhe. Die Koordinaten beziehen sich dabei auf den Mittelpunkt der Ellipse. Zusammen ergibt das ein vollständiges Processing-Programm, Sketch genannt: 2.3 Ein vollständiger Sketch Zusammengebaut ergibt das diesen vollständigen Sketch: ellipse(50, 50, 160, 80); 3

4 Außerhalb dieser Methoden können Variablen deklariert oder weitere Methoden definiert werden; auch Klassendefinitionen sind möglich, mit allem, was dazu gehört. In den Methoden selber ruft man weitere Methoden auf oder steuert sie mit den üblichen Kontrollstrukturen. Aufgabe Kopiere den Sketch oben nach Processing und führe ihn aus. Ergänze weitere Ellipsen, indem du die Zeile in der draw-methode kopierst und andere Werte eingibst. Wenn du rect statt ellipse schreibst, erhältst du Rechtecke. 3 Überblick über ein paar wichtige Methoden 3.1 Was man in der setup()-methode gerne mal festlegt, aber meist auch später aufrufen kann Damit legst du vor allem an Anfang einige Sachen fest, die sich späte rnicht mehr ändern werden. // Größe des Fensters; wird in den Variablen width // und height gespeichert; ist immer der erste Methodenaufruf // in setup() framerate(30); // Höchstgrenze für die Anzahl der pro Sekunde zu // zeichnenden Bilder; Standard ist 60 noloop(); // die draw-methode wird vorerst nur einmal aufgerufen (sonst // immer wieder) 3.2 Ein kurzer Überblick über Methoden beim 2D-Zeichnen Diese Methoden werden häufig innerhalb der draw()-methode aufgerufen. (Denke daran, dass diese Methode durch eine Schleuife immer und immer wieder aufgerufen wird.) Damit kannst zu Objekte zeichnen. ellipse(x,y,width, height) // eine Ellipse zeichnen mit den angegebenen // Werten statt x, y, width, height müssen // jeweils Zahlen stehen 4

5 line(x1,y1,x2,y2) // das gleiche mit einer Linie point(x,y) // und einem Punkt triangle(x1,y1,x2,y2,x3,y3) // einem Dreieck rect(x1,y1,width,height) // und einem Rechteck stroke(255); // Zeichenfarbe des Malstifts. Gilt solange, bis // eine andere Farbe festgelegt wird 255 // bedeutet: weiß, 0 bedeutet: schwarz fill(0); // ab hier gilt: Füllfarbe auf Schwarz setzen nostroke(); // es werden keine Linien gezeichnet, bis wieder // eine Zeichenfarbe ausgewählt wird Aufgabe Verwende die 2D-Befehle, um einen interessanten Sketch zu schreiben. 4 Mit der Maus arbeiten Für manche Sketche willst du vielleicht, dass sich die Zeichnung nach der Maus richtet. 4.1 Mauswerte In den Variablen mousex und mousey sind die aktuellen Mauskoordinaten gespeichert. Aufgabe Kopiere folgenden Sketch und teste ihn: ellipse(mousex, mousey, 50, 40); 5

6 Du kannst aber auch den Zustand der Maus als Bedingung nehmen. Überprüfe das, indem du diesen Sketch kopierst: if (mousepressed) { stroke(0); // Randfarbe schwarz fill(255); // Füllfarbe weiß else { stroke(255); // Randfarbe weiß fill(0); // Füllfarbe schwarz ellipse(mousex,mousey,30,30); 4.2 Mausmethoden Die Methoden void mousepressed(), void mousedragged() und void mousereleased() werden immer dann aufgerufen, wenn die Maus geklickt, geklickt bewegt beziehungsweise der Mausknopf losgelassen wird. Normalerweise passiert nichts; wenn du das anders möchtest, musst du deine eigene Version dieser Methoden schreiben: void mousepressed() { void mousedragged() { void mousereleased() { Diese Mausmethoden wirst du vielleicht erst später einmal verwenden. 5 Alles über Farben Mit vielen Methoden kannst du Farben bestimmen. So gibt stroke(...) die aktuelle Linienfarbe an, fill(...) die aktuelle Füllfarbe und background(...) die aktuelle Hintergrundfarbe. In Klammern steht jeweils ein Wert für die Farbe, und da gibt es mehrere Möglichkeiten: Zahlen von 0 (schwarz) bis 255 (weiß), dazwischen liegen Graustufen. Dreiergruppen von Zahlen von 0 bis 255, also etwa: 80, 255, 0. Dabei gibt die erste Zahl den Rotwert an, die zweite den Grünwert, die dritte den Blauwert. Damit lassen sich 2553, also über 16 Millionen Farben darstellen. Die Kombination 80, 255, 0 gibt ein Grün mit einem leichten Gelbstich. Die Dreiergruppe kann man noch durch einen vierten Wert von 0 bis 255 erweitern, der für Durchsichtigkeit steht. Die Kombination 80, 255, 0, 127 gibt ein gelbstichiges Grün, das halb durchsichtig ist. Teste das mit diesem Sketch: background(255); 6

7 fill(255,0,0); rect(20,30,400,250); fill(80,255,0,127); ellipse(mousex, mousey, 160, 80); 6 Bildschirm löschen Wenn du den Bildschirm löschen möchtest, zeichne ihn einfach mit einer Farbe deiner Wahl neu: background(80,255,0); Das kannst du am Anfang der draw()-funktion machen. Dann wird vor jedem Neuzeichnen deines Sketches der Bildschirm auf die von dir gewünschte Farbe gesetzt: background(255,0,0); //leuchtend rot ellipse(mousex, mousey, 50, 40); 7 Der Zufall Mit der random(obergrenze)-methode kann man sich eine Kommazahl zwischen 0 und Obergrenze geben lassen. Die folgende Methode zeichnet Ellipsen an einen zufälligen Ort. Da in der Variablen height die Höhe des aktuellen Fensters gespeichert ist, ergibt random(height) eine Zahl zwischen 0 und der Höhe, und mit width ist es das gleiche in der Breite. 7

8 ellipse(random(width), random(height), 50, 40); 8 Mit der Tastatur arbeiten Die Methode keypressed() wird immer dann aufgerufen, wenn eine Taste auf der Tastatur gedrückt wird. Da normalweise dann gar nichts passiert, muss du die Methode nach deinen eigenen Vorstellungen überschreiben. 8.1 Die Methode, die beim Tastendruck aufgerufen wird Das sieht dann zum Beispiel als Sketch so aus: void keypressed() { ellipse(random(width), random(height), 50, 40); 8.2 Die Frage, ob eine Taste gedrückt ist Ob die Tastatur gerade gedrückt ist, wird auch in einer Variable gespeichert. Du kannst sie so einsetzen: if (keypressed) { ellipse(random(width), random(height), 50, 40); 8

9 Allerdings kannst du auf diese Weise nicht herausfinden, welche Taste gedrückt ist. 8.3 Die Frage, welche Taste gedrückt worden ist In der Variable key wird gespeichert, welche Taste als letzte gedrückt worden ist. Im folgenden Sketch wird immer dann eine Ellipse zufällig gezeichnet, wenn das x die letzte gedrückte Taste war. Wenn man also einmal die Taste drückt, werden so lange Ellipsen gezeichnet, bis man eine andere Taste drückt. if (key== x ) { ellipse(random(width), random(height), 50, 40); 8.4 Wie man das mit der Tastatur am saubersten macht So wie im letzten Beispiel wird man das selten haben wollen. Meist will man das ja eher so haben, dass etwas geschieht, wenn die Taste gedrückt wird, und aufhört, wenn man nicht mehr drückt. Deswegen macht man das üblicherweise so, indem man die keypressed()-methode mit der key- Variablen kombiniert: void keypressed() { if (key== x ) { ellipse(random(width), random(height), 50, 40); 9 Textausgabe im Sketch Du kannst Text am einfachsten im Nachrichtenfenster ausgeben: println("hallo"); Wenn der Text aber ein Teil des Sketches werden soll, wird es komplizierter. Du musst ein Attribut vom Typ PFont anlegen und initialisieren, also einen ersten Wert zuweisen einen bestimmten Zeichensatz mit einer bestimmten Standardgröße. Dann kannst du mit der Methode text(irgendeintext, positionx, positiony) den Text zeichnen. Eventuell kannst du vorher noch den aktuellen Schrifttyp anpassen. 9

10 9.1 Kurzes Beispiel Hier wird immer an der Mausposition das Wort Hallo ausgegeben, nachdem zuvor der Hintergrund gesäubert wurde: PFont schriftart; schriftart = createfont("arial",16,true); background(0); // Hintergrund schwarz machen fill(255); // Schriftfarbe weiß text("hallo",mousex,mousey); 9.2 Längeres Beispiel So ähnlich wie oben, nur mit mehr Effekten: PFont schriftart; schriftart = createfont("arial",16,true); background(0); fill(255,(float) mousex/width*255,0); textfont(schriftart, height-mousey); text("hallo",mousex,mousey); 10 Was noch fehlt Mit fertigen Bildern arbeiten 10

11 Filter für Bilder Android-Export 11 Processing im Internet Unter processing.org findest du viel Material im Web. Unter anderem gibt es dort Tutorials für verschiedene Themen. Außerdem kannst du unter der Processing-Webseite viele Beispiele ausprobieren. 11