Einführung in Processing Dez 2018

Programmieren mit Processing
Kapitel 2: Einführung in Processing
2. Einführung in Processing
2.1. Processing
Processing basiert auf der bekannten Programmiersprache Java und ist eine
Programmiersprache, mit der sehr schnell grafische Formen, Animationen und Interaktionen
erstellt werden können. Dazu abstrahiert Processing noch mehr von der Funktionsweise
eines Computers als Java. Daher müssen beim Programmieren von Grafiken und
Animationen weniger technische Details beachtet werden als dies etwa bei Java oder C++
der Fall ist.
Dies macht Processing besonders in den Bereichen Architektur und digitale Medienkunst
sehr beliebt. Außerdem ist Processing deswegen auch sehr gut zum Einstieg ins
Programmieren geeignet und ermöglicht aufgrund der Ähnlichkeit zu Java später einen
leichten Umstieg auf Java und Java-ähnliche Sprachen wie C++ oder C#.
2.1.1. Processing Entwicklungsumgebung

Klassische Künstlerinnen und Künstler arbeiten in ihrem Atelier und verwenden Pinsel und
Farben als Werkzeuge, um Gemälde zu erschaffen. In der Programmierung ist der
Computer dieses Atelier und das wichtigste Werkzeug beim Erstellen von Programmen ist
die Entwicklungsumgebung.
Grundsätzlich können Programme auch in einfachen Texteditoren geschrieben werden. Die
Entwicklungsumgebung, auch IDE (Integrated Development Environment) genannt,
erleichtert jedoch das Programmieren, denn sie bietet Tools wie Syntax Highlighting,
automatische Syntaxüberprüfung, Debugger, ein Tool zur systematischen Fehlersuche
(siehe Kapitel 3), und verfügt über eine benutzerfreundliche Oberfläche.
Die Processing IDE ist kostenlos für Windows, Linux und Apple Betriebssystemen verfügbar
und kann online von der offiziellen Processing-Website heruntergeladen werden:
https://processing.org/download/
Da sich die Installation sehr einfach und “straightforward” gestaltet, sei hier auf die offizielle
Installationsanleitung (Windows, Mac, Linux) unter der folgenden URL verwiesen:
https://processing.org/tutorials/gettingstarted/
TU Wien 1
Die folgende Abbildung zeigt die Hauptansicht der Processing IDE:
Im Texteditor wird der Programmcode geschrieben und über die Play/Stop-Buttons

ausgeführt bzw. wieder gestoppt. In der Konsole werden bei Ausführung des Programms die
Textausgaben sowie bestimmte Fehlermeldungen angezeigt. Wird ein Programm gestartet,
öffnet sich ein Sketch-Fenster, in welchem die grafische Ausgabe in Processing erfolgt.
Der Debugger dient zur systematischen und erleichterten Fehlersuche und wird über den
Button rechts oben gestartet.
2.1.2. Syntax und Semantik

Computer sind sehr gute Rechenmaschinen, jedoch in ihrem “Denken” eingeschränkt. Im
Kontext des Programmierens verstehen sie nur bestimmte Programmiersprachen. Das
bedeutet, dass beim Programmieren die Grammatik ( = Syntax) der verwendeten
Programmiersprache exakt eingehalten werden muss.
Die Syntax ist vergleichbar mit der Grammatik d.h. der Rechtschreibung in einer natürlichen
Sprache. Wird die Syntax nicht eingehalten, wird in Processing eine Fehlermeldung
ausgegeben, da dann zum Beispiel Anweisungen nicht mehr korrekt erkannt werden. Dies
geschieht in der Konsole der Processing IDE bzw. im Bereich zwischen Texteditor und
Konsole.
In den meisten Fällen werden die Fehler richtig und eindeutig interpretiert in der Processing
IDE angezeigt. Manchmal jedoch muss der Fehler und die Fehlerstelle aus der
Fehlermeldung abgeleitet werden.
emantik eines Programms ist die Beschreibung seiner Wirkung. Das ist vergleichbar
Die S
mit der Bedeutung umgangssprachlicher Texte. Liegt ein Semantikfehler vor, kann ein
TU Wien 2
Programm zwar syntaktisch korrekt sein, aber sich anders verhalten, als erwünscht. Ein
Beispiel für Semantikfehler wäre etwa die Missachtung der Rangordnung der Operatoren,
z.B: a+b*c statt (a+b)*c
Da liegt kein Syntaxfehler vor, denn das Programm kann problemlos ausgeführt werden.
Das Ergebnis des Programms ist jedoch anders als “erwartet”.
Oder als Vergleich mit der deutschen Sprache: Der Satz “Zwei Joghurts sitzen im Keller und
stricken Benzin” ist rein grammatikalisch korrekt, ergibt aber inhaltlich keinen Sinn (vgl.
Semantik).
2.1.3. Programmaufbau und Programmfluss

