Textausgabe


Processing 2.0

Bevor man Text in Processing ausgeben kann, muss man eine beliebige Schrift zuerst in das .vlw Format konvertieren (Processing –> Tools –> Create Font …).

Bei diesem Vorgang werden der oder die Buchstaben in der angegebenen Größe gerendert. D.h. sei liegen dann als Rastergrafik vor, was zur Folge hat, dass sie nicht mehr beliebig skalierbar sind, sonder man vorher überlegen muss, wie groß die Zeichen sein müssen. Die Rastergrafiken werden in einer .vlw – Datei im Sketch- Ordner des aktuellen Projektes gespeichert.

Alternativ dazu kann man auch im Programm eine Schrift erzeugen, dabei muss man beachten, dass auf einem anderen System die entsprechende Schrift vielleicht nicht installiert ist und sich daraus dann Probleme ergeben. Um Probleme auszuschließen kann mit der Methode Pfont.list() ein Array mit den, auf dem System verfügbaren Schriften erzeugen. Die Anweisung würde dann so aussehen:

String [] fontList=PFont.list();
font = createFont(„Miso“,12);

Im Android Mode sollte man aus Gründen der Effizienz immer die createFont() Funktion nutzen!

Um im Programm auf die Zeichen zugreifen zu können, gibt es einen eigenen Datentyp, nämlich PFont. Um Text auf dem Bildschirm ausgeben zu können, muss man eine Variable (genau genommen ein Objekt) vom Typ PFont erstellen und dann mit der Funktion LoadFont() die Zeichen laden. Mit textFont() muss die aktuelle Schrift ausgewählt werden. Um den Text dann anzeigen zu können benutzt man die Funktion text().

text(daten, x,y);
text(daten, x,y, breite, höhe);

Wobei daten alle Daten von den Typen String, char, int, float enthalten kann.

textSize();

Die Funktion textSize() legt die Schriftgröße fest. Wenn aber die gewählte Schriftgröße größer ist, als der Wert, mit dem die Schrift gerendert wurde, dann wird sie pixelig!

Beispiel: starte Applet

PFont font; //erstellt ein Pfont-Objekt mit dem Namen font

size(300,300);
font = loadFont("ArialMT-48.vlw"); //weist dem Objekt font die Grafiken für die einzelnen Buchstaben zu
textFont(font); //estellt ein Objekt textFont mit dem Parameter font

textSize(240);//setzt die Schriftgröße auf 180 Pixel
fill(255); //legt die Schriftfarbe fest
text(2, 80, 240); //gibt text auf dem Schirm aus
textSize(36);
fill(0);
text("lorem ipsum ...",20,70); //gibt text auf dem Schirm aus

Vorsicht: Bei exotischen Schriften stehen oft nicht alle Zeichen zur Verfügung (Zahlen und Umlaute).

Beispiel: starte Applet

PFont font; //erstellt ein Pfont-Objekt mit dem Namen font

size(300,300);
background(255);
font = loadFont("ArialMT-48.vlw"); //weist dem Objekt font die Grafiken für die einzelnen Buchstaben zu
textFont(font); //estellt ein Objekt textFont mit dem Parameter font
//setzt die Schriftgröße auf 180 Pixel
for (int i=1; i<10; i++) {
fill(0,220-i*20);
textSize(20+i*10);
text(i, i*30-30, 150); //gibt text auf dem Schirm aus
}

textLeading(abstand);

Abstand ist dabei der Abstand der Zeilen in Pixel.

textWidth(float);

Mit der Funktion textWidth() kann man die genaue Breite eines Strings (in Pixel) ermitteln.

textAlign(x-Richtung, y-Richtung);

Mit textAlign kann man die ein Textobjekt ausrichten, wie man das von der Textverarbeitung gewohnt ist. In der horizontalen x-Richtung sind die Parameter LEFT, CENTER und RIGHT möglich. In vertikaler Richtung TOP, BOTTOM, CENTER, und BASELINE.

Einen Zeilenumbruch im Fließtext erreicht man mit \n.

Aufgabe: Schreibe ein Programm, das deinen Nachnamen schön formatiert am Bildschirm ausgibt.

Aufgabe: Überlege Dir, wie man Buchstaben in Kreisform anordnen könnte! Versuche daraus ein Programm zu erstellen!

Advertisements

9 Kommentare

  1. Pingback: Processing – Über dieses Weblog « processing – tutorial

  2. thomas olbrich

    betr.: > Vorsicht: Bei exotischen Schriften stehen oft nicht alle Zeichen zur Verfügung (Zahlen und Umlaute).

    ich habe einen ‚global font‘ in eine .vlw datei konvertiert ( tools > create font ), die beinzeige der sketch auch verwendet und korrekt angezeigt wird, inkl. lateinischer, cyrillischer, asiatischer ect zeichen. beim pdf export gehen die nicht-lateinischen zeichen verloren bzw werden durch unerwünschte ersetzt.

    wie kann ich erreichen, dass alle zeichen einer sketch auch im pdf erscheinen?

    danke für jeden hinweis,
    thomas

  3. Ich verstehe diese Zeile nicht:
    fill(0,220-i*20);

    Warum funktioniert das nur mit dem Wert 0,220? Wenn ich die letzte Null weglasse funktioniert es nicht mehr. jeder andere Wert funktioniert auch nicht. Danke!

    • 001

      …ich bin mir nicht ganz sicher aber „fill“bedeutet ja die füllung mit einer farbe, möglich von 0-255…
      hirbei gibt es drei stellen die mit Komata getrennt sind: „(1,2,3)“.
      Bei der verwendung von einer oder zwei stellen ist es weiß-schwartz.
      wenn ein wert für 220 eingesetzt wird der zu niedrig ist, ist das ergebnis negativ und nicht im bereich von
      0-255,
      wenn die zahl zu hoch ist, ist es auch nicht in diesem bereich.

    • Gastdozent

      for (int i=1; i<10; i++) {
      fill(0,220-i*20);

      Der Zweite Wert steht für 'alpha' (Deckungskraft). Die Schleife zieht inkrementierend immer weitere 20 vom ursprünglichen Wert ab und es bleiben am Schluss noch exakt 20 übrig.

      Wenn du die letze Null weglässt, kann er die Schleife nur exakt einmal ausführen (und es bleiben 2 übrig), er will aber die Schleife 9x ausführen (i<10).

  4. Schade das alle font-tutorials die man findet (selbst auf processing.org) ohne draw und setup methoden gezeigt werden. stehen die nähmlich gibt es nur noch „EOF“ Fehler..

  5. GenerativeNULL

    Hallo, wie sieht das bei otf Schriften aus? Bei mir wirft er da einen Fehler.

  6. GenerativeNULL

    Wiso klappt das mit den Kommentaren nicht?

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: