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.

colorModeHSB360100100100 );

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.

fillhrandom(100), random(100), 50 );
strokehrandom(100), random(100), 70 );

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 {
    if (

else {
    if (

A digital painting with a pink hue

A digital painting with a yellow hue



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

Oldskool Comments (1)

Gravatar for wide

From: wide
Date: 11.05.2011

All hail the codemaster! zeer interessant.

Top · Permanent link to this comment