Processing‎ > ‎

Programmieren mit Processing

http://sites.prenninger.com/arduino-uno-r3/processing/programmieren-mit-processing

http://www.linksammlung.info/

http://www.schaltungen.at/

                                                                                             Wels, am 2014-12-12

BITTE nützen Sie doch rechts OBEN das Suchfeld  [                                                              ] [ Diese Site durchsuchen]

DIN A3 oder DIN A4 quer ausdrucken
**********************************************************************************
DIN A4  ausdrucken
*********************************************************
 
                         NORMEN


size(B,H);  size(200,300);    Größe des Grafik-Ausgabefensters in Pixel  0 bis 199  bzw. 0 bis 299
background(200);                 Hintergund-Farbe  des Grafik-Ausgabefensters

X = with   Y = height         mouseX    mouseY 

size(X, Y);                    // Grafik-Fenstergröße
background(255);       // weiß
background(200);             // hellgrau
background(192,  63);        // hellgrau, Deckkraft 25%
background(128,  127);      // mittelgrau, Deckkraft 50%
background(64,  191);        // dunkelgrau, Deckkraft 75%
background(0);               // schwarz


color Rot = color(255,0,0);               // Rot
color Grün = color(0,255,0);             // Grün
color Blau = color(0,0,255);              // Blau
color magenta = color(255,0,255);    // magenta
color yellow = color(255,255,0);    // yellow
color cyan = color(0, 255, 255);     // cyan



