example
Example
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 16-7: Video pixelation

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
int videoScale = 8;
// Number of columns and rows in our system
int cols, rows;
// Variable to hold onto Capture object
Capture video;

void setup() {
  size(640,480);
  
  // Initialize columns and rows
  cols = width/videoScale;
  rows = height/videoScale;
  video = new Capture(this,cols,rows,30);
}

void draw() {
  // Read image from the camera
  if (video.available()) {
    video.read();
  }
  video.loadPixels();
  
  // Begin loop for columns
  for (int i = 0; i < cols; i++) {
    // Begin loop for rows
    for (int j = 0; j < rows; j++) {
      
      // Where are we, pixel-wise?
      int x = i*videoScale;
      int y = j*videoScale;
      // Looking up the appropriate color in the pixel array
      color c = video.pixels[i + j*video.width];
      fill(c);
      stroke(0);
      rect(x,y,videoScale,videoScale);
    }
  }
}
  • Ashlee

    Hey
    is there a way to still have the pixels but not have the black out line ?

  • admin

    Yes, replace stroke(0) with noStroke()

  • Norraniti_p

    Hi, I was wondering is it possible to combine 2 code (tracking color and pixelate)

    import processing.video.*;

    // Size of each cell in the grid, ratio of window size to video size
    int videoScale = 8;
    // Number of columns and rows in our system
    int cols, rows;

    // Variable to hold onto Capture object

    Capture video;

    color trackColor;

    void setup() {
     
      size(640,480);
     
      // Initialize columns and rows
      cols = width/videoScale;
      rows = height/videoScale;
      video = new Capture(this,cols,rows,30);
     
      // Start off tracking for red
      trackColor = color(255,200,200);
      smooth();
    }

    void draw() {
     
      if (video.available()) {
        video.read();
      }
      video.loadPixels();
     
       // Begin loop for columns
      for (int i = 0; i < cols; i++) {
        // Begin loop for rows
        for (int j = 0; j < rows; j++) {
         
          // Where are we, pixel-wise?
          int x = i*videoScale;
          int y = j*videoScale;
         
          // Looking up the appropriate color in the pixel array
          color c = video.pixels[i + j*video.width];
          fill(c);
          stroke(0);
          rect(x,y,videoScale,videoScale);
        }
      }
     

      float worldRecord =500;

      int closestX = 0;
      int closestY = 0;

      for (int x = 0; x < video.width; x ++ ) {
        for (int y = 0; y < video.height; y ++ ) {
          int loc = x + y*video.width;

          color currentColor = video.pixels[loc];
          float r1 = red(currentColor);
          float g1 = green(currentColor);
          float b1 = blue(currentColor);
          float r2 = red(trackColor);
          float g2 = green(trackColor);
          float b2 = blue(trackColor);

          float d = dist(r1,g1,b1,r2,g2,b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

          if (d < worldRecord) {
            worldRecord = d;
            closestX = x;
            closestY = y;
          }
        }
      }

      if (worldRecord < 10) {
       
        fill(trackColor);
        strokeWeight(3.0);
        stroke(0);
       rect(closestX,closestY,10,10);
       
        if (worldRecord < 2000) {
         
        fill(trackColor);
        strokeWeight(3.0);
        stroke(0);
        rect(closestX,closestY,15,15);
      }
    }
    }

    This is so far I have done to combine the code but I'm still not sure is it correct or not
    please advise me
    thank you so so much

  • shiffman

    Looks good, As an exercise, you could try to see if you can do both the pixelation and the tracking in one for loop. 

  • Manuel Almeida

    I only see a black screen, even if I put video.start() in setup()

  • shiffman
  • Shubham

    I only see a black screen

  • shiffman

    Please see updated examples: https://github.com/shiffman/LearningProcessing Will revamp this site when I get a chance.

  • bigguy

    how would you pixellate like this but with an image

  • shiffman

    use PImage instead of Capture.

  • Louise Robson

    How could I do this but make the pixels really large? I’m looking to do this but have say only 10 pixels going across the screen

  • shiffman

    play with the videoScale variable.

  • Louise Robson

    I have done that, but it seems to just zoom in to a section of the video rather than use the whole video area?

  • shiffman

    you could try scale() or else you will have to implement some logic to loop through only the pixels you want.

  • MedicOnDutyVids .

    I keep getting an ArrayIndexOutOfBoundsException at “color c = video.pixels[i + j*video.width];”. Any help?