Processing Month, Day 10 - Painting, Part 1

Posted by Jan Vantomme on 10 May 2011.
Tags: ,

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;    }}  ```