About this stage
Visually, this is the same graph as before.
However, this time, we are using a different technique for drawing the trunk branch.
Processing has a translate function that allows us to move the default coordinate system from the upper left corner of the canvas to a point we specify, which in this case is at the (5,9) coordinate on our handy grid.
That new point becomes our 'origin' and all other measurements are directed from there.
This slight but powerful 'shift' will make creating our tree a 'snap!'
Behind the scenes:
We know you could have viewed this source code on your own, but for your convenience, here are some code snippets.
Comparing the code from Stages 1, 2 and 3:
Stage 1:
//vertical branch
strokeWeight(2);
stroke(branchColor);
line(5*inc, 9*inc, 5*inc, 9*inc - branchLength);
if(shouldShowLeaves){
noStroke();
fill(leafColor);
circle(5*inc, 9*inc - branchLength, .25*inc);
}
Stage 2:
//vertical branch
strokeWeight(2);
stroke(branchColor);
translate(5*inc, 9*inc);
line(0, 0, 0, -branchLength);
if(shouldShowLeaves){
noStroke();
fill(leafColor);
circle(0, -branchLength, .25*inc);
}
Stage 3:
function draw() {
if (shouldRefreshBackground) background(lightGray);
if (shouldDrawGrid) grid.display();
drawBranch();
} //end function draw
function drawBranch(){
//vertical branch
strokeWeight(2);
stroke(branchColor);
translate(5*inc, 9*inc);
line(0, 0, 0, -branchLength);
if(shouldShowLeaves){
noStroke();
fill(leafColor);
circle(0, -branchLength, .25*inc);
}
}//end function drawBranch
The Stage 3 code snippet above simply shows how we made our branch by 'calling' the drawBranch function from within the draw function. The innerds of function drawBranch is simply the code from Stage 2. Easy peasy.
Last update: 01/10/20
