Hi,

bevor du dich daran machen kannst, Processing zu verwenden, musst du Processing erstmal auf deinem Rechner haben. Dafür besuche die offizielle Seite Processing.org und klicke dort auf »Download Processing«. Du landest nun hier:

Größer ansehen

Du siehst, Processing ist für alle Plattformen verfügbar. Falls du das JDK bereits installiert hast, kannst du (für Windows) direkt auf "Windows without Java" klicken, andernfalls oder falls du dir nicht sicher bist, nur "Windows". Lade dir das nun runter, momentan ist Version 1.5.1 aktuell. Das tolle ist, du musst rein gar nichts installieren, lade dir das gapackte Archiv einfach nur herunter, und entpacke es. Öffne den entpackten Ordner "processing-1.5.1-windows -> processing-1.5.1" und starte Processing.exe. An dieser Stelle ein Tipp von mir(falls du Windows ab Vista oder höher nutzt): Entpacke das Archiv und schiebe den ordner dann nach C:Programme. Starte von dort »Processing.exe« und klicke dann mit der rechten Maus in der Taskleiste auf den Processing.exe-Tab und wähle "Dieses Programm an die Taskleiste anheften". Praktisch, wenn du vorhast, öfter mit Processing zu arbeiten ;)

Du hast also nun Processing gestartet, du siehst zuerst den Splash-Screen, bevor's richtig los geht. Dieser sieht nach aktuellem Stand so aus:

Größer ansehen

Ist der Splash weg, erscheint die IDE(integrated development environment), also die Entwicklungsumgebung, quasi das Hauptprogramm eben. Hier spielt sich alles ab, hier schreibst du deinen Code. Ich will dich nun in diesem Artikel durch diese Entwicklungsumgebung führen. Also was die einzelnen Menüpunkte bedeuten, wie du deine Projekte speicherst (die Sketche, dazu gleich mehr) und ausführst.