Farbverlauf
noStroke();
colorMode(R,G,B,  200);
for (int i = 0; i < 200; i++) {
  for (int j = 0; j < 200; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

https://www.processing.org/reference/colorMode_.html


GRUNDELEMENTE

stroke(R,G,B);              // Zeichen-Farbe
stroke(R,G,B,  255);       // Zeichen-Farbe, Deckkraft 100%
strokeWeight(100);          // Punkt-Durchmesser 100-pixel
noSmooth();                   // keine Kanten-Glättung (Default)
smooth();                       // mit Kanten-Glättung (kein Treppeneffekt)
point(X,Y);                // Punkt

stroke(0,  127);               // Strich-Farbe schwarz, Deckkraft 50%
stroke(R,G,B);             // Strich-Farbe, (Deckkraft 100%)
stroke(R,G,B,  191);      // Strich-Farbe, Deckkraft 75%
strokeWeight(2);            // Strich-Stärke 2-pixel
line(X, Y,   x, y);          // gerade Linie

noStroke();                   // Linien-Farbe deaktivieren
noFill();                        // keine Füll-Farbe
fill(0,255,0, 127);           // Füll-Farbe grün, Transparenz 50%
rectMode(CORNER);     //  links oben (Default)
rectMode(CENTER);     // mitte Rechteck
rect(X, Y,   b, h);        // Rechteck

rectMode(CORNERS);  // links oben, rechts unten
rect(X, Y,   x, y);             // Rechteck  (links oben, rechts unten)



stroke(0);                              // Strich-Farbe schwarz
strokeWeight(2);                    // Strich-Stärke 2-pixel
fill(128,  127);                          // Füllfarbe mittelgrau, Transparenz 50%
ellipseMode(CENTER);           // mitte  (Default)
ellipseMode(CORNER);          //  links oben
ellipse(X, Y,   b, h);             // Kreis  b=h

ellipseMode(CORNERS);       // links oben, rechts unten
ellipse(X, Y,    x, y);                  //  Kreis  b=h  (links oben, rechts unten)


stroke(230,232,250);                                // Strich-Farbe silber (Kreisbogen)
strokeWeight(10);                                    // Strich-Breite 10-pixel  (Kreisbogen)
arc(X, Y,   b, h,   0, PI);                             // unten Halb-Kreis b=h  rechts=0° nach links=PI=180°
arc(X, Y,   b, h,   PI, TWO_PI);                  // oben Halb-Kreis b=h  links=PI=180° nach rechts=360°
arc(X, Y,   b, h,   QUATER_PI, HALF_PI);   // rechts-unten Viertel-Kreis b=h  HALF_PI=90°  QUATER_PI=45°
ACHTUNG: Keine Kommazahlen auch nicht 3/4 5/2 sondern
arc(X,Y,   b, h,   radians(180), radians(360);





/*
Processing-Sketch: Processing-Kurs 01 – Zeichnen_1a.ino
http://michaelkipp.de/processing/01%20zeichnen.html

size(800,600);             // Breite und Höhe des Zeichenfensters 
//background(204);         // Default-Hintergrund gray80
point(basisX, basisY);     // Punkt
line(X,Y, x,y);            // Linie 1=Anfang 2=Ende
rectMode(CORNER);          // "normaler" Rechteck-Modus
rect(X,Y,  breite,hoehe);  // Rechteck
ellipse(X,Y, durchmesserBreite, durchmesserHoehe);  // Kreis
arc(X,Y,  b,h,   Startwinkel, Endwinkel);  // Halbkreis PI=180°  2*PI= 360°
rectMode(CENTER);  // Rechteck mit Mittelpunktangabe
rectMode(CORNERS); // Rechteck mit Eckpunkte links-oben, rechts-unten

strokeWeight(4);   // Strichstärke, Dicke der Kontur in pixel
stocke(255);       // weißer Strich EIN
noStroke();        // Umrandungs-Strich  AUS

fill(0);           // Farbe schwarz  (kein Licht)
fill(127);         // Farbe grau  (mittleres Licht)
fill(255);         // Farbe weiß  (max. Licht)
fill(R,G,B);     // RGB-Farbe
fill(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üllt text("TEXT", basisX, basisY); */ size(400,600); // x, y Größe des Fensters //background(204);         // Default-Hintergrund gray80 point(50,150); // Punkt setzen line(100,0, 100,200); // vertikale Linie line(0,100, 300,100); // horizontale Linie noFill(); rect(10,10, 100,25); // liegendes Rechteck fill(255); rect(250,120, 30,50); // stehendes Rechteck ellipse(50,75, 20,20); // Kreis ellipse(350,50, 80,50); // liegende Ellipse fill(255,255,0); // gelb ellipse(50,150, 50,80); // stehende Ellipse fill(255,0,0); //rot arc(200,50, 80,80, PI,2*PI - PI/2); // Viertel-Kreis arc(250,50, 80,80, PI,2*PI); // Halb-Kreis fill(0); // Farbe schwarz arc(200,400, 80,80, radians(180),radians(360)); // Halbkreis fill(191); // Farbe grau arc(150,150, 80,80, PI,2*PI+ PI/2); // Dreiviertel-Kreis fill(255); // Farbe weiß rectMode(CENTER); // Rechteck mit Mittelpunktangabe rect(50,350, 40,80); noStroke(); rectMode(CORNERS); // Rechteck mit Eckpunkte links-oben, rechts-unten rect(20,450, 80,475); rectMode(CORNER); // "normaler" Modus rect(80,475, 10,10); strokeWeight(10); // 10pixel Strichbreite (+ - 5 5pixel) stroke(255); // StrichstFarbe weiß fill(120); // dunkelgrau ellipse(300,400, 40,40); textSize(32);
//textAlign(CENTER);
text("Processing-IDE", 100,100);
// Name Position links-unten




*********************************************************
 font (Technik Schriften)


5x7 Pixel TrueType-Schriften                *.ttf

Small Fonts                ( fett 4x6 nur Zahlen primitiv )
Dot Digital-7                           ( 5x5 nur Großbuchstaben )
5x5 Dots                                ( 5x5 LED-Punkte nur Großbuchstaben )
SquareDot Digital-7                 ( 5x5 nur Großbuchstaben )
Square Dot Digital-7                ( 5x5 nur Großbuchstaben )
Epson1                                      (5x7 LED-Punkte)
LED Counter 7                            (5x7 LED-Punkte)
Matricha                                    ( 7x7 LED-Punkte )
8Pin Matrix                                 ( 7x8 LED-Punkte )
Astronaut             (fett nur Zahlen)
5x8 LCD HD44780U A02              (5x7 LED-Quadrate)
LCD Display Grid                        (5x7 LED-Quadrate)
Texas LED                                  (5x7 LED-Quadrate)
Subway Ticker                             (5x7 LED-Quadrate)
Erbos Draco 1st Open NBP          (5x7 LED-Quadrate)
Erbos Draco 1st NBP                  (5x7 LED-Quadrate)
ErbosDraco Nova NBP                 (5x7 LED-Quadrate)
Cuadrada St                                (5x7 LED-Rechtecke Italic)
01 Digit                          (5x7 nur Großbuchstaben)
lcd phone                            (5x7 nur Großbuchstaben)
Modern LED Board-7                    (5x7 LED-Quadrate)
Gas Plasma PG                             ( 6x7 LED-Quadrate )
Modern Dot Digital-7                       ( 5x8 LED-Quadrate )
Dotf1                                             ( 5x8 nur Großbuchstaben )
New Led Board tfb                           ( 5x9 LED-Punkte )
TPF Display                                   ( 6x9 LED-Quadrate )
Advanced LED Board-7                    ( 6x10 doppel LED-Quadrate für Großschrift )
Advanced Dot Digital-7                    ( 6x10 doppel LED-Quadrate für Großschrift )



7-Segment   TrueType-Schriften            *.ttf
Quartz Com Bold (Monotype Imaging)  kostenpflichtig $ 35,-
led_board-7
enhanced_led_board-7
led_display-7
7 SEGMENTAL DIGITAL DISPLAY    (nur Großbuchstaben)
Digital-7 Mono                                 (nur Großbuchstaben)
Digital-7                                   (nur Großbuchstaben)
DS-Digital                                        (nur Großbuchstaben)
DS-Digital Fett                                 (nur Großbuchstaben)
Segment7                        (halbfett kursiv nur Zahlen)
Let's go Digital                                 (nur fette Großbuchstaben)
Transponder AOE                           (nur Großbuchstaben)
LED                                                (nur Großbuchstaben)
Transistor                                        (nur Großbuchstaben)
7LED                                               (nur Großbuchstaben)
7LED italic                                       (nur Großbuchstaben)
Advanced Pixel LCD-7                    (fett nur Großbuchstaben)
CF LCD 521                                     (keine Zahlen nur Großbuchstaben)
Patopian 1986                    (nur Zahlen moderne Schrift ! ! )


Normale Schriftarten:

ArialMT
- ArialBoldMT - Arimo - Bank GothicBT-Light - Browallia New -
CordiaNew - Datum - FreesiaUPC - Gulim - ISOCP - Meiyo -
MicrosoftSansSerif
- Swiss721BT-Roman - Swiss721BT-
BlackOutline - Tahoma - Verdana - VinetaBT-Regular


Schrifthöhen

10 12 18 Schreibschrift
24 36 48 60 72 96 Anzeige-Schrift

*********************************************************
Rendern von Text
BUCH: Processing E. Bartmann Seite 281


Schrift ins Processing-Format umwandeln

Um eine Bitmap-Schrift zu erzeugen, die in Processing verwendet werden kann, wähle im
MENU > Tools  >  Create Font...
aus.
Mit Hilfe dieses kleinen Tools kann man nun auf dem Computer installierte (Vektor-)Schriften in das Processing-Format konvertieren.

Zunächst wählt man eine Schrift aus den angzeigten aus.
MENU > Tools > Create Font... > ArialMT-32.vlw > OK
Dann wählt man den Schnitt und die Größe und kann diese Schrift umwandeln lassen.
Als Dateiname kann ein beliebiger Name gewählt werden (wichtig ist nur, dass die Endung *.vlw lautet).
Die erzeugte Processing-Schrift liegt im Data-Ordner unterhalb des aktuellen Sketches, und kann dann mit loadFont () geladen werden.


Textdartstellung im Grafik-Fenster mit PFont-Objekt
Font = Schriftarten


Beliebig viele Schriftgrößen
A.   createFont()  für die auf dem Rechner lokal installierten Schriftarten
Über die Funktion createFont kann man auf eine Schrift zugreifen, die unter dem momentanen Betriebssystem verfügbar ist.
START > Systemsteuerung > Alle Systemsteuerungselemente > Schriftarten >


Diese Schrift wird über ihren Namen angesprochen, der
z. B. über die entsprechende Methode list() des PFont-Objektes zu ermitteln ist.
Der Code hierfür lautet  println(PFont.list());

ACHTUNG: Auf genaue Schreibweise achten ! ! !  ( Leerzeichen Großbuchstaben Underscore)

http://www.schriftarten-fonts.de/
http://de.wikipedia.org/wiki/Liste_von_Schriftarten



int fontSize = 20;      // size of the fonts on the screen = 20-pixel
  // create a font with the third font available to the system:
  PFont myFont = createFont(PFont.list()[2], fontSize);
  textFont(myFon
t);

https://www.processing.org/reference/createFont_.html



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-pixel


PFont font;                                   // PFont-ObjektVariable deklarieren

void 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-pixel text("Hallo User!", 50, 50); // Textposition x, y (linke untere Ecke des Textes) } void draw() { // xy-WERT der aktuellen Mausposition im Grafik-Fenster background(255); // Grafik-Fenster-Hintergrunf weiß fill(0); // Textfarbe schwarz text("X=" + mouseX + " / " + "Y=" + mouseY, mouseX + 5, mouseY - 5); // Mausposition, Text + / - 5-pixel }



Bild_400x200_pixel.png

// Processing-Sketch: createFont_5x7DotMatrix_7_Segm_1a.pde

PFont font;                          // PFont-ObjektVariable deklarieren
PFont font_1;                        // PFont-ObjektVariable deklarieren

void 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)
}





Beschreibung:
Wandelt in eine eine Schriftart frei scalierbar  vom Format  *.ttf oder *.otf  in "Processing-Daten" der Processing-Sketch verwendet den Ordner oder eine Schriftart die auf dem Computer installiert ist.
A. Wenn Sie
eine Schriftart die auf dem Computer installiert ist  verwenden möchten, verwenden Sie  PFont.list(), um zunächst die Namen für die vom Computer erkannt Zeichensätze zu ermittel.

B.  Beim Teilen eines Processing-Sketches mit anderen Menschen, müssen Sie eine *.ttf Schrift im Datenverzeichnis der Sketches mit abspeichern wenn andere Personen möglicherweise  die Schriftart
nicht auf deren Computer installiert ist.

Der Parameter size gibt die Grafik-Fenster-Größe die erstellt werden soll an.
Der
Parametesmooth  gibt an wenn die Schrift geglättet werden soll oder nicht.
Der Parameter
charset ist ein Array von Zeichen, die die Zeichen angibt die generiert werden soll.

Mit dieser Funktion können Verarbeitung, mit der Schrift nativ in der Standard-Renderer zu arbeiten, so dass die Buchstaben werden durch Vektorgeometrie definiert und schnell gemacht. In den P2D und P3D Renderer stellt die Funktion das Projekt, um die Schriftart als eine Reihe von kleinen Texturen rendern. Zum Beispiel, wenn Sie die Standard-Renderer, die eigentliche Mutter Version der Schrift wird von der Skizze verwendet werden, die Verbesserung der Zeichnung Qualität und Leistung. Mit den P2D und P3D Renderer, wird die Bitmap-Version verwendet werden, um Geschwindigkeit und Aussehen zu verbessern, aber die Ergebnisse sind schlecht für den Export, wenn der Skizze enthält nicht die .otf oder *.ttf-Datei und die gewünschte Schriftart nicht verfügbar ist auf der Maschine laufen Sie die Skizze.

Syntax:

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)

