Page Comparison

...

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

Example 2 - Complex Forms

This example shows you how to change line attributes and how to draw more complex shapes.

size(300,300); // def. fenstergroesse define window size 
 background(0); // def. hintergrundfarbedefine background colour 
stroke(255); // def. zeichenfarbedefine line colour 
 strokeWeight(8); // linienbreiteline thickness
 strokeJoin(MITER); // this is the 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 dargestelltExample 3 colors and transparency

Colours are defined with 3 values, the so-called RGB values. The colour consists of three components (red + green + blue) and is determined by the additive color mixing. The value of a colour component can range from 0-255.

This range of numbers results from the fact that each color value represents an 8-bit value. Therefore, we also speak of true color with 24-bit (3 * 8-bit = RGB).

Forms can also be transparent, using the  alpha channel. The colour is simply extended by a 4th parameter (RGBA). Smaller alpha value are more transparent than greater ones.

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 Exercise:

Expand and modify the examples with new or combined drawing commands (Arc, Point, Triangle, etc.).