Processing Month, Day 11 - Painting, Part 2

Posted on 2011-05-11 by Jan Vantomme
Tags: processing, tutorial

The brush algorithm we'll use today will be the same as the one we used yesterday in Painting, Part 1. But we won't use the HSB color mode anymore. We'll get our colors from an image, just like we did in the Circular Pixels sketch on day 9.

The problem with picking a color from an image, is that the color isn't transparent. So I wrote a quick function that returns a transparent color. Note that this function doesn't start with the void keyword. This one starts with the color keyword because the function returns a color. The function gets the individual red, green and blue components of the color with a technique called bit shifting. The code is hard to read, but it is a lot faster than the red(), green() and blue() functions.

color getTransparentColor( color c, float a )
{
    int r = (c >> 16) & 0xff;
    int g = (c >> 8) & 0xff;
    int b = c & 0xff;   
    return color(r, g, b, a);
}

You can use the function by setting the value for the first parameter to the color value for the current mouse position. The second parameter is a number between 0 and 255, where zero is full transparency, and 255 is no transparency.

color c = getTransparentColor( img.get( mouseX, mouseY ), 64 );
fill( c );
ellipse(mouseX, mouseY, r * 2, r * 2);

Examples

Here are the original image I used and two paintings made with the sketch.

Documentation

• >> right shift
• red()
• green()
• blue()

Download

Download the example for Procesing Day 11.

Tweet this article