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:

Click here to get the code

    Published: Friday March 1, 2019

    related blogposts

    14. April 2019

    Processing-Tutorial: Video Export

    One of the most powerful features of Processing in comparison to all web-based approaches and frameworks (like p5.js) is the […]

    10. April 2019

    Processing-Tutorial: Kinetic Typography 1

    In the last years i’ve observed a new tendency in typography and graphic design which has been made possible by […]

    28. February 2019

    My 10 favorite Processing-libraries

    So called “libraries” extend the functionality of the software-development-enviroment Processing. Please handle those extensions with care: If you are a […]

    18. December 2018

    Processing or p5.js? My opinions

    In this video i share my opinions about the benefits of p5.js and Processing. I also talk about how i’ve […]