//Processing-Sketch: Punkte mit der Maus setzen_1a.pdevoid setup () {  size(350, 100);   //setze die gröe der Zeichenfläche auf 100 *100 Pixel  background(255);  // lösche die Zeichenfläche und fülle sie mit weiß  smooth();         //antialiasing aktivieren}void draw () {      // draw muss existieren damit unser programm am Leben bleibt}void mousePressed() {  noStroke();       // Outline deaktivieren  fill(0, 125);     // Füllfarbe auf schwarz & semitransparent setzen  ellipse(mouseX, mouseY, 10, 10);    // Kreis an der Mausposition zeichnen}

• mousePressed() die Maustaste wurde gedrückt
• mouseReleased() die Maustaste wurde losgelassen
• mouseMoved() die Maus wird bewegt & es ist kein Knopf gedrückt
• mouseDragged() der Mausknopf ist gedrückt und die Maus wird dabei bewegt

//Processing-Sketch: Punkte_Rechteck mit der Maus setzen_1a.pdevoid setup () {  size(400,100);   // setze die größe der Zeichenfläche auf 300x100 Pixel  background (255); // lösche die Zeichenfläche und fülle sie mit weiss  smooth ();        // Antialiasing aktivieren}void draw() {}void mousePressed() {                // die Maustaste wurde gedrückt  noStroke ();                       // Outline deaktivieren  fill (0, 125);               // Füllfarbe auf schwarz & semitransparent setzen  ellipse (mouseX, mouseY, 10, 10);  // Punkt an der Mausposition zeichnen}void mouseReleased() {             // die Maustaste wurde losgelassen  noFill ();                       // Füllfarbe deaktivieren  stroke (255,0,0, 125);         // Strichfarbe auf rot & semitransparent setzen  rectMode (CENTER);               // Rechteck von der Mitte aus zeichnen  rect (mouseX,mouseY, 15,15);   // Rechteck an der Mausposition zeichnen}

//Processing-Sketch: Punkte_Rechteck&Mausspur_1a.pdevoid setup () {  size(350, 100);    // setze die größe der Zeichenfläche auf 350x100 Pixel  background (255);  // lösche die Zeichenfläche und fülle sie mit weiss  smooth ();         // Antialiasing aktivieren}void draw () {}void mousePressed () {               // die Maustaste wurde gedrückt  noStroke ();                       // Outline deaktivieren  fill (0, 125);               // Füllfarbe auf schwarz & semitransparent setzen  ellipse (mouseX,mouseY, 10,10);  // Punkt an der Mausposition zeichnen}void mouseReleased() {            // die Maustaste wurde losgelassen  noFill ();                      // Strichfarbe deaktivieren  stroke (255,0,0, 125);        // Strichfarbe auf rot & semitransparent setzen  rectMode (CENTER);              // Rechteck vom Mittelpunkt aus zeichnen  rect (mouseX,mouseY, 15,15);  // Rechteck an der Mausposition zeichnen}void mouseMoved() {         // mouseMoved() die Maus wird bewegt & es ist kein Knopf gedrückt  stroke (0,255,255);       // Strichfarbe auf cyan setzen  point (mouseX, mouseY);   //Punkt an der Mausposition zeichnen}

//Processing-Sketch: Punkt Mausspur Rechteck_1a.pdevoid setup() {  size(350, 100);    // setze die größe der Zeichenfläche auf 350x100 Pixel  background (255);  // lösche die Zeichenfläche und fülle sie mit weiss  smooth ();         // Antialiasing aktivieren}void draw () {}void mousePressed () {  noStroke ();                      // Outline deaktivieren  fill (0, 255, 0);                 // Füllfarbe grün setzen  ellipse(mouseX, mouseY, 10, 10);  // Punkt an der Mausposition zeichnen}void mouseReleased () {  noFill ();                      // Strichfarbe deaktivieren  stroke (255,0,0);             // Strichfarbe auf rot  rectMode (CENTER);              // Rechteck vom Mittelpunkt aus zeichnen  rect (mouseX,mouseY, 15,15);  // Rechteck an der Mausposition zeichnen}void mouseDragged() {       //mouseDragged() der Mausknopf ist gedrückt und die Maus wird dabei bewegt  stroke (0);               // Strichfarbe auf schwarz setzen  point (mouseX, mouseY);   // Punkt an der Mausposition zeichnen}

2. Tastaturinteraktion

