Text Visualisierung | processing

Inspiriert von einem Sketch von Diane Lange, in dem „Die Bürgschaft“ von Schiller visualisiert wird, wollte ich auch mal was in der Richtung machen. Der Rechner sollte bei mir aber kein Graphiker sein, sondern ein Maler. Mir war es auch nicht so wichtig, dass der Connex zwischen dem visualisierten Buch und dem Bild, das daraus entstehen sollte allzu deutlich hervor tritt. Es ging mir eher darum, dem Computer, basierend auf einfachen Textattributen (Anzahl der Wörter, Anzahl unterschiedlicher Wörter, durchschnittl. Satzlänge, und einigen Verhältnissen daraus) schöne und sich durchaus voneindander unterscheidende Bilder generieren zu lassen.

Die Grundform ergibt sich aus Lissajous Figuren, deren Komplexität sich aus den Attributen des Textes ergibt. Es werden in 2 Schritten erst die stark weichgezeichneten Formen im Hintergrund gezeichnet. Das könnte man wahrscheinlich viel effizienter programmieren. Mir war das allerdings nicht so wichtig, da der Output ja ohnehin Bilder sein sollten. In einem zweiten Schritt werden dann die feinen Strukturen im Vordergrund gezeichnet, wobei hier alle unterschiedlichen Wörter einmal entlang der Form der Lissajous Figur platziert und dann mit dem nächsten Wort im Text verbunden werden. Diese Verbindungslinien werden nicht nur innerhalb der Figuren in schwarz, sondern auch über diese hinaus und dann in einem hellen Grauton gezeichnet.

starte Applet

Source Code findet sich im Applet!

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

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