Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

03 Eigenen Filter erstellen

Februar 23, 2012

Bei dieser Aufgabe habe ich die Farbwerte eines Bildes in Farbpunkte aufgerastert (wie Zeitungsdruck). Das Raster lässt mit der Mausbewegung vergrössern und verkleinern. Ein Rasterpunkt besteht aus einem roten, grünen und blauen Kreis die leicht verschoben dargestellt werden. Jeder Rasterpunkt ist ein Objekt der Colordot-Klasse und beinhaltet die Farbwerte, Grösse, Abstand zur Maus etc.

Processing

Main

PImage myImage;
import processing.opengl.*;
int greenUpdate;
int greenAnim=1;
int blueUpdate;
int blueAnim=1;
int redUpdate;
int redAnim=1;
float mouseInputX;
float wheelInput;
float zoom;
PVector startPos = new PVector();
PVector endPos = new PVector();
ArrayList data= new ArrayList();
// circles
int circleMaxWidth=40;
int circleMinWidth=3;

String[] images = {
  "henry.jpg",
  "seed-bomb-poster.jpg",
  "nose-portrait-i2.jpg",
  "172682_f520.jpg",
  "music galloway 2-3L-jonhuck.com-breakfast-.jpg",
  "sam-alfano.jpg",
  "tiger01_ cargocollective_com_ mattstevens.jpg" };
int imageIndex=0;

void setup() {
  /*addMouseWheelListener(new java.awt.event.MouseWheelListener() {
   public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) {
   mouseWheel(evt.getWheelRotation());
   }}); */
  smooth();
  imageMode(CENTER);
  myImage = loadImage(images[imageIndex]);
  reset();
  size(800, 600, OPENGL);
}

void reset() {
 data= new ArrayList();
  myImage.loadPixels();
  // make dots objects
  for (int i = 0; i < myImage.pixels.length;i++ ) {
      // get image color
      float r = red(myImage.pixels[i]);
      float g = green(myImage.pixels[i]);
      float b = blue(myImage.pixels[i]);
      // add dot object to arraylist
      Colordot tmp = new Colordot(r, g, b);
      data.add(tmp);
  }
}

void draw() {
  background(0);

  // control lines mouse movement
  fill(204);
  rect(width/2,0,1,8);
  rect(width/2,height-8,1,8);
  rect(0,height/2,8,1);
  rect(width-8,height/2,8,1);

  rect(mouseX,8,1,8);
  rect(mouseX,height-16,1,8);
  rect(8,mouseY,8,1);
  rect(width-16,mouseY,8,1);

  pushMatrix();
  translate((width-myImage.width)/2,(height-myImage.height)/2);
  // Loop through every pixel
  for (int x = 0; x < myImage.width; x++ ) { // We can get the length of the pixels array just like with any array.
    for (int y = 0; y < myImage.height; y++ ) {       int loc = x + y * myImage.width; // The location in the pixel array is calculated via our formula: 1D pixel location = x + y * width       // access dot object       Colordot tmp =  (Colordot) data.get(loc);       float mouseDistance = (width/2)-mouseX;       // mouse distance image center       startPos.set(mouseX,mouseY,0);       endPos.set(width/2,height/2,0);       PVector dir = PVector.sub(endPos,startPos);       mouseDistance = dir.mag();       // mouse distance dot       startPos.set(mouseX,mouseY,0);       endPos.set(x,y,0);       PVector dir2 = PVector.sub(endPos,startPos);       float mouseDistanceCircle = dir2.mag();              if (mouseDistance>(width/2)) {
        mouseInputX = map(mouseDistance, 0, -1*(width/2), circleMinWidth, circleMaxWidth);
      } else {
        mouseInputX = map(mouseDistance, (width/2), 0, circleMaxWidth, circleMinWidth);
      }
      if (abs(mouseInputX) draw dots
        tmp.setPos(x,y);
        tmp.setMouseDistance(mouseDistanceCircle);
        tmp.draw(mouseInputX);
       }
    }
  }
  popMatrix();
}

void keyPressed() {
  switch(key) {
    case 'a':
      // load next image
      imageIndex++;
      if (imageIndex>=images.length) imageIndex=0;
      myImage = loadImage(images[imageIndex]);
      reset();
    break;
    // save screenshot
    case 'p':
     save("screen/screen_"+year()+"-"+month()+""+day()+"_"+hour()+"-"+minute()+"-"+second());
    break;
    default:
    break;
  } // switch

}

Class Colordot

class Colordot {

  float r;
  float g;
  float b;
  float x;
  float y;
  float circleMaxDiv = 1.2;
  float mouseInputX;
  float mouseDistance;

 Colordot(float _r, float _g, float _b) {
   r=_r;
   g=_g;
   b=_b;
   ellipseMode(CENTER);
 }
 void setPos(float _x, float _y) {
   x=_x;
   y=_y;
 }
 void setMouseDistance(float _m) {
   mouseDistance=_m;
 }

void  draw(float _mouseInputX) {
  mouseInputX=_mouseInputX; //  + mouseDistance/20
  noStroke();
  // Red Dot
  fill(255,0,0,map(r,0,255,51,255));
  ellipse(x,y,map(r,0,255,0,mouseInputX/circleMaxDiv),map(r,0,255,0,mouseInputX/circleMaxDiv));
  // Gren Dot
  fill(0,255,0,map(g,0,255,51,255));
  ellipse(x+mouseInputX/2,y,map(g,0,255,0,mouseInputX/circleMaxDiv),map(g,0,255,0,mouseInputX/circleMaxDiv));
  // BLue Dot
  fill(0,0,255,map(b,0,255,51,255));
  ellipse(x+mouseInputX/4,y+mouseInputX/2,map(b,0,255,0,mouseInputX/circleMaxDiv),map(b,0,255,0,mouseInputX/circleMaxDiv));
  //println(r+"-"+g+"-"+b);
 }

}