1 Image and Video Processing



Image processing 2D


    PImage img;
    String filterType = "circles";
    
    void setup() {
      size(600, 700);
      img = loadImage("flower.jpg");
      ellipseMode(CENTER);
    }
    
    void draw() {
      background(255);
      img.loadPixels();
      
      if (filterType == "grey"){
        colorMode(HSB);
        drawGrey();
      
      }
      if (filterType == "circles"){
        colorMode(RGB);
        drawCircles();
      }
      if (filterType == "lookingglass"){
        colorMode(RGB);
        drawLookingglass();
      }
    
    }
    
    void keyPressed(){
      if(key == '1'){
        filterType = "grey";
        println("1");
      }
      if(key == '2'){
        filterType = "circles";
        println("2");
      }
      if(key == '3'){
        filterType = "lookingglass";
        println("3");
      }
    }
    
  void drawGrey(){
  
  for (int x = 0; x < img.width; x+=10) {
    
      for (int y = 0; y < img.height; y+=10 ) {
        int loc = x + y*img.width;
        // Get the R,G,B values from image
        float h = hue   (img.pixels[loc]);
        float s = saturation (img.pixels[loc]);
        float b = brightness  (img.pixels[loc]);
        s = mouseY/2;
        s = constrain(s,0,255);
        b = mouseX/2;
        b = constrain(b,0,255);
        color c = color(h,s,b);
        
        fill(c);
        noStroke();
        rect(x,y,10,10);
      } 
    }
}

void drawCircles(){
  for (int x = 0; x < img.width; x+=mouseX/10+1) {
      for (int y = 0; y < img.height; y+=mouseX/10+1 ) {
        int loc = x + y*img.width;
        // Get the R,G,B values from image
        float r = red   (img.pixels[loc]);
        float g = green (img.pixels[loc]);
        float b = blue  (img.pixels[loc]);
        color c = color(r,g,b);
        
        fill(c);
        noStroke();
        ellipse(x,y,mouseY/10+1,mouseY/10+1);
      } 
    }
}


void drawLookingglass(){
  loadPixels();
  for (int x = 0; x < img.width; x++) {
    for (int y = 0; y < img.height; y++ ) {
      // Calculate the 1D pixel location
      int loc = x + y*img.width;
      // Get the R,G,B values from image
      float r = red   (img.pixels[loc]);
      float g = green (img.pixels[loc]);
      float b = blue  (img.pixels[loc]);
      // Calculate an amount to change brightness 
      // based on proximity to the mouse
      float distance = dist(x,y,mouseX,mouseY);
      float adjustBrightness = (150-distance)/50;  
      r *= adjustBrightness;
      g *= adjustBrightness;
      b *= adjustBrightness;
      // Constrain RGB to between 0-255
      r = constrain(r,0,255);
      g = constrain(g,0,255);
      b = constrain(b,0,255);
      // Make a new color and set pixel in the window
      color c = color(r,g,b);
      pixels[loc] = c;
    }
  }
  updatePixels();
  
}
    

Image processing 3D

  
    import peasy.PeasyCam;
    PeasyCam cam;
    PImage img;
    int cellsize;
    
    void setup() {
      size(600, 700, P3D);
      cam = new PeasyCam(this, 400);
      cam.lookAt(width/2,height/2,0);
      img = loadImage("flower.jpg");
      noStroke();
      rectMode(CENTER);
    }
        
    void draw() {
      background(230);
      cellsize = (mouseY/5)+5;
      //cellsize = 50;
      
      for ( int x = 0; x < img.width; x+=cellsize) { // this is the main for loop
        for ( int y = 0; y < img.height; y+=cellsize) {
          int loc = x + y*img.width;        
          loc = constrain(loc, 0, 600*700);
          color c = img.pixels[loc];      
          
          float z = (mouseX/(float)width) * brightness(img.pixels[loc]) - 100.0;
          pushMatrix();
            translate(x,y,z);
            fill(c, 100);
            box(cellsize);
          popMatrix();
        }
      }
}
    

Assignment 1
1. Programm your own 2D image filter/effect.
2. Make a 3D version of it.


Video processing 2D

Video

  import processing.video.*;
    Movie myMovie;
    
    void setup() {
      size(1080, 19200);
      myMovie = new Movie(this, "jellyfish.mp4");
      myMovie.loop();
    }
    
    void draw() {
      tint(255, 20);
      image(myMovie, mouseX, mouseY);
    }
    
    // Called every time a new frame is available to read
      void movieEvent(Movie m) {
      m.read();
    }

    

Video download (Video by Anastasiya Vragova)

Webcam

First of all, the Video Library must be imported:


  import processing.video.*;
  
  

Then we declare a capture object:


  Capture video;
  
  

The library processing.video contains two very useful classes: "Capture" for live video (e.g. webcam) and "Movie" for playing existing video clips. Now the Capure object has to be initialized:


  video = new Capture(this, 800, 600);
  
  

During initialization three parameters are defined: this, the width of the captured video in pixels and the height.

Now the image capture can be started. This is done with the start() function that the Video class provides us with:


  video.start();
  
  

Finally, the video image is drawn by the image() function:


  image(video, 0, 0);
  
  

Events are already known as mousePressed() etc.: whenever a certain event occurs a corresponding function is executed. If the event "mouse button pressed" occurs, the function mousePressed() is executed. The event captureEvent belongs to the video capture, it always occurs when the camera has recorded a new image and makes it available. Then the event function captureEvent(Camera) is executed. It is recommended to use this function to read the latest image from the camera by the code:


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

