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 ellipseBeispiel 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.)