Hi,

zum Programmieren sucht man sich eine Programmiersprache, man braucht eine Entwicklungsumgebung, um den Code zu schreiben, der die Struktur und die Funktionsweise des Programmes definiert, außerdem eine gute Idee für ein Projekt. Vor allem aber braucht man Spaß an der Sache. Daher schlage Ich vor du machst dir die Arbeit beim Lernen mit Processing so angenehm wie möglich. Mach dir deine Lieblingsmusik an, hol dir was zu trinken oder zu futtern, sichere ggf. deinen Bestand an Kippen und mach's dir schön bequem. Ich gehe davon aus, dass du Processing bereits geöffnet vor dir auf dem Bildschirm hast. Desweiteren gehe Ich davon aus, dass du reichlich Zeit und Spaß mitgebracht hast :-) Wenn dem so ist, können wir eigentlich nun loslegen.

Ich werde, was die Programmierung generell angeht, nicht auf alles im Detail eingehen, wie zum Beispiel Datentypen. Anstelle dessen werde Ich einige verweisende Links auf Seiten reinstellen, in denen alles schön erklärt wird. Auch muss gesagt sein, dass alles was Ich hier schreibe keinen fachmännisch professionellen Wert hat, Ich schreibe aus meiner Sicht, meinen Erfahrungen und meinen Kenntnissen, allerdings schreibe Ich auch nichts, wovon Ich keine Ahnung habe.

So, wo fangen wir an .. da Ich nicht weiß, was du alles weißt und was nicht, ist es schwierig für mich, einen Anfang zu finden. Wir wissen, Processing ist eine Programmiersprache, mit der wir Grafiken, Animationen und Simulationen erstellen können, ausgegeben in einem Fenster oder im Browser auf deinem Bildschirm. Daher .. überlegen wir uns einmal, was beispielsweise so ein fertiges Bild für Eigenschaften haben könnte. Mir würde da spontan und zuallererst einfallen, dass das Fenster in dem sich das ganze abspielt, eine bestimmte Größe hat, natürlich. Desweiteren erwarte Ich auf diesem Bild Farben, das heißt -Vordergrundfarbe und .. ja, eine Farbe für den Hintergrund. Processing hat im großen und ganzen 3 Befehle für Farben, es gibt eine Hintergrundfarbe, eine Zeichenfarbe und eine Füllfarbe für Formen. Und die Formen die gezeichnet werden, werden sicherlich mit einer bestimmten "Strichstärke" gemalt. Und zu guter letzt noch etwas, das sich manche vielleicht schon gefragt haben: "Habe Ich in Processing die Möglichkeit, Anti-Aliasing(hier mehr dazu) anzuwenden?" Ich antworte: Aber ja, natürlich. Für alle die keine Lust haben, sich den ganzen Wikipedia Artikel durchzulesen: Anti-Aliasing bedeutet laienhaft ausgedrückt, dass der Stufeneffekt der bei abgeschrägten Linienübergängen entsteht, nicht so kantig, sondern "weich" gezeichnet wird. Hierzu hab' Ich einmal eine Grafik erstellt, die den Unterschied ziemlich gut verdeutlicht

Größer ansehen

Soviel dazu, wir wissen nun, es gibt Farben, die Größe des Fensters, die Strichstärke und die Wahl, ob mit Anti-Aliasing gearbeitet wird. Bevor wir uns ansehen, wie das ganze im Code aussieht, wollen wir noch auf einige Basisformen zu sprechen kommen. Welche kennst du denn? Also Ich kenne da Kreise(Ellipse), Rechtecke(Quadrat), Linien, Punkte, Dreiecke und Vielecke. Und das mal abgesehen von 3-Dimensionalen Formen, auf die wir später irgendwann noch kommen, das dauert noch ;-) Für's erste haben wir einiges in Erfahrung bringen können, womit wir in unserem Programm arbeiten können. Wie schon angesprochen sind alle Befehle in Englisch, daher liegt es nahe, auch unsere eben genannten Schlüsselwörter zu übersetzen.

