/blog/processing-wiederholung-spezielle-befehle-setup-und-draw-286

Hi,

heute werden wir ein paar Wiederholungen machen, spezielle Befehle und konstante kennenlernen, zuerst werden wir uns aber auf die zwei wichtigsten Funktionen konzentrieren, nämlich ...

<h3>void setup() und void draw()</h3>

Das haben wir uns nocht nicht angesehen, dabei wirst du bei der Programmierung mit Processing ständig mit diesen beiden Funktionen arbeiten.

>> void setup() Die Befehle in dieser Funktion werden zu Anfangs einmal ausgeführt. Das bedeutet das Programm wird ausgeführt, diese Funktion wird ein mal aufgerufen, die Befehle darin werden abgearbeitet und danach wird nie wieder auf diese Funktion zurückgegriffen.

>> void draw() Die Befehle in dieser Funktion werden, nachdem setup() aufgerufen wurde, kontinuierlich ausgeführt, immer und immer wieder. Das Programm wird ausgeführt, Funktion setup() wird aufgerufen, danach draw(), die dann läuft bis das Programm beendet wird.

Doch was sind Funktionen? Ich habe dir bereits einige gezeigt, zum Beispiel line() oder point() oder ellipse(), auch das sind Funktionen. Allerdings sind das von Processing fertige Funktionen, du müsst nur die Werte übergeben, Processing wertet diese aus und arbeitet mit den Werten, die du übergeben hast. Diese beiden Funktionen setup() und draw() arbeiten ähnlich, allerdings musst du hier keine Werte übergeben, sondern du schreibst die Befehle, die in der Funktion beim Aufruf dann ausgeführt werden.

Doch was bedeutet dieses »void«? Eine void-Funktion hat keinen Rückgabewert, das ist der Unterschied. Ich kann mir vorstellen dass du nicht wirklich was damit anfangen kannst, aber das kommt alles noch in den nächsten Artikeln. Vorwiegend interessiert uns nur, was diese beiden Funktionen bedeuten, und wie man diese anwendet.

Bei einer Funktion ist es so: Du gibst den modifier an(hier void), danach den Namen der Funktion, dann 2 runde Klammern(setup() und draw() erwarten keine Parameter, daher steht auch nix zwischen den Klammern). Und dann öffnen wir die Funktion mit einer geschweiften Klammern und schließen die Funktion auf diese Weise auch wieder. Die geschweiften Klammern definieren Anfang und Ende der Funktion, alles was hier dazwischen steht, also die Befehle die du schreibst, werden ausgeführt. Schau her:

In der Funktion setup() legst du die wichtigsten Sachen fest, wie zum Beispiel die Größe des Fensters, ob smoothing aktiviert ist, Strichdicke und Zeichenfarbe oder Füllfarbe, eventuelle initialisierung der Variablen, dazu kommen wir noch, und so weiter.

