Processing - Formen, Strichstärke und Smoothing

Moin,

<div style="border: 2px solid #444444; border-radius: 10px; box-shadow: 2px 2px 4px #000011; padding: 7px; margin: 5px; float:right; width: 200px;"> In diesem Artikel verwendete Befehle: <a href="http://processing.org/reference/ellipse_.html" target="blank">ellipse()</a> <a href="http://processing.org/reference/noSmooth_.html" target="blank">noSmooth()</a> <a href="http://processing.org/reference/smooth_.html" target="blank">smooth()</a> <a href="http://processing.org/reference/background_.html" target="blank">background()</a> <a href="http://processing.org/reference/size_.html" target="blank">size()</a> <a href="http://processing.org/reference/point_.html" target="blank">point()</a> <a href="http://processing.org/reference/quad_.html" target="blank">quad()</a> <a href="http://processing.org/reference/rect_.html" target="blank">rect()</a> <a href="http://processing.org/reference/line_.html" target="blank">line()</a> <a href="http://processing.org/reference/strokeWeight_.html" target="blank">strokeWeight()</a> <a href="http://processing.org/reference/fill_.html" target="blank">fill()</a> <a href="http://processing.org/reference/noFill_.html" target="blank">noFill()</a> <a href="http://processing.org/reference/noStroke_.html" target="blank">noStroke()</a> <a href="http://processing.org/reference/stroke_.html" target="blank">stroke()</a> <a href="http://processing.org/reference/comment.html" target="blank">//comment</a> <a href="http://processing.org/reference/multilinecomment.html" target="blank">/* Multiline comment */</a> </div>

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:

<div style="border: 2px solid #666666; border-radius: 7px; box-shadow: 3px 3px 4px; padding: 7px;"> <pre> <span style="color: #CC6600;">smooth</span>(); <span style="color: #7E7E7E;">//Du kannst die Kantenglättung auch abschalten, mit dem simplen</span> <span style="color: #7E7E7E;">//Befehl:</span> <span style="color: #CC6600;">noSmooth</span>(); </pre> </div>

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.

<h3>Punkte und Linien</h3>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(5); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">point</span>(50, 50); </pre> </div>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">line</span>(0, 0, 300, 300); <span style="color: #CC6600;">line</span>(0, 150, 150, 300); <span style="color: #CC6600;">line</span>(75, 225, 300, 0); <span style="color: #CC6600;">line</span>(150, 0, 150, 300); </pre> </div>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">line</span>(150, 50, 250, 250); <span style="color: #CC6600;">line</span>(250, 250, 50, 250); <span style="color: #CC6600;">line</span>(50, 250, 150, 50); </pre> </div>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">noFill</span>(); <span style="color: #CC6600;">rect</span>(10, 10, 140, 140); <span style="color: #CC6600;">rect</span>(120, 50, 140, 80); <span style="color: #CC6600;">rect</span>(68, 210, 200, 60); </pre> </div>

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 ...

<h3>Quad-Befehl</h3>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(320, 320); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">noFill</span>(); <span style="color: #CC6600;">quad</span>(100, 50, 200, 50, 250, 100, 50, 100); <span style="color: #CC6600;">quad</span>(50, 120, 250, 120, 200, 170, 100, 170); <span style="color: #CC6600;">quad</span>(100, 190, 200, 190, 250, 240, 50, 240); <span style="color: #CC6600;">quad</span>(50, 260, 250, 260, 200, 310, 100, 310); </pre> </div>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #7E7E7E;">//Wenn wir bei diesem Befehl:</span> <span style="color: #CC6600;">quad</span>(100, 50, 200, 50, 250, 100, 50, 100); <span style="color: #7E7E7E;">//Die letzten beiden Werte vertauschen:</span> <span style="color: #CC6600;">quad</span>(100, 50, 200, 50, 50, 100, 250, 100); </pre> </div>

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 ...

<h3>Ellipse</h3>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 3px 3px 4px #000033; padding: 7px;"> <pre> <span style="color: #CC6600;">size</span>(320, 320); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">noFill</span>(); <span style="color: #CC6600;">ellipse</span>(50, 100, 25, 25); <span style="color: #CC6600;">ellipse</span>(100, 100, 50, 50); <span style="color: #CC6600;">ellipse</span>(200, 100, 100, 100); </pre> </div>

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:

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 2px 2px 3px #000033; padding: 5px;"> <pre> <span style="color: #7E7E7E;">//Keine Umrandung, z.B. bei Ellipsen</span> <span style="color: #CC6600;">noStroke</span>(); <span style="color: #7E7E7E;">//keine Füllung:</span> <span style="color: #CC6600;">noFill</span>(); <span style="color: #7E7E7E;">// <- Wenn du zwei "//" schreibst, kannst du kommentare</span> <span style="color: #7E7E7E;">// in deinen Code einfügen, das wird bei der</span> <span style="color: #7E7E7E;">// Ausführung des Programms ignoriert.</span> <span style="color: #7E7E7E;">/* <- Du kannst auch "/*" anwenden, um mehrzeilige</span> <span style="color: #7E7E7E;"> Kommentare zu schreiben, das ganze wird mit</span> <span style="color: #7E7E7E;"> abgeschlossen mit einem -> */</span> </pre> </div>

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 ;)

<div style="border: 2px solid #777777; border-radius: 7px; box-shadow: 2px 2px 3px #000033; padding: 5px;"> Befehle, die in diesem Artikel verwendet wurden, und weitere Links, die du dir ansehen solltest: <a href="http://processing.org/reference/ellipseMode_.html" target="blank">ellipseMode()</a> <a href="http://processing.org/reference/rectMode_.html" target="blank">rectMode()</a> <a href="http://processing.org/reference/strokeCap_.html" target="blank">strokeCap()</a> <a href="http://processing.org/reference/strokeJoin_.html" target="blank">strokeJoin()</a> <a href="http://processing.org/reference/ellipse_.html" target="blank">ellipse()</a> <a href="http://processing.org/reference/noSmooth_.html" target="blank">noSmooth()</a> <a href="http://processing.org/reference/smooth_.html" target="blank">smooth()</a> <a href="http://processing.org/reference/background_.html" target="blank">background()</a> <a href="http://processing.org/reference/size_.html" target="blank">size()</a> <a href="http://processing.org/reference/point_.html" target="blank">point()</a> <a href="http://processing.org/reference/quad_.html" target="blank">quad()</a> <a href="http://processing.org/reference/rect_.html" target="blank">rect()</a> <a href="http://processing.org/reference/line_.html" target="blank">line()</a> <a href="http://processing.org/reference/strokeWeight_.html" target="blank">strokeWeight()</a> <a href="http://processing.org/reference/fill_.html" target="blank">fill()</a> <a href="http://processing.org/reference/noFill_.html" target="blank">noFill()</a> <a href="http://processing.org/reference/noStroke_.html" target="blank">noStroke()</a> <a href="http://processing.org/reference/stroke_.html" target="blank">stroke()</a> <a href="http://processing.org/reference/comment.html" target="blank">//comment</a> <a href="http://processing.org/reference/multilinecomment.html" target="blank">/* Multiline comment */</a> <b>>></b> 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. </div>

Viele Grüße Marius