Cloning the Fractal Grid

An artist named Michel Poisson posted a dynamic sketch of a grid online and I couldn’t resist trying to make my version of it. Michel’s version was black and white, with thick lines:

The original sketch from Michel Poisson

It’s hard to figure out what’s going on in the sketch until all the lines come together at the outside of the frame and I could tell it’s related to fractal trees, with which I’m intimately familiar! All I had to do was make 1 tree and then rotate it 3 more times around the center of the screen.

We start off a Processing sketch with setup and draw:

def setup():
    size(600,600)
    stroke(0)
def draw():
    sz = 100 
    background(255)
    translate(width/2,height/2)
    translate(0,sz)
    ellipse(0,0,20,20)
    for j in range(2):
        pushMatrix()
        rotate(radians((-1)**j*45))
        line(0,0,sz,0)
        translate(sz,0)
        ellipse(0,0,8,8)
        popMatrix()

That code makes 1 “tri-node,” a node with 2 lines coming out of it. A “bi-node”? Anyway, now it looks like this:

OK, so the default direction (zero degrees) for Processing is to the right. No problem, we’ll just start off translating to the right instead of “down” and it’ll look fine. Copy the trinodes by rotating inside a loop and it looks like this:

We have four trinodes already! Now it’s time to add some recursion.

Now we just need to draw dozens of more lines on the screen. Sound like a lot of work? Well, using recursion, we could simply make every one of those small dots into another trinode. All you have to do is call the trinode function inside the definition of the trinode function.

Warning: This will not work. …until you introduce a level variable, and make every subsequent trinode (“branch”) a lower level than the previous one. When the level gets to 0 the recursion stops. This is completely logical and mathematical and I’ve done it a thousand times with students but every time I do it I still wonder if it’s going to work. Spot the recursion in this code:

def draw():
    sz = 100 
    background(255)
    translate(width/2,height/2)
    for i in range(4):
        pushMatrix()
        rotate(radians(90*i))
        translate(sz,0)
        ellipse(0,0,20,20)
        trinode(sz,5)
        popMatrix()
    
def trinode(sz,level):
    if level > 0:
        for j in range(2):
            pushMatrix()
            rotate(radians((-1)**j*45))
            line(0,0,sz,0)
            translate(sz,0)
            ellipse(0,0,8,8)
            trinode(sz,level-1)
            popMatrix()

Lots of lines drawn just by adding some recursion to our program!

Now we can make the lines a little thicker using Processing’s “strokeWeight” function. Even more importantly, let’s change the angle from 45 degrees to a changing angle from 0 to 90 degrees. We need a tool that will make the angle go up and down smoothly, forever. There is such a tool in mathematics, called a Sine Wave. All we have to do is add an angle parameter to trinode and give it this line when we call trinode in the draw function:

trinode(sz,45+45*sin(frameCount/100.0),5)

The sine function oscillates between -1 and 1, so we have to multiply it by 45 and add 45 so we’re oscillating between 0 and 90. Now the four trees come together unexpectedly!

Works perfectly! Now it’s time to change the color.

I preferred something pink-purple on a black background. Then I used some “alpha” to add some blur to the moving lines. Now it looks pretty good!

Want to see my code? It’s at https://github.com/hackingmath/sketches/blob/master/poisson_trinode.pyde

Have fun!