Alle Programme, die Sie in diesem Kurs schreiben, bestehen aus den zwei Teilen setup()
und draw(). Ihr Programm sollte also wie folgt aufgebaut sein:
void setup() {

//Voreinstellungen

}

void draw() {

//die für das Zeichnen benötigten Code-Teile

}
Das Programm wird innerhalb dieser zwei Bereichen immer von oben nach unten
abgearbeitet. Aufgrund dessen ist es wichtig, in welcher Reihenfolge Sie die einzelnen
Befehlszeilen anführen.
void setup() {...} In diesem Bereich werden alle Voreinstellungen angegeben. Dieser
Bereich wird von Processing zu Beginn einmal (von oben nach unten) ausgeführt. Das
Zeichnen auf das Sketch-Fenster ist hier auch möglich, sollte aber wenn nicht anders
angegeben eher im d raw() erfolgen.
TU Wien 3
void draw() {...} wird im Anschluss ausgeführt und beinhaltet alle Code-Teile, die auf
das Sketch-Fenster gezeichnet werden sollen.
Auf diesen Programmaufbau und den Programmfluss in Processing wird in Kapitel 3 noch
detaillierter eingegangen.
2.1.4. Befehlsaufruf
Einfache Anweisungen bzw. Befehle können in Processing wie im nachfolgenden Beispiel
aussehen:
text("Hello World", 50, 50);
Ein Befehl beginnt immer mit dem Befehlsnamen, hier: text. Dieser wird gefolgt von runden
Klammern. In diesen runden Klammern eingeschlossen stehen sogenannte Argumente
oder Parameter. Diese beinhalten eine zusätzliche Information für den Befehl, um diesen
genauer zu beschreiben, zB welcher Text an welche Position des Sketch Fensters
geschrieben werden soll.
Anderes Beispiel:
rect(60, 50, 70, 100);
Die Parameter geben an, an welcher Stelle das Rechteck positioniert werden soll (60, 50)
und welche Breite (70) und Höhe (100) das Rechteck hat.
Jeder Befehl und jede Anweisung endet in Processing mit einem Strichpunkt (;).
Da es in Programmiersprachen eine große Menge an Befehlen gibt und es nicht praktikabel

ist alle auswendig zu lernen, können diese in der Referenz oder Dokumentation der
jeweiligen Programmiersprache nachgeschlagen werden. Diese Nachschlagewerke nennt
man auch API (Application Programming Interface). Die Processing API ist unter dem Link
https://processing.org/reference/ verfügbar. Hier werden alle Befehle dokumentiert, ihre
Syntax, Parameter und Funktionsweise beschrieben und deren Ausführung anhand von
Beispielen visualisiert (siehe 2.6 Processing: Application Programming Interface API).
2.1.5. Koordinatensystem
Wie in vielen Bereichen der Informatik, ist auch in Processing das Koordinatensystem zur
grafischen Ausgabe anders ausgerichtet als in der Mathematik. Der Ursprung liegt im linken
oberen Eck und die positive y-Achse zeigt nach unten, wie die folgenden Abbildungen
visualisieren.
TU Wien 4
Koordinatensystem in Processing Koordinatensystem Visualisierung im Sketch-Fenster
TU Wien 5
2.2. Grundformen
Das Zeichnen am Computer Bildschirm ist vergleichbar mit dem Zeichnen am Papier.
In Processing ist das Sketch-Fenster (Abbildung unten, links) die Zeichenfläche, auf welcher
die grafischen Ausgaben gemacht werden.
Das Sketch-Fenster ist in ein Pixelraster unterteilt. Die Breite und Höhe des Sketch-Fensters
werden mit size(b, h)
definiert, wobei b die Breite in Pixel (px) angibt und h die Höhe in
Pixel (px). Anm.: Pixel ist die kleinste Längeneinheit am Bildschirm und entspricht der
Ausdehnung eines Bildpunktes.
Beispiel:
size(100, 150);
setzt die Größe des Sketch-Fensters auf 100px Breite und 150px Höhe.
Mit dem obigen Beispiel können Bildpunkte (Pixel) von (0, 0) bis (99, 149) angesprochen
werden. Der Pixelraster kann auch als ein auf der x-Achse gespiegeltes Koordinatensystem
gesehen werden.
Hinweis: Es sind nur positive ganzzahlige Werte für Breite und Höhe des Sketch-Fensters
erlaubt. Negative Werte oder Dezimalzahlen lösen Fehlermeldungen aus.
TU Wien 6
2.2.1. Geometrische Grundformen in Processing

