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