//Processing-Sketch: Tastendruck keyPressed_1a.pdevoid setup () {  size(300, 200);    // setze die größe der Zeichenfläche auf Breite, Höhe  background (235);  // lösche die Zeichenfläche und fülle sie mit hell-grau  smooth();          // Antialiasing aktivieren}void draw () {}void keyPressed () {  noStroke();                                     // Outline deaktivieren  fill(0,255,255, 125);                         // Füllfarbe auf cyan & semitransparent setzen  //rect(random(height), random(width), 20, 20);  // Quadrat an einer zufälligen Position in der Zeichenfläche zeichnen  rect(random(width), random(height), 20, 20);    // Quadrat-Postition Breite Höhe}

//Processing-Sketch: Tastendruck Taste e ODER r_1a.pdevoid setup () {  size(150, 150);    // Setze die größe der Zeichenfläche auf 100x100 Pixel  background(225);   // lösche die Zeichenfläche und fülle sie mit hell-grau  smooth();          //antialiasing aktivieren}void draw() {}void keyPressed() {  if (key == 'e') {     // Abfrage ob die Taste 'e' gedrückt wurde    noStroke ();        // Outline deaktivieren    fill(0, 125); // Füllfarbe auf schwarz & semitransparent setzen    ellipse(random(height), random(width), 10, 10);     // Punkt an einer zufälligen Position in der Zeichenfläche zeichnen  }  if (key == 'r') {          // Abfrage ob die Taste 'r' gedrückt wurde    noFill ();               // Füllfarbe deaktivieren    stroke (255,0,0, 125); //Strichfarbe auf rot & semitransparent setzen    rect (random (height), random (width), 15, 15);     //Rechteck an einer zufälligen Position in der Zeichenfläche zeichnen  }}

//Processing-Sketch: Abfrage Steuertasten_1a.pdevoid setup() {    size(100, 100);    // Setze die Größe der Zeichenfläche auf 100x100 Pixel  background(200);   // lösche die Zeichenfläche und fülle sie mit hell-grau  smooth();} void draw() {        // Antialiasing aktivieren} void keyPressed() {  if (key == 'e') {  // Abfrage ob die Taste 'e' gedrückt wurde    noStroke();      // Outline deaktivieren    fill (0, 125);   // Füllfarbe auf schwarz & semitransparent setzen    ellipse(random (height), random (width), 10, 10);  // Punkt an einer zufälligen Position in der Zeichenfläche zeichnen  }   if(key == 'r') {           // Abfrage ob die Taste 'r' gedrückt wurde    noFill ();               // Füllfarbe deaktivieren    stroke (255,0,0, 125);   //Strichfarbe auf rot & semitransparent setzen    rect (random (height), random (width), 10, 10); //Rechteck an einer zufälligen Position in der Zeichenfläche zeichnen  }    if (key == BACKSPACE) {background(255,0,0);}  // Taste Pfeil-links         Rot  if (key == TAB) {background(0,255,0);}        // Taste Pfeil-links/rechts  Grün  if (key == ENTER) {background(0,0,255);}      // Taste CR                  Blau      if (key == RETURN) {background(255,255,0);}   // Taste CR                  yellow  if (key == ESC) {background(0,255,255);}      // Taste Esc Grafik löschen  cyan  if (key == DELETE) {background(255,0,255);}   // Taste Entf                 magenta }

• data
• processing.org
• scope
• variables

• data
• processing.org
• shapes
• variables

1. Vertex

• beginShape() der Aufruf leitet das Zeichnen einer Freiform ein.
  
• Parameter benötigt dieser Befehlt nicht.
  
• Durch die Angabe von POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS und QUAD_STRIP kann die resultierende Form eingeschränkt werden(keine vollwertige Freiform mehr). beginShape()

beginShape ();        // beginne eine Freiform
beginShape (POINTS);  // beginne nur Punkte zu zeichnen, die aber nicht zu verbinden
beginShape (LINES);   // beginne nur Linien zu zeichnen, die resultierende Fläche aber nicht zu füllen

• endShape() der Aufruf beendet das Zeichnen der Freiform. Diese setzt sich aus allen zwischen beginShape() und endShape() ausgeführten Zeichenbefehlen (z.B. vertex()) zusammen. Wenn bei beginShape() ein Parameter verwendet wurde, sollte dieser hier ebenfalls angegeben werden. endShape()

  endShape ();// beendet das zeichnen einer Freiform

• vertex() erweitert den formbeschreibenden Pfad um einen neuen Ankerpunkt.
  
