Starting with Processing (de)

Installieren von Processing

Processing ist eine Programmierumgebung(IDE) die auf der Programmiersprache Java basiert. Da Processing Open Source ist könnt ihr es hier frei runterlanden.

Grundübung

Beispiel 1 – Zeichenausgabe

Dieses Beispiel zeigt wie man direkt ohne grosse Umwege zeichnen kann. Hier findet ihr weitere Zeichenbefehle und die Dokumentation der Befehle.

size(300,300); // def. fenstergroesse
 background(0); // def. hintergrundfarbe
 smooth(); // aktiviere antialiasing
 stroke(255,255,255); // def. zeichenfarbe
line(100,10,100,150); // zeichne eine linie
 line(150,10,150,200);
 line(200,10,200,250);
fill(0,0,0); // def. fuellfarbe
 strokeWeight(5); // strichstaerke
 ellipse(100,150,50,50); // zeichen eine ellipse
 ellipse(150,200,50,50); // zeichen eine ellipse
 noFill(); // keine fuellung
 ellipse(200,250,50,50); // zeichen eine ellipse

Beispiel 2 – Komplexe Formen

Dieses Beispiel zeigt euch wie man Linien-Attribute verändert und komplexere Formen zeichnet.

size(300,300); // def. fenstergroesse
 background(0); // def. hintergrundfarbe
stroke(255); // def. zeichenfarbe
 strokeWeight(8); // linienbreite
 strokeJoin(MITER); // default
 //strokeJoin(BEVEL);
 //strokeJoin(ROUND);
 noFill();
beginShape();
 vertex(50,50);
 vertex(200,50);
 vertex(200,200);
 vertex(50,200);
 vertex(50,100);
 vertex(150,100);
 vertex(150,150);
 endShape();

Beispiel 3 -Farben und Transparenz

Farben werden mit 3 Werten definiert, den sogenannten RGB-Werten. Die Farbe besteht aus drei Komponenten(Rot+Grün+Blau) und wird durch die additive Farbmischung bestimmt. Der Wert einer Farbkomponente kann von 0-255 gehen. Dieser Zahlenbereich rührt von dem Umstand her, dass jeder Farbwert einen 8-Bit Wert darstellt. Daher sprechen wir auch von True-Color mit 24-Bit(3*8-Bit = RGB).
Formen können auch Transparent sein, hierfür nutzt man den Alpha-Kanal. Die Farbe wird einfach um einen 4.Parameter erweitert(RGBA). Je kleiner der Alpha-Wert, desto undurchsichtiger(Opacity) wird die Form dargestellt.

size(300,300);
 background(0);
noStroke();
 fill(210,200,200);
 ellipse(125,150,50,50);
stroke(150,10,10);
 fill(100,100,90,200);
beginShape();
 vertex(50,50);
 vertex(125,150);
 vertex(200,50);
 vertex(200,200);
 vertex(50,200);
 vertex(50,50);
 endShape();

Aufgabe

Erweitert und Verändere die Beispiele mit neuen oder kombinierten Zeichenbefehlen (Arc, Point, Triangle, etc.)