Hier nun im folgenden Beispiel-Code noch einmal die Einzelnen Schritte zusammengefasst:

Beispiel 2-10


  import processing.video.*;          // Die Video-Library importieren
  
  Capture video;                          // Das Capture-Objekt deklarieren
  
  void setup() {
    size(1280, 720);
    video = new Capture(this, 1280, 720);     // Apple Facetime-Cam HD Auflösung
    video.start();
  }
  
  void draw() {
    image(video, 0, 0);                   // stelle des Video-Bild im Ausgabefenster dar
  }
  
  void captureEvent(Capture video) {
    video.read();                         // das verfügbare Bild der Kamera auslesen
  }
  
  

  import processing.video.*;          // Die Video-Library importieren
  
  Capture video;                          // Das Capture-Objekt deklarieren
  int cellsize = 10; 
  
  void setup() {
    size(1280, 720);
    video = new Capture(this, 1280, 720);     // Apple Facetime-Cam HD Auflösung
    video.start();
  }
  
  void draw() {
    background(0);
    video.loadPixels();  
    for ( int x = 0; x < video.width; x+=cellsize) { // this is the main for loop
      for ( int y = 0; y < video.height; y+=cellsize) {
        int loc = x + y*video.width;        
  
        // Get the red, green, blue values from a pixel      
        float r = red  (video.pixels[loc]);      
        float g = green(video.pixels[loc]);      
        float b = blue (video.pixels[loc]);    
        color c = color(r, g, b);      
        
        float currentBrightness = brightness(video.pixels[loc]);
        if (currentBrightness > 200){   
           fill(c,50);
        }else{
          fill(0,0,0,50);
        }
        rect(x,y,currentBrightness,currentBrightness);
      }
    }
  }
  
  void captureEvent(Capture video) {
    video.read();                         // das verfügbare Bild der Kamera auslesen
  }
  
        

Video processing 3D





Exporting bitmap graphics and PDFs

Windowshots: save()

The save() function saves a screenshot of the output window. The file format can be defined by appending a file extension: .tif, .tga, . jpg, and .png are possible. If no file extension is specified, a TIFF is created. The files are saved to the sketch folder.

    float offsetX = 0.0;
    float offsetY = 3.0;
    float radius = 15.0;
    
    void setup(){
      size(800,600);
      noStroke();
    }
    
    void draw() {
      fill(255, 10);
      rect(0,0,width, height);
      offsetX = offsetX + .01;
      offsetY = offsetY + .05;
      float x = noise(offsetX) * width;
      float y = noise(offsetY) * height;
      fill(0);
      ellipse(x, y,radius,radius);
    }
    
    void keyPressed(){
      if(key == 's'){
      save("screenshot.jpg");
      }
    }
      

Exporting PDFs

If you want to use your generative design in print projects or vector drawing programs such as Illustrator, it can be useful to export vector data from Processing rather than bitmap data. This can be achieved by "recording" PDF data.

To export PDFs from Processing, the according library must be imported at the beginning of the sketch:

 import processing.pdf.*;

The easiest way is to start and stop the "recording" by the corresponding function.
After all shapes to be recorded are drawn, the recording is ended with endRecord() and the PDF file is written. It is essential to call the exit() function at the end. Otherwise the sketch would not end or the PDF would not be created correctly if you cancel the execution of the sketch manually.

    import processing.pdf.*;

    void setup() {
      size(400, 400);
      noLoop();
      beginRecord(PDF, "filename.pdf");
    }
    
    void draw() {
      // Draw something good here
      line(0, 0, width/2, height); 
      endRecord();
    }
  

Project "The Museum in 25 Years", commissioned by the "Museumsbund Österreich". Generative illustrations in Processing, print 5C offset printing (4C + Silver). (Andreas Pirchner, 2014)


  import processing.video.*;          // Die Video-Library importieren
  import processing.pdf.*;

  int stepsize = 10;  
  float threshold;

  boolean record = false;

  Capture video;                          // Das Capture-Objekt deklarieren

  void setup() {
    size(1280, 720);
    video = new Capture(this, 1280, 720);     // Apple Facetime-Cam HD Auflösung
    video.start();
    //noStroke();
  }

  void draw() {
    background(255);
    //image(video, 0, 0);                   // stelle des Video-Bild im Ausgabefenster dar
    //stepsize = mouseX/10+2;
    threshold = mouseX/4+2;
    for(int y = 0; y < video.height; y = y + stepsize){
      for(int x = 0; x < video.width; x = x + stepsize){
          int loc = x + y*video.width;
          
          float r = red(video.pixels[loc]);
          float g = green(video.pixels[loc]);
          float b = blue(video.pixels[loc]);
          
          float h = hue(video.pixels[loc]);
          float s = saturation(video.pixels[loc]);
          float br = brightness(video.pixels[loc]);
          
          color c = color(r, g, b, 50);
          
          if(br > threshold){
            fill(c);
            rect(x, y, mouseY/4, mouseY/4);
          }  
      }
    }
    if (record == true){
      record = false; 
      endRecord();
      println("record ended");
    }
  }

  void captureEvent(Capture video) {
    video.read();                         // das verfügbare Bild der Kamera auslesen
  }

  void keyPressed(){
    if(key == 's'){
      save("screenshot_"+random(1000000)+".png");
    }
    
    if(key == 'p'){
      beginRecord(PDF, "screenshot_"+random(1000000)+".pdf");
      record = true;
      println("record started");
    }
  }

Assignment 1-2
3. Make a version of your earlier effects for videos.
4. Export 3 PDF stills