Anthony Mattox Interaction Design + Digital Art

Geometric fractals can be very visually interesting and aesthetically pleasing and are quite easy to understand and create, even just with pencil and paper. Computers make the process a bit easier though.
Within an object oriented programming environment

The process of creating such a fractal begins with a basic shape. In this illustration a line, but it could be a square, circle, arc, cube, or perhaps a bunny rabbit. Then we have the rule. Each iteration every instance of the initial object is replaced with the rule shape. Here a line is turned into a ‘Y’ and in each subsequent iteration all lines are turned into ‘Y’s as well. You can probably see quite quickly by using different rules geometric fractals can generate all sorts of shapes and textures. More possibilities are opened by adding more complex transformations, changing the scale, color, or any other property, limiting iteration to only certain shapes, adding random factors, and working in 3d environments.

There are a few ways we could go about scripting a simple tree fractal like this. The differences arise in possible ways to store the data of the positions of all the shapes. Perhaps the simplest is to write a function which contains itself and draws the shapes on the pixel buffer and leaves them there, but we could also use nested pushMatrix(); and popMatrix(); functions to add up the rotations. Or a recursive function could write the data into a two dimensional array which would give us more flexibility as to how the data is manipulated. To give us the most flexibility we could use an array of custom objects.

This applet uses a function contained twice within itself. The function is called once at the start of the program, draws a line, and then calls itself twice, those in turn call themselves four more times. The function passes down parameters for the angle and position and the number of iterations so it will stop. When the mouse is clicked the buffer is cleared with background(255);and the function is called again with new random parameters.

The script looks like this:

float aa=-.2;
float ab=.2;

void setup() {
  size(400,400);
  background(255);
  stroke(0,0,0,50);
  noFill();
  smooth();
  form(width/2,height,-HALF_PI,7);
}

void draw() {
}

void form(float x,float y, float a, int c) {
  float nx=x+45*cos(a);
  float ny=y+45*sin(a);
  line(x,y,nx,ny);
  if (c>0) {
    form(nx,ny,a+aa,c-1);
    form(nx,ny,a+ab,c-1);
  }
}

void mousePressed() {
  background(255);
  aa=random(-PI,PI);
  ab=random(-PI,PI);
  form(width/2,(height/3)*2,-HALF_PI,7);
}

The first two lines declare global variables. All we need here are the two branching angles. Next our setup function which includes the custom function “form”. A blank draw keeps the program running so the mouse input can be used. Within the mouse function the buffer is cleared new values are set for the two branching angles, and the function is called again. The last component is to define our recursive function. “void” lets processing know you are going to define a function, followed by the function name and in parentheses the parameters. Within curly brackets define the function. ‘nx’ and ‘ny’ are just the far end of each segment and subsequently the starting point of the new segments. This could easily be written:

void form(float x,float y, float a, int c) {
  line(x,y,x+45*cos(a),y+45*sin(a));
  if (c>0) {
    form(x+45*cos(a),y+45*sin(a),a+aa,c-1);
    form(x+45*cos(a),y+45*sin(a),a+ab,c-1);
  }
}

This takes out that extra step, however, now the code is running the same math three times to calculate where to draw the line to and where to start each of the two new segments, so lets give the old computerbox a break.

I will explain in another installment some more complex, but powerful ways of doing this but this simple method can be quite interesting. Changing the form drawn, in this case the line function, how many times the function recalls itself, or what parameters are passed down and how they are altered can can easily eat up a morning.