• Da wir uns in einer zweidimensionalen Zeichenfläche bewegen geben wir die Position durch x und y Koordinate an. vertex()

  vertex (30, 40);    // vertex (x-koordinate, y-koordinate) vertex (90, 20); vertex (60, 70); ...

1. Einleiten: Mittels beginShape() teilen dem Programm mit, das wir gleich eine Form zeichnen werden. Alle nun folgenden Punkte sollen zu einer Form bzw. Umrandung, abhänig vom angewendeten Modus, zusammengeführt werden. Modi wie TRIANGLE_FAN, TRIANGLE_STRIP, etc. stellen zu Beginn große Fehlerquellen dar. Jegliche Form kann auch ohne Angabe solcher Parameter erzeugt werden.
2. Zeichnen: In diesem Teil folgt die Formulierung der Freiform. Dies geschieht durch die Angabe der Ankerpunkte - Gestaltung der Outline. In diesem Abschnitt dürfen keine Aufrufe der bisherigen Zeichenbefehle erfolgen! Erst nach dem Schließen der Form können ellipse(), rect() wieder zur Verwendung kommen.
3. Beenden: Processing bekommt nun durch endShape() die Anweisung mit allen, seit beginShape() angegebenen Punkten, eine Umriss zu generieren. Je nach vorheriger Angabe von fill() und stroke() ist dieser gefüllt bzw. sichtbar. Der Einsatz von ellipse(), rect(), etc. ist nun wieder gestattet.

//Processing-Sketch: 08.1.1 Freiform 1_1a.pdesize(220, 220);   // Größe der Zeichenfläche festlegensmooth ();        // Kantenglättung aktivierenbeginShape ();    // Zeichnen einleitenvertex (20, 40);  // Freiform durch Angabe der Vertexpunkte beschreiben (muss nicht geschlossen sein)vertex (60, 150);vertex (110, 190);vertex (160, 150);vertex (200, 40);endShape ();       // Zeichnen beenden

//Processing-Sketch: 08.1.1 Freiform 2_1a.pdesmooth ();  // Kantenglättung aktivierenbeginShape (LINES);  // Zeichnen Einleiten 
                     // Zeichnen der vier Vertexpunktevertex (20, 20);     // Linie a, Punkt 1vertex (40, 80);     // Linie a, Punkt 2vertex (80, 80);     // Linie b, Punkt 1vertex (60, 20);     // Linie b, Punkt 2endShape();         // Zeichnen Beenden

2. Curve Vertex

• curveVertex() definiert mit x und y-Koordinate einen Kontrollpunkt der Kurve.
  
• Mindestens vier dieser Punkte müssen zwischen beginShape() und endShape() stehen. 
• curveVertex()

//Processing-Sketch: 08.2.1 Kurve_1a.pdesize(220, 220); // Größe der Zeichenfläche festlegensmooth (); // Kantenglättung aktivierenbeginShape ();  // Zeichnen einleiten// Freiform durch Angabe der Kurvenkontrollpunkte beschreibencurveVertex (20, 40);curveVertex (20, 40);curveVertex (60, 150);curveVertex (110, 190);curveVertex (160, 150);curveVertex (200, 40);curveVertex (200, 40);endShape ();  // Zeichnen beenden

//Processing-Sketch: 08.2.2 Kurve mit Maus modifizieren_1a.pdevoid setup() {  smooth ();        // Kantenglättung aktivieren  noFill();         // Füllung deaktivieren}void draw() {  background(255);  // Leere die Zeichenfläche  beginShape();     // Zeichnen Einleiten  curveVertex(0, 0);  //curveVertex(0, 0);  curveVertex(mouseX, mouseY);  curveVertex(100, 100);  curveVertex(100, 100); // um keine fehlerhafter Darstellung zu erhalten doppelt angegeben  endShape();            // Zeichnen beenden}

• color
• filter
• images
• manipulation
• processing.org

1. Farben II

• alpha() auf die Farbe anzuwendende Transparenz zwischen 0-255. alpha()
• blue() Blauanteil der Farbe zwischen 0-255. blue()
• brightness() brightness()
• green() Grünanteil der Farbe zwischen 0-255. green()
• red() Rotanteil der Farbe zwischen 0-255. red()
• saturation() Sättigung der Farbe zwischen 0-255. saturation()

