Processing Month, Day 10 - Painting, Part 1

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

In the next three days, we'll cover the basics of procedural painting. Today will be about using basic user input to paint. We'll use the mouse to move our digital "brush". To make it a little more interesting, we'll write a little algorithm to make the brush pulsate between a minimum and maximum radius. We won't work in RGB this time. We'll use the HSB color mode to create colors based on a random hue.

We need to some variables to start with. A float for the hue, the current radius, the minimum radius and maximum radius. And a boolean to keep track if the brush is growing or shrinking.

float h;
float r = 15;
float minRadius = 10;
float maxRadius = 20;
boolean grow = false;

To change the color mode from RGB to HSB, you'll need to use the colorMode() function. I'll usually set all parameters to 100 and the hue range to 360. The Color Selector tool in Processing also works with this.

colorMode( HSB, 360, 100, 100, 100 );
h = random(360);

The next piece of code goes inside draw(). We'll generate random transparent colors for both the fill and the stroke based on the hue value we've set in setup(). All we need to do is draw the ellipse to see the magic happen.

 fill( h, random(100), random(100), 50 );
stroke( h, random(100), random(100), 70 );
ellipse(mouseX, mouseY, r * 2, r * 2);

The algorithm to pulsate the brush looks like this. If the brush is growing, we'll make the radius larger. If the radius reaches its maximum size, we'll set the grow variable to false. The same thing happens when the brush is shrinking.

if ( grow ) {
    r++;
    if (r > maxRadius) {
        grow = false;
    } 
} else {
    r--;
    if (r < minRadius) {
        grow = true;
    }
}

Documentation

• colorMode()

Download

Sketch is available on OpenProcessing. If you want the code to play with, you can download the example for Procesing Day 10.

Tweet this article