http://www.linksammlung.info/

http://www.schaltungen.at/

                                                                                             Wels, am 2014-12-12

/*Processing-Sketch: Processing-Kurs 01 – Zeichnen_1a.inohttp://michaelkipp.de/processing/01%20zeichnen.htmlsize(800,600);             // Breite und Höhe des Zeichenfensters //background(204);         // Default-Hintergrund gray80point(basisX, basisY);     // Punktline(X,Y, x,y);            // Linie 1=Anfang 2=EnderectMode(CORNER);          // "normaler" Rechteck-Modusrect(X,Y,  breite,hoehe);  // Rechteckellipse(X,Y, durchmesserBreite, durchmesserHoehe);  // Kreisarc(X,Y,  b,h,   Startwinkel, Endwinkel);  // Halbkreis PI=180°  2*PI= 360°rectMode(CENTER);  // Rechteck mit MittelpunktangaberectMode(CORNERS); // Rechteck mit Eckpunkte links-oben, rechts-untenstrokeWeight(4);   // Strichstärke, Dicke der Kontur in pixelstocke(255);       // weißer Strich EINnoStroke();        // Umrandungs-Strich  AUSfill(0);           // Farbe schwarz  (kein Licht)fill(127);         // Farbe grau  (mittleres Licht)fill(255);         // Farbe weiß  (max. Licht)fill(R,G,B);     // RGB-Farbefill(255,0,0);   // Farbe Rot 
fill(0,255,0);   // Farbe Grün 
fill(0,0,255);   // Farbe Blau 
fill(255,255,0); // Farbe yellow
fill(255,0,255); // Farbe magenta
fill(0,255,255); // Farbe cyan

noFill();          // Objekt wird nicht gefüllttext("TEXT", basisX, basisY);*/size(400,600);            // x, y Größe des Fensters//background(204);         // Default-Hintergrund gray80point(50,150);            // Punkt setzenline(100,0, 100,200);      // vertikale Linieline(0,100, 300,100);     // horizontale LinienoFill();rect(10,10, 100,25);     // liegendes Rechteckfill(255);rect(250,120, 30,50);    // stehendes Rechteckellipse(50,75, 20,20);   // Kreisellipse(350,50, 80,50);  // liegende Ellipsefill(255,255,0);         // gelbellipse(50,150, 50,80);  // stehende Ellipsefill(255,0,0);           //rotarc(200,50, 80,80, PI,2*PI - PI/2);  // Viertel-Kreisarc(250,50, 80,80, PI,2*PI);         // Halb-Kreisfill(0);   // Farbe schwarzarc(200,400, 80,80, radians(180),radians(360));    // Halbkreisfill(191); // Farbe grauarc(150,150, 80,80, PI,2*PI+ PI/2);  // Dreiviertel-Kreisfill(255);               // Farbe weißrectMode(CENTER);        // Rechteck mit Mittelpunktangaberect(50,350, 40,80);noStroke();rectMode(CORNERS);       // Rechteck mit Eckpunkte links-oben, rechts-untenrect(20,450, 80,475);rectMode(CORNER);        // "normaler" Modusrect(80,475, 10,10);strokeWeight(10);        // 10pixel Strichbreite (+ - 5 5pixel)stroke(255);             // StrichstFarbe weißfill(120);               // dunkelgrauellipse(300,400, 40,40);textSize(32); 
//textAlign(CENTER); 
text("Processing-IDE", 100,100);  // Name   Position links-unten

10 12 18 Schreibschrift

24 36 48 60 72 96 Anzeige-Schrift

