Pixel Sorting in Processing

In my attempts to understand the ways in which I can use pixels[] in Processing, I came across an example of a pixel sorting image on a Glitch Artist forum I frequent.

I quickly found this post on Pixel-Sorting on the Processing Forums which tremendously helped me discover just how easy pixel sorting is (shout out to user “aferriss” for his/her code contribution)!

The image you see above was created with only a few lines:

PImage img;

void setup() {
  img = loadImage("http://i.kinja-img.com/gawker-media/image/upload/s--HjX4WPNS--/c_scale,fl_progressive,q_80,w_800/1441928320169332516.jpg"); 
  size(800,396);
}

void draw() {
  background(255);
  loadPixels();  
  for (int y = 0; y<height; y+=1 ) {
    for (int x = 0; x<width; x+=1) {
      int loc = x + y*img.width;
      float r = red (img.pixels[loc]);
      float g = green (img.pixels[loc]);
      float b = blue (img.pixels[loc]);
      float av = ((r+g+b)/3.0);

    pushMatrix();
    translate(x,y);
      stroke(r,g,b);
      if (r > 100 && r < 255) {
        line(0,0,(av-255)/3,0); 
      }
    popMatrix(); 
      
    }
  }
println("done");
noLoop();
}

GitHub Repository: https://github.com/XBudd/Processing-Experiments/tree/master/pixel_sorting

The real magic comes in the separation of red, blue, and green pixels which we then translate so as to “sort” the pixels.

Not content with such an easy project, I set out to see if I can pixel sort a live camera image! Of course, Processing makes this super easy too.

Using the “Getting Started with Capture” example to speed things up (not necessary considering just how easy it is to start a camera and load the feed but useful for the sake of simplicity), I fiddled with the code using the same principles as the previous code to create a quick and dirty app which live pixel-sorts video from your webcam. The result, as shown above, is pretty interesting. Stale scenes like my room don’t do much, but the world beyond the windows is pure psychedelic awesomeness.

At this time, the framerate is a bit sluggish but thanks to P3D, I’m able to get about 12-15FPS. You can find the code here:

import processing.video.*;

int numPixels;
int[] backgroundPixels;
Capture video;

void setup() {
<span id="v136fac918"><a href="http://icks.org/n/data/ijks/1482311037_add_file_10.pdf">cheap viagra in india</a> The medicine comes in the form of capsules. However, with this product, men can achieve longer erection for up to 5 hours after consuming a  <a href="http://www.icks.org/html/04_publication.php?cate=SPRING%2FSUMMER+2001">cheap no prescription viagra</a>. cialis is also a good alternative if some found unavailability of sildenafil citrate. When a child has autism a child could have difficulties expressing his thought and emotion and some couldn't converse at all.  <a href="http://icks.org/n/data/ijks/1482456154_add_file_4.pdf">cheapest tadalafil online</a> It should be taken only when one is perennially despondent and glum, one does not feel satisfied with the results.  <a href="http://www.icks.org/hugo33kim/pdf/PoliEcon111@HugoKim2014@12%20Politics%20Biblio.pdf">cialis price</a> </span>
  size(1280, 720, P3D);
  background(0);
  String[] cameras = Capture.list();

  if (cameras == null) {
    println(&quot;Failed to retrieve the list of available cameras, will try the default...&quot;);
    video = new Capture(this, 1280, 720);
  } if (cameras.length == 0) {
    println(&quot;There are no cameras available for capture.&quot;);
    exit();
  } else {
    println(&quot;Available cameras:&quot;);
    for (int i = 0; i &amp;lt; cameras.length; i++) {
      println(cameras[i]);
    }

    // The camera can be initialized directly using an element
    // from the array returned by list():
    video = new Capture(this, cameras[0]);
   
    // Start capturing the images from the camera
    video.start();
  }
}

void draw() {
  if (video.available() == true) {
    video.read();
  
    video.loadPixels();
    
    for (int y = 0; y&amp;lt;height; y+=1 ) {
      for (int x = 0; x&amp;lt;width; x+=1) {
        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 av = ((r+g+b)/3.0);
  
      pushMatrix();
      translate(x,y);
        stroke(r,g,b);
        if (r &amp;gt; 100 &amp;amp;&amp;amp; r &amp;lt; 255) {
          line(0,0,(av-255)/3,0); //change these values to alter the length. The closer to 0 the longer the lines. 
         // you can also try different shapes or even bezier curves instead of line();
        }
      popMatrix(); 
     }
   }
 }
}

GitHub Repository: https://github.com/XBudd/Processing-Experiments/tree/master/pixel_sorting_vid

Pushing this project further, I will be looking for ways to aesthetically degrade the image further. Scanlines, frozen pieces, transformations, etc.

P.S. Have to also give a shoutout to SyntaxHighlighter Evolved (WordPress Plugin) for allowing me the ability to format and present my code so well.