//Processing-Sketch: 09.1.1 Datentyp color mit Mausklick ändern_1a.pdecolor c;        // Globale Farbvariable "c" ist überall im Programm erreichbarvoid setup () {  c = color (0, 150, 255);   // einmaliges setzen der Anteile für grün und blau}void draw () {  background (c);  // permanentes Zeichnen des Hintergrunds mit der aktuellen Farbe}void mousePressed () {     // führe einmalig pro Mausklick aus  float r = red (c) + 40;  // Auslesen der Farbkanäle und Erhöhung des Rotanteils  float g = green (c);  float b = blue (c);  if (r > 255) {           // Überprüfe ob der Rotanteil nicht zu hoch wird    r = 0;  }  c = color (r, g, b);     // setze die Anteile von "c" neu  println ("Rot: " + r);   // Ausgabe im Nachrichtenfenster zur Überprüfung}

2. Pixelbilder in Processing verwenden

2.1 Abbilden

• image() darstellen eines Pixelbildes an einer durch x und y Koordinate angegebenen Position.
  
• Zwei weitere optionale Parameter erlauben das Festlegen der Größenverhältnisse (wenn nicht angegeben werden die Originalwerte benutzt). image()

  PImage img; ... image (img, 0, 0);

• imageMode() legt den Punkt fest an welchem die Position ausgerichtet wird.
  
• Es besteht die Wahl zwischen CORNER, CORNERS und CENTER. imageMode()

  imageMode (CENTER); // Zentrum des Bildes imageMode (CORNER); // obere linke Ecke des Bildes

• loadImage() läd ein Bilddokument aus dem data-Ordner (dieser Ordner muss sich im Sketch-Ordner befinden).
  
• Das Resultat sollte immer einer PImage Variable zugewiesen werden. loadImage()

  PImage img = loadImage ("test.jpg"); image (img, 0, 0);

//Processing-Sketch: 09.2.1.1 Bild laden/darstellen_1a.pde// Variable "meinBild" zum halten des Bildes festlegen. Bild hinein laden.PImage meinBild = loadImage ("Drehspul-Weitwinkel GOSSEN Skalen 122x75 (100 200 500mV)NEU_1a.jpg");  size (715, 442);    // Zeichenfläche auf Größe des zu ladenden Bildes festlegen//image (meinBild, 0, 0);  // Bild mittels image() Befehl an der Position 0,0 (oben links) abbilden.image (meinBild, 20, 20, width-40, height-40);  // Bild einpassen

2.2 Bilder modifizieren

//Processing-Sketch: 09.2.2.1 Bilder einfärben_1a.pdePImage meinBild;    // Variable "meinBild" zum halten des Bildes festlegen. Bild hinein laden.size (715, 442);    // Zeichenfläche auf Größe des zu ladenden Bildes festlegenmeinBild = loadImage ("Drehspul-Weitwinkel GOSSEN Skalen 122x75 (100 200 500mV)NEU_1a.jpg");tint (255, 228, 196);                               //Bild mit Farbe "bisque" einfärbenimage (meinBild, 20, 20, width-40, height-40);      // Bild einpassennoTint ();                                          //Einfärbung deaktivierenimage (meinBild, 300, 190, width-310, height-200);  // Bild mittels image() Befehl an der Position abbilden.

//Processing-Sketch: 09.2.2.2 Bilder mittels color einfaerben_1a.pdecolor yellow = color (220, 214, 41);color green = color (110, 164, 32);color red = color (255, 0, 0);PImage meinBild; // Variable "meinBild" zum halten des Bildes festlegen. Bild hinein laden.size (600, 400);    // Zeichenfläche auf Größe des zu ladenden Bildes festlegenmeinBild = loadImage ("Voltmeters_1a.jpg");tint (yellow);                       //Bild mit Farbe "yellow" einfärbenimage (meinBild, 0, 0);  // Bild einpassentint (green);                       //Bild mit Farbe "Grün" einfärbenimage (meinBild, 150, 50);  // Bild einpassentint (red);                       //Bild mit Farbe "Rot" einfärbenimage (meinBild, 300, 100);  // Bild einpassen

2.3 Auslesen

• get() gibt den Farbwert eines Bildes oder Pixels zurück, bzw. Bildausschnitt.
  
• Das Ergebnis ist vom Datentyp color. get()

• PImage img = loadImage ("test.jpg");   // Farbmittelwert des gesamten Bildes color bild = img.get ();   // Farbwert des Bildpunktes an der Position x:30, y:87 color pixel = img.get (30, 87);   // Bildabschnittes der sich von Position // x:10, y:10 um 20 Pixel nach rechts unten erstreckt color bereich = img.get (10, 10, 20, 20);

