class Tree { constructor() { this.height = 0; this.imgHeight = 200; this.imgWidth = 400; this.maxHeight = 100; this.trunkColor = 'brown'; // function of height this.leaves = []; // location of leaves (origin = base of trunk, y = height above ground) this.leafColor = ['green']; // array of color options - color of a single leaf is iteratively assigned this.leafSize = 5; // circle radius this.leafOpacity = 0.5; this.branches = []; // height of branches from ground this.branchSlope = 0.3; this.context = DOM.context2d(width, height); this.growing = true; } // add branches if the tree is still growing taller animateBranchAddition(heightInterval) { var treeHeight = this.height; if (this.growing && (treeHeight > 0) && (treeHeight % heightInterval == 0) && !(this.branches.includes(treeHeight))) { this.branches.push(treeHeight); } } // add leaves if the tree is still growing taller // 1 leaf per branch per time interval animateLeafAddition(leafInterval) { var numBranches = this.branches.length; var treeHeight = this.height; if (this.growing && (treeHeight > 10) && (treeHeight % leafInterval == 0)) { // add leaves var newLeaves = this.branches.map(function(branch,iBranch) { var xPos = (Math.random() * 2 - 1) * 3 * (numBranches - iBranch); xPos += (xPos > 0) ? (numBranches-iBranch) : -(numBranches-iBranch); return [xPos, (iBranch + 1) * 10 + numBranches]; }); this.leaves = this.leaves.concat(newLeaves); } } // check if tree is still growing animateHeight() { this.growing = (this.height < this.maxHeight); } // color the tree trunk as a function of age animateTrunkAppearance() { var trunkColorRange = d3.interpolateHcl('green',d3.rgb(76, 28, 0)); if (this.height <= this.maxHeight / 2) { // color is a function of height this.trunkColor = trunkColorRange(this.height * 2 / this.maxHeight); } else { this.trunkColor = trunkColorRange(1); } } // color leaves according to the date animateLeafAppearance(season, seasonalDate, seasonLength) { var seasonPercent = seasonalDate / seasonLength; if (season == 0) { // spring this.leafSize = 4 * seasonPercent + 1; this.leafOpacity = - 0.5 * seasonPercent + 1; if (seasonPercent < 0.3) { this.leafColor = ['pink',null,null]; } else if (seasonPercent < 0.7) { this.leafColor = ['pink','pink','lightgreen']; } else { this.leafColor = ['pink','lightgreen','green']; } } else if (season == 1) { // summer this.leafSize = 4 * seasonPercent + 5; this.leafOpacity = 0.2 * seasonPercent + 0.5; if (seasonPercent < 0.4) { this.leafColor = ['lightgreen','green']; } else if (seasonPercent < 0.8) { this.leafColor = ['lightgreen','green', 'green']; } else { this.leafColor = ['green']; } } else if (season == 2) { // fall this.leafSize = 9; this.leafOpacity = -0.2 * seasonPercent + 0.7; if (seasonPercent < 0.4) { this.leafColor = ['green','green','green','orange']; } else if (seasonPercent < 0.8) { this.leafColor = ['red','green','orange','orange']; } else { this.leafColor = ['red','brown','orange','orange']; } } else { // winter this.leafSize = 9 - 6 * seasonPercent; this.leafOpacity = -0.2 * seasonPercent + 0.5; if (seasonPercent < 0.3) { this.leafColor = [null,'brown','orange','orange']; } else if (seasonPercent < 0.6) { this.leafColor = [null,'brown','orange',null]; } else if (seasonPercent < 0.8) { this.leafColor = [null,'brown',null,null]; } else { this.leafColor = [null]; } } } render() { // draw the tree in its current state const maxWidth = 20; const xStart = this.imgWidth/2; const trunkWidth = Math.min(this.height/10, maxWidth); const treeHeight = this.height; const imgHeight = this.imgHeight; const cxt = this.context = DOM.context2d(this.imgWidth, imgHeight); // draw trunk cxt.fillStyle = this.trunkColor; cxt.beginPath(); cxt.moveTo(xStart - trunkWidth/2, this.imgHeight); cxt.lineTo(xStart, this.imgHeight - treeHeight); cxt.lineTo(xStart + trunkWidth/2, this.imgHeight); cxt.closePath(); cxt.fill(); // draw branches cxt.beginPath(); cxt.strokeStyle = this.trunkColor; const numBranches = this.branches.length; const branchSlope = this.branchSlope; this.branches.forEach(function(branchHeight, i) { // odd branches to the left, even to the right var slope = branchSlope * (((i%2)==1) ? -1 : 1); var yDelta = (treeHeight - branchHeight) / 10; var xDelta = yDelta / slope; cxt.lineWidth = Math.min((numBranches - i)/2, 3); // bottom branches are thicker than top branches cxt.moveTo(xStart, imgHeight - branchHeight); cxt.lineTo(xStart + xDelta, imgHeight-branchHeight - yDelta); cxt.stroke(); }); // draw leaves const colors = this.leafColor; const leafRadius = this.leafSize; const leafOpacity = this.leafOpacity; this.leaves.forEach(function(leaf, i) { var color = d3.color(colors[i % colors.length]); if (color != null) { color.opacity = leafOpacity; cxt.fillStyle = color; cxt.beginPath(); cxt.arc(xStart + leaf[0], imgHeight - leaf[1],leafRadius,0,Math.PI * 2, true); cxt.fill(); } }); return cxt.canvas; } }