Processing Month, Day 12 - Painting, Part 3

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

For the last sketch in this painting series, we are going to take a similar approach as the sketch from yesterday, but we'll create an autonomous painting system. We'll create a Brush class so we can create multiple brushes, and let them do the painting for us.

In the Brush class, we'll need a PVector for the location of the brush, a float for the size and the rotation of the brush and a color. In the constructor, we'll set the coordinates for the PVector, the size of the brush and the rotation of the brush to a random value.

Brush()
{
    loc = new PVector( random(width), random(height) );
    r   = random(5, 15);
    rot = random( TWO_PI );
}

To move the brush, we are going to use Brownian motion. We'll add a random value between -2 and 2 to the x and y coordinates of the brush. We also need to constrain the values of those coordinates so our brush doesn't go off-screen never to return.

void update()
{
    loc.x += random(-2, 2);
    loc.y += random(-2, 2);       
    loc.x = constrain( loc.x, 0, width );
    loc.y = constrain( loc.y, 0, height );
    c = getTransparentColor( img.get( floor(loc.x), floor(loc.y) ), 64);
    rot += 0.01;
}

I've used a rectangle for the brush in this sketch because that will work better with rotation. The code for drawing the brush to the screen looks like this:

void render()
{
    fill( c );
    pushMatrix();
    translate( loc.x, loc.y );
    rotate( rot );
    stroke( 0, 64 );
    rect( 0, 0, r * 2, r * 2 );
    popMatrix();
}

To draw the brushes to the screen, you'll need to use a similar technique as we did on day 8, Animating Bubbles.