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); 
  img = loadImage("woman.jpg");

void draw() {

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

      // set the position
      translate(x, y);

      // Draw the tile
      rect(0, 0, b * tileSize, b * tileSize);

      // close matrix

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 by Tim on Friday March 1, 2019

Last modified on March 14th, 2020 at 17:37


11. March 2021

Interactive Grid System (Livestream)

Hey! In this recording of my very first YouTube-livestream i explain how to create an interactive visual system with Processing. […]

7. January 2021

Processing-Tutorial: Render Videos with the Movie Maker

There are several ways to render video from Processing. In this tutorial I’ll show you the easiest way I could […]

25. September 2020

Processing-Tutorial – Programming Posters

Some of you have asked for it, so here it is: A raw and uncut tutorial in which I explain […]

4. September 2020

Bauhaus 101 – A beginners Processing Tutorial

Hi and welcome to this very condensed and quick tutorial that aims to get you amazed for Creative Coding in […]

20. August 2020

How to use p5.js with Visual Studio Code

In this short tutorial i explain how you can use p5.js with Visual Studio Code. For this purpose, i’ll use […]

27. July 2020

The Magic Triangle

The Magic Triangle is a powerful creativity technique that can be applied to many different areas.

20. March 2020

Processing-Tutorial: Rasterize 3D

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn […]

6. December 2019

Processing-Tutorial: Image-Rasterizer

Level: Beginner & intermediate In this tutorial i’ll guide you through all the necessary steps to rasterize an image with […]

4. November 2019

Processing-Tutorial: WAVES pt. 1

This is the first part of a brand new tutorial-series about Waves, a fundamental skill and feature in Generative Design […]

16. 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 […]

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 […]