Consider a drawing algorithm consisting of the following steps:

This algorithm is a kind of generative art algorithm—it is short and can generate interesting and unexpected drawings.

The result of the algorithm will be a picture with the the colored trajectory of pos moving on the screen. The b value grows linearly, hence the a value grows parabolically. The value of a is an angle that defines the step pos will move. It is not easy to predict the behavior of steps when the angle changes parabolically, hence it is hard to imagine how the resultant curve will look. So let's implement the algorithm and see it.

We will use the ofFbo fbo object for holding the generated picture.

The example is based on the emptyExample project in openFrameworks. In the testApp class declaration of the testApp.h file, add declarations for a, b, pos, fbo, and some additional variables. Also, we declare the function draw1(), which draws one line segment by performing steps 3 to 7 of the drawing algorithm.

double a, b;           //Angle and its increment
ofPoint pos, lastPos;  //Current and last drawing position
ofColor color;         //Drawing color
int colorStep;         //Counter for color changing
ofFbo fbo;             //Drawing buffer
void draw1();          //Draw one line segment

Note that a and b are declared as double. The reason is that a grows fast, so the accuracy of float is not enough for stable computations. However, we will play with the float case too, in the Playing with numerical instability section.

The testApp::setup() function initializes the fbo buffer, fills it with a white color, and sets initial values to all variables.

void testApp::setup(){
  ofSetFrameRate( 60 );  //Set screen frame rate

  //Allocate drawing buffer
  fbo.allocate( ofGetWidth(), ofGetHeight() );

  //Fill buffer with white color
  fbo.begin();
  ofBackground( 255, 255, 255 );
  fbo.end();

  //Initialize variables
  a = 0;
  b = 0;
  pos = ofPoint( ofGetWidth() / 2, ofGetHeight() / 2 ); 
                                        //Screen center
  colorStep = 0;
}

The testApp::update() function draws line segments in fbo by calling the draw1() function. Note that we perform 200 drawings at once for obtaining the resultant curve quickly.

void testApp::update(){
  fbo.begin();     //Begin draw to buffer
  for ( int i=0; i<200; i++ ) {
    draw1();
  }
  fbo.end();       //End draw to buffer
}

The testApp::draw() function just draws fbo on the screen.

void testApp::draw(){
  ofBackground( 255, 255, 255 );  //Set white background
  
  //Draw buffer
  ofSetColor( 255, 255, 255 );
  fbo.draw( 0, 0 );      
}

Note that calling ofBackground() is not necessary here because fbo fills the whole screen, but we have done so uniformly with other projects.

Finally, we should add a definition for the draw1() function.

void testApp::draw1(){
  //Change a
  a += b * DEG_TO_RAD;
  //a holds values in radians, b holds values in degrees,
  //so when changing a we multiply b to DEG_TO_RAD constant

  //Change b
  b = b + 0.5;

  //Shift pos in direction defined by angle a
  lastPos = pos;    //Store last pos value
  ofPoint d = ofPoint( cos( a ), sin( a ) );
  float len = 20;
  pos += d * len;

  //Change color each 100 steps
  if ( colorStep % 100 == 0 ) {
    //Generate random color
    color = ofColor( ofRandom( 0, 255 ), 
                     ofRandom( 0, 255 ), 
                     ofRandom( 0, 255 ) );
    }
  colorStep++;
    
  //Draw line segment
  ofSetColor( color );
  ofLine( lastPos, pos );
}

In the original algorithm, described at the beginning of the section, a and b are measured in degrees. In the openFrameworks implementation, we decide to hold b in degrees and a in radians. The reason for this will be explained later, in the Playing with numerical instability section. So, in the code, we convert degrees to radians using multiplication to the DEG_TO_RAD constant, which is defined in openFrameworks and is equal to π/180 degrees.

a += b * DEG_TO_RAD;

Run the project; you will see a curve with two spiral ends constantly changing their color:

This particular behavior of the curve is determined by the parameter 0.5 in the following line:

b = b + 0.5;

The parameter defines the speed of increasing b. Change this parameter to 5.4 and 5.5 and you will see curves with 4 and 12 spirals, as shown here:

Try your own values of the parameter. If the resultant curve is too large and does not fit the screen, you can control its scale by changing the len value in the following line:

float len = 20;

For example, if you set len to 10, the resultant curve shrinks twice.

Playing with numerical instability

In the openFrameworks code, we declare a and b as double values. The double type has much more accuracy when representing numbers than float, and it is essential in this example because a grows fast.

But what will happen if we declare a and b as float? Do it! Replace the line double a, b; with float a, b; and run the project. You will see that the resultant curve will be equal to the curve from the double case just in the first second of the running time. Then, the centers of the spirals begin to move.

Gradually, the two-spiral structure will be ruined and the curve will demonstrate unexpected behavior, drawing circles of different sizes.

The reason for such instability is that the values of a are computed with numerical inaccuracy.

Note that the exploited instability effect can depend on the floating-point arithmetics of your CPU, so your resultant pictures can differ from the presented screenshots.

Note

In many serious tasks such as physical simulation or optimal planning, we need to have the exact result, so such computing instability is unallowable. But from the creative coding and generative art field point of view, such instability lets you create interesting visual or audio effects. So such instability is often permitted and desirable. For more details on the mathematics of such processes, read about the deterministic chaos theory.

Now change the parameter 0.5 in the line b = b + 0.5; to 17, and you will see a big variety of shapes, including triangles, squares, heptagons, and stars. Then try the values 4, 21, and your own. You will see a large number of similar but different pictures generated by this simple drawing algorithm.

Finally, note that the main computing lines of the algorithm are the following:

a += b * DEG_TO_RAD;
//...
b = b + 0.5;
//...
ofPoint d = ofPoint( cos( a ), sin( a ) );

These are very sensitive to any changes. If you change it somehow, the resultant curves will be different (in the float case). In this sense, such creative coding can be considered art because it depends heavily on the smallest code nuances, which often cannot be predicted.