Februar 24, 2012

Bei dieser Übung ging es darum ein Bild mit Buchstaben nachzuzeichnen und den Umgang mit Text und Fonts in Processing aufzufrischen. Nach einigen Experimenten werden dunklere Bildstellen mit grösseren Buchstaben dargestellt und die Farbe vom jeweiligen Bildpixel übernommen. Die Buchstaben richten sich nach dem Mauszeiger aus und bei Klick ins Bild vergrössern sie sich kreisförmig um die Maus herum, sodass ein Lupeneffekt entsteht. Der Effekt ist animiert, sodass sie sich allmählich vergrössern und beim Loslassen der Maus wieder nach und nach verkleinern.

Processing

Main

PImage img;
import processing.opengl.*;
PFont font;
String[] images = { "nose-portrait-i2.jpg", "00037803-SPP-actors-007.JPG",
"hannah_havoc_portrait_01.jpg","BlackAndWhiteFemalePortraits1_8.jpg", "Male-Portrait-Black-And-White.jpg",
"portraits_of_celebrities_by_renaud_monfourny_640_03.jpg","screenshot58.jpg"};
int imgCounter;
boolean mouseP=false;
boolean randomLetters=false;

ArrayList data= new ArrayList();
int letterCounter;

import processing.video.*;
Capture myCapture;

void setup() {
  frameRate(12);
  smooth();
  size(800, 800, OPENGL);
  img = loadImage(images[0]);
  font = loadFont("Univers-24.vlw");
  reset();
}

void reset() {
  data= new ArrayList();
  float x=0, y=10;
  // recreate object when new image is loaded
  while(yimg.width) imgX = img.width;
    if (imgY>img.height) imgY = img.height;
    color c = img.pixels[imgY*img.width+imgX];
    // create new letter object
    Letter l = new Letter(x,y,c,font);
    l.draw(true);
    data.add(l);
    x = l.getPosX();
    y = l.getPosY();

    float letterWidth = l.getLetterWidth();
    if (x+letterWidth >= img.width) {
      x=0;
      y=y+l.spacing;
    }
  }
  println(data.size());
}

void draw() {

  pushMatrix();
  // center image
  translate((width-img.width)/2, (height-img.height)/2);
  // set background color by picking image color (50/50)
  color b = img.pixels[50*img.width+50];
  background(red(b),green(b),blue(b));
  float x=0, y=10;
  letterCounter=0;

  while(y
    if (letterCounter= img.width) {
        x=0;
        y=y+l.spacing;
      }
      letterCounter++;
      } else {
       letterCounter=0;
      }
    }
    // NOTE
    popMatrix();
    fill(255-red(b),255-green(b),255-blue(b));
    textFont(font, 10);
    text("Key [A]: Change Image - Key [R]: Random Letters", 12, height-12);
}

void keyPressed() {
  switch(key) {
    case 'a':
      // LOAD NEXT IMAGE
      imgCounter++;
      if (imgCounter>=images.length) imgCounter=0;
      img = loadImage(images[imgCounter]);
      reset();
    break;
    case 'r':
      // TOGGLE RANDOM LETTERS
      randomLetters= (randomLetters==false) ? true : false;
      break;
    case 'p':
      // SAVE SCREENSHOT
      save("screen/screen_"+year()+"-"+month()+""+day()+"_"+hour()+"-"+minute()+"-"+second());
    break;
    default:
    break;
  } // switch
}
void mousePressed() {
  mouseP=true;

}
void mouseReleased() {
  mouseP=false;
}

void captureEvent(Capture myCapture) {
  myCapture.read();
}

Class Letter

class Letter {

  PFont font;
  int fontSizeMax = 24;
  int fontSizeMin = 1;
  String inputText ="AQWERTZUIOPLKJHNMBGFVDCXSAY";
  int kerning = 4;
  int spacing = 4;
  float animPlus = 5;
  float animDir = 1;
  float letterWidth;
  float letterWidthStart;
  float posX;
  float posY;
  color c;
  int counter;
  PVector startPos = new PVector();
  PVector endPos = new PVector();
  PVector startPosDir = new PVector();
  int letterIndex;
  boolean mouseP=false;
  float fontSize;
  float fontSizeStart;
  float fontSizeClick;
  int greyscale;
  float imgPosX;
  float imgPosY;
  boolean randomLetters=false;

  Letter(float _x, float _y, color _c, PFont _f) {
    posX = _x;
    posY = _y;
    c = _c;
    font = _f;
    letterIndex = int(random(inputText.length()));
    greyscale = round(red(c)*0.222 + green(c)*0.707+blue(c)*0.071);
    fontSizeStart = map(greyscale, 0, 255, fontSizeMax, fontSizeMin) + animPlus;
  }
  void setPos(float _x, float _y) {
    posX = _x;
    posY = _y;
  }
  void setMouseP(boolean _p) {
     mouseP=_p;
  }
  void setImgPos(float _x, float _y) {
    imgPosX = _x;
    imgPosY = _y;
  }
  void draw(boolean ini) {

    // distance mouse (position image: centering -> subtraction)
    startPos.set(mouseX-imgPosX, mouseY-imgPosY, 0);
    endPos.set(posX, posY, 0);
    PVector dir = PVector.sub(endPos, startPos);
    float mouseDistance = dir.mag();
    startPosDir.set(mouseX-posX-imgPosX, mouseY-posY-imgPosY, 0);

    // angle of letter to mouse position
    float mouseDirection = PVector.angleBetween(endPos,startPosDir);

     // get cross vector to determine direction (in which half circle) to complete 360 deg
    PVector v3 = startPosDir.cross(endPos);
    if (v3.z>0) {
      mouseDirection = radians(360-degrees(mouseDirection));
    }
    pushMatrix();
    translate(posX, posY);
    rotate(mouseDirection); // rotate letter in mouse direction

    // letter size (animation mouse click)
    if (ini==false) {
      if (mouseP==true) {
        fontSizeClick = fontSizeStart + map(abs(mouseDistance),0,width/8,fontSizeMax,10);
        fontSize+= fontSizeClick/4;
      } else {
        if (abs(fontSize-fontSizeStart)>1) {
          fontSize+= (fontSizeStart-fontSize)/4;
        } else {
          fontSize = fontSizeStart;
        }
      }
    } else {
      fontSize = fontSizeStart;
    }

    fontSize = max(fontSize, 1);
    if (fontSize>fontSizeMax*2) fontSize = fontSizeMax*2;
    if (mouseP==true && fontSizeinputText.length()-1) counter=0;
  }
  float getPosX() {
    return posX;
  }
  float getPosY() {
    return posY;
  }
  float getLetterWidth() {
    return letterWidth;
  }
}