Parameter:
name          String:       Name der Schriftart zu laden
size:           float:         Punktgröße der Schrift
smooth:      boolean:    true für eine Antialiasing Schriften, false für Aliasing
charset:      char []:      Array Zeichen enthält, erzeugt werden

Returns:     PFont

Verwandte Befehle:

PFont
textFont()
PGraphics
loadFont()

https://www.processing.org/reference/createFont_.html




*********************************************************
Nur eine Schriftgröße
B.  
loadFont
()
 
ausgewählte Schriftart wird im Sketch-ORDNER mitgespeichert

Schriftauswahl:

Die Schrift muss in der Sketch gelegt werden
MENU > Tools > Create Font... > Digital-7-48.vlw > OK wählen.

// 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-Fenster

PFont font;                // PFont-ObjektVariable deklarieren

void 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
}


Beschreibung:
Lädt eine *.vlw formatiert Schriftart in eine PFont Objekt. Erstellen Sie eine *.vlw Schrift, indem Sie
MENU > Tools > Create Font... > Digital-7-48.vlw > OK wählen.
Dieses Tool erstellt eine Textur für jedes alphanumerische Zeichen und fügt sie als *.vlw Datei, Daten-Ordner des aktuellen Skizze ist dann.
D
ie Buchstaben werden als Texturen (und nicht die Vektordaten) der Größe, bei der die Zeichensätze erstellt wurden, müssen in Bezug auf die Größe, in der sie gezeichnet werden in Betracht gezogen werden definiert.
Legen Sie zum Beispiel
einen 32pt Schrift, wenn die Skizze zeigt die Schrift bei 32 Pixeln oder kleiner.
Wenn umgekehrt ein
12pt Schrift geladen und bei 48pts angezeigt wird, werden die Buchstaben verzerrt werden, da das Programm wird Stretching eine kleine Grafik auf eine große Größe.

Wie loadImage() und andere Funktionen, die Daten zu laden, sollte die Funktion loadFont() nicht in void void draw() verwendet werden, weil sie sich die Skizze erheblich verlangsamen, da die Schrift von der Festplatte (oder Netzwerk) auf neu geladen werden jeder Rahmen.
Es wird empfohlen, Dateien in void setup()

Um korrekt zu laden, müssen Schriften im "Data" Processing-Ordner des aktuellen Sketches befinden.
Alternativ kann die
Datei möglicherweise von überall auf dem lokalen Computer mit einem absoluten Pfad
geladen werden, oder der Dateiname Parameter kann eine URL für eine Datei auf eine gefunden werden Netzwerk.

Wenn die Datei nicht vorhanden ist oder ein Fehler auftritt, null zurückgegeben und eine Fehlermeldung auf der Konsole ausgegeben werden.
Die Fehlermeldung
wird das Programm nicht stoppen, aber die Null-Wert kann dazu führen, eine Nullpointerexception, wenn Ihr Code wird nicht überprüft, ob der zurückgegebene Wert null.

