Processing Month, Day 9 - Circular Pixels
Posted on 2011-05-09 by Jan Vantomme
Tags:
processing, tutorial
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( 450, 400 );
img = loadImage("smoking.jpg");
image( img, 0, 0 );
}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.
translate( 5, 5 );
for (int i = 0; i < width; i+=10) {
for (int j = 0; j < height; j+=10) {
float c = brightness( img.get( i, j ) );
fill( c );
ellipse( i, j, 10, 10 );
}
}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:
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 = 0; i < width; i+=10) {
for (int j = 0; j < height; j+=10) {
float c = brightness( img.get( i, j ) );
float r = map( c, 0, 255, 0, 10);
fill( 255 );
ellipse( i, j, r, r );
}
}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:
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 = 0; i < width; i+=10) {
for (int j = 0; j < height; j+=10) {
int c = img.get( i, j );
float b = brightness( c );
fill( b );
stroke( c );
float r = map( b, 0, 255, 0, 10);
ellipse( i, j, r, r );
}
}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:
