Dies ist eine alte Version des Dokuments!
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
,scale
undrotate
anwenden 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 Methodemain
der OberklassePApplet
aufruft. Danach übernimmt diese die Kontrolle und ruft immer bei bestimmten Ereignissen Methoden vonPApplet
auf, 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.