Processing - Einführung in die Programmierumgebung

Aus ComeniusWiki
Version vom 13. September 2015, 09:13 Uhr von B.Schiller (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Am Ende des Kapitels solltest du

  • wissen, was Processing ist,
  • die Processing-Programmierumgebung eigenständig auf Deinem Computer installiert haben,
  • Dir einen ersten Überblick über den Editor verschafft haben,
  • in der Lage sein, erste kleine Programme zu erstellen,
  • wissen, wo Deine Programme abgespeichert werden.

Inhaltsverzeichnis

Was ist Processing?

Processing ist eine sogenannte objektorientierte Programmiersprache mit zugehöriger integrierter Entwicklungsumgebung. Die Programmiersprache ist für die Einsatzbereiche Grafik, Simulation und Animation spezialisiert. Processing wird in einem open source Projekt entwickelt, das am Massachusetts Institute of Technology (MIT) in Boston initiiert wurde. Processing hat den Charakter einer stark vereinfachten Version der Programmiersprache Java, ermöglicht Interaktionen und visuelle Elemente zu programmieren und eignet sich besonders gut für einen einfachen Einstieg in das Programmieren und einen fließenden Übergang in das Programmieren mit Java.


Die Installation der Programmierumgebung

Die Programmierumgebung kann von der Processing Website heruntergeladen werden (Dateiumfang: 110 MB). Nach dem Herunterladen muss die Datei zuerst entpackt werden: Klicke dazu mit der rechten Maustaste auf den Ordner und anschließend auf den Menüpunkt Alle extrahieren. In der folgenden Dialogbox kannst du einen Zielordner angeben. Lege dazu einen Ordner Processing in deinen Dokumenten an und entpacke die Datei dort. Nun kannst du über das Symbol für die Anwendungsdatei die Anwendung starten. Als erstes verlangt das Programm das Anlegen eines Sketch-Ordners, in den deine Programme abgespeichert werden. Lege dazu einen weiteren Ordner Projekte in deinem Dokumente-Ordner an. Und nun kannst du bereits loslegen.

Der Editor

Proc install 1.JPG


Wenn wir den im obigen Fenster sichtbaren Code (println("Hallo Welt!");) eingeben und anschließend auf den Startknopf klicken, erhalten wir auf der Konsole am unteren Rand des Fensters die entsprechende Textausgabe.


Proc install 2.JPG


Gleichzeitig erscheint das sogenannte Graphikfenster, in dem in Zukunft die meisten unserer Programme ablaufen.


Proc install 3.JPG

Erste Programme

Tippe nun folgenden Programmcode in den Editor:


void setup(){
size(400, 400);
background(243, 247, 129);
}


Es ist sicher keine Überraschung, dass die Anweisungen unserer einfachen Sprache aus dem vorhergehenden Kapitel entsprechen. In der Methode setup() legen wir die Eigenschaften des Graphikfensters fest. Die Bedeutung des Schlüsselwortes void werden wir an späterer Stelle kennenlernen. Die Methode size() legt Breite und Höhe des Graphikfensters fest, die Methode background() die Hintergrundfarbe im RGB-Modus (Der gewünschte Farbcode kann hier ermittelt werden). Natürlich wollen wir im Graphikfenster auch zeichnen. Zu diesem Zweck ergänzen wir unseren Code durch folgende Zeilen:


void draw(){
stroke(255,0,0);
line(0,0,400,400);
line(0,400,400,0);
}


In der Methode draw() erzeugen wir unsere Graphikelemente. In diesem Fall sind dies zwei diagonale Linien. In der Methode line() geben wir die Koordinaten (x,y) des Startpunktes und des Endpunktes der Linie an. Die Methode stroke() legt die Linienfarbe für alle nachfolgenden Linien fest. Die Farbe wird erst durch einen erneuten Aufruf der Methode stroke() geändert bzw. durch noStroke() deaktiviert.
Zum Schluß speichern wir über Datei - Speichern unter ... unserer Programm in unserem vorher erstellten Ordner Projekte ab.


Aufgabe 1

Ändere obigen Code so ab, dass die zweite Linie grün erscheint.


Aufgabe 2

Erweitere den obigen Code so, dass folgendes Ergebnis erzielt wird:


Proc install 4.JPG



Aufgabe 3

Erstelle ein Programm, das ein Zeichenfenster der Größe 600x400 nutzt und mit Hilfe der Methoden stroke() und line() eine Rechteck, ein Dreieck und eine Raute darstellt.