siteIcon

Tech Novice Tools

Processing Apps

burgerIcon

Fractal Treeleaves

Stage 4: Drawing a 'Y'

About this stage

Drawing a 'Y' for our tree could be accomplished by moving our coordinate system up to the top of the trunk, and drawing another branch from there, but first rotating the coordinate system by a specified angle.

We could rotate first to the left, then to the right to get the top of our 'Y.'

Behind the scenes:

Here's the Stage 4 code to generate our 'Y':

function draw() {
    if (shouldRefreshBackground) background(lightGray);
    if (shouldDrawGrid) grid.display();
    
    //stmt below moved from 
    //the drawBranch function
    translate(5*inc, 9*inc); 
    drawBranch(); //the trunk of the tree
    drawY(); //the 'Y' on the top of the trunk
} //end function draw

function drawBranch(){
   //vertical branch
    strokeWeight(2);
    stroke(branchColor);
    
    line(0, 0, 0, -branchLength);
    if(shouldShowLeaves){
        noStroke();
        fill(leafColor);
        circle(0, -branchLength, .25*inc);
    } 
}//end function drawBranch

function drawY(){
    translate(0, -branchLength);
    //rotate left 30 degrees
    rotate(radians(-30));
    drawBranch();
    //rotate 30 degrees back plus 30 more degrees
    rotate(radians(60));
    drawBranch();
}//end function drawY
                                    
                                

First of all we translated the coordinate system to the bottom of the grid in the draw function before we drew the trunk. 'Y?!' (Previously we did that translate within the drawBranch function but we were going to reuse that function later to draw the top of our 'Y' so we had to relocate it.) That's 'Y.'

Next, we called drawBranch function as before.

Last of all we called the drawY function. Study it for a second:

  1. We translated our coordinate system to the top of the trunk.
  2. We rotated the whole coordinate system 30 degrees CCW( a positive angle) making sure we converted it to radians first, using the built-in radians function.
  3. Using that orientation, we called drawBranch to draw the left side of the 'Y'.
  4. We then rotated the coordinate system back to normal (-30 degrees) and then another (-30) degrees (all done with one command) so that we could then draw another branch (using drawBranch) that went to the right to complete the top of the 'Y.'

Notice that by using the translate and rotate functions we were able to avoid any pesky trigonometry to the the angles to look right!

Now think!

What if we could repeat this process indefinitely at each 'node' (green dot) in the tree, drawing 'Y' after 'Y' after 'Y'?

Wouldn't that look like a tree?!

Last update: 01/10/20