About this stage
Comparing Stages 4 and 5, you'll see we are offering a bit of restructuring/renaming of functions so that the processes are more accurate.
The top of the 'Y' is really a 'V' and the entire 'Y' is the trunk followed by the 'V', so we wove the entire mess into a drawY function.
Also, we have a slider so that we can change the angle of the 'Y' as it is drawn.
Behind the scenes:
HTML Slider Structure:
<div class="slidecontainer">
<input type="range" min="5" max="160" value="30" class="slider" id="myRange">
<p>Branch Angle: <span id="branchAngleDeg"></span></p>
</div>
Global Tree and Slider Variables:
//tree attributes
var branchColor;
var leafColor;
var branchLength;
var leafDiam;
var branchAngleDeg;
var shouldShowLeaves;
//slider info
var slider;
var output;
Slider and Branch Angle Initialization in setup function:
//slider code
slider = document.getElementById("myRange");
output = document.getElementById("branchAngleDeg");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
branchAngleDeg = this.value;
}
Restructured/Renamed functions:
function draw() {
if (shouldRefreshBackground) background(lightGray);
if (shouldDrawGrid) grid.display();
translate(5*inc, 9*inc);
drawY();
} //end function draw
function drawY(){
drawBranch();
drawV();
}//end function drawY
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 drawV(){
translate(0, -branchLength);
//rotate left branchAngleDeg (value from slider)
rotate(radians(-branchAngleDeg));
drawBranch();
//rotate 2* branchAngleDeg (value from slider)
rotate(radians(2*branchAngleDeg));
drawBranch();
}//end function drawV
Last update: 01/10/20