Doch wieso brauchen wir dazu eine Entwicklungsumgebung? Generell bräuchten wir die gar nicht, wir könnten unseren Code genausogut auch in jeden x-beliebigen Editor tippseln. Der Vorteil einer Entwicklungsumgebung(IDE) ist vor allem der, dass wir hier Coden schreiben können, Schlüsselwörter werden dabei eingefärbt (Syntax Highlighting). Zudem lässt sich der Code dann über die Oberfläche direkt kompilieren und ausführen. Deine Projekte werden zentral gespeichert, du kannst sie von dort aus exportieren und hast es insgesamt auch einfacher mit der Verwaltung. Intern wird der Processing-Code in Java übersetzt. Deine Processing-Projekte werden Sketche genannt, du hast für die Verwaltung deiner Projekte(Sketche) ein Sketchbook. Wie gesagt, auf den Code gehen wir später in einem anderen (oder im nächsten, je nachdem wie's läuft) Artikel näher ein. Wollen wir uns also einmal die IDE ansehen, das sollte bei dir so ziemlich genauso aussehen:

Größer ansehen

Du siehst, die IDE ist in englischer Sprache vorzufinden. Das sollte kein großes Problem darstellen, wer ein wenig Englisch kann, kommt damit bestens zurecht. Außerdem ist auch der Code -wie auch in beinahe allen Programmiersprachen- in Englisch, also gewöhn' dich dran ;-) Wollen wir uns die einzelnen Punkte einmal näher ansehen. Klicke die einzelnen Elemente an, um eine Info dazu anzuzeigen ;-)

<h3>File</h3>

<ul id="processingmenufile"> <li onclick="alert('Startet ein neues Projekt (einen neuen Sketch)')">New</li> <li onclick="alert('Öffnet ein vorhandenes Projekt')">Open ...</li> <li onclick="alert('Falls du bereits Sketche erstellt hast, findest du diese hier zum schnellen öffnen')">Sketchbook</li> <li onclick="alert('Klicke hier, und es öffnet sich ein Fenster mit vielen vielen Beispielprojekten mit Code, die du dir ansehen kannst. Es ist aber eher weniger empfehlenswert, diese direkt zu Anfangs ohne jegliche Kenntnisse als Vorlage und zum üben und lernen zu nutzen')">Examples...</li> <li onclick="alert('Sketch schließen')">Close</li> <li onclick="alert('Falls bereits vorher bereits schonmal gespeichert, wird das Projekt automatisch gespeichert, andernfalls öffnet sich ein Dialog, in dem du den Sketch benennen und den Pfad auswählen musst')">Save</li> <li onclick="alert('Öffnet einen Dialog, in dem du auswählen kannst, wo und unter welchem Namen der Sketch gespeichert werden soll')">Save as ...</li> <li onclick="alert('Exportiert den Sketch als Applet, welches du in einen Webbrowser einbinden kannst. Das dauert ca. 1 Sekunde, danach öffnet sich das Explorer-Fenster, in dem das Applet zu finden ist')">Export Applet</li> <li onclick="alert('Exportiert den Sketch als Anwendung. Es öffnet sich ein Dialog, in dem ausgewählt werden kann, für welche Plattform(en) die Anwendung exportiert werden soll, also Windows, Mac oder Linux')">Export Application</li> <li onclick="alert('Seitenformat einstellen')">Page Setup</li> <li onclick="alert('Code drucken')">Print</li> <li onclick="alert('Allgemeine Einstellungen')">Preferences</li> <li onclick="alert('Processing wird geschlossen')">Quit</li> </ul>

Das ist für's erste so das was du am öftesten brauchst. Die Menüpunkte von "Edit" sind größtenteils selbsterklärend, dort findest du Dinge wie "Ausschneiden", "Kopieren", "Als HTML kopieren", Code auskommentieren, Tab-Weite vergrößern/verkleinern, Suchen .. und so weiter, das übliche was man auch von anderen Editoren kennt :-) Dann siehst du noch den Menüpunkt "Sketch", da sind vorerst nur die ersten 3 Unterpunkte relevant:

<ul id="processingmenufile"> <li onclick="alert('Führt den Code als fertigen Sketch in einem eigenen Fenster aus. Das wirst du sehr oft benutzen')">Run</li> <li onclick="alert('Startet den Sketch im Vollbildmodus, funktioniert wie Run')">Present</li> <li onclick="alert('Stoppt einen laufenden Sketch, den du zuvor mit Run gestartet hast')">Stop</li> </ul>

Das war's vorerst, der Rest ist momentan noch nicht von Bedeutung für dich. Wollen wir uns noch die Leiste darunter ansehen:

Größer ansehen

Gewöhne dir am besten an, deine Sketche mit dem Tastenkürzel STRG+S zu speichern und sie mit STRG+R auszuführen, geht schneller ;-) Sieh dir hier mal ein Beispiel-Applet an. Keine Sorge, falls du den Code liest, den musst du nicht verstehen, dazu kommen wir noch, also immer mit der Ruhe ;-) Um einmal kurz zu veranschaulichen, wie simpel es ist, den Benutzer einfach nur etwas malen zu lassen, sieh' dir das hier an. Und Ich muss dazu sagen, du hast mit diesem Ergebnis hier sogar noch die Möglichkeit, die Farbe zu ändern (jenachdem ob linke oder rechte Maustaste gedrückt ist, wird anders gemalt), mit drücken von "x" das Feld zu leeren und mittels der Tasten "+" und "-" die Pinseldicke zu verändern. Doch genug davon, wir machen das Schritt für Schritt. Die IDE kennst du nun größtenteils, alles muss man nicht wissen, viel gibt es ohnehin nicht, und das ist auch gar nicht nötig, denn alles spielt sich ja im Code ab, richtig?! ;) Und zu eben diesem will Ich in meinen nächsten Artikeln zu sprechen kommen, indem Ich dich Stück für Stück an Processing heranführe. Das ganze gestalte Ich also so eine Art Tutorial-Reihe, wobei's nicht nur sachlich sondern auch locker und spaßig zugehen soll ;-)

Bis dahin.. Marius :-)