Im folgenden sind die häufigsten geometrischen Grundformen in Processing, Rechteck,
Viereck, Dreieck, Ellipse (inkl. Kreis) und Bogen beschrieben.
Rechteck
Ein Rechteck wird mit dem Befehl rect() gezeichnet. Dieser benötigt als Parameter die x-
und y-Koordinate der Startposition sowie die Breite und Höhe des zu zeichnenden
Rechtecks. Als Startposition dient per default die obere linke Ecke des Rechtecks, ungleich
zum Text - da ist die Position unten links.
Struktur von rect():

rect(x, y, b, h);
zeichnet ein Rechteck unter Angabe des oberen linken Eckpunkts (x, y) der Breite b und
der Höhe h.
Hinweis:
Standardmäßig besitzen geometrische Formen in Processing eine schwarze Kontur und
weiße Füllfarbe. Wie Konturen und Füllfarben geändert werden können, ist in weiterer Folge
in Kapitel 2 beschrieben
Beispiel:
Der Beispielcode zeichnet ein Rechteck mit dem linken oberen Eckpunkt bei (50, 50), 400px
Breite und 200px Höhe.
void setup() {
size(500, 300);
}

void draw() {
rect(50, 50, 400, 200);
}

Hinweis:
Wenn die Position oder Größe des geometrischen Objekts so gewählt wurden, dass sie sich
(teilweise) außerhalb der Leinwand befinden, wird nur der sichtbare Bereich gezeichnet.
Viereck
Ein Viereck hat vier Eckpunkte und wird mit dem Befehlsnamen quad() gezeichnet.
quad()
TU Wien 7
hat als Parameter die Koordinaten jedes einzelnen Eckpunktes. Achtung: Die Angabe der
Eckpunkte kann im Uhrzeigersinn oder gegen den Uhrzeigersinn erfolgen, es ist jedoch zu
beachten, dass die Eckpunkte des Vierecks in der angegebenen Reihenfolge miteinander
verbunden werden.
Struktur von quad():

quad(x1, y1, x2, y2, x3, y3, x4, y4);
zeichnet ein Viereck mit den Eckpunkten (x1, y1), (x2, y2), (x3, y3), (x4, y4).
Beispiel:
Dieses Beispiel zeichnet ein Viereck mit den Eckpunkten (50, 50), (400, 100), (450, 250)
sowie (100, 200).

void setup() {
size(500, 300);
}

void draw() {
quad(50, 50, 400, 100, 450, 250, 100, 200);
}

Interne Vorgangsweise von Processing beim Zeichnen von quad()
TU Wien 8
Dreieck
Ein Dreieck wird über seine drei Eckpunkte definiert und mit dem Befehl triangle()
gezeichnet.
Jeder Eckpunkt wird mit seinen Koordinaten einzeln angegeben. Die Reihenfolge der Punkte
kann im Uhrzeigersinn oder gegen den Uhrzeigersinn verlaufen.
Struktur von triangle():

triangle(x1, y1, x2, y2, x3, y3);
zeichnet ein Dreieck mit den Eckpunkten (x1, y1), (x2, y2) und (x3, y3).
Beispiel:
Dieses Beispiel zeichnet ein Dreieck mit den Eckpunkten (250, 50), (50, 200) und (400,
250).
void setup() {
size(500, 300);
}

void draw() {
triangle(250, 50, 50, 200, 400, 250);
}

Ellipse
Eine Ellipse wird mit den Befehlsnamen ellipse() gezeichnet. Die Parameter der Ellipse
sind deren Mittelpunkt (x- sowie y-Koordinate) sowie deren Breite und Höhe. Ein Kreis wird
in Processing als Sonderform einer Ellipse mit gleicher Breite wie Höhe gezeichnet.
Struktur von ellipse():