PFont myFont;void setup() {  size(200, 200);  // Uncomment the following two lines to see the available fonts   //String[] fontList = PFont.list();  //println(fontList);  myFont = createFont("ArialMT", 48);  //  12 18 24 36 48 60 72 96   textFont(myFont);  textAlign(CENTER, CENTER);  text("!@#$%", width/2, height/2);}

// Processing-Sketch: createFont_MausPosition_1a.pde// Font = Schrift frei skaliernbar

// Text erscheint im Grafik-Fenster// Default Schrift SansSerif 12-pixelPFont font;                                   // PFont-ObjektVariable deklarierenvoid setup(){size(600,400); 
background(0);//font = createFont("SansSerif", 12, true);   // Default Rechner-Schriftname//textFont(font, 12);                         // FontVariable, Schriftgröße Default 12-pixel//font = createFont("Courier New", 12, false); // Anti-Aliasing true / false//textFont(font, 48);                         // FontVariable, Schriftgröße 48-pixeltext("Hallo User!", 50, 50);                  // Textposition x, y (linke untere Ecke des Textes)}void draw() {                         // xy-WERT der aktuellen Mausposition im Grafik-Fensterbackground(255);                      // Grafik-Fenster-Hintergrunf weißfill(0);                              // Textfarbe schwarztext("X=" + mouseX + " / " + "Y=" + mouseY, mouseX + 5, mouseY - 5); // Mausposition, Text + / - 5-pixel}

Bild_400x200_pixel.png

// Processing-Sketch: createFont_5x7DotMatrix_7_Segm_1a.pdePFont font;                          // PFont-ObjektVariable deklarierenPFont font_1;                        // PFont-ObjektVariable deklarierenvoid setup() {  size(400,200);                     // Fenstergröße    String[] fontList = PFont.list();  // Liste der verfügbaren Schriften  println(fontList);                 // Anzeige der verfügbaren Schriften im Nachrichten-Fenster    font = createFont("01 Digit", 64); // Schrift-Name, Font-Größe  textFont(font);                    // Font-Variable,  textAlign(CENTER, CENTER);         // X =  LEFT, CENTER oder RIGHT  Y = TOP, BOTTOM, CENTER oder BASELINE  text("01 Digit, 64", width/2, height/4);  // "Text", Textposition x, y (linke untere Ecke des Textes)    font_1 = createFont("Digital-7", 64);     // Schrift-Name, Font-Größe  textFont(font_1);                         // Font-Variable,  textAlign(CENTER, TOP);  // X =  LEFT, CENTER oder RIGHT  Y = TOP, BOTTOM, CENTER oder BASELINE  text("Digital-7, 64", width/2, height/2); // "Text", Textposition x, y (linke untere Ecke des Textes)}

createFont(name, size)          z.B. myFont = createFont("01 Digit", 64);createFont(name, size, smooth)  z.B. font = createFont("SansSerif", 12, true); createFont(name, size, smooth, charset)

// Processing-Sketch: loadFont_MausPosition_7Segm_1a.pde// Font = Schrift frei skaliernbar// Schrift-Namen (Digital-7-48.vlw) wie im Unter-ORDNER "Data" des Sketch-Ordners// Maus-Position erscheint im Grafik-FensterPFont font;                // PFont-ObjektVariable deklarierenvoid setup() {  size(600,400);          //  Grafik-Fenster Größe 600x400-pixel  font = loadFont("Digital-7-48.vlw"); // loadFont statt createFont - Schrift-Name-Größe  textFont(font, 48);      // Font-Variable, Schriftgröße gleich wie OBEN da nicht frei scallierbar}  void draw() {              // xy-WERT der aktuellen Mausposition im Grafik-Fenster  background(0);           // Grafik-Fenster-Hintergrunf schwarz  fill(255);  rect(35,260, 190,45);  // Rechteck  rect(275,260, 190,45); // Rechteck   noFill();  fill(0,255,0); // Textfarbe in Grün  text(mouseX + " / " + mouseY, mouseX + 5, mouseY - 5); // Mausposition, Text + / - 5-pixel  text("Digital-7-48.vlw", 50, 70); // Schrift-Position  text("1 2 3 4 - V          5 6 7 8 - A", 50, 300); // Schrift-Position}

PGraphics pg;void setup() {  size(200,200);  pg = createGraphics(100,100);}void draw() {  pg.beginDraw();  pg.background(102);  pg.stroke(255);  pg.line(pg.width*0.5, pg.height*0.5, mouseX, mouseY);  pg.endDraw();  image(pg, 50,50); }

PFont font;// The font must be located in the sketch's // "data" directory to load successfullyfont = loadFont("LetterGothicStd-32.vlw");textFont(font, 32);text("word", 10,50);

Beispiel 1:
textSize(32);text("word", 10,30);   // 1. Zeile weißfill(0,102,153);text("word", 10,60);   // 2. Zeile blaufill(0,102,153,  51);text("word", 10,90);   // 3. Zeile hellblau

Beispiel 2:
size(100,100, P3D);textSize(32);fill(0,102,153, 204);text("word", 12, 45, -30);  // Specify a z-axis valuetext("word", 12, 60);  // Default depth, no z-value specified

Beispiel 3:
String s = "The quick brown fox jumped over the lazy dog.";fill(50);text(s, 10, 10, 70, 80);  // Text wraps within text box

text(c, X, Y)text(c, X, Y, z)text(str, X, Y)text(chars, start, stop, X, Y)text(str, X, Y, z)text(chars, start, stop, X, Y, z)text(str, X, Y, x, y)text(num, X, Y)text(num, X, Y, z)

textFont(which)textFont(which, size)

background(0);fill(255);textSize(26); text("WORD", 10, 50); textSize(14);text("WORD", 10, 70);

import processing.pdf.*;void setup() {  size(500,500, PDF, "TypeDemo.pdf");  textMode(SHAPE);  textSize(180);}void draw() {  text("ABC", 75, 350);  exit();  // Quit the program}

// Processing-Sketch: createFont_Textbreite_SansSerif_1a.pde// Font = Schrift frei skaliernbar// Default Schrift SansSerif 12-pixel da Courier New Schrift am Rechner nicht vorhanden         PFont font;                // PFont-ObjektVariable deklarierenString message = "Hallo User!";float w;void setup() {  size(600,200);           //  Grafik-Fenster Größe 600x200-pixel  font = createFont("Courier New", 12, false);  // Anti-Aliasing true / false  textFont(font, 28);      // Schriftgröße 28-pixel  w = textWidth(message);  // Textbreite}void draw() {  background(0);  text(message, mouseX, mouseY);  if (mouseX + w > width)  // Abfrage ob der Text den rechten Grafik-Rand berührt    fill(255,0,0);         // Schriftfarbe rot  else    fill(0,255,0);         // Schriftfarbe grün}

// Processing-Sketch: createFont_Textbreite_Textzeichnenfolge_1a.pde// Font = Schrift frei skaliernbar// Default Schrift SansSerif 12-pixel da Courier New Schrift am Rechner nicht vorhandentextSize(28);char c = 'T';float cw = textWidth(c);text(c, 0, 40);line(cw, 0, cw, 50); String s = "Tokyo";float sw = textWidth(s);text(s, 0, 85);line(sw, 50, sw, 100);

// Text to display. The "\n" is a "new line" characterString lines = "L1\nL2\nL3";textSize(12);fill(0);  // Set fill to blacktextLeading(10);  // Set leading to 10text(lines, 10, 25);textLeading(20);  // Set leading to 20text(lines, 40, 25);textLeading(30);  // Set leading to 30text(lines, 70, 25);

Beispiel 1:

// Processing-Sketch: createFont_MausPosition_SansSerif_1a.pde// Font = Schrift frei skaliernbar// Default Schrift SansSerif 12-pixel da Courier New Schrift am Rechner nicht vorhanden// Maus-Position erscheint im Grafik-FensterPFont font;                                      // PFont-ObjektVariable deklarierenvoid setup() {     size(800,150);                               //  Grafik-Fenster Größe 800x150-pixel   font = createFont("Courier New", 12, false);  // Anti-Aliasing true / false   textFont(font, 16);}void draw() {   background(0);    stroke(255,0,0);                    // Text-Farbe Rot   line(mouseX, 0, mouseX, height);   fill(0,255,0);                      // Textfarbe in Grün   textAlign(RIGHT);                   // Rechts bündig   text("Rechts bündig.", mouseX, 50);   textAlign(CENTER);                  // mittig   text("Zentriert.", mouseX, 70);   textAlign(LEFT);                    // Links bündig   text("Links bündig.", mouseX, 30);      textSize(16);   textAlign(RIGHT);                   // Rechts bündig   text("ABCD", 50, 40);   textAlign(CENTER);                  // mittig   text("EFGH", 50, 80);   textAlign(LEFT);                    // Links bündig   text("IJKL", 50, 120);}

// Processing-Sketch: createFont_ObenMitte Unten_SansSerif_1a.pde// Font = Schrift frei skaliernbar// Default Schrift SansSerif 12-pixel da Courier New Schrift am Rechner nicht vorhandensize(300,150); background(0);                    //Hintergrund schwarzstroke(255,0,0);                  // Strichfarbe rottextSize(12);                     // Schriftgröße 12-pixel   textAlign(CENTER, BOTTOM);     // Unterstrichen   line(0,40, 200,40);   text("CENTER,BOTTOM", 50,40);      textAlign(CENTER, CENTER);     // durchgestrichen   line(0,70, width,70);        // width - bis zum X-Grafik-Fenster   text("CENTER,CENTER", 50,70);      textAlign(CENTER, TOP);        // Überstrich   line(0,100, width,100);  //70   text("CENTER,TOP", 50,100);

   line(150,0, 150,height);    // height - bis zum Y-Grafik-Fenster

float base = height * 0.75;float scalar = 0.8; // Unterschiedliche für jede SchriftarttextSize(32);  // Setzt anfängliche Textgrößefloat a = textAscent() * scalar;  // Calc Aufstiegline(0, base-a, width, base-a);text("dp", 0, base);  //Text auf Grundlinie zeichnentextSize(64);  // Textformat vergrösserna = textAscent() * scalar;  // Recalc Aufstiegline(40, base-a, width, base-a);text("dp", 40, base);  // Text auf Grundlinie zeichnen

float base = height * 0.75;float scalar = 0.8; // Unterschiedliche für jede SchriftarttextSize(32);  // Setzt anfängliche Textgrößefloat a = textDescent() * scalar;  // Calc Aufstiegline(0, base+a, width, base+a);text("dp", 0, base);  // Text auf Grundlinie zeichnentextSize(64);  // Textformat vergrösserna = textDescent() * scalar;  // Recalc Aufstiegline(40, base+a, width, base+a);text("dp", 40, base);  // Text auf Grundlinie zeichnen

• Einführung
• Programm
  • Programm Struktur
  • Schleifen
    • for() Schleife
    • while() Schleife
  • Funktionen
  • Variablen und Datentypen
  • Strings
  • Mathematische Operationen
  • Rechen Funktionen
  • Trigonometrische Funktionen
  • Zufallszahlengenerator
• Zeichenfläche
• Zeichen Elemente
  • Punkt point()
  • Linie line()
  • Rechteck rect()
  • Viereck quad()
  • Dreieck triangle()
  • Kreis, Ellipse ellipse()
  • Bogen arc()
• Farben
• Graustufen
  • Hintergrund background()
  • Vordergrund, Füllfarbe fill()
  • Linienfarbe stroke()
• Eigenschaften (Attributen)
  • smooth()
  • strokeWeight() / ..Cap() / ..Join()
  • rectMode()
  • ellipseMode()
• Freie Formen vertex()
• Kurven curveVertex()

Links

• zurück zu Computer für alle!

• processing.org (en)
  Entwickler Seite

• Processing Wiki (en)
  Wiki zur Entwickler Seite

• Creative Coding
  Toutorial in deutsch (de)

• processing toutorial
  einstieg in die programmierung mit processing (de)

• Generative Gestaltung
  Webseite zum gleichnamigen Buch (de)

• Learning Processing
  von Daniel Shiffman (en)

• Fun Programming
  Videos Toutorials (en)

• www.escapemotions.com
  Experimente und Tools für Künstler (en)

alle externen Links werden in einem neuen Fenster geöffnet

alle grünen Links verweisen auf Wikipedia und werden in einem neuen Fenster geöffnet

Einführung

Das Projekt Processing wurde von Ben Fry und Casey Reas 2001 am MIT (Massachusetts Institute of Technology) in Boston ins Leben gerufen.

Processing basiert auf der Programmiersprache Java. Die einfache Schreibweise erleichtert den Einstieg für Programmieranfänger. Die Programm Anweisungen (Syntax) ist stark an aktuelle Programmiersprachen angelehnt und wird in Processing Sketch genant. Deshalb fällt der Umstieg auf Java leicht. Processing eignet sich vor allem für Grafikanwendungen. Auch 3D Objekte sind schon implementiert.

Der Editor für Processing kann von der Webseite "http://processing.org" für Linux, Mac und Windows heruntergeladen werden. Eine Java Umgebung "JDK" wird vorausgesetzt.

Processing ist Open Source. Die PDE (Processing Development Environment) wird unter der GNU GPL (General Public License) veröffentlicht.

Programm

Das Programmfenster stellt einen Texteditor dar. Oben befindet sich die Menüleiste mit File, Edit, Sketch, Tools und Help. Gleich darunter befinden sich die wichtigsten Befehle als Icons.

Über dem Editierbereich ist eine Tab-Leiste. Damit lassen sich Programme aufteilen. Dazu später mehr.

Im Programmeditor werden die Anweisungen geschrieben. Automatisch werden die Anweisungen verschiedenfarbig dargestellt, und die Programmzeilen entsprechend eingerückt. Dies erleichtert die Lesbarkeit des Programm-Code.  Mit der Tastenkombination [Ctrl] + [t] kann der Code nachträglich Automatisch eingerückt werden. Starten lässt sich das Programm mit [Ctrl] + [r]. Probiere es aus.
Darunter befindet sich eine Statuszeile, ein Direktausgabefenster und noch eine Statuszeile. Das Direktausgabefenster wird mit dem Befehl print() bzw. println() angesprochen. Die unterste Statusleiste zeigt die Zeilennummer an.

Dein erstes Programm

Gib im Editorfenster folgende Zeile ein:

 ellipse (50, 50, 80, 80);                        

achte darauf die Zeile mit einem Semikolon (Strich-Punkt) abzuschliessen.
Hast du alles korrekt eingegeben klicke auf das Icon mit dem nach rechts zeigendem Dreieck.
Alternativ kann ein Sketch auch über das [Sketch] -> [Run] Menü oder mit der Tastenkombination [Ctrl] + [r] gestartet werden. Im nun erscheinenden Fenster wird ein weisser Kreis auf grauen Grund mit einem Durchmesser von 80 Pixel dargestellt.

Programm Struktur

Ein Processing Programm kann ohne Programmstrukturen gestartet werden. Dann werden die Befehle im Sketch einmalig ausgeführt.

Syntax:

 // Programmstruktur_001.pde //////////////////////////// // Grösse des Ausgabefenster size(200, 200); // Ein Rechteck zeichnen ... rect(70, 40, 60, 150); // ... und noch eine Ellipse ellipse(100, 100, 200, 60);                      

In diesem Fall wird zuerst ein Rechteck gemalt und darüber eine Ellipse. Man sieht, dass die Reihenfolge der Funktionsaufrufe wichtig ist. Ein kontinuierlicher Programmablauf wird mit den beiden Funktionen setup() und draw(). Die Funktion setup() wird einmalig beim Programmstart aufgerufen, hier werden die ersten Funktionen und Einstellungen geschrieben. Die Funktion draw() wird kontinuierlich ausgeführt. Jeder Durchlauf von draw() zeichnet ein Frame in das Anwendungsfenster. Standardmässig wird draw() 60 mal in der Sekunde aufgerufen. Die Aufrufrate kann aber vom Programmierer mit frameRate(zahl) vorgegeben werden.

Beispiel:

 // Programmstruktur_001.pde //////////////////////////// void setup() { /* legt die Grösse des Ausgabefenster fest */ size(200, 200); } void draw() { // Ein Rechteck zeichnen ... rect(70, 40, 60, 150); // ... und noch eine Ellipse ellipse(100, 100, 200, 60); }                     

Processing basiert auf Java und übernimmt dessen Syntax.

Um einen einfacheren Einstieg in die Grafikprogrammierung zu erlauben, wurde Processing um einige Elemente erweitert. Processing eignet sich sowohl für Programmieranfänger und Grafiker.

Einzeilige Kommentare beginnen mit // und mehrzeilige Kommentare werden zwischen /* und */ geschrieben. Anweisungen werden mit einem Strichpunkt (Semikolon) abgeschlossen. Funktionen werden immer mit zwei Klammern aufgerufen, in diesen Klammern können verschiedene Parameter stehen. Bsp.: size(200, 200); . Parameter können auch fehlen wie zum Beispiel bei smooth() . Du kannst auch eigene Funktionen schreiben und diese dann in anderen Teilen von Sketch aufrufen. Sketch ist übrigens die Bezeichnen eines Programms in Processing.

Processing besitzt ein Konsolenfenster in der Direktausgaben möglich sind. Dies kann beim probieren eines Programms vorteilhaft sein. Mit print() und println() wird die Ausgabe im Konsolenfenster angesprochen.

Beispiel:

 int x = 10 * 5; println(x);                 

gibt eine 50 im Konsolenfenster aus.

Im Programmcode sind zusätzliche Leerzeichen egal, wichtig ist dagegen:

Gross- und Kleinschreibung muss dringend eingehalten werden.

Schleifen

for() Schleife

Steuert eine Abfolge von Wiederholungen. Eine for() Schleife besteht aus den drei Teilen Initialisieren, Test und Update. Diese Abschnitte werden mit einem ; Strich-Punkt von einander getrennt. Die Schleife wird solange ausgeführt bist der Test unwahr ist. Diese Schleife wird überall dort verwendet wo die Anzahl der Durchgänge zum vornherein bekannt ist oder sich berechnen lässt. for() Schleifen lassen sich verschachteln

Die for() Schleife läuft folgendermassen ab:

• Eine Zähl-Variable wird initialisiert.
• Diese Variable wird auf den Wahrheitswert geprüft.
• Ist der Test wahr wird der folgende Anweisungsblock ausgeführt, sonst wird die Schleife verlassen.
• Die Update-Anweisung wird durchgeführt.

Syntax:

 for ( initialisiere, testen, update) {   // Anweisungen }                   

Wir skizzieren auf unsere Zeichenfläche ein Quadratisches Raster von 10 mal 10 Pixel mit grauen Linien und im Raster von 50 mal 50 Pixel weisse Linien:

 size(200, 200); stroke(220); for (int x = 10; x < width; x += 10)   line(x, 0, x, height); for (int y = 10; y < height; y += 10)       line(0, y, width, y); stroke(255); for (int x = 50; x < width; x +=50)        line(x, 0, x, height); for (int y = 50; y < height; y += 50)       line(0, y, width, y);                      

while() Schleife

Im Gegensatz zur for() Schleife, bei der wir die Bedingungen zum Ablauf der Schleife vor dem Start festlegen, übergeben wir der while() Schleife nur eine Bedingung. Solange diese Bedingung wahr ist wird die Schleife abgearbeitet. Deshalb muss sich innerhalb der Schleife mindestens eine Anweisung befinden, die den Wahrheitswert der Bedingung beeinflusst. Sonst erzeugen wir eine Endlosschleife.

Die while() Schleife läuft folgendermassen ab:

• Die Bedingung wird auf den Wahrheitswert geprüft.
• Ist der Test wahr wird/werden die Anweisung(en) innerhalb der Schleife abgearbeitet sonst wird die Schleife verlassen.

Syntax:

 while(Bedingung) {       // Anweisung(en) }                      

Wir basteln uns einen Quadratischen Tunnel:

 size(200, 200); noFill(); int i = 2; while (i < height - i * 2) { // Bedingung stroke(255 - (60 + i * 2)); // Strichfarbe rect(i, i, i * 2, i * 2); // Rechteck malen        i +=2; // Variable erhöhen }

break Befehl

Für die beiden Schleifen – for() und while() – besteht die Möglichkeit innerhalb der Schleife eine zusätzliche Abbruchbedingung zu schaffen.

Syntax:

 if(Abbruchbedingung == wahr) {   break; }                   

Nach Aufruf von break wird mit der Anweisung gleich nach der Schleife fortgefahren.

Funktionen

Mit Funktionen können immer wieder benötigte Programmcodes, Berechnungen oder Formen programmiert werden. Sie müssen nur einmal geschrieben und können dann immer wieder aufgerufen werde. Den Funktionen lassen sich Werte übergeben oder können auch solche zurück liefern. Wenn eine Funktion einen Wert zurückgeben soll muss sie einem Datentyp zugewiesen werden. Ohne Rückgabewert wird eine Funktion mit void deklariert. Die beiden wichtigsten Funktionen sind:

Syntax:

 void setup() {   // Anweisungen } void draw() {        // Anweisungen }                   

Die Funktion setup() wird einmalig beim Programmstart aufgerufen, hier werden die ersten Funktionen und Einstellungen geschrieben. Die Funktion draw() wird kontinuierlich ausgeführt.

Beispiel für eine Funktion mit Rückgabewert:

 void setup() {   float erg; println("Division 15 / i");        println("---------------");        for (float i = 2; i < 7; i++) {            erg = divi(15, i);      println("15 / " + int(i) + " = " + erg);      } } float divi(float z1, float z2) {     if (z2 == 0) return 0;        else return z1 / z2;}                      

Ausgabe im Terminalfenster:

                        Division 15 / i --------------- 15 / 2 = 7.5 15 / 3 = 5.0 15 / 4 = 3.75 15 / 5 = 3.0 15 / 6 = 2.5                      

Variablen und Datentypen

Der Computer versteht nur EIN und AUS, das heisst entweder ist Strom da oder nicht. Die kleinste Speichereinheit ist 1Bit. Dieses Bit hat zwei mögliche zustände 0 und 1. Wobei 0 kein Strom und 1 Strom bedeutet. Nimmt man mehrere Bits zusammen können mehr Zustände dargestellt werden. Zwei Bit gleich vier, drei Bit gleich acht, vier Bit gleich 16 Zustände und so weiter.

Die heutigen Computer arbeiten mit 32 oder 64 Bit. Dies entspricht einem Informationsinhalt von 4'294'967'296 oder 18'446'744'073'709'551'616 Zustände.

In Software bestehen Daten meist aus Buchstaben und Zahlen. Bilder, Video und Musik sind im Compi schlussendlich auch nur Zahlen.

Processing kann viele dieser verschiedenen Daten verarbeiten.

Datentypen

Die Datentypen definieren wie die Daten im Computer verarbeitet werden.

Variablen sind Platzhalter und können mit den entsprechenden Werten beschrieben werden für die sie definiert worden sind. Variablen müssen in Processing vorher deklariert werden, das heisst sie müssen in Sketch angemeldet werde. Bei der Deklaration wird der entsprechende Datentyp bestimmt.

Syntax und Beispiel:

 int x; // deklariert die Variable x x = 12; //weist der Variablen x den Wert 12 zu float z; //deklariert die Variable z z = 3.14 //weist der Variablen z den Wert 3.14 zu boolean wahr; //deklariert die Variable wahr wahr = true; //weist der Variablen wahr den Wert true zu char c; // deklariert die Variable c c = 'f'; // weist der Variable das Zeichen f zu String txt; // deklariert die Variable txt txt  = 'Hallo'; // weist der Variable den Text Hallo zu                    

Deklarationen und Wertzuweisungen können auch zusammengefasst werden:

 int x = 12; float z = 3.14; String txt = "Hallo";                      

Variablen können nur einmal deklariert werden, hingegen kann der Inhalt der Variablen immer wieder geändert werden. Variablennamen sind frei wählbar, dürfen allerdings kein reservierter Ausdruck sein (int, null,false und so weiter). In Processing sind einige vordefinierte Variablen vorhanden wie width, height, PI usw.

Gültigkeit von Variablen

Variablen die im obersten Block deklariert werden sind Globale Variablen. Diese stehen überall im Programm zu Verfügung. Variablen die in Funktionen oder in Blöcke initialisiert werden sind Lokale Variablen und nur innerhalb des entsprechenden Block und niedrigeren Blöcke verfügbar. Blöcke werden durch geschweifte Klammern { } gebildet.

Strings

Der Datentyp String kann Zeichenketten aufnehmen. Zeichenketten sind Buchstaben und Zahlen, zusammengefasst als Wort oder Satz. Zeichenketten werden in Anführungszeichen " " gesetzt. String ist kein 'primitiver' Datentype wie int, char, float. Hier handelt es sich um ein Objekt (siehe Objekte und Klassen).
Der Datentyp char kann nur ein Zeichen enthalten das in Apostrophen ' ' gesetzt wird. Für String dagegen werden normalen Anführungszeichen " " benötigt.

Beispiel:

 String txt = "Hallo  Welt... oder so!"; println(txt);                       

Gibt Hallo Welt... oder so! im Terminalfenster aus.

String besitzt viele Methoden. Damit lassen sich die Daten im Objekt manipulieren.

Methoden von String

 stringVariable.length(); // Anzahl Zeichen                       

Beispiel:

 String txt = "Hallo  Welt... oder so!"; println(txt.length());                      

23 Wichtig sind die runden Klammern nach length().

 stringVariable.startsWith();  /* true oder false je nach Übereinstimmung */ stringVariable.endsWith();  /* true oder false je nach übereinstimmung */                 

Beispiel:

 String txt ="Hallo  Welt... oder so!"; println(txt.startsWith("Hallo")); println(txt.endsWith("Welt")); println(txt.endsWith("so!"));                     

Ausgabe:

 truefalsetrue                 

Rückgabe von true oder false wenn am Anfang oder am Ende der Zeichenkette die Abfrage mit textVar.startsWith(" ")
oder textVar.endsWith(" ") übereinstimmt oder nicht.

 stringVariable.charAt(); /* gibt das Zeichen an der in Klammer angegebenen    Position zurück (beginnt mit 0) */                   

Beispiel:

 String txt ="Hallo Welt... oder so!"; println(txt.charAt(6));                       

Gibt ein W im Terminalfenster aus.

 stringVariable.toLowerCase(); /* wandelt den String in Kleinbuchstaben um */ stringVariable.toUpperCase(); /* wandelt den String inGrossbuchstaben um */                      

Beispiel:

 String txt ="Hallo Welt... oder so!"; println(txt.toLowerCase()); println(txt.toUpperCase());                  

Ausgabe am Terminal:

 hallo welt... oder so!HALLO WELT... ODER SO!                          

 stringVariable.substring(); /* gibt den String ab der in Klammer angegebenen Stelle, oder zwischen diesen Stellen zurück */                      

Beispiel:

 String txt = "Hallo Welt... oder so!"; println(txt.substring(14)); println(txt.substring(6, 13));                      

Ausgabe:

 oder so!Welt...                       

 stringVariable.equals(); /* vergleicht 2 Strings und gibt wahr oder falsch zurück. Bei Strings ist kein Vergleich mit == möglich */      

Beispiel:

 String passwort = "HW3os!"; String eingabe = "hW3os!"; if (passwort.equals(eingabe)) println("OK"); else println("falsche Eingabe");      

Ausgabe:

falsche Eingabe      

 stringVariable.toCharArray(); /* legt die Zeichen des Strings in einem Array ab. */                  

Beispiel:

 String txt ="Hallo Welt... oder so!"; char[] txtArray = txt.toCharArray(); println(txtArray[0]); println(txtArray[6]);                    

Ausgabe:

Mathematische Operationen

Beim Programmieren müssen wir immer wieder Rechnen. Processing versteht die üblichen Grundrechenarten und besitzt ein Unmenge von Rechen Funktionen. Fangen wir mit den Grundrechenarten an.

Addition

mit + werden zwei Werte zusammen gerechnet.

Beispiel:

resultat = zahl_1 + zahl_2; 
//die beiden Werte in zahl_1 und zahl_2 werden zusammengezählt und das Ergebnis wandert in die Variable resultat 
zahl_x += 100;    // die Variable zahl_x wird um 100 erhöht 
zahl_n ++;          // hier wird die Variable zahl_n um eins erhöht (eng. increment)                  

Hinweis: Das plus Zeichen wird auch bei der String Verarbeitung benutzt. Hier werden zwei Teil Strings zusammengenommen, in gewisser weise ist dies auch addieren.

Subtraktion

mit - (minus) wird ein Wert vom anderen abgezogen.

Beispiel:

 resultat = zahl_1 - zahl_2; // der Inhalt von zahl_2 wird vom Inhalt der zahl_1 abgezogen und in die Variable resultat geschrieben zahl_y -= 50;     // der Inhalt von zahl_y wird um 50 erniedrigt 
zahl_n --;          // der Wert von zahl_n wird um 1 erniedrigt (eng. decrement)                       

Multiplikation

mit dem Asterisk (Stern) * werden Werte multipliziert.

Beispiel:

 resultat = zahl_1 * zahl_2 // die beiden Werte von zahl_1 und zahl_2 werden Mal genommen und in die Variable resultat geschrieben  zahl_a *= 2;    // zahl_a wird mit 2 multipliziert                    

Division

der Schrägstrich / (eng. slash) dient zur Division von zwei Zahlen.

Beispiel:

 resultat = zahl_1 / zahl_2 // der Inhalt von zahl_1 wird durch den Inhalt von zahl_2 gerechnet und in die Variable resultat geschrieben zahl_b /= 3;    // zahl_b wird durch 3 gerechnet                 

Modulo

berechnet den Rest einer Division und wird mit
dem Prozentzeichen % dargestellt.

Beispiel:

 for (int i = 0; i < 100; i++) {  if (i % 20 == 0) print(nf(i, 2) + "  " ); }                      

Gibt 00 20 40 60 80 im Terminalfenster aus.

Rechen Funktionen

abs()

Berechnet den Absolutwert (Betrag) einer Zahl. Der absolute Wert einer Zahl ist immer positiv.

Beispiel:

 int a = abs(153); int b = abs(-15); float c = abs(12.234); float d = abs(-9.23); print(a + " / " + b + " / " + c + " / " + d);                   

Gibt 153 / 15 / 12.234 / 9.23 im Terminalfenster aus.

ceil()

Berechnet den nächsten integer-Wert, der grösser oder gleich dem Wert des Parameters ist. Zum Beispiel gibt ceil(9.03) den Wert 10.

Beispiel:

 float x = 8.22; int a = ceil(x); print("ceil(" + x + ") = " + a);                 

Am Terminalfenster erscheint ceil(8.22) = 9

constrain()

Schränkt einen Wert um eine maximale und minimale Grösse ein.

Beispiel:

 void draw() {    background(204);   float mx = constrain(mouseX, 30, 70); rect(mx -10, 40, 20, 20); }                        

Syntax:

 constrain(Wert Maximum, Minimum);                        

Die Werte können vom Typ int oder float sein.

dist()

Berechnet den Abstand zwischen zwei Punkten.

Beispiel:

 // Setzt die graue Hintergrundfarbe abhängig // von der Entfernung der Maus zur der Mitte void draw() {     float d = dist(50, 50, mouseX, mouseY);       fill(d * 4);       rect(0, 0, 99, 99); }                      

exp()

Gibt die Eulersche Zahl e (2,71828 ...) potenziert mit dem Parameter zurück.

Beispiel:

 float v1 = exp(1); println(v1);                        

Zeigt den Wert 2.7182817 im Terminalfenster.

floor()

Berechnet den nächsten integer Wert, der kleiner oder gleich dem Wert des Parameters ist. Zum Beispiel gibt floor(9.03) den Wert 9.

Beispiel:

 float x = 8.22; int a = floor(x); print("floor(" + x + ") = " + a);                       

Am Terminalfenster erscheint floor(8.22) = 8

lerp()

Ermittelt einen Wert zwischen zwei Zahlen zu einem bestimmten Schrittwert. Dieser Schrittwert ist eine Fliesskommazahl zwischen 0.0 und 1.0. Sie dient zum Interpolieren zwischen den beiden Werten, wobei 0.0 gleich dem ersten Punkt, 0.1 liegt sehr nahe an dem ersten Punkt, 0.5 auf halbem Weg dazwischen, usw. Mit der lerp() Funktion lassen sich Bewegung entlang einer geraden Bahn erstellen, Auch zum Zeichnen von gestrichelten Linien ist diese Funktion geignet.

Beispiel:

 smooth(); int x1 = 5, y1 = 5; int x2 = 95, y2 = 95; line(x1, y1, x2, y2); for(int i = 0; i <= 10; i++) {     strokeWeight(7);   float x = lerp(x1, x2, i / 10.0);     float y = lerp(y1, y2, i / 10.0);     point(x, y); }                     

Syntax:

 lerp(startWert, endWert, SchrittWert);                   

log()

Berechnet den natürlichen Logarithmus einer Zahl. Diese Funktion benötigt Werte die grösser als 0,0 sind.

Beispiel:

 println(log(12));                   

Zeigt 2.4849067 im Terminalfenster.

mag()

Berechnet den Abstand zwischen zwei Punkten.
Die Startposition ist hier immer 0.0,
mag(x, y) ist die Abkürzung von dist(0, 0, x, y).

Beispiel:

 line(0, 0, 20, 30); println(mag(20, 30));                      

Gibt 36.05551 im Terminalfenster aus.

map()

Mit der map() Funktion lassen sich zwei beliebige Zahlenbereiche aneinander anpassen.

Beispiel:

 print(map(25, -50, 50, 0, 1000));                 

Zeigt 750.0 im Terminalfenster.

Syntax:

 map(wert, niedrig_1, hoch_1, niedrig_2, hoch_2);                        

max()

Bestimmt den grössten Wert in einer Folge von Zahlen.

Beispiel:

 float a = max( 45.2, 8.56); int x = max(5, 67, 96); int[] liste = { 9, -4, 45, 69, 36, 12 }; println(a); println(x); println(max(liste));                        

Ausgabe am Terminal:

                        45.2 96 69                      

min()

Bestimmt den kleinsten Wert in einer Folge von Zahlen. Funktioniert wie max(), nur im umgekehrten Sinn.

Syntax:

 min(wert_1, wert_2); min(wert_1, wert_2, wert_3); min(array_liste);                     

norm()

Wandelt eine Zahl von einem anderen Bereich in einen Wert zwischen 0 und 1.

Identisch mit map(wert, niedrig, hoch, 0, 1).

Beispiel:

 println(map(25, -50, 50, 0, 1)); println(norm(25, -50, 50));                    

Ausgabe im Terminalfenster:

0.750.75                                             

Syntax:

 norm(wert, niedrig, hoch);                     

pow()

Erleichtert exponentielle Ausdrücke. Die pow() Funktion ist eine effiziente Möglichkeit der Multiplikation von Zahlen mit sich selbst. Zum Beispiel ist pow(3, 5) gleichbedeutend mit dem Ausdruck 3^5 oder 3 * 3 * 3 * 3 * 3 und pow(3, -5) ist äquivalent zu 3^(-5)1 / (3 * 3 * 3 * 3 * 3)

Syntax:

 pow(wert, exponent);                     

round()

Rundet eine Fliesskommazahl auf den nächsten Ganzzahlen Wert.
Werte zwischen n.1 und n.4 werden abgerundet und Werte von n.5 bis n.9 aufgerundet. Zum Beispiel gibt:
round(9.2) den Wert 9 und
round(9.6) = 10.

Syntax:

 round(wert);                  

sq()

Multipliziert eine Zahl mit sich selbst. Das Ergebnis ist immer eine positive Zahl, sowie die Multiplikation zweier negativer Zahlen immer ein positives Ergebnis liefern. sq() steht für engl. square, in deutsch Quadrat.

Beispiel:

 println(" 3 x 3 = " + 3 * 3); println(" sq(3) = " + sq(3)); println("-3 * -3 = " + -3 * -3); println(" sq(-3) = " + sq(-3));                        

Die Ausgabe dazu:

                   3 x 3 = 9    sq(3) = 9.0  -3 * -3 = 9    sq(-3) = 9.0                    

sqrt()

Gibt die Quadratwurzel einer Zahl zurück. Nur aus positiven Zahlen kann die Quadratwurzel gezogen werden. sqrt() ist das Gegenteil von sq(). Die Funktion sqrt() setzt sich aus square und root auf deutsch Quadrat und Wurzel zusammen.

Beispiel:

 println(" sqrt(3) = " + sqrt(9)); println("sqrt(-3) = " + sqrt(-9));                  

Ausgabe am Terminal:

                           sqrt(3) = 3.0sqrt(-3) = NaN                      

Trigonometrische Funktionen

cos()

Berechnet den Kosinus eines Winkels. Diese Funktion erwartet, dass die Werte der Winkel im Bogenmass angegeben werden (Werte von 0 bis PI * 2). Das Ergebnis wird im Bereich -1 bis 1 zurückgegeben.

Beispiel:

 float a = 0; float inc = TWO_PI / 25; for(int i = 0; i < 25; i++) {     line(i * 4, 50, i * 4, 50 + cos(a) * 40);     a = a + inc; }               

acos()

Der Arkuskosinus ist die Umkehrfunktion von Kosinus. Diese Funktion erwartet Zahlen im Bereich von -1 bis 1 und liefert Werte im Bereich von 0 bis PI (3.1415927) zurück.

Beispiel:

 float a = PI; float c = cos(a); float ac = acos(c); println("           PI = " + a       + "\n      cos(PI) = " + c       + "\ncos(acos(PI)) = " + ac);                    

Ausgabe am Terminal:

                                  PI = 3.1415927        cos(PI) = -1.0       cos(acos(PI)) = 3.1415927                 

sin()

Berechnet den Sinus eines Winkels. Diese Funktion erwartet, dass die Werte der Winkel im Bogenmass angegeben werden (Werte von 0 bis PI * 2). Das Ergebnis wird im Bereich -1 bis 1 zurückgegeben.

Beispiel:

 float a = 0; float inc = TWO_PI / 25; for(int i = 0; i < 100; i += 4) {      line(i, 50, i, 50 + sin(a) * 40);     a += inc; }          

asin()

Die Umkehrung der Sinusfunktion ist der Arkussinus. Diese Funktion erwartet Zahlen im Bereich von -1 bis 1 und liefert Werte im Bereich von -PI /2 (-1.5707964) bis PI / 2 (1.5707964) zurück.

Beispiel:

 float a = PI / 3; float s = sin(a); float as = asin(s); println("           PI / 3 = " + a       + "\n      sin(PI / 3) = " + s       + "\nasin(sin(PI / 3)) = " + as);                    

Ausgabe am Terminal:

           PI / 3 = 1.0471976         sin(PI / 3) = 0.86602545  asin(sin(PI / 3)) = 1.0471976                                  

tan()

Der Tangens berechnet das Verhältnis des Sinus und Kosinus eines Winkels. Diese Funktion erwartet Werte in Bogenmass (von 0 bis PI * 2) und liefert Werte im von unendlich bis -unendlich zurück.

Beispiel:

 float a = 0; float inc = TWO_PI / 50; for (int i=0; i < 100; i += 2) { line(i, 50, i, 50 + tan(a) * 2); a = a + inc; }                  

atan()

Der Arkuskotangens ist die Umkehrfunktion von Tangens. Diese Funktion erwartet Zahlen im Bereich von -unendlich bis unendlich und liefert Werte im Bereich von -PI / 2 bis PI / 2 zurück.

Beispiel:

 float a = PI / 3; float t = tan(a); float at = atan(t); println("           PI / 3 = " + a + "\n       tan(PI / 3 = " + t + "\natan(tan(PI / 3)) = " + at);                        

Ausgabe am Terminal:

           PI / 3 = 1.0471976         tan(PI / 3 = 1.7320509  atan(tan(PI / 3)) = 1.0471976                    

atan2()

Berechnet den Winkel (in Bogenmass) von einem bestimmten Punkt zum Koordinatenursprung. Die Werte werden als Fliesskommazahl im Bereich von PI bis minus PI zurückgegeben. Die atan2() Funktion wird häufig zum Ausrichten der Mausposition genutzt.
Hinweis: Die y-Koordinate ist der erste und die x-Koordinate der zweite Parameter.

Beispiel:

 void draw() {    background(204);   translate(width / 2, height / 2);  float a = atan2(mouseY – height / 2,                        mouseX – width / 2);      rotate(a); rect(-12, -5, 24, 10); }                   

Beispiel:

 String txt = ""; void setup() {  for (float i = 0; i < 360; i += 90) {   txt = txt + nf(i, 3, 0) + "° ≃ "   + nf(radians(i), 1, 7) + " Radiant (Bogenmass)\n";  }  println(txt); }                       

Ausgabe am Terminal:

                     000° ≃ 0.0000000 Radiant (Bogenmass)  090° ≃ 1.5707964 Radiant (Bogenmass)  180° ≃ 3.1415927 Radiant (Bogenmass)  270° ≃ 4.7123890 Radiant (Bogenmass)                       

degrees()

Wandelt ein Bogenmass zu seinem entsprechenden Wert in Grad um. Bogenmass und Grad sind zwei Möglichkeiten für Winkelangaben. Grad ist uns geläufiger und wird im Bereich von 0 bis 360 angegeben. Bogenmass wird in Processing für alle Trigonometrische Funktionen benötigt. Sein Bereich geht von 0 bis 2 mal PI (0 bis 6.2831855...).

Beispiel:

 for(float i = 0; i < PI * 2; i += PI / 2) {    print(round(degrees(i)));        print("° / "); }                   

Ausgabe am Terminal:

                       0° / 90° / 180° / 270°                  

Zufallszahlengenerator

random()

Mit random() (eng. für zufällig) werden Zufallszahlen innerhalb vom angegebenen Bereich generiert. Die Funktion random() liefert einen Fliesskommazahl zurück. Der Aufruf random(5) gibt eine Zahl zwischen 0 und 5 (beginnend bei 0.0 bis 4.9.....). Bei zwei Parametern wird eine Fliesskommazahl mit einem Wert zwischen den beiden Angaben zurück geliefert.

Beispiel:

 println("Deine heutigen Lotto Zahlen ;-)"); for (int i = 0; i < 6; i++) {   int r = int(random(1, 50));      print("   " + r); }                        

Ausgabe am Terminal:

                       Deine heutigen Lotto Zahlen ;-)     49   32   17   14   4   45                   

randomSeed()

Setzt den Startwert für random() . Normalerweise erzeugt random() bei jedem Programmstart eine andere Zufallszahl. Mit dieser Funktion wird immer die gleiche Zufallszahlenfolge erzeugt.
Der Sinn und Zweck dieser Funktion ist mir nicht bekannt ;-)

Syntax:

 randomSeed(eine Festpunktzahl);                  

noise()

Die Funktion noise() basiert auf die Theorie des Perlin Noise, 1982 von Ken Perlin für den legendären Film Tron entwickelt. Im Gegensatz zu random() ist noise() eine kontrollierbare Methode um einen Zufallswert zu erzeugen. noise() nimmt das vorhergehende Ergebnis um eine neue Zufallszahl zu generieren. Dieses Resultat weicht vom vorherigen nur leicht ab. Natürlich wirkende Computergrafiken von Texturen, Gelände, Wolken und so weiter werden mit dieser Funktion erzeugt.

Beispiel:

 size(300, 170); background(200); noStroke(); fill(0, 0, 255); float v = 0; for (int i = 0; i < width; i += 3) {  float n = 90 + noise(v) * 40;  rect(i, n, 2, 20);  v = v + 0.15; } for (int i = 0; i < width; i += 3) {  float r = random(10, 30);  rect(i, r, 2, 20); } textAlign(CENTER); text("random() Funktion", width / 2, 65); text("noise() Funktion", width / 2, height – 10);                 

Zeichenfläche

Die Zeichenfläche wird in Processing im kartesischem Koordinatensystem dargestellt. Die Ecke oben-links ist dabei der Ursprung (x=0, y=0). Von diesem Punkt aus führt die X Achse in waagrechter Richtung nach rechts und die Y Achse in senkrechter Richtung nach unten. Die Positionen und Grössen werden in Pixel Angegeben.

Grösse der Zeichenfläche

Mit dem Befehl size(breite, hoehe) wird die Grösse der Zeichenfläche festgelegt. Die Grösse wird dabei in Pixel (Bildpunkte) angegeben. Ohne den Aufruf von size() wird die Ausgabefläche mit 100x100 Pixel dargestellt.

Syntax:

 size(breite, hoehe)                      

Das unten dargestellte Beispiel legt einen Bereich von 400 x 400 Pixel im Ausgabefenster an.

                        size(400, 400);                   

Zeichen Elemente

Punkt

Ein Punkt ist das einfachste Zeichen Element. Mit nur einer x- und einer y-Koordinate nimmt er – ohne spezielle Angaben – die Fläche eines Pixels ein. Die Farbe wird mit stroke() festgelegt.

point(x, y) zeichnet einen Punkt auf die Zeichenfläche. Bestimmt wird dieser durch x- und y-Koordinate.

Beispiel:

 point(0, 0); //obere-linke Ecke point(43, 89);                 

Linie

Eine Linie ist eine Reihe von Punkten zwischen dem Anfangspunkt und dem Endpunkt. In Processing verwendet man die Funktion line (x1, y1, x2, y2). Diese Funktion benötigt dringend vier Parameter, zwei Werte für den Startpunkt und weiter zwei Werte für den Endpunkt. Diese Werte können eine Fliesskommazahl oder eine Ganzzahl sein.

Beispiel:

 line(80.5, 20.1, 10.3, 60.7); line(50, 50, 100, 100);                       

Rechteck

Die rect() Funktion zeichnet eine rechteckige Fläche. Sie benötigt die Start-Position rechts‑oben sowie die Breite und die Höhe.

Syntax:

 rect(posX, posY, width, height)                  

Beispiel:

 /* Rechteck 60x40 Pixel an Position 20/20 */ rect(20, 20, 60, 40)                   

Die Aussenkanten von rect() sind immer parallel zur x- bzw. zur y-Achse. um dies zu umgehen kann mit quad() eine freie viereckige Fläche gezeichnet werden.

Mit der Funktion rectMode(MODE) kann die Start-Position und die End-Position angepasst werden. Dazu später mehr.

Viereck

Mit quad() kann ein Viereck gezeichnet werden dessen Ecken nicht recht-winklig und keine parallele Seitenlinien haben müssen. Diese Funktion benötigt die Positionsangaben für die vier Ecken

Syntax:

 quad(x1, y1, x2, y2, x3, y3, x4, y4).                    

Beispiel:

 quad(38, 31, 86, 20, 69, 63, 30, 76);                    

Dreieck

ähnlich wie beim Viereck wird die Funktion triangle() mit den Positions Daten für die drei Ecken gefüttert.

Beispiel:

Kreis

Die Funktion ellipse(x, y, breite, hoehe) zeichnet eine Ellipse bzw. einen Kreis. Standardmässig befindet sich der mit x und y angegebene Punkt in der Mitte des Kreises. Die beiden anderen Werte geben die Breite und die Höhe an. Dies entspricht dem Durchmesser des Kreises oder die Breite und Höhe der Ellipse.

Beispiel:

 ellipse (56, 46, 55, 55);                        

Bogen

Zeichnet einen Bogen. Bögen sind Kreis- bzw. Ellipsensegmente. Die Funktion benötigt den Startpunkt x und y, breite und hoehe der Ellipse. Die start und stop Parameter geben die Winkel des Segmentes an. Der Ursprung des Bogens oder Ellipse kann mit der ellipseMode() Funktion geändert werden.

Syntax:

 arc(x, y, breite, hoehe, start, stop)                    

Beispiel:

 arc (50, 55, 50, 50, 0, radians (90)); noFill (); arc (50, 55, 60, 60, radians (90), radians (180)); arc (50, 55, 70, 70, radians (180), radians (270)); arc (50, 55, 80, 80, radians (270), radians (360));                      

Farben

Wenn wir in der Computerwelt über Farbe sprechen wollen ist eine präzise Angabe gefragt. Einfach mal sagen, "...färbe diese Figur senf-gelb..." funzt nicht. Du musst dem Compi in in Zahlen sagen welche Farbe gewünscht wird.

Dazu stehen mehrere Verfahren zur Verfügung. In Processing sind das RGB und HSB. Standardmässig wird in Processing RGB verwendet. Der RGB Farbraum ist ein additiver Farbraum. Die Farben werden durch additives mischen der drei Grundfarben rot, grün und blau dargestellt. Jede einzelne Farbe wird mit einer Zahl zwischen 0 und 255 angegeben. Die drei Farben zusammen gemischt ergeben ca. 16 Mio. Farbabstufungen.

In Processing steht dir ein Farbwähler zur Verfügung. Dieser wird über [Tools] -> [Color Selector] aufgerufen. Hier kannst du die gewünschte Farbe suchen um dann die Zahlen für dein Sketch zu übernehmen. Die Angabe unten rechts ist die Hexadezimale Schreibweise.

Zusätzlich zu rot, grün und blau für jede Farbe, kann eine vierte Angabe gemacht werden. Dieser vierte Wert wird "alpha" genant und ist die Transparenz. Die kann nützlich sein wenn du Elemente teilweise durchsichtig darstellen willst. Auch der Alpha-Wert wird in einem Bereich von 0 bis 255 angegeben, wobei 0 vollständig transparent und 255 völlig undurchsichtig ist.

Graustufen

Im RGB Farbraum (siehe oben) werden Graustufen aus gleiche Anteilen von rot, grün und blau gemischt. In Processing ist es möglich die Graustufen in gekürzter Form anzugeben. Anstelle von fill(128, 128, 128) reicht die Angabe fill(128).

Auch für die Graustufen kann die Transparenz angegeben werden. Dies sieht dann so aus: fill(128, transparenz) wobei transparenz eine Wert zwischen 0 und 255 haben kann.

Hintergrund

Die Funktion background() setzt die Farbe für den Hintergrund. Standardmässig ist der Hintergrund hellgrau.
In der draw() Funktion wird die Hintergrundfarbe verwendet um die Zeichnungsfläche zu löschen

Anstelle einer Farbe kann auch ein Bild verwendet werden. Allerdings muss die Bildgrösse genau gleichgross wie das Programmfenster sein. Entspricht die Bildgrösse nicht der Fenstergrösse kann mit der bild.resize(breite, hoehe) die Bildgrösse angepasst werden. Bilder müssen sich im ”data” Verzeichnis befinden. Wenn ein Bild als Hintergrund verwendet wird, wird die aktuelle tint() Einstellung ignoriert. Es ist nicht möglich die Transparenz für den Hintergrund

zu verwende.

Beispiel:

 // grauer Hintergrund background (127); // farbiger Hintergrund background (225, 204, 0); // Hintergrund mit Bild PImage bild; bild = loadImage ("comic-lustig.jpg"); background (bild);                      

Syntax:

 background(grau) background(rot, gruen, blau) background(color) background(hex)                   

Parameter:

 grau  ein Wert von 0 bis 255 rot      ein Wert von 0 bis 255 gruen    ein Wert von 0 bis 255 blau     ein Wert von 0 bis 255 color    ein ”color” Datatyp hex ein Hex-Wert                    

Vordergrund

fill() Legt die Farbe fest mit der geschlossene Formen ausgefüllt werden. Zum Beispiel mit fill(204, 102, 0), werden alle folgende Objekte in orange gefüllt. Wenn keine Farbe angewendet werden soll, kannst du mit noFill() die Farbfüllung deaktivieren.

Die Funktion fill() hat auch einen Einfluss auf text().

Beispiel:

 // grauer Vordergrund fill(153); rect(30, 20, 55, 55); // farbiger Vordergrund fill(204, 102, 0); rect(30, 20, 55, 55);                 

Syntax:

 fill(grau) fill(grau, alpha) fill(rot, gruen, blau) fill(rot, gruen, blau, alpha)                 

Parameter:

 grau  Grauwert von 0 bis 255 rot      Farbe rot von 0 bis 255 gruen   Farbe grün von 0 bis 255 blau   Farbe blau von 0 bis 255 alpha  Transparenz von 0 bis 255                       

Linienfarbe

Mit der Funktion stroke() wird die Linienfarbe für alle darauf folgende Elemente gesetzt. Willst du keine Linie sehen kannst du mit noStroke() die Linienfarbe deaktivieren.

Beispiel:

 // Linienfarbe grau stroke(153); rect(30, 20, 55, 55); // Linienfarbe orange stroke(204, 102, 0); rect(30, 20, 55, 55);                 

Syntax:

 stroke(grau) stroke(grau, alpha) stroke(rot, gruen, blau) stroke(rot, gruen, blau, alpha)                 

Parameter:

 grau  Grauwert von 0 bis 255 rot      Farbe rot von 0 bis 255 gruen   Farbe grün von 0 bis 255 blau   Farbe blau von 0 bis 255 alpha  Transparenz von 0 bis 255                       

Eigenschaften

smooth()

Mit der Funktion smooth() werden die Grafischen Elemente mit glatten Ränder (Anti Aliasing) gezeichnet. Der visuelle Eindruck wird dadurch stark verbessert. Mit der Benutzung von smooth() wird aber die Verarbeitungsgeschwindigkeit verlangsamt.

Beispiel:

 size(200, 200); background(0); ellipse(50, 100, 72, 72); textAlign(CENTER); text("ohne smooth()", 50, 150); smooth(); ellipse(150, 100, 72, 72); text("mit smooth()", 150, 150); 
 
 
 Beispiel smooth()
 

strokeWeight()

Definiert die Breite von Linien, Punkte und Umrandungen. Die Grösse wird in Pixel angegeben.

Beispiel:

 smooth(); strokeWeight(1);   // Standard 1px line(20, 20, 80, 20); strokeWeight(4);   // Dicker 4px line(20, 40, 80, 40); strokeWeight(10);  // Dick 10px line(20, 70, 80, 70);                     

strokeCap()

Legt den Stil für die Darstellung der Linienenden fest. Die Enden werden mit SQUARE (eckig), PROJECT (eckig verlängert) und ROUND (abgerundet) angegeben. Standardmässig wird ROUND vorgegeben.

Diese Funktion ist nicht verfügbar, mit dem P2D, P3D, oder OpenGL‑Renderer.

Beispiel:

 stroke(0); strokeWeight(12.0); strokeCap(ROUND); line(20, 30, 80, 30); strokeCap(SQUARE); line(20, 50, 80, 50); strokeCap(PROJECT); line(20, 70, 80, 70);                      

strokeJoin()

Definiert wie sich Liniensegmente an den Enden verbinden. Die Verbindungen sind MITER (eckig), BEVEL (abgeschrägt) und ROUND (abgerundet). Standardmässig wird MITER vorgegeben.

Diese Funktion ist nicht verfügbar, mit dem P2D, P3D, oder OpenGL‑Renderer.

Beispiel:

 strokeJoin(MITER); beginShape(); vertex(35, 20); vertex(65, 50); vertex(35, 80); endShape(); strokeJoin(BEVEL); beginShape(); vertex(35, 120); vertex(65, 150); vertex(35, 180); endShape(); strokeJoin(ROUND); beginShape(); vertex(35, 220); vertex(65, 250); vertex(35, 280); endShape();                 

rectMode()

Legt den Zeichenmodus für ein Rechteck fest. Standardmässig wird rectMode(CORNER) vorgegeben. Das Rechteck wird in diesem Fall mit dem Eckpunkt oben/rechts und mit der Breite und Höhe angegeben. Mit rectMode(CORNERS) werden die Ecken oben/rechts und unten/links als Parameter definiert. Und schliesslich mit rectMode(CENTER) wird der Startpunkt für ein Rechteck in den Mittelpunkt gesetzt und die beiden anderen Parameter bedeuten Breite und Höhe.

Beispiel:

 rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); fill(102); rect(35, 35, 50, 50);                 

ellipseMode()

Wie bei rectMode() wird der Zeichenmodus festgelegt, in diesem Fall für eine Ellipse. Standardmässig ist ellipseMode(CENTER) vorgegeben. Mit CENTER werden der Mittelpunkt sowie die Breite und Höhe als Parameter benötigt. Mit dem RADIUS‑Modus wird anstelle vom Durchmesser der Radius des Kreises bzw. der Ellipse angegeben. Mit CORNER und CORNERS werden die Ecken der Ellipse analog zu rectMode() definiert.

Beispiel:

ellipseMode(CENTER);ellipse(35, 35, 50, 50);ellipseMode(CORNER);fill(102);ellipse(35, 35, 50, 50);noFill();ellipseMode(RADIUS);ellipse(50, 50, 50, 50);                 

Freie Formen vertex()

Ein Vertex ist eine Ecke eines Polygons. Zwei Vertices ergeben zusammen die Endpunkte einer Linie, drei Vertices definieren ein Dreieck, usw. Mit der Funktion vertex() lassen sich frei definierbare Formen erstellen. In Processing werden diese Punkte durch den Aufruf von vertex() erzeugt. Begonnen und beendet wird das Zeichnen mit beginShape() und endShape().

beginShape()

Mit beginShape() wird eine frei definierbare Form begonnen. Ein Parameter wird nicht dringend benötigt. Mögliche Parameter sind POINTS (Punkte), LINES (Linien), TRIANGLES (Dreiecke), TRIANGLE_FAN (im Kreis, Fan ist ein Propeller), TRIANGLE_STRIP (als Streifen), QUADS (Rechtecke) und QUAD_STRIP (als Streifen). Allerdings wird die Form dadurch eingeschränkt.

endShape()

Processing erhält die Anweisung mit den Punkten die seit beginShape() angegebenen wurden ein Umriss zu erzeugen. Je nach Farbanweisung und stroke() ist die Form gefüllt und sichtbar. Mit endShape(CLOSE) wird die Form geschlossen.

vertex()

Mit vertex() werden die Eckpunkte der freien Form definiert. Mögliche Parameter sind X-, Y- und Z-Koordinaten. Weitere Koordinaten werden für Texturen benötigt. Uns interessieren vorläufig nur die X- und Y-Koordinaten.

Quadrat gefüllt:

 beginShape(); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape(CLOSE);                     

Quadrat leer:

 noFill(); beginShape(); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape(CLOSE);                      

freie Form:

 beginShape(); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape(CLOSE);                   

Dreiecke:

 beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); endShape();                       

Dreieck-Streifen:

 beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape();                     

Rechteck:

 beginShape(QUADS); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();                 

alle Beispiele aus: http://processing.org/reference/

curveVertex()

Bestimmt die Vertex-Koordinaten für Kurven. Diese Funktion kann nur zwischen beginShape() und endShape() verwendet werden.
Parameter in beginShape() sind nicht erlaubt.
Die ersten und letzten Punkte in einer Reihe von curveVertex() werden verwendet, um den Anfang und das Ende einer der Kurve zu steuern. Ein Minimum von vier Punkten sind erforderlich, um eine winzige Kurve zwischen den zweiten und dritten Punkt zu zeichnen.

curveVertex:

 smooth(); noFill(); beginShape(); curveVertex(99, 99); // 1. Führungspunkt curveVertex(84, 91); // 1. Punkt curveVertex(68, 19); // 3. Punkt curveVertex(21, 17); // 3. Punkt curveVertex(32, 95); // 4. Punkt curveVertex(1, 95); // letzter Führungspunkt endShape();  stroke(255, 0, 0); // rote Markierung ellipse(99, 99, 5, 5); // 1. Führungspunkt ellipse(1, 95, 5, 5); // letzter Führungspunkt stroke(0, 0, 255); // blaue Markierung ellipse(84, 91, 5, 5); // 1. Punkt ellipse(68, 19, 5, 5); // 2. Punkt ellipse(21, 17, 5, 5); // 3. Punkt ellipse(32, 95, 5, 5); // 4. Punkt