Verwenden Sie createFont() (anstelle von loadFont() ), um Vektordaten zu ermöglichen, mit der Standard-Renderer-Einstellung verwendet werden.
Dies kann hilfreich sein
, wenn viele Schriftgrößen benötigt werden, oder wenn Sie jede Renderer auf Basis der Standard-Renderer, wie die PDF-Bibliothek.

Syntax
loadFont("Digital-7-48.vlw");

Parameters filename String: Name der
zu ladenden Schriftart

Returns:  PFont

Verwandte Befehle:

PFont  
textFont()
createFont()


https://www.processing.org/reference/loadFont_.html




*********************************************************
fill()
fill(153);       //  Füllfarbe grau
rect(30,20, 55,55);

fill(204,102,0); // Füllfarbe rect(30,20, 55,55);


Beschreibung:
Legt die Farbe verwendet werden, um Formen zu füllen. Zum Beispiel, wenn Sie laufen zu fill (204, 102, 0), werden alle folgenden Formen mit Orangen gefüllt werden. Diese Farbe wird entweder in Bezug auf den RGB oder HSB-Farb abhängig von der aktuellen colormode () angegeben. (Die Standard-Farbraum RGB, wobei jeder Wert im Bereich von 0 bis 255)
Bei der Verwendung von hexadezimal um eine Farbe auszuwählen, verwenden Sie "#" oder "0x" vor den Werten (zB #CCFFAA oder 0xFFCCFFAA). Die # Syntax verwendet sechs Stellen um eine Farbe auszuwählen (wie Farben werden typischerweise in HTML und CSS angegeben). Bei Verwendung der hexadezimale Schreibweise mit "0x", muss der hexadezimale Wert mit acht Zeichen angegeben werden; die ersten beiden Zeichen definieren die Alpha-Komponente, und der Rest zu definieren die roten, grünen und blauen Komponenten.
Der Wert für den Parameter "grau" muss kleiner oder gleich dem aktuellen Maximalwert liegen, wie von colormode () angegeben. Die maximale Standardwert ist 255.
Um die Farbe eines Bildes oder einer Textur zu ändern, verwenden tint ().

Syntax
:

fill(R,G,B)
fill(R,G,B, alpha)
fill(gray)
fill(gray, alpha)
fill(v1, v2, v3)
fill(v1, v2, v3, alpha)
Parameter:
R,G,B                  int:   Farbe variable oder Hex-Wert
alpha                 float:   Deckkraft der Füllung
gray                   float:   Zahl, die Wert zwischen Weiß=255  und Schwarz=0
v1                      float:   Rot oder Farbtonwert (abhängig von der aktuellen Farbmodus)
v2                      float:   Grün oder Sättigungswert (abhängig von der aktuellen Farbmodus)
v3                      float:   Blau oder Helligkeitswert (abhängig von der aktuellen Farbmodus)

Returns:             void

Verwandte Befehle:

noFill()
stroke()
noStroke()
tint()
background()
colorMode()

Processing-Sketch: Schriften_1a.pde

PFont

PFont font;
// Die Schrift muss in der Skizze entfernt werden
// Verzeichnis "data", um erfolgreich zu laden
font = loadFont("ArialMT-32.vlw");
textFont(font, 32);
text("
ArialMT-32.vlw", 10, 50);


Beschreibung:
PFont ist die Schriftklasse für die Verarbeitung. Um eine Schriftart mit Verarbeitung verwenden zu erstellen, wählen Sie

MENU > Tools > Create Font... > ArialMT-32.vlw > OK
Dies wird
eine Schriftart in der Formatverarbeitung erfordert schaffen und auch um das Datenverzeichnis des aktuellen Skizze fügt es. Verarbeitung zeigt Schriften mit dem *.vlw Schriftformat, das Bilder für jeden Buchstaben verwendet, anstatt sie zu definieren, durch Vektordaten. Die Funktion loadFont() baut eine neue Schriftart und textFont() blockt den Zeichensatz aktiv. Die list() Methode erstellt eine Liste der Schriftarten auf dem Computer installiert, die nützliche Informationen, um mit der createFont () Funktion für die dynamische Konvertierung von Schriften in ein Format, mit Verarbeitung verwenden ist.

Um eine neue Schriftart dynamisch zu erstellen, verwenden Sie die createFont() Funktion.
Verwenden Sie nicht die Syntax newPFont().

Methoden: list()      Ruft eine Liste der Schriftarten auf dem System installiert

Verwandte
Befehle: 
loadFont()
createFont()

https://www.processing.org/reference/PFont.html




PGraphics

PGraphics pg;

void setup() {
  size(100,100);
  pg = createGraphics(40,40);
}

void draw() {
  pg.beginDraw();
  pg.background(100);
  pg.stroke(255);
  pg.line(20,20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9,30); 
  image(pg, 51,30);
}

Beschreibung:
 Haupt
Grafik- und Renderkontext sowie die Basis-API-Implementierung für die Verarbeitung "Kern". Verwenden Sie diese Klasse, wenn Sie in einen Off-Screen-Grafiken Puffer zeichnen müssen. Ein PGraphics Objekt kann mit den 
createGraphics() Funktion aufgebaut werden. Die beginDraw () und EndDraw () Methoden (siehe Beispiel oben) sind notwendig, um Aufbau der Puffer und zu finalisieren. Die Felder und Methoden für diese Klasse sind umfangreich. Eine vollständige Liste finden Sie auf der developer's reference.

Um eine neue Grafikkontext zu erstellen, verwenden Sie die
createGraphics() Funktion. Verwenden Sie nicht die Syntax
new PGraphics().
 
Methoden
:   beginDraw ()         Legt die Standardeigenschaften für ein Objekt PGraphics
                    endDraw ()           Schließt die Rendering eines PGraphics Objekt
Related:      createGraphics()

https://www.processing.org/reference/PGraphics.html

createGraphics()

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); 
}

Beschreibung:
 Erstellt
und gibt einen neuen PGraphics Objekt. Verwenden Sie diese Klasse, wenn Sie in einen Off-Screen-Grafiken Puffer zeichnen müssen. Die ersten beiden Parameter definieren die Breite und Höhe in Pixel. Das dritte, optionale Parameter gibt den Renderer. Es kann als P2D, P3D, oder PDF definiert werden. Wenn der dritte Parameter nicht verwendet wird, wird der Standard-Renderer festlegen. Die PDF-Renderer benötigt den Parameter Dateiname.

