How to rasterize an image with Processing

In this post i’ll teach you how to access the data of an image and how to use it to create fancy, custom image-filters.

I’ve choosed rasterization as a way to show how accessing image-data works in Processing. In the end this is just one of millions of possibilities to get creative with any kind of image. At the bottom of this page you’ll find a list with some great projects for inspiration.

This tutorial covers a few very important topics: From looping through multi-dimensional arrays over converting color-values to recalculating grids.

OK, let’s get started!

Setting up the sketch

As always, i start with a very basic setup. I define the two colors above the setup()-method and load the image from the data-folder.

color FG = #111111;
color BG = #f1f1f1;
PImage img; 
void setup() {
  size(500, 700); 
  background(BG);
  img = loadImage("woman.jpg");
}
void draw() {
  background(BG);
  fill(FG);
  noStroke();
}

The rasterization-algorithm

My image has slightly different dimensions than my sketch. That’s why i make use of the resize()-function in setup().

img.resize(500, 700);

Now i want to develop the rasterization-algorithm inside of the draw()-loop. Because all the tiles in the grid shall have equal widths and heights, i calculate the aspect ratio of the image. This enables me to figure out, how many tiles i’ll need vertically.

void draw(){
   ...
   float ratio = float(height)/float(width);
}

Next i bind the number of tiles on the x-axis to the mouseX-position. This enables me to test various resolutions.

void draw(){
   ...
   float ratio = float(height)/float(width);
   float tilesX = map(mouseX, 0, width, 10, 100);
}

Then i calculate the number of tiles on the y-axis based on the image aspect ratio.

void draw(){
   ...
   float ratio = float(height)/float(width);
   float tilesX = map(mouseX, 0, width, 10, 100);
   float tilesY = ratio * tilesX;
}

Last but not least i have to calculate the width and the height of each tile. Remember: I only need to do this once, because i aim to work with square tiles (with equal width and height).

void draw(){
   ...
   float ratio = float(height)/float(width);
   float tilesX = map(mouseX, 0, width, 10, 100);
   float tilesY = ratio * tilesX;
   float tileSize = width / tilesX;
}

Creating the loop

Great! No we have all the values we need, stored in proper variables. Let’s begin to create the loop.

I always loop through the y-axis first, because for me it feels more intuitive to go through something two-dimensional line by line instead of column by column.

for (int y = 0; y < img.height; y += tileSize) {
    for (int x = 0; x < img.width; x += tileSize) {

Inside the loop i first extract the color from the current pixel and assign it to the variable c.

      color c = img.get(x, y);

Now i calculate the brightness of c and put it into the float b and map the value between 0 and 255 to a range between 0 and 1. I do this to work with the brightness in a bit more convenient way.

      float b = map(brightness(c), 0, 255, 1, 0);

Then finally, i create a new matrix and draw the rectangle with the appropriate size.

      // Open a new matrix
      pushMatrix();
      // set the position
      translate(x, y);
      // Draw the tile
      rect(0, 0, b * tileSize, b * tileSize);
      // close matrix
      popMatrix();

Let’s close the nested for-loop and draw().

    } // x
  } // y
} // draw()

We’re done!

That’s it. Not that hard right? Here are some interesting links for further reading and inspiration:

• http://generateme.tumblr.com/
• https://github.com/tsulej/GenerateMe
• https://timrodenbroeker.de/projects/redrawing-images

Click here to get the code