ellipse(x, y, b, h);
zeichnet eine Ellipse mit Mittelpunkt (x, y), einer Breite b und Höhe h
.

Beispiel: Dieses Beispiel zeichnet eine Ellipse mit Breite 400 und Höhe 200 in die Mitte der
Leinwand.
TU Wien 9

void setup() {
size(500, 300);
}

void draw() {
ellipse(250, 150, 400, 200);
}
Das nachfolgende Beispiel zeichnet anstelle der Ellipse einen Kreis mit einem Durchmesser
von 200px.
void setup() {
size(500, 300);
}

void draw() {
ellipse(250, 150, 200, 200);
}
Bogen
Ein Bogen wird mit dem Befehl arc() gezeichnet. Der Bogen basiert auf einer Ellipse. Als
Parameter werden der Mittelpunkt des Bogens in Form der x- und y- Koordinaten (x, y)
angegeben, die Breite (b) und Höhe (h) sowie jene zwei Bogenwinkel (in Radiant), an denen
der Bogen beginnt (alpha) bzw endet (beta).
Anmerkung: Die Winkel sind nicht in Grad angegeben, sondern in Radiant, d.h. mit der
Länge des Bogens eines Kreises mit Radius 1, beginnend rechts und im Uhrzeigersinn. Die
Winkel in Radiant gehen von 0 bis 2 π . 2 π entspricht 360 Grad. In Processing kann man die
Konstante PI für den Winkel von 180 Grad verwenden.
Struktur von arc():

arc(x, y, b, h, alpha, beta);
zeichnet einen (elliptischen) Bogen mit Mittelpunkt (x, y), einer Breite b und Höhe h,
Anfangswinkel alpha und Endwinkel beta. Der Bogen wird im Uhrzeigersinn von alpha bis
beta gezeichnet.
TU Wien 10
void setup() {
size(500, 300);
}

void draw() {
arc(250, 150, 300, 200, 0, 5);
}
Hinweis: Der Winkel wird nicht wie möglicherweise gewohnt von oben im Kreis gemessen
sondern von rechts anfangend gemessen.
Für den Befehl arc() existieren zusätzlich mehrere Modi, je nachdem, ob ein Kreisbogen,
ein Kreissektor oder ein Kreissegment (mit oder ohne Kreissehne) gezeichnet werden soll.
Der entsprechende Modus wird optional als zusätzlicher Parameter am Ende angegeben.
Modus:
● PIE: Kreissektor (d. h. Bogen mit den zwei Radien zum Mittelpunkt)
● CHORD: Kreissegment
● OPEN: Kreissegment ohne Kreissehne
Alle verfügbaren Modi sind unter dem entsprechenden API-Eintrag für a rc() auf der
Processing Seite beschrieben: https://processing.org/reference/arc_.html

void setup() {
size(500, 300);
}

void draw() {
arc(250, 150, 300, 200, 1, 6, PIE);
}

TU Wien 11
2.3. Ausführungsreihenfolge von Anweisungen

Anweisungen in Programmen werden Zeile für Zeile von oben nach unten ausgeführt. Beim
Zeichnen von geometrischen Formen spielt das eine wichtige Rolle, denn wie beim
Zeichnen auf einer Leinwand können bereits gezeichnete Formen von anderen überdeckt
werden.
Das nachfolgende Beispiel zeigt eine Ellipse in einem Quadrat.

void setup() {
size(500, 300);
}

void draw() {
rect(50, 50, 400, 200);
ellipse(250, 150, 400, 200);
}
Wird die Reihenfolge der Anweisungen für die Ellipse und das Rechteck umgedreht, dann ist
nur das Rechteck sichtbar. Die Ellipse wird vom Rechteck verdeckt.

void setup() {
size(500, 300);
}

void draw() {
ellipse(250, 150, 400, 200);
rect(50, 50, 400, 200);
}
TU Wien 12
2.4. Kommentare
Mit Kommentaren können Beschreibungen zu Programmteilen hinzugefügt werden, die eine
bestimmte Anweisung, eine Code-Zeile oder einen Code-Block näher beschreiben. Damit
kann die Lesbarkeit und Verständlichkeit von Programmen erhöht werden, was besonders
bei größeren Programmen, bei Teamarbeit oder wenn der Programmcode weitergegeben
werden soll, nützlich ist. Daher gehört das kurze, aber aussagekräftige, prägnante und
konsistente Kommentieren von Programm-Code zum guten Programmierstil.
In Processing gibt es zwei Möglichkeiten Kommentare einzuführen.

