Processing Pixels

This week we took a look at manipulating images and video in Processing. Because our medium is a screen, we’re dealing with pixels. It’s a seemingly obvious fact that I take for granted. Getting into a mind set dealing with a myriad of points instead of a whole shape or larger system of shapes has been difficult but rewarding. I can feel my brain bending.

(Not) Pixel Sorting

A week after being introduced to the concept, I’m still trying to wrap my mind around manipulating pixels. So instead of working with an entire image I figured that a good way to discover the nature of pixels was to look at them on an individual scale. (Nick Bratton actually sent an email to the listserv about pixel sorting that kicked off this path of exploration.)


This is the image I’ve been starting with.

I took this on a Canonet QL17 while in Puerto Rico.

The Algorithm

It’s terrible. Just a poor example of programming all around.

That’s because it’s mostly a random construction designed to allow me to mess with it.

It takes forever  to make a pass through the image and I’ve got no idea how to optimize it. (I tried right shifting the colors (>>), because I read that it was a faster way to retrieve color info, to no avail.)

The Results

The variables I’ve focused on are  s, r, g, b, i, j, t and c.

  •  r, g, b being individual RGB values of the pixel array.
  • s being a random settable value.
  • being the squared factor of s.
  • i and j being the variables determining the size of the rectangle matrix I’m creating to help visualize what’s happening.

Depending on the  combination of variables I get images returned that look like this.


I had a hunch that what I thought was going on wasn’t actually going on.  So I took out the background image. And like I thought I got virtually the same pixel pattern…as long as the window size stayed the same size as the initial image. 

A quick sidebar:

When I removed the image completely and used the same code (I think with a different window size) I got this result that updated for some reason. Maybe the other program runs too slow and I’m not patient enough to wait for it?


That means I’d been altering the pixels of the window and the image remained an untouched layer underneath. These pixel/color patterns and relationships are based on the mathematics of the window and the size of the rectangles not the image information.

My image is merely being drawn behind the color patterns.

I’d bet that every one of these results is reproducible on a separate machine simply by inputting the same window size and integers for variables. The image information probably isn’t used at all except for background fill.

I need to create a relationship between the image colors and the pixel/pattern algorithm…but that’s where I’m getting stuck. I can’t quite figure out how to retrieve and use information from the image’s pixel array. It seems to be sitting right there, but I can’t grasp at it. Yet.

More pixel sorting experiments to come.

One thought on “Processing Pixels”

Comments are closed.