Tag 1 3.Grundl. Grafikbefehle

Der Wirklichkeitsschaum (Eno Henze, 2007)

Bevor wir mit dem Generieren von Formen und Farben durch Code beginnen müssen wir uns zunächst ansehen, wie Befehle in Processing grundsätzlich aufgebaut sind, wie der Syntax der Befehle ist.

3.1 Syntax


    background(255, 0, 0);
    

Ein Befehl weist verschiedene Teile auf:

  • die Bezeichnung „background“ bezeichnet, was die Aufgabe ist (Einfärben des Hintergrunds)
  • die Parameter (255, 0, 0) definieren Parameter zur Aufgabe (Färbe in Rot)
  • das Semicolon signalisiert, dass der Befehl an dieser Stelle beendet ist, Befehle werden immer mit einem Semikolon „;“ abgeschlossen

Hierzu einige Beispiele: Die Größe des Ausgabefensters wird durch den Befehl size() festgelegt. Er hat die Parameter Breite und Höhe (sowie optional Renderengine, aber dazu später mehr):


    size(800, 600);
    

Der Befehl size(800,600) setzt die Breite auf 800 Pixel, die Höhe auf 600 Pixel.
Die Hintergrundfarbe des Ausgabefensters lässt sich mit dem Befehl background() festlegen. Der Befehl färbt den gesamten Fensterinhalt, er wird daher meist zu Anfang der draw()-Schleife gesetzt (insbesondere bei Animationen), danach erfolgen die Zeichenoperationen.

3.2 Form

Eine sehr gute Einführung zum Thema Zeichnen durch Code von Daniel Shiffman steht auf der Processing-Website zur Verfügung: https://processing.org/tutorials/drawing/ Sie soll Grundlage der nun folgenden Erklärungen zu den Grundlegenden Grafikbefehlen in Processing darstellen:

point(x,y) – Zeichnet einen Punkt an den Koordinaten x und x. → Reference

line(x1, y1, x2, y2) – Zeichnet eine Linie. Hierzu müssen zwei Punkte mit x,y und x2, y2 angegeben werden. → Reference

triangle(x1, y1, x2, y2, x3, y3) – Zeichnet ein Dreieck an den drei übergebenen Punkten. → Reference

rect(x, y, width height) – Zeichnet ein Rechteck ausgehend vom Punkt x,y (linke obere Ecke) mit der Breite width und Höhe height. → Reference

rectMode() – Ändert die Weise, wie Rechtecke gezeichnet werden. CENTER gibt beispielsweise an, dass dass er Mittelpunkt des Rechtecks angegeben wird und nicht linke obere Ecke. → Reference

ellipse(x, y, width, height) – Zeichnet ausgehend von den Koordinaten x,y eine Ellipse mit der Breite width und der Höhe height → Reference

ellipseMode() – Erfüllt für die Ellipse die gleiche Funktion wie rectMode() für das Rechteck → Reference

strokeWeight() – Legt die Strichstärke für das Zeichnen von Formen in Pixeln fest. → Reference

Kurzübung 1 – Koordinaten und Formen


Setze das Ausgabefenster auf die Größe 800 x 450 px und stelle den Hintergrund weiß. Zeichne die drei Figuren (siehe oben). Eine Skizze kann hilfreich sein, um die Koordinaten vorher festzulegen.

Tipp: die Füllfarbe einer Form lässt sich mit der Anweisung fill(); definieren.

3.3 Farbe

RGB-056-006-080-823-715 (Casey Reas, 2015)

stroke(red, green, blue) – Legt die Farbe für die Kontor mit den Parametern rot, grün und blau (jeweils mit Werten zwischen 0 und 255) fest. Wird nur ein Parameter angegeben, so wird er als Grauwart interpretiert: stroke(230); Werden vier Parameter angegeben, so wird der vierte als Alphawert für Transparenz interpretiert: stroke(200,100,0, 100); → Reference

noStroke() – Schaltet die Kontur aus. → Reference

fill() Legt die Farbe für die Fläche mit den Parametern rot, grün und blau (jeweils mit Werten zwischen 0 und 255) fest. Wird nur ein Parameter angegeben, so wird er als Grauwart interpretiert: fill(230); Werden vier Parameter angegeben, so wird der vierte als Alphawert für Transparenz interpretiert: fill(200,100,0, 100); → Reference

noFill() Schaltet die Flächenfüllung aus. → Reference

Kommentare

Um unsere Programme zu erklären, ihn besser lesbar zu machen – sowohl für andere als auch für uns selbst in zwei Monaten – empfiehlt es sich, Kommentare in den Code einzufügen. Typischerweise erklären sie, was in den kommentierten Zeilen gerade passiert. Es gibt einzeilige Kommentare, die mit // gekennzeichnet werden und mehrzeilige Kommentare, die mit /* beginnen und mit */ enden. Was zwischen diesen Marken steht wird von Processing komplett ignoriert:


line(100,100,200,200);      // Zeichne eine Linie!
	

// Now, walk the line!
line(w, a, l, k);
    

/* Auch mehrzeilige Kommentare sind  möglich und können beispielsweise 
dazu genutz werden, komplexere Vorgänge zu erklären. */
println(„yes“);
    

Kommentare zu verwenden ist sehr sinnvoll, da man so seinen eigenen Code auch schnell nachvollziehen kann, wenn man ihn erst nach Wochen oder Monaten wieder ansieht.


/*
println(„dieser Text“);
println(„wurde vorübergehend“);
println(„auskommentiert wird so“);
println(„bei der Programmausführung“);
println(„nicht berücksichtigt“);
*/
    

Die Kommentarfunktion kann auch dazu genutzt werden, Teile des Codes vorübergehend aus dem Programmablauf zu entfernen, ohne sie komplett zu löschen. Sie lassen sich später wieder hinzunehmen, indem die Kommentarbefehle entfernt werden. Das kann beispielsweise verwendet werden, um Fehler im Programmablauf einzugrenzen.