Inhaltsverzeichnis
Processing
„Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.“ (siehe processing.org).
Processing ist keine eigene Programmiersprache, sondern eine Klassenbibliothek, die es in verschiedenen Varianten für unterschiedlichen Programmiersprachen gibt. Ein großer Teil der Processing-Bibliothek ist auch in unserer Online-Entwicklungsumgebung enthalten und in einer einzigen Klasse gebündelt: PApplet.
Wenn Du eine eigene Unterklasse von PApplet ableitest, kannst Du die Methoden
setup(wird zu Beginn ausgeführt),draw(wird 60-mal je Sekunde ausgeführt),mousePressed(wird ausgeführt, wenn eine Maustaste gedrückt wurde),mouseReleased(wird ausgeführt, wenn eine Maustaste losgelassen wurde),mouseMoved(wird immer dann ausgeführt, wenn sich die Position des Mauszeigers geändert hat),mouseEntered(wird ausgeführt, wenn der Mauszeiger in den Grafikbereich hineinfährt),mouseExited(wird ausgeführt, wenn der Mauszeiger den Grafikbereich verlässt),keyPressed(wird ausgeführt, wenn eine Taste heruntergedrückt wurde),keyReleased(wird ausgeführt, wenn eine Taste losgelassen wurde)
überschreiben und mit Deinem Programmcode füllen. Innerhalb dieser Methoden kannst Du auf eine große Anzahl mächtiger Methoden von Processing zugreifen, die es Dir einfach machen, mit wenig Programmcode schöne interaktive Grafiken und Animationen zu erstellen. Ich zeige Dir am folgenden an einfachen Beispielen, wie das geht. Alle Details von Processing kann ich Dir aber hier nicht erklären, es gibt auch viel bessere Quellen dafür
- Die Beispielseite von p5.js, der Processing-Bibliothek für Javascript, die ich in die Online-Entwicklungsumgebung hier integriert habe.
- Die Referenzseite von p5.js, auf der jede einzelne Processing-Anweisung an vielen Beispielen erklärt wird, die sich direkt auf dieser Seite ausführen lassen. Nutze v.a. im oberen Bereich der Seite das sehr gut implementierte Suchfeld!
- Erklärung der Transformationen: Früher oder später wirst Du Kombinationen der Transformationen
translate,scaleundrotateanwenden wollen. Diese Quelle erklärt anhand schöner Grafiken, wie sie zusammenwirken.
Hello World-Programm
Die Programmierung mit Processing unterscheidet sich von der Grafikprogrammierung, die Du bisher kennengelernt hast, in drei wesentlichen Punkten:
- Es gibt nur ein kurzes Hauptprogramm, das ein
HelloWorld-Objekt instanziert und dann die Methodemainder OberklassePAppletaufruft. Danach übernimmt diese die Kontrolle und ruft immer bei bestimmten Ereignissen Methoden vonPAppletauf, die Du überschreiben kannst. - Es gibt keine grafischen Objekte (z.B.
Rectangle-Objekte oderCircle-Objekte), deren grafische Darstellung man durch Methodenaufrufe verändern kann (z.B. .move(10, -20)). Stattdessen gibt es viele Methoden der KlassePApplet, die direkt auf den Grafikausgabebereich zeichnen, indem sie einfach die Farbe der einzelnen Bildpunkte („Pixel“) ändern. Eine einmal - z.B. mit recht(10, 20, 200, 300) - gezeichnete Figur lässt sich später nicht mehr verändern. Man kann nur mit der Methodebackground()den kompletten Grafikausgabebereich mit einer Farbe füllen und wieder von vorne zu zeichnen beginnen. - Das
PApplet-Objekt „merkt“ sich die aktuelle Füllfarbe, Linienfarbe, Transformation, Schriftgröße usw. Beim Zeichnen einer Figur wendet sie diese Einstellungen einfach an. Will man als nächstes eine Figur mit einer anderen Füllfarbe zeichnen, so ändert man zuerst durch Aufruf vonfill()die Füllfarben-Eigenschaft desPApplet-Objekts und zeichnet erst dann.
Zustandsorientiertes Zeichnen von grafischen Objekten
Diese Methoden kannst Du verwenden, um die Einstellungen für Füllfarbe, Rahmenfarbe usw. des PApplet-Objekts zu ändern:
fill(30, 40, 120)legt die neue Füllfarbe fest auf rot == 30, grün = 40, blau = 120. Es gibt noch viele andere Varianten zur Festlegung einer Farbe, siehe unten!stroke(120, 0, 20)ändert entsprechend die LinienfarbenoFill()sorgt dafür, dass ab jetzt ohne Füllung gezeichnet wird,noStroke()entsprechend ohne Linien,textSize()legt die neue Schriftgröße fest.
Hier eine Auswahl der Methoden zum Zeichnen:
rect(20, 20, 400, 300)zeichnet ein achsenparalleles Rechteck mit der linken oberen Ecke bei (20, 20), der Breite 400 und der Höhe 300,rect(20, 20, 400, 300, 40)zeichnet dasselbe mit abgerundeten Ecken (Eckenradius 40),circle(300, 200, 100)zeichnet einen Kreis mit Mittelpunkt bei (300, 200) und Radius 100,ellipse(300, 200, 100, 150)zeichnet eine Ellipse, deren Boundingbox die linke obere Ecke bei (300, 200) hat. Die Ellipse ist 100 breit und 150 hoch.line(20, 30, 400, 500)zeichnet eine Strecke von (20, 30) nach (400, 500).
Animationen erstellen mit Processing
Die draw-Methode der Klasse PApplet wird 60-mal pro Sekunde aufgerufen. Wenn Du sie überschreibst, wird deine draw-Methode 60-mal pro Sekunde aufgerufen. Damit lassen sich sehr einfach eindrucksvolle Animationen programmieren!