Bevor wir uns nun endlich daran machen, mit Code herumzuspielen, meinst du nicht, dass es noch etwas zu klären gibt? Fragst du dich nicht auch, wie das ganze funktionieren soll? Processing ist keine wirkliche Scriptsprache, eine Sprache für GUI-Anwendungen ist es genausowenig. Bei Scriptsprachen ist klar, man schreibt Code, meist sieht man davon jedoch nicht besonders viel, Anwendungen die mit Skriptsprachen erstellt wurden, arbeiten oftmals im Hintergrund. Oder in einer Konsole. Beispiel: PHP, JavaScript, Dos(Batch) oder Linux Shellscripte. Bei GUI Anwendungen ist es so, dass es Elemente gibt, die auf ein vorgefertigtes Fenster gezogen werden. Du ziehst aus der Toolbox ein Element wie beispielsweise einen Button oder ein Textfeld, suchst dir ein Event(Ereignis) aus, zum Beispiel "wurde geklickt" oder "hier wird die Maus bewegt" oder "hier wird Text eingegeben", und dort hinterlegst du jeweils Code. Processing jedoch ... ist da irgendwie anders(wobei es auch hier "Events" gibt, um dein Programm dann interaktiv durch Benutzereingaben zu lenken, dazu kommen wir später irgendwann). Bei Processing hast du ein fertiges Fenster, bzw. es läuft im Browser(je nachdem, ob du es als Anwendung oder Applet exportierst).

Los geht's Wollen wir ganz einfach beginnen, indem wir zuallererst die Größe des Fensters im voraus setzen. Größe übersetzt bedeutet "size". Wichtig an dieser Stelle ist noch folgende Notation: einzelne Wörter schreibt man klein, bei Wörtern die aus mehreren einzelnen Wörtern bestehen, schreibt man das erste klein, alle nachfolgenden beginnen groß (zum Beispiel strokeWeight). Daraus schließen wir, dass "size" klein geschrieben wird. Processing ist dabei pingelig, zwischen Groß- und Kleinschreibung wird also unterschieden! Doch zurück, "size". Woher will Processing mit "size" wissen, welche Größe wir für unser Fenster haben wollen? Genau, gar nicht, das müssen wir schon alles selbst festlegen. Das bedeutet Breite und Höhe des Fensters, also gemessen in Pixeln die Breite in X-Richtung, die Höhe des Fensters in Y-Richtung. Wie du das schon aus der Skala von der Schule her kennst(dazu kommen wir gleich). Wir müssen die Werte zur Größe des Fensters irgendwie an size übermitteln, damit Processing damit auch etwas anfangen kann. Diese Werte werden dabei immer als Argumente (Parameter) an die Funktion übergeben (size in diesem Fall). Keine Sorge, so wild ist das nicht. Zu Funktionen gibt's noch einen eigenen Artikel, aber dir sei schon jetzt gesagt: Auch size ist eine Art Funktion. Diese Funktion erwartet eine bestimmte(oder auch eine variable) Menge an Argumenten, also Werte, die an die Funktion übergeben werden, damit die Funktion die Werte weiterverwenden und mit Ihr arbeiten kann. Argumente an Funktionen geben wir immer in runden klammern nach dem Namen der Funktion mit. Welche Breite, und welche Höhe wollen wir für unser Fenster? Ich sage spontan, es soll 400Pixel breit, und 300Pixel hoch sein. Wir haben: Funktionsname (size) und Argumente (400, 300). Ans Ende JEDER Anweisung, also jedes Befehls, kommt ein Strichpunkt (Semikolon), also dieses Zeichen hier: ";". Ganz wichtig, und niemals vergessen, immer dieses Semikolon hinter jeden Befehl. Schau her:

Größer ansehen

Du kannst alle verfügbaren Befehle, die Processing anbietet, hier nachlesen, für "size" gibt es dort mehr nachzulesen. Kümmere dich an dieser Stelle jedoch noch nicht um das dritte Argument, welches die Funktion "size" aufnehmen kann. Vorerst ist klar, size braucht nicht mehr, als breite und höhe, logisch ;-)

Kommen wir also nun zum nächsten Punkt, legen wir die Hintergrundfarbe fest, welche standardgemäß auf Hellgrau festgelegt ist. Hintergrund -> zu Englisch "background". Da liegt nichts näher, als wie auch bei size, als Argument eine Farbe zu übergeben, zum Beispiel "background(Schwarz);". Ja, so in etwa könnte das aussehen. Da jedoch die Sache mit den Farben schon einiges mehr an Informationen wird, werde Ich dafür einen eigenen Artikel schreiben. Daher belassen wir es für's erste, Ich weiß wir sind diesmal nicht besonders weit gekommen, doch du hast nun für den Anfang schon eine ganz ungefähre Vorstellung davon, wie wir Argumente an Funktionen übergeben, außerdem sind dir bereits einige Schlüsselwörter bekannt, auf die wir in den nächsten Artikeln näher eingehen werden. Für heute jedoch wurde genug gesagt, du bist bereit, beim nächsten mal tiefer in's Thema einzutauchen.

Wir werden beim nächsten mal auf die Angabe und Parameterübergabe bzw. die Schreibweise der Farbwerte, sowie auf das Koordinatensystem eingehen :-)

Beste Grüße Marius