Es ist wichtig, die mit Create verwendet
createGraphics() in Bezug auf die Haupt Renderer in der size()  festgelegt zu berücksichtigen. Zum Beispiel ist es nur möglich, P2D oder P3D mit createGraphics(), wenn einer von ihnen ist in der size() festgelegt verwenden. Im Gegensatz Verarbeitung 1.0, P2D und P3D OpenGL zum Zeichnen, und bei Verwendung eines OpenGL-Renderer ist es erforderlich, dass der Hauptzeichenfläche, um OpenGL-basierte sein. Wenn P2D oder P3D als Renderer in size () verwendet wird, dann eine der Optionen können mit createGraphics() verwendet werden. Wenn der Standard-Renderer ist in size () verwendet wird, dann wird nur die Standard oder PDF können mit createGraphics() verwendet werden.

Es ist wichtig, alle Zeichenfunktionen zwischen beginDraw () und endDraw () Aussagen nennen. Dies gilt auch für alle Funktionen, die Zeichnung beeinflussen, wie beispielsweise
smooth() oder colorMode().

Im Gegensatz zu den Hauptzeichenfläche, die völlig undurchsichtig ist, Oberflächen mit
createGraphics() erstellt  können Transparenz. Dies macht es möglich, in einem Grafik ziehen und halten den Alphakanal. Durch die Verwendung von save (), um ein PNG oder TGA-Datei zu schreiben, Objekt die Transparenz der Grafik wird geehrt.

Syntax
:

createGraphics(w, h)
createGraphics(w, h, renderer)
createGraphics(w, h, renderer, path)
Parameter:
                      w               int: Breite in Pixel
                      h               int: Höhe in Pixel
                      renderer     String: Entweder P2D, P3D oder PDF
                      path           String: der Name der Datei (kann ein absoluter oder relativer Pfad sein)
Rückgabe:       PGraphics


https://www.processing.org/reference/createGraphics_.html


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

Beschreibung:
 Lädt eine *.vlw formatiert Schriftart in eine PFont Objekt. Erstellen Sie eine *.vlw Schrift, indem Sie aus dem
MENU > Tools > Create Font... > ArialMT-32.vlw > OK die gewünschte Schriftart erstellen.
 Dieses Tool erstellt eine Textur für jedes alphanumerische Zeichen und fügt sie als .vlw Datei, Daten-Ordner des aktuellen Skizze ist dann. Da die Buchstaben werden als Texturen (und nicht die Vektordaten) der Größe, bei der die Zeichensätze erstellt wurden, müssen in Bezug auf die Größe, in der sie gezeichnet werden in Betracht gezogen werden definiert. Legen Sie zum Beispiel einen 32pt Schrift, wenn die Skizze zeigt die Schrift bei 32 Pixeln oder kleiner. Wenn umgekehrt ein 12pt Schrift geladen und bei 48pts angezeigt wird, werden die Buchstaben verzerrt werden, da das Programm wird Stretching eine kleine Grafik auf eine große Größe.

Wie loadImage() und andere Funktionen, die Daten zu laden, sollte die Funktion
loadFont() nicht in draw() verwendet werden, weil sie sich die Skizze erheblich verlangsamen, da die Schrift von der Festplatte (oder Netzwerk) auf neu geladen werden jeder Rahmen. Es wird empfohlen, Dateien in setup() zu laden.

Um korrekt zu laden, müssen Schriften im "data" Ordner des aktuellen Skizze befinden. Alternativ kann die Datei möglicherweise von überall auf dem lokalen Computer mit einem absoluten Pfad (etwas, das mit beginnt / auf Unix und Linux, oder ein Laufwerksbuchstaben unter Windows) geladen werden, oder der Dateiname Parameter kann eine URL für eine Datei auf eine gefunden werden Netzwerk.

Wenn die Datei nicht vorhanden ist oder ein Fehler auftritt, null zurückgegeben und eine Fehlermeldung auf der Konsole ausgegeben werden. Die Fehlermeldung wird das Programm nicht stoppen, aber die Null-Wert kann dazu führen, eine Nullpointerexception, wenn Ihr Code wird nicht überprüft, ob der zurückgegebene Wert null.

Verwenden Sie createFont () (anstelle von loadFont () ), um Vektordaten zu ermöglichen, mit der Standard-Renderer-Einstellung verwendet werden. Dies kann hilfreich sein, wenn viele Schriftgrößen benötigt werden, oder wenn Sie jede Renderer auf Basis der Standard-Renderer, wie die PDF-Bibliothek.

Syntax
loadFont(filename)

Parameter:    filename        String: Name der Schriftart zu laden
Returns: PFont
Verwandte Befehle:

PFont
textFont()
createFont()

https://www.processing.org/reference/loadFont_.html



text()

Beispiel 1:
textSize(32); text("word", 10,30); // 1. Zeile weiß fill(0,102,153); text("word", 10,60);
// 2. Zeile blau fill(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 value text("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


Beschreibung:
 Zeichnet
Text auf dem Bildschirm. Zeigt die im ersten Parameter auf dem Bildschirm, in der durch die zusätzlichen Parameter angegebenen Position Angaben. Ein Standard-Schriftart verwendet werden, es sei denn eine Schrift mit dem textFont() gesetzt und ein Standard-Größe wird verwendet, wenn eine Schriftart mit textSize() gesetzt werden. Ändern Sie die Farbe des Textes mit der fill() Funktion. Die Textanzeigen in Bezug auf die textAlign() -Funktion, die die Möglichkeit, nach links, rechts und in der Mitte der Koordinaten zu zeichnen gibt.

Die x2 und y2 Parameter definieren Sie einen rechteckigen Bereich innerhalb anzuzeigen und dürfen nur mit String-Daten verwendet werden. Wenn diese Parameter festgelegt sind, werden sie auf der Grundlage des aktuellen rectMode() Einstellung interpretiert. Text, der nicht ganz passt, innerhalb des angegebenen Rechtecks nicht auf dem Bildschirm gezeichnet werden.

