Code Block 1: draw Function

function draw() {
    if (shouldRefreshBackground) background(lightGray);
    if (shouldDrawGrid) grid.display();

    translate(5 * inc, 9 * inc);
    recursiveSketchV(trunkLength, level);
} //end function draw

                              

We first move the coordinate system to the bottom of the grid. Then we call function recursiveSketchV. It does the magic.

Code Block 2: recursiveSketchV Function

function recursiveSketchV(sz, theLevel) {
    if (theLevel > 0) {
        drawABranch(sz, leafColor1);

        //move coordinate system to top of tree
        translate(0, -sz);

        //left branches
        rotate(radians(branchAngleDeg)); //counter clockwise
        recursiveSketchV(factor * sz, theLevel - 1);

        //right branches
        rotate(radians(-2 * branchAngleDeg)) //clock-wise
        recursiveSketchV(factor * sz, theLevel - 1);
        
        //rotate coordinate system back to vertical/horizontal
        rotate(radians(branchAngleDeg));

        //move back to base of tree
        translate(0, sz);
    } else {
        drawABranch(sz,leafColor2);   //theLevel is at zero; end of tree
    }
} //end function recursiveSketchV

                                

Notice the if-else block in the function. This is common in recursive scenarios. The if block houses a couple of calls back to the function itself. Only when the theLevel reaches zero is the end of the tree reached and the last branch is drawn.

Code Block 3: drawABranch function:

function drawABranch(len, aLeafColor) {
    strokeWeight(1);
    stroke(branchColor);
    line(0, 0, 0, -len);
    if (shouldShowLeaves) {
        noStroke();
        fill(aLeafColor);
        circle(0, -len, leafDiam);
    }
} //end function drawABranch
                                

This does the graphics work. The tree is nothing but a ton of branches drawn after strategic translates and rotations are performed.

So what happens?!

At the begining of the recursive function recursiveSketchV, a branch is drawn with leafColor1 (if theLevel > 0). The coordinate system is moved to the top of the tree and then a counter-clockwise rotation is made. At that point, the function is called again with that rotation in play! This time, the branch size is adjusted via 'factor' and theLevel is reduced by one in the parameter settings. The function accepts these inputs and draws another branch to the left. And another, and another until theLevel is zero. Once theLevel is zero, the last left branch is drawn and no more recursions are called.

But wait!

Each time a left-branch recursion was called, there were commands to call a back rotation and a recursive call to the right. These, too, had to be done. But when those 'right' calls were made, they immediately encountered a call to make a 'left' branch again!

How wacky is this?!

It's enough to make a preacher cuss on Sunday!

It's like: go left in your drawing until you can't any longer. But once you can't go left anymore, return to the last place you could have gone right, go right, but then immediately start going left again until you can't.

If this makes you dizzy, that just means you're normal. It takes awhile to get used to it!