Starting with Processing (eng)

Installing Processing

Processing is a programming environment (Integrated development environment IDE) based on the programming language Java. Processing is Open Source and you can download it for free here.

Example 1 - Character output

This example shows how to draw graphics directly to an output window. You can find further drawing functions Processing reference page ( link ).

size(300,300); // define window size 
 background(0); // define background colour 
 stroke(255,255,255); // define line colour 
line(100,10,100,150); // draw a line 
 line(150,10,150,200);
 line(200,10,200,250);
fill(0,0,0); // define fill colour 
 strokeWeight(5); // line thickness 
 ellipse(100,150,50,50); // draw an ellipse
 ellipse(150,200,50,50); // draw an  ellipse
 noFill(); // turn of fill
 ellipse(200,250,50,50); // draw an  ellipse

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