Beachten Sie, dass Verarbeitung jetzt können Sie text() aufrufen, ohne zuerst die Angabe eines PFont mit textFont(). In diesem Fall wird ein generischer serifenlose Schrift stattdessen verwendet werden. (Siehe das dritte Beispiel oben.)

Syntax
:

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)

Parameter:
c        char:     das alphanumerische Zeichen angezeigt werden
X        float:     X-Koordinate des Text
Y        float:     Y-Koordinate des Text
z        float:     z-Koordinate des Text
chars  char []: Die alphanumeric Symbole angezeigt werden
start   int:        Array-Index, an dem das Schreiben Zeichen beginnen
stop   int:        Array-Index, an dem das Schreiben Zeichen stoppen
X     float:      Standardmäßig werden die x-Koordinate von Text finden Sie rectMode() für weitere Informationen
Y     float:      Standardmäßig werden die y-Koordinate von Text finden Sie rectMode() für weitere Informationen
x     float:      Standardmäßig wird die Breite des Textfeldes finden rectMode() für weitere Informationen
y     float:      Standardmäßig ist die Höhe des Textfeldes finden rectMode() für weitere Informationen
num   int:        der Zahlenwert angezeigt werden

num   float:     der Zahlenwert angezeigt werden

Returns:    void

Verwandte Befehle:
textAlign()
textFont()
textMode()
textSize()
textLeading()
textWidth()
textAscent()
textDescent()
rectMode()
fill()
String

https://www.processing.org/reference/text_.html



textFont()

PFont mono;
// Die Schrift "ArialMT-32.vlw" "muss in die gefunden werden
// Verzeichnis aktuelle Skizze der "Daten", um erfolgreich zu laden
mono = loadFont("ArialMT-32.vlw"); // Schriftart  ArialMT  Größe 32-pixel
background(0); // Hintergrund schwarz
textFont(mono, 12); // Schriftgröße 12-pixel
text("ArialMT-32.vlw", 12, 60);


ArialMT-32.vlw


Beschreibung:
Setzt die
aktuelle Schriftart, die mit der Funktion text() erstellt wird. Schriften müssen für die Verarbeitung mit createFont() erzeugt oder mit loadFont(), bevor sie verwendet werden können geladen werden. Die Schrift über textFont() gesetzt werden in allen nachfolgenden Aufrufen der Funktion text() verwendet werden. Falls keine size parameter eingegeben wird, wird die Schriftart in Originalgröße (die Größe, in der es mit dem "Font erstellen ..." Tool erstellt) angezeigt, bis Sie es mit textSize() geändert wird.

Da in der Regel Bitmap-Schriften werden, sollten Sie Schriften in den Größen, die am häufigsten verwendet wird erstellen. Mit textfont() ohne den Parameter Größe wird in der sauberste Art führen.

Mit den Standard und PDF-Renderer, ist es auch möglich, die Verwendung von nativen Zeichensätze über die Befehls
hint(ENABLE_NATIVE_FONTS) zu ermöglichen. Dies Vektortext sowohl auf dem Bildschirm, Skizzen und PDF-Ausgabe erzeugen, wenn die Vektor-Daten zur Verfügung stehen, wie zum Beispiel, wenn die Schrift noch installiert ist, oder die Schriftart wird dynamisch über die Funktion createFont () (und nicht mit MENU > Tools > Create Font... > ArialMT-32.vlw > OK erstellt)

Syntax
:

textFont(which)
textFont(which, size)

Parameter: 
which   PFont:    jede Variable vom Typ PFont
                   
size       float:      die Größe der Buchstaben in Einheiten von Pixeln

Returns: 
void

Verwandte Befehle: 
createFont()
loadFont()
PFont
text()
textSize()

https://www.processing.org/reference/textFont_.html


 textSize()
background(0);
fill(255);
textSize(26); 
text("WORD", 10, 50); 
textSize(14);
text("WORD", 10, 70);
Beschreibung:
 Setzt die
aktuelle Schriftgröße. Diese Größe wird in allen nachfolgenden Aufrufen der Funktion text() verwendet werden. Die Schriftgröße wird in Einheiten von Pixeln gemessen.

Syntax
: 
textSize(size)

Parameter
size        float: die Größe der Buchstaben in Einheiten von Pixeln
Returns:       void
Verwandte Befehle:

loadFont()
text()
textFont()

https://www.processing.org/reference/textSize_.html



textMode()
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
}

Beschreibung Setzt die Art und Weise Text zieht auf den Bildschirm, sei es als Textur-Maps oder als Vektorgeometrie. Die Standard-textMode (MODEL), verwendet Texturen, um die Schriften zu machen. Die textMode(SHAPE) Textmodus zieht Text mit der Glyphe Umrisse von einzelnen Zeichen und nicht als Texturen. Dieser Modus wird nur mit der PDF und P3D Renderer-Einstellungen unterstützt. Mit der PDF-Renderer, müssen Sie im textMode(SHAPE) vor allen anderen Zeichnung tritt nennen. Sollten die Konturen nicht verfügbar sind, werden dann im textMode(SHAPE) ignoriert und textMode(MODEL) wird stattdessen verwendet werden.

Die Option
textMode(SHAPE) in P3D mit beginRaw () kombiniert werden, um Vektor-genauen Text, um 2D- und 3D-Ausgabe-Dateien zu schreiben, zum Beispiel DXF oder PDF. Die SHAPE-Modus wird derzeit nicht für P3D optimiert, so dass, wenn die Aufnahme Formdaten, verwenden Sie textMode(MODEL), bis Sie bereit, um die Geometrie mit beginRaw() einzufangen sind.

Syntax
: 
textMode(mode)

Parameter
:   mode    int: entweder MODEL oder SHAPE

Returns:   void

Verwandte Befehle: 

loadFont()
text()
textFont()
beginRaw()
createFont()

https://www.processing.org/reference/textMode_.html




textWidth ()

Textbreite
Platzieren wir einen Text in das Grafikfenster, haben wir zwar Kontrolle über die Startposition, die wir über die xy-Koordinaten der text-Funktion übergeben, jedoch können wir nicht genau sagen, wie viel Pixel sich der Text nach rechts erstreckt.
Die Endposition ist nicht zu ermitteln, denn sie hängt ja maßgeblich von der Font-Größe ab, die wir in der textFont-Funktion angegeben haben.