Interessant ist folgendes: du schreibst deine Befehle in Funktion draw(), diese werden von oben nach unten abgearbeitet. Nach { geht's los, bei } endet alles und es wird wieder alles von neuem berechnet. Stell dir vor, du zeichnest eine Ellipse. Du schreibst lediglich diesen einen Befehl. Dieser Befehl wird dann immer wieder ausgeführt, und eine Ellipse wird über die andere gezeichnet. Setze am Anfang den Befehl background ein, somit wird bei jedem erneuten Abarbeiten der Funktion der Hintergrund neu gezeichnet, alles was vorher da war verschwindet, und alles wird neu gezeichnet. Wie gesagt, von oben nach unten. So ist es auch, wenn du einen Teil einer Form über eine andere zeichnest. Der Befehl weiter unten landet in der Ausgabe dann weiter oben, Ich zeige dir das mal:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 2px 2px 4px #000011; padding: 10px;"> <pre> void setup() { size(300, 300); smooth(); background(255); strokeWeight(2); } void draw() { background(255); //Damit der Hintergrund immer wieder //neu gezeichnet wird fill(255, 0, 0); ellipse(100, 100, 100, 100); fill(0, 255, 0); rect(100, 100, 100, 100); } </pre> </div>

Du erhältst:

Originalgröße

Tauschen wir nun die Befehle, wird logischerweise zuerst das Rechteck, danach die Ellipse gezeichnet, das heißt die Ellipse überdeckt dann das Rechteck:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 2px 2px 4px #000011; padding: 10px;"> <pre> void setup() { size(300, 300); smooth(); background(255); strokeWeight(2); } void draw() { background(255); //Damit der Hintergrund immer wieder //neu gezeichnet wird fill(0, 255, 0); rect(100, 100, 100, 100); fill(255, 0, 0); ellipse(100, 100, 100, 100); } </pre> </div>

Entsprechend auch die Ausgabe:

Originalgröße

Ganz einfaches und logisches Verfahren. Hier noch eine Beispielgrafik, wie die Funktionen arbeiten:

Originalgröße

Ich denke das ist soweit klar, spiele ein wenig damit herum, viel wirst du aber ohne Variablen oder Ereignisse noch nicht machen können. Das kommt im nächsten Artikel.

Sehen wir uns noch einige unabkömmliche Befehle und Konstanten an.

<h3>Spezielle Befehle, Konstanten</h3>

Zuerst Konstanten. Konstanten haben immer feste Werte. Diese kannst du nicht verändern, aber sie abrufen. Stell dir vor, du definierst zu Anfangs die Größe des Fensters, und nun möchtest du eine Linie von links nach rechts bis zum Ende des Fensters, und von oben nach unten dasselbe, also quasi ein Kreuz. Das ist sicherlich nicht weiter schwierig:

Fertig. Dafür müssen wir das eigentlich nicht extra in void draw() schreiben, es verändert sich ja nichts und alles muss nur einmal gezeichnet werden. Aber zum Beispiel, der Code den wir hier haben, funktioniert tadellos, sodass du ein Kreuz, bestehend aus 2 Linien, ins Fenster zeichnest. Wunderbar. Aber nehmen wir an du stellst nach einer Weile fest, dass du doe Größe des Fensters nun doch lieber kleiner oder größer hättest. Dann müsstest du extra alles im Code erneut anpassen, was sich -wie hier- auf die Breite oder Höhe, beziehungsweise jeweils die Hälfte des Wertes, bezieht. Und das wird viel Arbeit, je größer der Code ist desto mehr hast du zu tun. Wäre es da nicht praktisch, einfach immer einen Werte zu wissen, an dem man sich orientieren kann? Breite und Höhe, zu englisch wäre das width und height. Und mehr ist es auch nicht, diese konstanten enthalten als Wert die am Anfang an size übergebenen Parameter für Breite und Höhe. Mit folgendem Code bekommen wir genau das gleiche hin, nur bist du hier schon um einiges flexibler. Du kannst dann die Größe oben bei size() verändern wie du möchtest, das Kreuz passt sich immer an:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 2px 2px 4px #000011; padding: 10px;"> <pre> void setup() { size(300, 300); smooth(); background(255); strokeWeight(2); stroke(0); line(0, height / 2, width, height / 2); line(width / 2, 0, width / 2, height); } </pre> </div>

Mehr ist es nicht. Merke dir, width und height. Es gibt auch noch screen.width und screen.height, für die Höhe und Breite des gesamten Bildschirms. Es gibt noch weitere konstanten, die zeige Ich dir gleich. Zuvor aber noch zu zwei wichtigen Befehlen, nämlich

<h3>println() und print()</h3>

Mit println() bzw. print() kannst du Ausgaben erzeugen. Du hast sicherlich bemerkt, dass du in der IDE unten ein schwarzes kleines Fenster hast:

Originalgröße

Hier wird das, was du an println() bzw. print() übergibst, ausgegeben. Du hast mittels dieser Befehle die Möglichkeit, Text auszugeben, der dann in ebendiesem schwarzen Fenster landet. Die Schreibweise ist denkbar einfach, du tippst den Befehl und setzt in Klammern den Text, welcher ausgegeben werden soll. Da wir hier mit Strings arbeiten (String = Zeichenfolge) gehört das in Anführungszeichen:

Originalgröße

Nichts leichter als das. Du hast möglicherweise auch schon den Unterschied zwischen println() und print() erkannt. Wenn nicht: println() macht nach jeder Ausgabe automatisch einen Zeilenumbruch, print() tut das nicht.

Sehen wir uns weitere Konstanten an, da wären noch PI, HALF_PI, QUARTER_PI und TWO_PI. Was Pi( π ) ist kennst du sicher. Nun haben wir einige Konstante zusammen, wollen wir diese einmal ausgeben, um deren Wert zu erhalten:

Originalgröße

Du siehst die Ausgabe, in Anführungszeichen unseren Text, der dann verknüpft wird mit dem "+"-Zeichen. Dan hängen wir noch die Konstanten an. Konstante werden immer GROß geschrieben. Warum width und height nicht? Ganz einfach, weil der Wert in gewisser Weise ja auch variabel ist, je nachdem welche Größe wir an size übergeben. PI z.B. jedoch ist konstant, dieser Wert ändert sich nicht. Benutzt du später im Code Konstante die du selbst deklariert hast, schreibe diese bitte auch in dieser Notation.

Jetzt hast du wieder einige Schlüsselbefehle kennengelernt. In den nächsten Artikeln legen wir mit der Programmierung los. Das wird dir Spaß machen, da bin Ich sicher. Ich zeige dir, wie genau das mit den Strings funktioniert, außerdem noch andere Datentypen. Bis dahin sieh dir die im unteren Kasten geposteten Links an. Im kommenden Artikel zeige Ich dir noch, wie du auf Ereignisse reagierst, damit zum Beispiel etwas passiert, wenn du die Maus bewegst oder eine Taste drückst. Darauf gehe Ich nicht soo im Detail ein, mehr dazu gibt es wie immer in der Processing.org Referenz nachzulesen, zudem sind die Funktionsnamen für Ereignisse sehr sprechend.

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 2px 2px 4px #000011; padding: 10px;"> In diesem Artikel verwendete Befehle: <a href="http://processing.org/reference/HALF_PI.html" target="blank">HALF_PI (1.57079...)</a> <a href="http://processing.org/reference/PI.html" target="blank">PI (3.14159...)</a> <a href="http://processing.org/reference/QUARTER_PI.html" target="blank">QUARTER_PI (0.78539...)</a> <a href="http://processing.org/reference/TWO_PI.html" target="blank">TWO_PI (6.28318...)</a> <a href="http://www.processing.org/reference/width.html" target="blank">width</a> <a href="http://www.processing.org/reference/height.html" target="blank">height</a> <a href="http://www.processing.org/reference/setup_.html" target="blank">void setup()</a> <a href="http://www.processing.org/reference/draw_.html" target="blank">void draw()</a> </div>

Grüße Marius

Processing - Wiederholung, spezielle Befehle, setup() und draw()

Kommentare

Kommentar schreiben