die ersten Schritte
die Programmoberfläche
In jedem Programm und Programmierumgebung ist es zunächst unerlässlich die Programmieroberfläche kennenzulernen.
Processing-Programme werden als Sketch bezeichnet. Beim Starten der Programmierumgebung wird der erste Sketch geöffnet. Sie heißen deswegen so, weil sich Processing als elektronisches Skizzenbuch versteht und zum Kreieren visuell ansprechender und interaktiver Software geschaffen ist.
Wer mehr Informationen dazu möchte findet dies auf der Processing Website: -> Anleitung
Betätigt man den Start-Button des Programms wird ein weiteres Fenster – das Ausgabefenster – geöffnet. Es zeigt das Programm, das zuvor im Sketch-Fenster erstellt wurde.
Die Default-Werte (= voreingestellte Werte) sind 100×100 Pixel für die Größe des Ausgabefensters und Grau als Hintergrundfarbe.
die zwei wichtigsten Methoden – setup() und draw()
Jeder Sketch der geschrieben wird muss zwei Methoden aufweisen. (Der wissbegierige Programmierneuling muss den Begriff „Methode“ an dieser Stelle einfach hinnnehmen, aber keine Sorge, was eine Methode ist, wird später näher erläutert)
void setup(){ } void draw(){ }
setup() wir einmalig beim Programmstart ausgeführt. Hier werden üblicherweise Dinge wie die Größe des Canvas und Farbe, sowie Auflösung angegeben.
Bei der draw() Methode handelt es sich um einen Loop (=Schleife), das bedeutet, dass sie immer wieder ausgeführt wird und alles was in ihr geschrieben steht immer wieder aufgerufen wird und in das Ausgabefenster gezeichnet wird. Es handelt sich dabei um eine Endlosschleife – sie wird erst gestoppt, wenn der Stopp-Button betätigt wird. Dadurch lassen sich Animationen und Interaktion erstellen, was bei einem statischen Programm nicht möglich wäre bzw. bei höheren Programmiersprachen sehr viel Programmiererfahrung benötigt.
&nsp;
Das erste Programm – von der Pike auf
Wir wollen einen Punkt zeichnen, der von links nach rechts wandert.
1. Wir legen die Größe des Ausgabefensters und dessen Hintergrundfarbe fest.
Das müssen wir nur ein einziges Mal tun. Wie wir schon gelesen haben, schreiben wir solche Dinge in die setup() Methode. Für das Festlegen des Ausgabefensters und Hintergrundfarbe liefert uns Processing die Methoden size() und background().
size() verlangt zwei Parameter. Als Parameter werden die Werte bezeichnet, die in den runden Klammern stehen. Wir übergeben der Methode also Werte – sie führt danach mit diesen Werten etwas aus. In diesem Fall legt sie die Größe des Ausgabefensters fest. Welche Werte wird diese Methode also verlangen? Richtig, einen Wert für die Breite und einen Wert für die Höhe des Ausgabefensters! Diese werden in Pixel angegeben. Wollen wir also ein Ausgabefenster mit der Größe 800×800 Pixel, dann rufen wir die Methode so auf
size(800, 800);
Bitte beachte die Parameter sind mit einem Komma (,) getrennt und am Ende des Befehls ist ein Semikolon (;).
Die häufigsten Anfängerfehler:
- das Semikolon zu vergessen
- eine Klammer nicht zu schließen
- Komma und Semikolon zu verwechseln
Es ist auch möglich, das Fenster auf den gesamten Bildschirm anzeigen zu lassen, dazu wird fullScreen() in der setup()-Methode aufgerufen und auf size() verzichtet.
Der Fullscreen, sowie jedes Ausgabefenster, kann mit der ESC-Taste beendet werden.
Um die Hintergrundfarbe festzulegen wird der Befehl background() benötigt. Aber wie werden Farben angegeben? Um mehr über verschiedene Farbsysteme zu erfahren gehe auf ->Farbsysteme.
Processing verlangt hier drei Werte – RGB (Rot – Grün – Blau) – und erkennt Werte zwischen 0 und 255. Aus diesen Werten lassen sich alle Farben erzeugen. Wollen wir beispielsweise einen roten Hintergrund geben wird folgenden Befehl an:
background(255, 0, 0);
Wollen wir eine weiße Fläche dann brauchen wir alle Farbtöne
background(255, 255, 255);
Danke dabei an drei Scheinwerfer, der eine rot, der zweite grün und der dritte blau. Richtest du diese auf dieselbe Stelle, dann wird diese weiß erscheinen.
Willst du hingegen eine schwarze Fläche, dann drehst du die Scheinwerfer ab. So wie in dem nachfolgenden Code-Stück:
background(0, 0, 0);
Processing bietet außerdem die Möglichkeit die Farbe über einen Selektor zu wählen unter
Processing > Tools > Farbauswahl (Color Selector).
2. Wir erzeugen eine Punkt
Auch hier erweist sich Processing als äußerst hilfreich. Für die grundlegendsten Grafikbefehle gibt es ebenfalls vorgefertigte Methoden.
Um mehr über die Grafikbefehle zu erfahren, gehe auf → Grundlegende Grafikbefehle.
Um weitere gestalterische Informationen zu den Grundelementen der Gestaltung zu erlangen besuche die Seite → Grundelemente der Gestaltung
Um also einen Punkt zu erzeugen, schreiben wir:
point(0,400);
in die draw() Methode.
Wenn nun auf den „Programm starten“-Button gehen, sehen wir wie an dieser Stelle ein Punkt erzeugt wir. Allerdings ist dieser noch sehr klein und kaum sichtbar.
Um in größer zu machen, benutzen wir die strokeWeight() Methode. Sie beschreibt die Stärke der gezeichneten Linie. Alles was unterhalb dieser Methode steht, wird in dieser Strichstärke abgebildet.
strokeWeight(20);
Nun sieht es so aus, als hätten wir ein Standbild gezeichnet. In Wirklichkeit aber wird dieser Punkt immer und immer wieder gezeichnet, da sich der Aufruf in der draw() Methode befindet.
3. Den Punkt animieren
Um den Punkt nun von einem Ende zum nächsten wandern zu lassen, machen wir uns die Schleifenfunktion der draw() Methode zu nutze. Wenn wir nun den Wert auf der x-Achse hinaufzählen, so bewegt sich der Punkt. Wir machen das indem wir eine Variable, also eine flexible Zahl festlegen. Ganz am Anfang, also außerhalb der beiden Methoden deklarieren wir eine Variable x.
int x;
Anschließend ergänzen wir im draw() Loop:
x = x + 1; point(x, 400);
Nun wird x um eins hinaufgezählt bei jedem Aufruf von draw();
Was passiert nun, wenn wir das Programm starten?
Es wird ein Punkt nach dem anderen gezeichnet, was in einer Linie resultiert. Der vorherige Punkt ist immer noch zu sehen. Um diesen zu löschen bedarf es eines kleinen Tricks – wir müssen den Canvas bei jedem Aufruf der draw() Methode „löschen“. In unserem Fall heißt das mit weiß übermalen indem man background(255, 255, 255); am Anfang einfügt.
Das fertige Programm sieht nun so aus:
int x; void setup(){ size(800,800); background(255, 255, 255); } void draw(){ background(255, 255, 255); strokeWeight(20); x = x + 1; point(x, 400); }
Beachte die Codeeinrückungen, Strichpunkte und Klammern!