Schlagwort-Archive: Text

Projekt Bild aus Text


Processing 2.0

Dieses Programm liest ein Bild ein und bildet es aus einem frei wählbaren Text neu. Dabei wird die Größe der Buchstaben von der Helligkeit der Bildstelle bestimmt und der Buchstabe in der Farbe der Bildstelle gezeichnet. Dies kann aber, so wie auch die Max- und Minimalgröße der Buchstaben zur Laufzeit des Programms geändert werden.

Wie das funktioniert, ist in den Kommentaren beschrieben.

Beispiel: Das Henne-Ei-Problem

ImageImage

// Generative Gestaltung, ISBN: 978-3-87439-759-9
// First Edition, Hermann Schmidt, Mainz, 2009
// Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni
// Copyright 2009 Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni
//
// modified by 2010 Thomas Koberger
//
// http://www.generative-gestaltung.de
//
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
* pixel mapping. each pixel is translated into a new element (letter)
*
* KEYS
* 1                 : toogle font size mode (dynamic/static)
* 2                 : toogle font color mode (color/b&w)
* arrow up/down     : maximal fontsize +/-
* arrow right/left  : minimal fontsize +/-
* s                 : save png
* p                 : save pdf
*/

import processing.pdf.*;
import java.util.*;
boolean savePDF = false;

String inputText ="Henne"; //modified
float fontSizeMax = 50;
float fontSizeMin = 14;
float spacing = 20; // Zeilenabstand
float kerning = 0.5; // Abstand zwischen den Buchstaben

boolean fontSizeStatic = false;
boolean blackAndWhite = false;

PFont font;
PImage img;
int textstellen=0;//darin wird gespeichert, wie oft der Text ausgegeben wurde

void setup() {
size(800, 800);
smooth();

//falls es Probleme mit der Darstellung der richtigen Schrift
//geben sollte, kann man die Schrift auch von Hand erstellen und
//dann aus dem Programmordner laden (wie im Artikel Text beschrieben!

font = createFont("Impact",60); //modified
img = loadImage("ei.jpg");//modified
println(img.width+" x "+img.height);
}

void draw() {
background(255);
//ermöglicht das speichern als *.pdf
if (savePDF) beginRecord(PDF, timestamp()+".pdf");

textAlign(LEFT);
//textAlign(LEFT,CENTER); //// also nice!

float x = 0, y = 0; //sorgt dafür, dass ein 100 Pixel breiter Rand frei  bleibt
int counter = 0;

while (y < height-0) {
// translate position (display) to position (image)
// die Zahl 100 steht für 100 Pixel, die als Rand freigelassen werden.
int imgX = (int) map(x, 0,width, 0,img.width);
int imgY = (int) map(y, 0,height, 0,img.height);
// get current color
color c = img.pixels[imgY*img.width+imgX];
//wandelt eine Farbe in einen Grauwert um
int greyscale = round(red(c)*0.222 + green(c)*0.707 + blue(c)*0.071);
// speichert die Position des Koordinatensystems
pushMatrix();
//verschiebt das Koordinatensystem um x und y
translate(x, y);

if (fontSizeStatic) {
textFont(font, fontSizeMax);
if (blackAndWhite) fill(greyscale);
else fill(c);
}
else {
// das ist die Standardeinstellung zu Beginn des Programms
// greyscale to fontsize
float fontSize = map(greyscale, 0,255, fontSizeMax,fontSizeMin);
fontSize = max(fontSize, 1);
textFont(font, fontSize);
if (blackAndWhite) fill(0);
else fill(c);
}
//hier wird der jeweils nächste Buchstabe in die Variable letter geschrieben
char letter = inputText.charAt(counter);
//gibt den Text am Bildschirm aus
text(letter, 0, 0);
float letterWidth = textWidth(letter) + kerning;
// for the next letter ... x + letter width
x = x + letterWidth; // update x-coordinate
popMatrix();

// linebreaks
if (x+letterWidth >= width-100) {
x = 100;
y = y + spacing; // add line height
}

counter++;
// damit der Text wiederholt ausgegeben wird
if (counter > inputText.length()-1) {
textstellen++;
counter = 0;
}
}

if (savePDF) {
savePDF = false;
endRecord();
}
println(textstellen);
}


void keyReleased() {
if (key == 's' || key == 'S') saveFrame(timestamp()+"_##.png");
//if (key == 'p' || key == 'P') savePDF = true;
// change render mode
if (key == '1') fontSizeStatic = !fontSizeStatic;
// change color stlye
if (key == '2') blackAndWhite = !blackAndWhite;
println("fontSizeMin: "+fontSizeMin+"  fontSizeMax: "+fontSizeMax+"   fontSizeStatic: "+fontSizeStatic+"   blackAndWhite: "+blackAndWhite);
}

void keyPressed() {
// change fontSizeMax with arrowkeys up/down
if (keyCode == UP) fontSizeMax += 2;
if (keyCode == DOWN) fontSizeMax -= 2;
// change fontSizeMin with arrowkeys left/right
if (keyCode == RIGHT) fontSizeMin += 2;
if (keyCode == LEFT) fontSizeMin -= 2;

//fontSizeMin = max(fontSizeMin, 2);
//fontSizeMax = max(fontSizeMax, 2);
}

// timestamp
String timestamp() {
Calendar now = Calendar.getInstance();
return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

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

Image

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

Image

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!