//Processing-Sketch: 09.2.3.1 Color picker_1a.pdePImage img; // definiere die globale Variable "img" damit sie überall im Programm verfügbar ist void setup () {  size (480, 375);   // Zeichenfläche auf Größe des zu ladenden Bildes festlegen    smooth (); // Kantenglättung aktivieren    noStroke (); // Outline deaktivieren    // Variable "img" zum halten des Bildes festlegen. Bild hinein laden.  img = loadImage ("Fritz-Portrait_1a.JPG");}void draw () {    background (255); // Hintergrund mit weiß füllen    image (img, 0, 0); // Bild darstellen  //image (img, 20, 20, width-40, height-40);      // Bild einpassen    if (mouseX < img.width) { // Wenn sich die Maus außerhalb  dem Bild befindet        color c = img.get (mouseX, mouseY); // lies Farbe an Mausposition aus        fill (c);// setze Farbe als Füllfarbe      rect (405, 5, 70, 365); // zeichne ein Rechteck in den rechten Sketchpart  }}

09.2.3.2 Lego image scretch Lego_1a.png

Bilder Scratch in Processing

//Processing-Sketch: 09.2.3.2 Lego image scretch_1a.pdePImage img; // Globale Variable zum Ablegen des Bildes (Überall erreichbar)void setup () {  size (490, 400);   // Zeichenfläche auf Größe des zu ladenden Bildes festlegen  img = loadImage ("lego_1a.png");  // Variable "img" zum halten des Bildes festlegen. Bild hinein laden.}void draw () {  image (img, 0, 0);  // Bild mittels image() Befehl an der Position 0,0 (oben links) abbilden.  for (int i=0; i < img.height; i=i+1) {  // für alle Pixel in der Spalte der Mausposition    color c = img.get (mouseX, i);  // Farbwert auslesen    stroke (c);  // Linienfarbe definieren    line (0, i, mouseX, i);  // Linie von Mausposition an den rechten Bildrand zeichnen  }  println ("mouseX = " + mouseX);}

Eigene Bildeffekte programmieren in Processing

Bilder können uns auch als reine Datengrundlage dienen.
Das Beispiel veranschaulicht einen Zeichenprozess der durch die Anteiligkeit der Farbe Rot Ellipsen auf der Zeichenfläche verteilt.
Diese werden je nach Stärke des Rotkanals mit einem Grauton gefüllt.
Zum Auslesen des Bildes werden zwei for Schleifen ineinander verschachtelt.
Spalte für Spalte werden damit alle Pixel analysiert und jeweils die Entscheidung gefällt ob eine Ellipse an dieser Position gezeichnet werden soll oder nicht (wenn Rotanteil größer als 190 ist).

//Processing-Sketch: 09.2.3.3 Lego image customer filter_1a.pdesize (500, 420); // Zeichenfläche auf Größe des zu ladenden Bildes festlegensmooth ();       // Kantenglättung aktivierennoStroke ();     // Outline deaktivierenbackground (10); // Hintergrund abdunkelnPImage img = loadImage ("lego_1a.png"); // Variable "img" zum halten des Bildes festlegen. Bild hinein laden.for (int px = 0; px < img.width; px = px + 1) {     // Schleife für die Pixelzeilen des Bildes  for (int py = 0; py < img.height; py = py + 1) {  // Schleife für die Pixelreihen des Bildes    color c = img.get (px, py);  // Farbwert des Bildpixels an der Position px,py      float r = red (c);           // Rotanteil aus der Farbe "c"    if (r > 190) {               // Wenn der Rotanteil größer als 190 ist       fill (img.get (px, py));   // Füllfarbe aus Bild übernehmen      ellipse (px, py, 3, 3);    // Kreis an der Bild-Pixelposition im Sketchfenster zeichnen    }  }}

Bilder Kopieren in Processing

Da wir über den get() Befehl auch beliebig grosse Ausschnitte aus einem Bild kopieren können haben wir viele Möglichkeiten kleine Teile des Bildes zu nutzen um neue Bilder zu erzeugen.

In diesem Beispiel zeichnen wir ein kleines dynamisches Mosaik, indem wir über die Mauseposition einen Bildausschnitt wählen und nur diesen wiederholt auf der Bildfläche zeichnen.

//Processing-Sketch: 09.2.3.4 Lego Kopieren in Processing_1a.pdePImage img;  // unser Lego Bild// die Breite und Höhe einer Kachel, diese berechnen wir über die Anzahl der Zeilen und Spalten int gridStepX;int gridStepY;int numRows = 5; // aus wieviel Zeilen besteht das Gittermusterint numCols = 5; // aus wieviel Spalten besteht das Gittermustervoid setup() {  size(400, 375);   // Größe der Anwendung = Größe des Bildes  background(255);   // Hintergrund weiß  img = loadImage("lego_1a.png");   // LEGO-Bild laden      // Größe der Kachel berechnen - Größe = Gesamtgrösse / Anzahl der Spalten  gridStepX = width / numRows;  gridStepY = height / numCols;}void draw() {  // wir "schneiden" uns unser Kachelstück an der aktuellen Mausposition heraus, und speichern dies in einem neuen Bild  PImage imgPart = img.get(mouseX, mouseY, gridStepX, gridStepY);  for (int x=0; x < width; x = x + gridStepX) {    // gehe in 'Kachelschritten' entlang der Breite    for (int y=0; y < width; y = y + gridStepY) {  // gehe in 'Kachelschritten' entlang der Hoehe            image(imgPart, x, y); // zeichne das aktuelle Kachelbild an der jeweiligen Stelle    }  }}

2.4 Modifizieren

• set() setzt den Farbwert eines Bildpunktes an einer bestimmten Position. set()

  PImage img = loadImage ("test.jpg");img.set (29, 18, color (255, 0, 0));

2.5 Sketch als Bild

//Processing-Sketch: 09.2.4.1 Zeichenfläche einfaerben_1a.pdesize(355, 255); for (int px = 0; px < width; px = px + 1) {    // für jede der 255 pixel Spalten  for (int py = 0; py < height; py = py + 1) { // für jede der 255 pixel Zeilen    set (px, py, color (px, py, 0)); // setze den Farbwert für jeden Pixel auf der Zeichenfläche    print(width + "  ");    println(height);  }  }

2.6 *.SVG

//Processing-Sketch: SVG (Scaleable Vector Graphics) _1a.pdePShape meineGrafik;    //Variable anlegensize(150, 150);        // Größe der Anwendung = Größe des Bildes meineGrafik = loadShape("Type_B_Plug_Coloured.svg"); //SVG laden shape(meineGrafik, 10, 10, 80, 80);                  //SVG darstellen

Verweise

• processing.org
• text
• typography

1. Schriften in Processing

1.1 Laden von Schriften

1.2 Abbilden im Sketch

// Processing-Sketch: 10.1.2.1  Schrift Darstellung Arial_1a.pdePFont font;              // Variable zum Ablegen des Schriftabschnittessize (520, 100);         // Größe der Grafikausgabeflächebackground (148, 0, 211);  // Hintergrund Farbefont = loadFont ("Arial-BoldMT-48.vlw");   // Laden der Schrift in die Variable 'font'// Setze die Schrift 'font' als Standardschrift für alle nun folgenden 'text()' AufrufetextFont (font);text ("Arial-BoldMT-48.vlw", 30, 70);      // Textausgabe X-Y links unten

// Processing-Sketch: 10.1.2.2 Darstellung der Schrift im Block_1a.pdePFont font;              // Variable zum Ablegen des Schriftabschnittessize (500, 160);         // Größe der Grafikausgabeflächebackground (255, 110, 180);  // Hintergrund Farbefont = loadFont ("Arial-BoldMT-48.vlw");   // Laden der Schrift in die Variable 'font'// Setze die Schrift 'font' als Standardschrift für alle nun folgenden 'text()' AufrufetextFont (font);                           // SchriftgrößetextSize (24);//text ("Arial-BoldMT-48.vlw", 30, 70);    // Textausgabe X-Y links untentext ("Arduino fritzing Processing für Anfänger und leicht Fortgeschrittene. 
Grundlagen, Befehle, Muster-Sketche alles in www.schaltungen.at   
fritz prenninger", 20, 30, 480, 130);      // Text fließt innerhalb Textfeld

1.3 Schriftgröße

• textFont(font, size) setzt sowohl die zukünftig zu verwendende Schrift, sowie gleichzeitig die Schriftgröße.
•  textFont()

10.1.3.0  Mehrere Schriftarten

