html5 canvas tree draw
var tree = {
canvas: '',
ctx: '',
height: 0,
width: 0,
spread: 0.6,
drawLeaves: true,
leavesColor:'',
leaveType: this.MEDIUM_LEAVES,
MAX_BRANCH_WIDTH: 20,
SMALL_LEAVES: 10,
MEDIUM_LEAVES: 200,
BIG_LEAVES: 500,
THIN_LEAVES: 900,
randomAngles : [],
redrawCounts : 0,
/**
* @member draw
* tree.draw() initializes tthe tree structure
*
* @param {object} ctx the canvas context
* @param {integer} h height of the canvasnt
* @param {integer} w width of the canvas
* @param {float} spread how much the tree branches are spread
* Ranges from 0.3 - 1.
* @param {boolean} leaves draw leaves if set to true
*
*/
draw : function(ctx, h, w, spread, leaves, leaveType) {
var that = this;
// Set how much the tree branches are spread
if(spread >= 0.3 && spread <= 1) {
this.spread = spread;
} else {
this.spread = 0.6;
}
if(leaves === true || leaves === false) {
this.drawLeaves = leaves;
} else {
this.leaves = true;
}
if(leaveType == this.SMALL_LEAVES ||
leaveType == this.MEDIUM_LEAVES ||
leaveType == this.BIG_LEAVES ||
leaveType == this.THIN_LEAVES) {
this.leaveType = leaveType;
} else {
this.leaveType = this.MEDIUM_LEAVES;
}
this.ctx = ctx;
this.height = h;
this.width = w;
this.ctx.clearRect(0,0,this.width,this.height);
// Center the tree in the window
this.ctx.translate(this.width/2,this.height);
// Set the leaves to a random color
this.leavesColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
// Set branch thickness
this.ctx.lineWidth = 1 + (Math.random() * this.MAX_BRANCH_WIDTH);
this.ctx.lineJoin = 'round';
this.ctx.save();
this.branch(0);
setTimeout(function(){
that.ctx.restore();
that.ctx.clearRect(0, 0, that.w, that.h);
that.redrawBranch(0);
},1000);
},
/**
* @member branch
* tree.branch() main tree drawing function
*
* @param {String} depth the maimum depth the tree can branch,
* Keep this value near 12, larger value take linger to render.
*
*/
branch : function(depth) {
if (depth < 12)
{
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(0,-(this.height)/10);
this.ctx.stroke();
this.ctx.translate(0,-this.height/10);
// Random integer from -0.1 to 0.1
var randomN = -(Math.random() * 0.1) + 0.1;
this.randomAngles.push(randomN+0.2);
this.ctx.rotate(randomN);
if ((Math.random() * 1) < this.spread)
{
// Draw the left branches
this.ctx.rotate(-0.35);
this.ctx.scale(0.7,0.7);
this.ctx.save();
this.branch(depth + 1);
// Draw the right branches
this.ctx.restore();
this.ctx.rotate(0.6);
this.ctx.save();
this.branch(depth + 1);
this.ctx.restore();
}
else
{
this.branch(depth);
}
}
else
{
// Now that we have done drawing branches, draw the leaves
if(this.drawLeaves) {
var lengthFactor = 200;
if(this.leaveType === this.THIN_LEAVES) {
lengthFactor = 10;
}
this.ctx.fillStyle = this.leavesColor;
this.ctx.fillRect(0, 0, this.leaveType, lengthFactor);
this.ctx.stroke();
}
}
},
redrawBranch : function(depth){
if (depth < 12)
{
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(0,-(this.height)/10);
this.ctx.stroke();
this.ctx.translate(0,-this.height/10);
// Random integer from -0.1 to 0.1
//var randomN = -(Math.random() * 0.1) + 0.1;
//randomAngles.push(randomN);
randomN = this.randomAngles[this.redrawCounts++];
alert(randomN);
this.ctx.rotate(randomN);
if ((Math.random() * 1) < this.spread)
{
// Draw the left branches
this.ctx.rotate(-0.35);
this.ctx.scale(0.7,0.7);
this.ctx.save();
this.redrawBranch(depth + 1);
// Draw the right branches
this.ctx.restore();
this.ctx.rotate(0.6);
this.ctx.save();
this.redrawBranch(depth + 1);
this.ctx.restore();
}
else
{
this.redrawBranch(depth);
}
}
else
{
// Now that we have done drawing branches, draw the leaves
if(this.drawLeaves) {
var lengthFactor = 200;
if(this.leaveType === this.THIN_LEAVES) {
lengthFactor = 10;
}
this.ctx.fillStyle = this.leavesColor;
this.ctx.fillRect(0, 0, this.leaveType, lengthFactor);
this.ctx.stroke();
}
}
}
};