Grafikprimitive zeichnen

In der Programmierung werden dem Computer Anweisungen mit einer Reihe von Befehlen gegeben. Diese Befehle werden Funktionen genannt.

Im Folgenden werden einige Funktionen vorgestellt, mit denen auf der Grafiken auf der Zeichenfläche von Processing erzeugt werden. Besonders ist anzumerken, dass das Koordinatensystem in der Processing­programmierung wie nebenstehend dargestellt definiert ist.

Die x-Achse nimmt wie gewohnt rechts höhere Werte an. Die y-Achse hingegen ist genau anders als gewohnt festgelegt. Höhere y-Werte liegen unten!

 

 

 

Punkte zeichnen

Punkte können mit dem Befehl point erzeugt werden

Die Koordinaten wer­den relativ von der oberen linken Ecke des Ausgabefensters festgelegt.

point
Syntax	point(x, y)
Parameter	x x-Koordinate des Punkts y y-Koordinate des Punkts
Beispiel
point(10, 10); point(10, 12); point(10, 14); point(10, 16); point(10, 18); point(10, 20); point(12, 10); point(12, 12); point(12, 14);point(12, 16); point(12, 18); point(12, 20);point(14, 10); point(14, 12); point(14, 14);point(14, 16); point(14, 18); point(14, 20);

2. Linien zeichnen

Linien werden mit dem Befehl line erzeugt.:

line
Syntax	line(x1, y1, x2, y2)
Parameter	x1 x-Koordinate des ersten Punkts y1 y-Koordinate des ersten Punkts x2 x-Koordinate des zweiten Punkts y2 y-Koordinate des zweiten Punkts
Beispiel
line(10, 80, 30, 40); line(20, 80, 40, 40); line(30, 80, 50, 40); line(40, 80, 60, 40); line(50, 80, 70, 40);

3. Rechtecke zeichnen

Rechtecke bestehen aus einem Rand und einer Füllung. Sie können mit dem rect-Befehl erzeugt werden.

rect
Syntax	rect(a,b,c,d) rect(a,b,c,d,r) rect(a, b, c, d, tl, tr, br, bl)
Parameter	a x-Koordinate b y-Koordinate c Breite d Höhe r Radius für abgerundete Ecken tl Radius für linke oberer Ecke tr Radius für rechte obere Ecke br Radius für rechte untere Ecke bl Radius für linke untere Ecke
Beispiel
fill(255,0,0); rect(10, 10, 60, 60); fill(0,255,0); rect(80, 10, 60, 60, 10); fill(0,0,255); rect(150, 10, 60, 60, 20, 10, 5, 0);

4. Zeichenfläche verändern

Die Zeichenfläche kann mit den Befehlen size und background angepasst werden.

size
Syntax	size(w, h)
Parameter	w Breite der Zeichenfläche h Höhe der Zeichenfläche
Beschreibung	Ermöglicht die Anpassung der Größe der Zeichenfläche

Syntax	background(rgb) background(rgb, alpha)
Parameter	rgb beliebiger Farbwert alpha Deckkraft
Beschreibung	Ermöglicht die Einfärbung der Zeichenfläche

5. Darstellung der Farben

Farben können in unterschiedlicher Art und Weise festgelegt werden. In Processing sind folgende Darstellungen möglich:

Bezeichnung	Beispiel
RGB-Einzelwerte Jeder Farbanteil kann Werte zwischen 0 und 255 annehmen	background(204, 153, 0)
Graustufe Ein Grauton wird mit Werten zwischen 0 und 255 festgelegt	background(155)
RGB-Hex-Darstellung Farbanteile werden in einer Zahl in Hex-Darstellung zusammengefasst	background(#FFCC00)

Zusätzlich kann in vielen Fällen eine Deckkraft mit Werten zwischen 0 und 255 angeben werden, um die Sichtbarkeit des Objekthintergrunds zu beeinflussen.

6. Füllungen und Strichfarben und -breiten

Um die Darstellung von Zeichenobjekten zu verändern, kann die Anwendung der Befehle stroke, strokeWeight
und fill hilfreich sein .

stroke
Syntax	stroke(rgb) stroke(rgb, alpha)
Parameter	rgb beliebiger Farbwert alpha Deckkraft
Beschreibung	Verändert die Farbe für alle nachfolgenden Befehle, die Linien bzw. Ränder zeichnen.

strokeWeight
Syntax	strokeWeight(weight)
Parameter	weight Strichbreite in Pixeln
Beschreibung	Verändert die Breite der Striche für alle nachfolgenden Befehle, die Linien bzw. Ränder zeichnen.

fill
Syntax	fill(rgb) fill(rgb, alpha)
Parameter	rgb beliebiger Farbwert alpha Deckkraft
Beschreibung	Verändert die Farbe der Füllung für alle nachfolgenden Befehle, die Formen zeichnen.

7. Übungen zum Umgang mit den Zeichenbefehlen

1. Nutzen Sie Linien- und Rechteckbefehle zur korrekten farbigen Darstellung des Hauses.	2. Nutzen Sie die Referenz­dokumentation, um den Befehl zum Zeichnen eines Kreises zu ermitteln (Hinweis: der Kreis in eine Sonderform der Ellipse!). Erstellen dann ein Programm, das einen Smiley zeichnet.

8 . Übungen zur einfachen Mustererzeugung

1. Erzeugen Sie eine möglichst große farbige (auch gerne unregelmäßige Punktewolke)	2. Erzeugen Sie eine möglichst große Folge roter, horizontaler Linien
3. Erzeugen Sie ein farbiges Gitter (rote horizontale Linien, grüne vertikale Linien)	4. Erzeugen Sie ein Schachbrettmuster