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.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.)