Processing – Formen, Strichstärke und Smoothing

Moin,

jetzt wird’s spannend, heute will Ich dir zeigen, wie du Formen auf den Bildschirm bekommst. Du merkst, momentan zeige Ich dir die Schlüsselbefehle, so richtig zur Programmierung und den tollen Effekten können wir erst kommen, wenn du die Befehle kennst, um Formen und andere Dinge auf den Bildschirm zu zaubern, macht ja ansonsten keinen Sinn. Zuvor will Ich aber nun auf das AntiAliasing zu sprechen kommen. In einem früheren Blogeintrag hab‘ Ich dir bereits gezeigt, was das ist, aber wie du das im Code anwendest, dazu kommen wir jetzt.
Viel wird das ohnehin nicht, denn es ist wirklich einfach. Um Kantenglättung einzuschalten, reicht lediglich folgender Befehl:

Du siehst, es ist relativ einfach. Der Unterschied zwischen smooth(); und noSmooth(); wird dir später noch klar, wenn du ein paar Formen draufhast. Ich fange mit dem Punkt und den Linien an.

Punkte und Linien

Punkte und Linien .. klingt nicht schwer, oder? Ist es auch nicht, es ist denkbar einfach. Übersetzen wir wie immer diese beiden Wörter, so haben wir point und line. Und so lauten auch die Befehle. Doch … welche Argumente übergeben wir an diese Funktionen?
Angefangen mit dem Punkt, würde man eigentlich nicht mehr erwarten, als die X- und Y-Koordinaten des Fensters. Und genau so geht es auch (es gibt auch Z-Koordinaten, aber das kümmert dich momentan noch nicht). Schreibe also wie immer die Funktion, die Argumente dafür in Klammern dahinter. Um den Punkt besser sehen zu können, bestimmen wir vorher die Strichstärke. Dafür schreibe einfach strokeWeight(WERT); und übergebe als Wert die Strichstärke in Pixeln, Standard ist 1. Stellen wir das auf 5. Somit kannst du dir folgendes Beispiel dazu ansehen:

Wir erhalten folgende Ausgabe:


Originalgröße

Mehr gibt es kaum zu sagen. Du rufst du Funktion point() auf und übergibst Ihr Werte, damit die Funktion damit auch was anfangen kann, und das wären eben die X- und Y-Koordinaten, an denen point den Punkt zeichnet.

Zeige Ich dir also nun, wie man eine Linie malt. Wir wissen, dafür brauchen wir lediglichdie Funktion &rqauo;line« aufrufen, auch dieser übergeben wir Werte. Aber welche, was muss man wissen, um eine Linie zeichnen zu können? Ich würde sagen, das wären die X- und Y-Koordinaten des Anfangspunktes und die X- und Y-Koordinaten des Endpunktes, die Linie wird also zwischen Start- und Endpunkt gezeichnet. Damit hätten wir insgesamt 4 Werte, sehen wir uns einmal den Code und die Ausgabe einiger Linien an:

Wir erhalten die Ausgabe:


Originalgröße

Du brauchst also lediglich die beiden Start- und die beiden Endpunkte, zwischen diesen beiden Punkten wird dann die Linie gezeichnet. Ein letztes Beispiel noch:

Probiere den Code bei dir in Processing aus, was für eine Ausgabe erhältst du?

Fahren wir mit Rechtecken fort. Auch dafür brauchen wir einen Startpunkt. Der Endpunkt definiert sich durch die länge und breite des Rechtecks.
Ganz recht, wir übergeben hier wieder 4 Werte, Startpunkt X, Startpunkt Y, Länge X und Länge Y. Und natürlich wieder in Klammern. Welchen Befehl brauchen wir? Rechteck -> Rectangle -> rect. Der Befehl dafür lautet rect. Ich will dir auch gleich ein Beispiel zeigen:

Du erhältst folgende Ausgabe:


Originalgröße

Eigentlich nicht weiter schwierig, nicht wahr 😉 Mit dem »rect« Befehl lassen sich Rechtecke und Quadrater jeder Größe erstellen. Wobei .. du erhältst immer Rechtwinklige Vierecke, das ist ein wenig unflexibel, eine Raute oder ein Parallelogramm wirst du damit nicht hinbekommen, dafür gibt es den …

Quad-Befehl

Der Quad-Befehl ist um einiges flexibler als rect. Der Befehl quad erwartet für alle 4 Punkte jeweils X- und Y-Koordinaten, das wären dann insgesamt 8 Werte, die übergeben werden müssen. Das einzige wobei du hier achten musst, ist die Reihenfolge, aber du siehst gleich was Ich meine. Sehen wir uns den Befehl einfach mal an:

Die Ausgabe die wir erhalten, sieht so aus:


Originalgröße

Und was Ich mit der Reihenfolge meinte .. sehen wir uns mal an, was dabei herauskommt, wenn wir im ersten Befehl die 4 letzten Werte vertauschen:

Und schon sieht die erste Form ganz anders aus:


Originalgröße

Versuch dich mit quad ein wenig, das braucht etwas „Eingewöhnungszeit“, bis man damit völlig zurechtkommt.
Ich mache trotzdem gleich mal mit meiner (für diesen Blogeintrag letzten) Form weiter, der …

Ellipse

Eine Ellipse zeichnest du wie ein Rechteck, du hast genau diesemben Parameter. Der Unterschied ist, dass die Ellipse Ihren Punkt in der Mitte hat, von diesem aus wird gezeichnet. Beispiel:

Du siehst:


Originalgröße

Die beiden letzten Parameter, die die Größe der Ellipse bestimmen, das ist der Durchmesser, nicht der Radius 😉 Eigentlich auch nicht weiter schwierig.

Ich zeige dir zuletzt noch 4 Befehle, die Ich großartig nicht weiter erläutern werde:

Und das war’s auch schon wieder, beim nächsten mal zeige Ich dir noch spezielle Befehle, einiges an Wiederholung und vor allem die 2 wichtigsten Funktionen setup() und draw(). Das wird dann ein eher kurzer Artikel (glaub Ich, aber beim bloggen vergess‘ Ich die Zeit immer ^^‘). Dafür zeige Ich dir im übernächsten Artikel schon ein paar Möglichkeiten, dein Programm interaktiv zu gestalten, damit sich da auch mal was bewegt 😉

Befehle, die in diesem Artikel verwendet wurden, und weitere Links, die du dir ansehen solltest:
ellipseMode() rectMode() strokeCap() strokeJoin() ellipse() noSmooth() smooth() background() size() point() quad() rect() line() strokeWeight() fill() noFill() noStroke() stroke() //comment /* Multiline comment */
>> Du findest hier Befehle die Ich bereits im Artikel erläutert habe. Dazu kommen noch ein paar andere Befehle die z.B. Eigenschaften der schon gezeigten enthalten. Zum Beispiel strokeCap, um zu bestimmen, wie eine Linie endet und beginnt (Rund oder eckig) oder auch ellipseMode() bzw. rectMode, um den Startpunkt für das zeichnen der Form zu verändern.

Viele Grüße
Marius

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.