14 Arial-BoldMT
11 ArialMT (früher Helvetica) Techniker Schrift
27 Digital-7
01 01_Digit
03 5x8-LCD-HD44780U-A02
85 06   7Segment
18 LEDCounter7
90 LCDBold
81 Verdana
02 Segment7Standard
003 Digital-7Mono
05 LiquidCrystal
07 Patopian1986
08 LiquidCrystal-Light
09 LiquidCrystal-Regular
10 LiquidCrystal-Bold
005 7LED
21 DISPLAYFREETFB
23 DS-Digital
26 DS-Digital-Bold

// Processing-Sketch: 10.1.3.0  Mehrere Schriftarten A_1a.pde// loadFont Schriftart wird mitgespeichert// MENU > Tools > Create Font... > Arial-48.vlw  (früher Helvetica) die Techniker-Schrift// 12  18  24  36  48  60  72pixelPFont font_14;  // eine PFont-ObjektVariable deklarierenPFont font_11;PFont font_85;size (800, 1100);background (150);  // Hintergrund-Farbe hgrausmooth (); // Aktiviere Kantenglättungfont_14 = loadFont ("Arial-BoldMT-48.vlw"); // sucht im ORDNER "data" nach Fontname-Fontgröße.vlw//textFont (font_14);   // Setze die Schrift 'font_14' als Standardschrift//textSize (24);        // Setze Schriftgröße auf 24pxtextFont (font_14, 24); // Fontname, Fontgröße mit Qualitätsverlust wird skalierttext ("14 Arial-BoldMT-24.vlw", 20, 30);  // Text  X-Y Positionfont_11 = loadFont ("ArialMT-48.vlw");    textFont (font_11, 24);text ("11 ArialMT-24.vlw", 20, 50); font_85 = loadFont ("7Segment-48.vlw"); textFont (font_85, 72);fill (0, 255, 255);text ("85 7Seg-72 1999 -888 ", 20, 230); 

// Processing-Sketch: 10.1.3.0  Mehrere Schriftarten B_1a.pde

// Processing-Sketch: 10.1.3.0  Mehrere Schriftarten B_1a.pde// loadFont Schriftart wird mitgespeichert// MENU > Tools > Create Font... > Arial-48.vlw  (früher Helvetica) die Techniker-Schrift// 12  18  24  36  48  60  72pixelPFont font_28;  // eine PFont-ObjektVariable deklarierenPFont font_31;size (800, 1000);background (150);  // Hintergrund-Farbe hgrausmooth (); // Aktiviere Kantenglättungfont_28 = loadFont ("Digital-7Mono-48.vlw"); // sucht im ORDNER "data" nach Fontname-Fontgröße.vlw//textFont (font_28);   // Setze die Schrift 'font_14' als Standardschrift//textSize (24);        // Setze Schriftgröße auf 24pxtextFont (font_28, 48); // Fontname, Fontgröße wird mit Qualitätsverlust skalierttext ("28 Digital-7Mono-48.vlw", 20, 40);  // Text  X-Y Positionfont_31 = loadFont ("Dotf1-48.vlw"); textFont (font_31, 48);fill (0);text ("31 Dotf1-48.vlw 1999", 20, 100); 

// Processing-Sketch: 10.1.3.1  Schriftgroesse_1a.pdePFont font;                  // Variable zum Ablegen des Schriftschnittessize (500, 100);background (193, 205, 193);  // Hintergrund-Farbesmooth ();                   // Aktiviere Kantenglättungfont = loadFont ("Arial-BoldMT-48.vlw"); // Laden der Schrift in die Variable 'font'textFont (font);                         // Setze die Schrift 'font' als StandardschrifttextSize (24);                           // Setze Schriftgröße auf 24pxtext ("Arial-BoldMT-24.vlw", 20, 30);    // Text  X-Y PositiontextSize (48);                           // Setze Schriftgröße auf 48pxtext ("Arial-BoldMT-24.vlw", 20, 80);    // Text  X-Y Position

1.4 Zeilenhöhe

// Processing-Sketch: 10.1.4.1 Zeilenhoehe_1b.pdePFont font;         // Variable zum Ablegen des Schriftschnittessize(600, 200);     // Größe des Grafik-Bereichesbackground (230);   // Hintergrund Farbe hell-grau// laden der Schrift  MENU>Tools>Create Font.>ArialMT-48.vlw  (früher Helvetica)font = loadFont ("ArialMT-48.vlw"); textFont (font);    // Setze die Schrift 'font' als StandardschrifttextLeading (40);   // Setze die Zeilehöhe auf 40px (pixel)fill (255, 0, 255);  // Schriftfarbe magenta// Schreibe 'typo' an die Position x:40 und y:20, nutze dafür eine Fläche von 420x180 Pixeltext ("Arduino UNO R3 Processing und fritzing für Anfänger.", 40, 20, 420, 180);