● Einfache Kommentare sind einzeilig und werden mit zwei Schrägstrichen eingeleitet.
Alles ab den zwei Schrägstrichen / / bis zum Zeilenende wird als Kommentar
interpretiert. // Kommentartext
Sie können in einer separaten Zeile stehen oder einer Anweisung nachfolgen.
● Blockkommentare können einzeilig oder mehrzeilig sein. Sie werden mit einem/*
eingeleitet und mit * / geschlossen. Alles zwischen /
* und *
/ wird als Kommentar
interpretiert. /* Kommentartext */
Daher könnten sie auch in einer Zeile einer Anweisung vorangestellt werden.
Korrekt erkannte Kommentare werden in Processing in grauer Schriftfarbe dargestellt.

Der Kommentartext wird bei der Ausführung des Programms “übergangen” bzw. ignoriert.
Beispiel:
void setup() {

// Voreinstellungen

size(300, 300); //Groesse des Sketch-Fensters

/* Im Blockkommentar koennen mehrzeilige
Kommentare verfasst werden, etwa zur Beschreibung
eines nachfolgenden Code-Blocks
*/

}

TU Wien 13
2.5. Farben & Graustufen und Konturen
2.5.1. Farben & Graustufen

In Processing kann in Farben oder Graustufen gezeichnet werden. Farben und Graustufen
werden nicht direkt in der Anweisung der geometrischen Form angegeben, sondern müssen
davor spezifiziert werden. Das ist vergleichbar mit einem Pinsel, den man erst in die Farbe
tauchen muss, um dann auf der Leinwand zu malen. In Processing wird dazu f ill()
verwendet.
void setup () {
size(500, 300);
}

void draw() {
fill(200, 100, 0);
rect(50, 50, 400, 200);
fill(50);
ellipse(250, 150, 400, 200);
}
Im Beispiel wird das Rechteck orange und die Ellipse dunkelgrau angemalt.
Wird nur ein einzelner Wert angegeben, wird dieser als Graustufenwert oder Farbwert in
Hexadezimaldarstellung interpretiert. Graustufen werden mit einem Wert zwischen 0
(Schwarz) und 255 (Weiß) angegeben. Je kleiner der Wert desto dunkler ist also die Farbe.
Die Hexadezimaldarstellung wird in der Form #RRGGBB angegeben.
Mit drei Parametern kann in Farbe gezeichnet werden, wobei die drei Werte für die
Farbkomponenten Rot, Grün und Blau (in dieser Reihenfolge) stehen. Jeder Wert von 0 bis
255 ist zulässig und gibt die Intensität der entsprechenden Farbe an. Das bedeutet, je
kleiner der Wert, desto dunkler die Farbkomponente. Werte kleiner als 0 werden mit 0
angenommen und Werte größer als 255 mit 255.
Um einfach den richtigen Farbmix für eine gewünschte Farbe zu finden, wählt man in der
Menüleiste unter Tool/Farbauswahl den Color Selector. Mit ihm können Sie leicht die RGB-
und die Hexadezimal-Werte für Ihre Wunschfarbe auslesen.
TU Wien 14
Durch unterschiedliche Intensitäten der Farbkomponente können unterschiedliche

Farbmischungen entstehen. Beispielsweise entsteht die Farbe Gelb, wenn Rot und Grün
gemischt wird. Hier sind ein paar Farbmischungen, die Sie austesten können.
fill(255, 255, 0); // grelles Gelb

fill(200, 200, 0); // dunkleres Gelb
fill(0, 0, 255); // intensives Blau
fill(100, 100, 255); // helleres Blau
fill(0, 255, 255); // Türkis
fill(255, 0, 255); // Magenta
Wichtig ist, dass sobald eine Farbe gesetzt wurde, diese solange verwendet wird, bis eine
andere gesetzt wird. Hält man sich nicht daran, führt es zu Programmverhalten, das wir im
Folgekapitel genauer behandeln.
Der Hintergrund des Sketch-Fensters, also die Leinwandfarbe, kann mit background()
eingefärbt werden. Wie das folgende Beispiel zeigt, lassen sich hier auch wieder Farben und
Graustufen verwenden.
void setup() {
background(255);
size(500, 300);
}

