Quelltext der Seite Processing - Einführung in die Programmierumgebung

<div style="background-color:#A9E2F3; padding:10px; margin-bottom:30px;">
'''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.
</div>

==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 [https://processing.org/download/?processing 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==

[[Datei:proc_install_1.JPG]]


Wenn wir den im obigen Fenster sichtbaren Code (<span style="color:#0040FF;">println("Hallo Welt!");</span>) eingeben und anschließend auf den Startknopf klicken, erhalten wir auf der Konsole am unteren Rand des Fensters die entsprechende Textausgabe.


<div style="margin-left:95px;">
[[Datei:proc_install_2.JPG]]
</div>


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


<div style="margin-left:95px;">
[[Datei:proc_install_3.JPG]]
</div>

==Erste Programme==

Tippe nun folgenden Programmcode in den Editor:


<div style="color:#0040FF;">
:void setup(){

::size(400, 400);

::background(243, 247, 129);

:}
</div>


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 [http://html-color-codes.info/webfarben_hexcodes/ hier] ermittelt werden). Natürlich wollen wir im Graphikfenster auch zeichnen. Zu diesem Zweck ergänzen wir unseren Code durch folgende Zeilen:


<div style="color:#0040FF;">
:void draw(){

::stroke(255,0,0);

::line(0,0,400,400);

::line(0,400,400,0);

:}
</div>


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.<br/>
Zum Schluß speichern wir über '''Datei - Speichern unter ...''' unserer Programm in unserem vorher erstellten Ordner '''Projekte''' ab.


<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
'''Aufgabe 1'''

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

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
void setup(){
  size(400, 400);
  background(243, 247, 129);
}

void draw(){
  stroke(255,0,0);
  line(0,0,400,400);
  stroke(0,255,0);
  line(0,400,400,0);
}
</syntaxhighlight>
</popup>


'''Aufgabe 2'''

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


[[Datei:proc_install_4.JPG]]


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
void setup(){
  size(400, 400);
  background(243, 247, 129);
}

void draw(){
  stroke(255,0,0);
  line(0,0,400,400);
  stroke(0,255,0);
  line(0,400,400,0);
  stroke(0,0,255);
  line(200,0,200,400);
  stroke(255,0,255);
  line(0,200,400,200);
}
</syntaxhighlight>
</popup>


'''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.
</div>