1.5 Einfärben

// Processing-Sketch: 10.1.5.1 Text einfaerben_1a.pdePFont font;         // Variable zum Ablegen des Schriftschnittessize(360, 300);     // Größe des Grafik-Bereichesbackground (180);   // Hintergrund Farbe hell-grau// laden der Schrift  MENU>Tools>Create Font.>ArialMT-48.vlw  (früher Helvetica)font = loadFont ("ArialMT-48.vlw"); textFont (font);    // Setze die Schrift 'font' als Standardschriftfill (0,0,205);  // Schriftfarbe blauline(20,60, 280,60);text ("creative", 50,60);fill (139, 69, 19);  // Schriftfarbe braunline(20,100, 280,100);text ("coding", 40, 100);fill (0,100,0);  // Schriftfarbe grünline(20,140, 280,140);text ("fritz", 30,140);fill (255, 127, 0);  // Schriftfarbe orangeline(20,180, 280,180);text ("prenninger", 20, 180);fill (191,62,255);  // Schriftfarbe violettline(20,220, 280,220);text ("haidestrasse", 10,220);fill (255, 231, 186);  // Schriftfarbe beigeline(20,260, 280,260);text ("wels", 0, 260);

1.6 Ausrichtung

• textAlign() setzt die Ausrichtung alle danach folgenden mit text() dargestellte Texte.
  
• Diese Funktion kann mit einem oder zwei Parametern aufgerufen werden.
  
• Der erste definiert die x-Achse (Horizontale), optional kann mit dem Zweiten die y-Achse (Vertikale) angegeben werden.
  
• Als ersten Wert können folgende Angaben genutzt werden: LEFT, CENTER, RIGHT.
  
• Als Standard wird von Processing LEFT verwendet. Für die y-Achse finden folgende Werte Verwendung: TOP, CENTER, BOTTOM. textAlign()

// Processing-Sketch: 10.1.6.1 Text horizontal ausrichten_1a.pdePFont font;        // Variable zum Ablegen des Schriftschnittessize(450, 180);    // Größe des Grafikfenstersbackground (225);  // Hintergrund hell-grau einfärbenfill (0);          // Schriftfarbe schwarzfont = loadFont ("ArialMT-48.vlw"); // Laden der Schrift in die Variable 'font'textFont (font);   // Setze die Schrift 'font' als Standardschriftfloat X_pos = 150;  // Variable für die x-Position des Textesline (X_pos, 0, X_pos, height);  // vertikale Linie an der Textposition textAlign (LEFT);              // Text links ausgerichtettext ("LEFT", X_pos, 70); textAlign (CENTER);            // Text mittig ausgerichtettext ("CENTER", X_pos, 110);textAlign (RIGHT);             // Text rechts ausgerichtettext ("RIGHT", X_pos, 150);

// Processing-Sketch: 10.1.6.1 Text vertikal ausrichten_4a.pdePFont font;        // Variable zum Ablegen des Schriftschnittessize(500, 180);    // Größe des Grafikfenstersbackground (225);  // Hintergrund hell-grau einfärbenfill (0);          // Schriftfarbe schwarzstroke(153);font = loadFont ("ArialMT-48.vlw"); // Laden der Schrift in die Variable 'font'textFont (font);   // Setze die Schrift 'font' als Standardschriftfloat Y_pos = 90;  // Variable für die x-Position des Textesline (0, Y_pos, width, Y_pos);  // horizontale Linie an der Textposition textAlign(LEFT, BOTTOM);  // Text links-unten ausgerichtetline(0, 50, width, 50);text("LEFT g BOTTOM", 0, 50);textAlign(CENTER, CENTER); // Text mittig ausgerichtetline(0, 90, width, 90);text("CENTER g CENTER", width/2, 90);textAlign(RIGHT, TOP);     // Text rechts-oben ausgerichtetline(0, 130, width, 130);text("RIGHT g TOP", width, 130);




1.7 Textbreite

• textWidth() gibt die Breite eines Textes für die aktuell mit textFont() gesetzte Schrift zurück - in Abhänigkeit von textSize().
  
• Als einzigen Parameter wird der Text übergeben. textWidth()

• float breite = textWidth("Wie breit bin ich?");