void draw() {
fill(200, 100, 0);
ellipse(250, 150, 400, 200);
}
Die beiden Möglichkeiten zur Farbwahl können in einem Programm beliebig verwendet
werden.

TU Wien 15
Soll eine Form bzw. ein geometrisches Objekt nicht gefüllt werden, sondern transparent
sein, wird noFill() verwendet. Auch diese Anweisung muss vor der entsprechenden
geometrischen Form gesetzt werden. Zusätzlich zum Farbwert kann optional bei fill() als
weiterer Parameter ein Alpha-Wert für die Deckkraft (opacity) angegeben werden.
void setup() {
background(255);
size(500, 300);
}

void draw() {
fill(100, 150, 100);
ellipse(250, 150, 200, 300);
fill(200, 100, 0, 50);
ellipse(250, 150, 400, 200);
}
Der obige Code zeichnet eine leicht transparente Ellipse. Um die Transparenz zu
verdeutlichen wird eine zweite Ellipse mit höherer Deckkraft gezeichnet, sodass die
halbtransparente Ellipse diese halb überdeckt.
2.5.2. Konturen
Geometrische Formen haben in Processing standardmäßig eine schwarze Kontur. Diese
kann mit verschiedenen Anweisungen modifiziert werden. Will man beispielsweise
überhaupt keine Umrandung haben, bietet sich die Anweisung noStroke() an.
void setup () {
background(255);
size(500, 300);
}

void draw() {
noStroke();
fill(100, 150, 100);
ellipse(250, 150, 200, 300);
fill(200, 100, 0, 50);
ellipse(250, 150, 400, 200);
}
Alle Formen werden danach ohne Kontur gezeichnet. Will man für unterschiedliche Objekte
unterschiedliche Konturen haben, lässt sich das mit stroke() wieder einstellen. stroke()
beinhaltet als Parameter drei Werte für die Farbe oder einen Parameter für einen Grauwert
der Kontur. Das Setzen der Konturen verhält sich gleich wie das Setzen der Farben - die
Anweisung wird vor den entsprechenden Formen geschrieben.
TU Wien 16
void setup () {
background(255);
size(500, 300);
}

void draw() {
noStroke();
fill(100, 150, 100);
ellipse(250, 150, 200, 300);
stroke(0, 0, 255);
fill(200, 100, 0, 50);
ellipse(250, 150, 400, 200);
}
Weiters kann auch die Dicke der Kontur verändert werden durch strokeWeight(). Diese
Anweisung benötigt als Parameter einen Wert, der die Dicke des Randes in Pixel angibt.
void setup () {
background(255);
size(500, 300);
}

void draw() {
noStroke();
fill(100, 150, 100);
ellipse(250, 150, 200, 300);
stroke(0, 0, 200);
strokeWeight(20);
fill(200, 100, 0, 50);
ellipse(250, 150, 400, 200);
}

TU Wien 17
2.6. Application Programming Interface (API)

