Februar 28, 2012

Bei dieser Übung ging es darum ein Bild mit Buchstaben nachzuzeichnen und den Umgang mit Text und Fonts in Processing aufzufrischen. Bei dieser Übung wurden die Pixels mit Zeichen / SVG ersetzt.

PShape[] shapes;
int shapeCount = 0;

PImage img;

void setup() {
 size(800, 533);
 smooth();
 img = loadImage("ente.jpg");
 File dir = new File(sketchPath, "data");
 if (dir.isDirectory()) {
 String[] contents = dir.list();
 shapes = new PShape[contents.length];
 for (int i = 0 ; i < contents.length; i++) {
 if (contents[i].charAt(0) == '.') continue;
 else if (contents[i].toLowerCase().endsWith(".svg")) {
 File childFile = new File(dir, contents[i]);
 shapes[shapeCount] = loadShape(childFile.getPath());
 shapeCount++;
 }
 }
 }
}

void draw() {
 background(255);
 shapeMode(CENTER);
 float mXf = map(mouseX, 0, width, 1, 1);
 float mYf = map(mouseY, 0, height, 1, 1);

for (int gridX = 0; gridX < img.width; gridX++) {
 for (int gridY = 0; gridY < img.height; gridY++) {
 // grid position + tile size
 float tileW = (width / (float)img.width)*mXf;
 float tileH = (height / (float)img.height)*mYf;
 float posX = tileW*gridX;
 float posY = tileH*gridY;
 color c = img.pixels[gridY*img.width+gridX];

int greyIndex = round(red(c)*0.222+green(c)*0.707+blue(c)*0.071);
 int greyToIndex = round(map(greyIndex, 0, 255, 0, shapeCount-1));
 shape(shapes[greyToIndex], posX, posY, tileW, tileH);
 }
 }
}

Bei dieser Übung wurden die Pixels mit einem Text ersetzt.

String inputText = "Zu Beginn lernen wir die Grundlagen von Processing und wie damit Bild-, Video- und 3D Daten verarbeitet werden. Während dieser Zeit werdet Ihr einzeln arbeiten. Nach der Auffrischung werden wir uns einem konkreten Projekt widmen: ein Public Display für den Eingangsbereich des Toni Areals. Für das Projekt werdet ihr in Gruppen arbeiten.";
float fsMax = 20;
float fsMin = 3;
float spacing = 4;
float kerning = 0.5;

boolean fsStatic = false;
boolean bandw = false;

PFont font;
PImage img;

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

 font = createFont("Times",10);

 img = loadImage("ente.jpg");
 println(img.width+" x "+img.height);
}

void draw() {

background(255);
 textAlign(LEFT);

float x = 0, y = 10;
 int counter = 0;

while (y < height) {

 int imgX = (int) map(x, 0,width, 0,img.width);
 int imgY = (int) map(y, 0,height, 0,img.height);

color c = img.pixels[imgY*img.width+imgX];

 int greyindex = int(brightness(c));
 pushMatrix();
 translate(x, y);

if (fsStatic) {
 textFont(font, fsMax);
 if (bandw) fill(greyindex);
 else fill(c);
 }
 else {

 float fontSize = map(greyindex, 0,255, fsMax,fsMin);
 fontSize = max(fontSize, 1);
 textFont(font, fontSize);
 if (bandw) fill(0);
 else fill(c);
 }

char letter = inputText.charAt(counter);
 text(letter, 0, 0);
 float letterWidth = textWidth(letter) + kerning;

x = x + letterWidth;
 popMatrix();
 if (x+letterWidth >= width) {
 x = 0;
 y = y + spacing;
 }

counter++;
 if (counter > inputText.length()-1) counter = 0;
 }
}
void keyReleased() {
 if (key == '1') fsStatic = !fsStatic;

if (key == '2') bandw = !bandw;
 println("fsMin: "+fsMin+" fontSizeMax: "+fsMax+" fsStatic: "+fsStatic+" bandw: "+bandw);
}

void keyPressed() {

 if (keyCode == UP) fsMax += 2;
 if (keyCode == DOWN) fsMax -= 2;

 if (keyCode == RIGHT) fsMin += 2;
 if (keyCode == LEFT) fsMin -= 2;

fsMin = max(fsMin, 2);
 fsMax = max(fsMax, 2);
}