Processing Month, Day 9 - Circular Pixels

Posted by Jan Vantomme on 09 May 2011.
Tags:

Today, we’ll take a look at how we can work with images in Processing, and how we can use color values of individual pixels to create an interesting result. First thing we need to do is finding an image to use and resize it so it has the same dimensions of our sketch. I’ve used images from my photoblog La Vie En Ville Drag the resized image onto the Processing editor to add it to your sketch. The image will be copied to a directory named data, inside your sketch folder. We also need to declare a PImage object before setup() so we can load an image and get access to the pixels. You can load the image into the memory by using loadImage() and display it to the screen by using the image() function.

PImage img;
void setup()
{
    size
450400 );
    
img loadImage("smoking.jpg");
    
imageimg0);

Drawing images to the screen like this is a little boring. In this first example, we’ll use the brightness() of the individual pixel values to draw a grayscale grid of circles. Since We don’t need the value for every pixel, we’ll increase the counter of our nested for-loops with 10.

translate5);
for (
int i 0widthi+=10{
    
for (int j 0heightj+=10{
        float c 
brightnessimg.geti) );
        
fill);
        
ellipseij1010 );
    
}

The code for this sketch can be found inside the folder processing_month_009_001. The original photo and the result from the sketch look like this:

Fire Extinguisher, a photo found on the blog from La Vie En Ville

Fire Extinguisher, modified with our Circular Pixels algorithm

Another thing we can do is use the value of brightness to set the diameter of our circle. The brightness() function returns a value between 0 and 255. If we re-map this value to a value between 0 and 10, we can use it as the diameter for our circular pixel. Re-mapping values can be done very easily with the map() function.

for (int i 0widthi+=10{
    
for (int j 0heightj+=10{
        float c 
brightnessimg.geti) );
        
float r mapc0255010);
        
fill255 );
        
ellipseijr); 
    
}

The code for this sketch can be found inside the folder processing_month_009_002. The original photo and the result from the sketch look like this:

Superhero, a photo found on the blog from La Vie En Ville

Superhero, modified with our Circular Pixels algorithm

You can also combine the two previous algorithms and use the color of the pixel for the stroke of the circle, just like in the algorithm below. The possibilities are endless. Use your imagination to create other algorithms. You might want to use triangles or stars, and the functions red(), green() or blue() to create interesting images.

for (int i 0widthi+=10{
    
for (int j 0heightj+=10{
        int   c 
img.geti);
        
float b brightness);
        
fill);
        
stroke);
        
float r mapb0255010);
        
ellipseijr); 
    
}

The code for this sketch can be found inside the folder processing_month_009_003. The original photo and the result from the sketch look like this:

Ceiling, a photo found on the blog from La Vie En Ville

Ceiling, modified with our Circular Pixels algorithm

Documentation

Download

Sketch for Processing Month, Day 9

Tweet this article

Oldskool Comments (2)

Gravatar for Unkown

From: Unkown
Date: 11.05.2011

Zip download doesn't work.

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 11.05.2011

Zip download is fixed. Thanks for letting me know.

Top · Permanent link to this comment