How to rasterize an image with Processing

Published by Tim on Friday March 1, 2019

Last modified on January 25th, 2024 at 14:08

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

Related

Processing and p5.js compared

Please note that this article is still in development Please note: This article may be very time-bound and the items […]

New course out now: Grid Systems

After a long period of work, about a dozen discarded lessons, and many discussions with a wide variety of people, […]

A brief research on grid systems

How do you develop a course for a subject as abstract and multifaceted as the topic of grid systems? Either […]

Student Journey – with Lily Montague

[INTROTEXT VON TIM HIER EINFÜGEN] What sparked your interest in creative coding and how did you get started? For me, […]

Curating the DESIGN IN MOTION Festival 2022

Imagine if the majority of all outdoor displays in public spaces were broadcasting the best of design and moving image […]

The Magic Triangle

Hey people, I hope you are all well! I escaped the cold and wet weather in Germany and am now […]

How to build the folder structure?

Hey everyone, I hope you are well! Today I would like to talk about a problem in the sketching process. […]