Die textWidth-Funktion liefert uns die fehlende Information.
Die Funktion liefert einen Wert des Datentyps float zurück.
Schauen wir uns dazu den folgenden Code genauer an.
Er platziert einen Text, der in der Variablen message abgelegt wurde, an die aktuelle Mausposition.
Wir wollen über das Programm feststellen lassen, wann der Text den rechten Bildschirmrand berührt, und daraufhin die Textfarbe ändern.
Wird der Rand nicht mehr berührt, soll die alte Textfarbe wieder sichtbar sein.
Ist die x-Position plus der Breite der Zeichenkette größer als die Breite des Ausgabefensters, berührt sie den rechten Rand des Fensters.
Verwendt man unterschiedliche Texte mit verschiedenen Längen und unterschiedlichen Fontgrößen wird man sehen, dass es immer korrekt funktioniert.
Befindet sich die Textbreite noch komplett innerhalb des Grafikfensters, ist die Textfarbe grün.
Hat der Text den rechten Rand erreicht bzw. überschritten, wird die Textfarbe auf rot gesetzt.
// 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 deklarieren
String 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 vorhanden textSize(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);

Beschreibung: Berechnet und gibt die Breite von einem beliebigen Zeichen oder Textzeichenfolge.
Syntax:    textWidth (c)
                textWidth (str)

Parameter:         c            char:      der Charakter nach Maß
                           str          String:   der String von Zeichen zu messen

Returns:
             float

Verwandte
Befehle:

loadFont()
text()
textFont()
textSize()


https://www.processing.org/reference/textWidth_.html


textLeading ()

// Text to display. The "\n" is a "new line" character
String lines = "L1\nL2\nL3";
textSize(12);
fill(0);  // Set fill to black

textLeading(10);  // Set leading to 10
text(lines, 10, 25);

textLeading(20);  // Set leading to 20
text(lines, 40, 25);

textLeading(30);  // Set leading to 30
text(lines, 70, 25);

Beschreibung:
Legt den
Abstand zwischen den Textzeilen in Einheiten von Pixeln. Diese Einstellung wird in allen nachfolgenden Aufrufen der Funktion text() verwendet werden. Man beachte jedoch, daß der Zeilenabstand wird durch textSize(). Wenn beispielsweise der führende bis 20 mit textLeading(20) gesetzt ist, dann, wenn textSize(48) zu einem späteren Zeitpunkt ausführen, die führende auf die Standardeinstellungen für die Textgröße von 48 zurückgesetzt.

Syntax
:  
textLeading(leading)

Parameter
leading     float:   die Größe in Pixel für Abstand zwischen den Zeilen
Returns:   v
oid
Verwandte Befehle:

loadFont()
text()
textFont()
textSize()


https://www.processing.org/reference/textLeading_.html

textAlign ()
Es existiert jedoch ein kleiner, aber feiner Unterschied zwischen Word und Processing:
In Word bezieht sich die Ausrichtung des Textes in der Regel auf die komplette Blattbreite.
Processing orientiert sich an der x-Koordinate der text-Funktion.
Um das zu verdeutlichen, siehe untenstehendes Prg.
Das Programm wurde so programmiert, dass eine rote senkrechte Linie auf der Basis der X-Mausposition gezeichnet wird.
Die x-Position der Textausgabe orientiert sich an diesem Wert.
Die drei Orientierungsmöglichkeiten der Texte werden dann anhand der sich ändernden Mausposition angezeigt.
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-Fenster

PFont font;                                      // PFont-ObjektVariable deklarieren
void 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);
}

Beispiel 2:
// Processing-Sketch: createFont_ObenMitte Unten_SansSerif_1a.pde
// Font = Schrift frei skaliernbar
// Default Schrift SansSerif 12-pixel da Courier New Schrift am Rechner nicht vorhanden

size(300,150); 
background(0);                    //Hintergrund schwarz

stroke(255,0,0);                  // Strichfarbe rot

textSize(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

Beschreibung:
Setzt die
aktuelle Ausrichtung zum Zeichnen von Text.
Die Parameter
LEFT, CENTER und RIGHT legen Sie die Anzeigeeigenschaften der Buchstaben in Bezug auf die Werte für die x- und y-Parameter der Funktion text ().

Ein optionaler zweiter Parameter kann verwendet werden, um den Text vertikal ausrichten werden.
BASELINE
ist die Standardeinstellung, und die vertikale Ausrichtung wird zum Ausgangswert zurückgesetzt werden, wenn der zweite Parameter nicht verwendet wird.
Die
obere und mittlere Parameter sind einfach.
Der untere
Parameter dient zum Linie auf Basis der aktuellen textDescent ().
Für
mehrere Zeilen, wird die letzte Zeile nach unten ausgerichtet sein, mit den bisherigen Linien über sie erscheint.

Bei der Verwendung von text () mit Breite und Höhe Parameter wird BASELINE ignoriert und als TOP behandelt.
(Ansonsten Text würde standardmäßig zu ziehen über den Tellerrand hinaus, da BASELINE ist die Standardeinstellung.
BASELINE
ist kein ZeichenModus für Text in einem Rechteck gezeichnet.)

Die vertikale Ausrichtung wird auf den Wert des textAscent (), die viele Schriftarten nicht korrekt angeben, basiert.
Es kann notwendig sein
, um einen Hack und Offset um ein paar Pixel zu verwenden mit der Hand, so dass der Offset sieht richtig.
Um dies
so wenig wie ein Hack Verwenden Sie dazu einen gewissen Prozentsatz von textAscent () oder textDescent (), so dass der Hack funktioniert auch, wenn Sie die Größe der Schriftart zu ändern.

Syntax
:
             textAlign(alignX)
                         textAlign(alignX, alignY)

ParameteralignX         int: horizontale Ausrichtung, entweder LEFT, CENTER oder RIGHT
                   alignY         int: vertikale Ausrichtung, entweder TOP, BOTTOM, CENTER oder BASELINE

Returns:     
void


Verwandte Befehle:

loadFont()
PFont
text()
textSize()
textAscent()
textDescent()


https://www.processing.org/reference/textAlign_.html


textAscent ()

float base = height * 0.75;
float scalar = 0.8; // Unterschiedliche für jede Schriftart

textSize(32);  // Setzt anfängliche Textgröße
float a = textAscent() * scalar;  // Calc Aufstieg
line(0, base-a, width, base-a);
text("dp", 0, base);  //Text auf Grundlinie zeichnen

textSize(64);  // Textformat vergrössern
a = textAscent() * scalar;  // Recalc Aufstieg
line(40, base-a, width, base-a);
text("dp", 40, base);  // Text auf Grundlinie zeichnen

Beschreibung:
 Gibt
Aufstieg der aktuellen Schriftart in der aktuellen Größe. Diese Informationen sind nützlich für die Bestimmung der Höhe der Schriftart über der Grundlinie. Zum Beispiel, indem die textAscent () und Werte textDescent () gibt Ihnen die Gesamthöhe der Linie.

Syntax
:  textAscent ()

Returns: float 
Verwandte Befehle:    textDescent ()

https://www.processing.org/reference/textAscent_.html


textDescent ()
float base = height * 0.75;
float scalar = 0.8; // Unterschiedliche für jede Schriftart

textSize(32);  // Setzt anfängliche Textgröße
float a = textDescent() * scalar;  // Calc Aufstieg
line(0, base+a, width, base+a);
text("dp", 0, base);  // Text auf Grundlinie zeichnen

textSize(64);  // Textformat vergrössern
a = textDescent() * scalar;  // Recalc Aufstieg
line(40, base+a, width, base+a);
text("dp", 40, base);  // Text auf Grundlinie zeichnen

Beschreibung:
 Gibt
Abstieg der aktuellen Schriftart in der aktuellen Größe.
Diese Informationen sind nützlich
für die Bestimmung der Höhe der Schriftart unter der Grundlinie.
Zum Beispiel
, indem die textAscent () und Werte textDescent () gibt Ihnen die Gesamthöhe der Linie.

Syntax
:                   textDescent ()
Returns:                  float

Links

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.

Menüzeile / Werkzeugleiste

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

Editor Bereich

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.

Quell-Code Anleitung (cfa_000_programm.pdf)








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.

Anleitung (programm_struktur.pdf)









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);
			