Aufgrund der Fülle an verschiedenen Befehlsnamen, kann der Überblick über die zur
Verfügung stehenden Befehle bzw. deren Wirkung, Anwendung und genaue Funktionsweise
verloren gehen.
Ein nützliches Hilfsmittel ist hier die Referenz (auch Dokumentation) bzw. API (kurz für
Application Programming Interface) einer Programmiersprache. Sie ist eine Sammlung an
Dokumentationen für die vorhandenen Befehlsnamen bzw. Anweisungen und dient
Programmiererinnen und Programmierern als Lexikon bzw. Nachschlagewerk.
Die Processing API ist unter https://processing.org/reference/ zu finden. Hier werden alle
Befehle dokumentiert, ihre Syntax, Parameter und Funktionsweise beschrieben und deren
Verwendung anhand von Beispielen visualisiert. Alle bis jetzt aufgeführten Befehle sind in
den Kategorien Shapes im Unterkapitel 2D Primitives und Color im Unterkapitel Settings zu
finden.
Anhand von quad() ist die Struktur der API und die Beschreibung der einzelnen Befehle gut
ersichtlich. Der Eintrag ist auf der Processing Reference Seite unter Shape/2D
Primitives/quad() zu finden (siehe Abbildung).
Quelle: Processing Referenz (https://www.processing.org/reference)
TU Wien 18
Quelle: Processing Referenz (https://www.processing.org/reference/quad_.html)
Zu jedem Befehlsnamen gibt es ein kleines Beispiel (Examples), welches dessen

Anwendung demonstriert. Es kann direkt in den Texteditor kopiert, modifiziert und
ausgeführt werden.
TU Wien 19
Zu jedem Befehlsnamen existiert im API-Eintrag eine Beschreibung (Description), die die

Wirkung des Befehls erklärt. Im Fall des Befehlsnamen quad() etwa wird beschrieben, dass
die ersten zwei Parameter für die Koordinaten des ersten Punktes stehen, die nächsten zwei
für den zweiten Punkt und so weiter.
Syntax z eigt die Struktur der Anweisung und unter Parameters werden die einzelnen
Parameter der Anweisung aufgelistet und erklärt: Das erste Argument steht in diesem
Beispiel für die x-Koordinate des ersten Punktes und das zweite Argument für die
y-Koordinate. Das Wort “float” bedeutet, dass die Argumente Dezimalzahlen annehmen
können.
Returns g ibt die Art des Ergebniswertes an, den eine Anweisung nach der Ausführung
zurückgibt. Dies kann zum Beispiel eine ganze Zahl (int) oder eine Dezimalzahl (float) bei
mathematischen Funktionen sein, wie bei der Bildung des Absolutbetrags (abs()). Liefert die
Anweisung gar keinen Rückgabewert, steht v uad() s owie bei
oid. Das ist zum Beispiel bei q
sämtlichen weiteren geometrischen Formen oder bei Farbeinstellungen der Fall.
TU Wien 20

Einführung in Processing Dez 2018

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Einführung in Processing Dez 2018

Hochgeladen von

Copyright:

Verfügbare Formate

Programmieren mit Processing

Kapitel 2: Einführung in Processing

2.1.1. Processing Entwicklungsumgebung

Die folgende Abbildung zeigt die Hauptansicht der Processing IDE:

Im Texteditor wird der Programmcode geschrieben und über die Play/Stop-Buttons

2.1.2. Syntax und Semantik

2.1.3. Programmaufbau und Programmfluss

text​("Hello World", 50, 50);

rect​(60, 50, 70, 100);

Da es in Programmiersprachen eine große Menge an Befehlen gibt und es nicht praktikabel

Koordinatensystem in Processing Koordinatensystem Visualisierung im Sketch-Fenster

2.2.1. Geometrische Grundformen in Processing

Struktur von rect():

Struktur von quad():

Interne Vorgangsweise von Processing beim Zeichnen von ​quad​()

Struktur von triangle():

Struktur von ellipse():

Struktur von arc():

2.3. Ausführungsreihenfolge von Anweisungen

Das nachfolgende Beispiel zeigt eine Ellipse in einem Quadrat.

In Processing gibt es zwei Möglichkeiten Kommentare einzuführen.

Korrekt erkannte Kommentare werden in Processing in grauer Schriftfarbe dargestellt.

2.5. Farben & Graustufen und Konturen

2.5.1. Farben & Graustufen

Durch unterschiedliche Intensitäten der Farbkomponente können unterschiedliche

fill​(255, 255, 0); ​// grelles Gelb

2.6. Application Programming Interface (API)

Quelle: Processing Referenz (​https://www.processing.org/reference​)

Quelle: Processing Referenz (​https://www.processing.org/reference/quad_.html​)

Zu jedem Befehlsnamen gibt es ein kleines Beispiel (​Examples​), welches dessen

Zu jedem Befehlsnamen existiert im API-Eintrag eine Beschreibung (​Description​), die die

Das könnte Ihnen auch gefallen

text("Hello World", 50, 50);

rect(60, 50, 70, 100);

Interne Vorgangsweise von Processing beim Zeichnen von quad()

fill(255, 255, 0); // grelles Gelb

Quelle: Processing Referenz (https://www.processing.org/reference)

Quelle: Processing Referenz (https://www.processing.org/reference/quad_.html)

Zu jedem Befehlsnamen gibt es ein kleines Beispiel (Examples), welches dessen

Zu jedem Befehlsnamen existiert im API-Eintrag eine Beschreibung (Description), die die