Beschreibung (cfa_015_forSchleife.pdf)
a





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.

Beschreibung(cfa_016_whileSchleife.pdf)
 

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
			
Anleitung (funktionen.pdf)




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.

BIT BYTE Bezeichnung
8
Byte
16 2 Word
32 4 Double Word
64 8 Quadruple Word
128 16 Double Quadruple Word

Datentypen

Die Datentypen definieren wie die Daten im Computer verarbeitet werden.

 Bezeichner  BIT   Beschreibung
int 32 Ganzzahlen von ca. -2 Mrd. bis ca. 2 Mrd.
float 32 Gleitkommazahl mit 8 Stellen Genauigkeit
boolean 1 wahr oder falsch (true or false)
byte 8 -128 bis 127
char 16 einzelne Zeichen
String
Texte (siehe unten)
color 32 16'777'216 Farben

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.



Beschreibung (variablen_datentyp.pdf)


Bild: ODER Verknüpfungen


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:

 
true
false
true
			

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:

Beschreibung (strings.pdf)
 

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.

Anleitung (mathematische_operationen.pdf)
 

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.75
0.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.0
sqrt(-3) = NaN    
			
Anleitung(mathematische_operationen.pdf)



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);
 }
			


radians()

Konvertiert eine Grad Angabe zu seinem entsprechenden Wert in Bogenmass.
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:

 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°
			
Anleitung (mathematische_operationen.pdf)










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);
			
Anleitung (mathematische_operationen.pdf)




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);
			
Quell-Code Anleitung (cfa_001_zeichenFlaeche.pdf)




Zeichen Elemente

Punkt

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);
			
Quell-Code Anleitung (cfa_002_punkt.pdf) Applet

Bild: Applet Punkt


Linie

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);
			
Quell-Code Anleitung (cfa_003_linie.pdf) Applet

Bild: Applet Linie


Rechteck

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.


Bild: Applet Rechteck


Viereck

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

Bild: Applet Viereck


Dreieck

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

Beispiel:

triangle (30, 75, 58, 20, 86, 75);

Quell-Code Anleitung (cfa_006_dreieck.pdf) Applet

Bild: Applet Dreieck


Kreis

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);
			
Bild: Applet Kreis
Bild: Applet Kreis


Bogen

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));
			
Bild: Applet Bogen
Bild: Applet Bogen


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.

Additive Farbmischung (aus Wikipedia)
Additive Farbmischung (aus Wikipedia) Farbwähler in Processing


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.

Neun verschiedene Grautöne mit 90  bis 10 Prozent Helligkeit (aus Wikipedia)
Neun verschiedene Grautöne mit 90 bis 10 Prozent Helligkeit (aus Wikipedia)


Hintergrund

Hintergrund Bild Hintergrund farbig Hintergrund grau

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
			
Applet Hintergrund grau
Applet Hintergrund grau
Applet Hintergrund farbig
Applet Hintergrund farbig


Vordergrund

Vordergrund grau Vordergrund farbig

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
			
Quell-Code Slide Beschreibung (cfa_012_fill.pdf) Applet


Applet fill()


Linienfarbe

Linienfarbe farbig Linienfarbe grau

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
			
Quell-Code Beschreibung (cfa_013_stroke.pdf) Applet


Applet stroke()


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

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

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

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);
			
Beschreibung (eigenschaften.pdf)


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

Quadrat gefüllt:

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

Quadrat leer:

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

freie Form:

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

Dreiecke:

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

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();
			
Rechtecke

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/

Beschreibung (vertex.pdf)


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

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
			


Beispiel aus: http://processing.org/reference/



Applet curveVertex()
Quell-Code zu Applet Beschreibung (curveVertex.pdf) Applet nach oben



QUELLE:
http://www.computerfueralle.ch/programmieren/cfa_kurs/cfa_000_start.html




DIN A4 ausdrucken
*********************************************************

Impressum: Fritz Prenninger, Haidestr. 11A, A-4600 Wels, Ober-Österreich, mailto:schaltungen@schaltungen.at
ENDE








Comments