HTML5 Canvas Fractal Tree

HTML5 Canvas Fractal Tree

Created By:Debasis Das (may 2016)

HTML5 Fractal Tree 1

HTML5 Fractal Tree 1

HTML5 Fractal Tree

HTML5 Fractal Tree

HTMl canvas fractal tree

HTMl canvas fractal tree

HTMl canvas fractal tree

HTMl canvas fractal tree

Source code

<html>
<head>
<script type="text/javascript">
	function draw(){
	  var canvas = document.getElementById('canvas');
	  var context = canvas.getContext('2d');
	  context.beginPath();
	  context.rect(0,0,1500,1000);
	  context.fillStyle = "white";
	  context.fill();
	  drawTree(context);
	}
	
	function drawTree(context){
		branch(context, 100, 900, -90, 5);
		branch(context, 200, 900, -90, 8);
		branch(context, 300, 900, -90, 4);
		branch(context, 350, 900, -90, 7);
		branch(context, 500, 900, -90, 10);
		branch(context, 900, 900, -90, 11);
		branch(context, 1200, 900, -90, 13);
	}
	function branch(context, x1, y1, angle, depth){
		var branchArmLength = random(0, 20);
		if (depth != 0){
			var x2 = x1 + (Math.cos(angle*(Math.PI/180.0)) * depth * branchArmLength);
			var y2 = y1 + (Math.sin(angle*(Math.PI/180.0)) * depth * branchArmLength);
			
			line(context, x1, y1, x2, y2, depth);
			branch(context, x2, y2, angle - random(15,20), depth - 1);
			branch(context, x2, y2, angle + random(15,20), depth - 1);
		}
		else{
		
		var x2 = x1 + (Math.cos(angle*(Math.PI/180.0)) * depth * branchArmLength);
		var y2 = y1 + (Math.sin(angle*(Math.PI/180.0)) * depth * branchArmLength);
		context.fillStyle = 'rgb(0,200,0)';
		context.arc(x2, y2, random(0,10), 0, 2 * Math.PI, false);
		context.fill();
		}
	}
	function line(context, x1, y1, x2, y2, thickness){
		context.strokeStyle = "black"		
		context.lineWidth = thickness * 1.5;
		context.beginPath();
		context.moveTo(x1,y1);
		context.lineTo(x2, y2);
		context.closePath();
		context.stroke();
	}
	function random(min, max){
		return min + Math.floor(Math.random()*(max+1-min));
	}
	 
</script>

<style type="text/css">
  canvas { border: 1px solid black; }
</style>

</head>

<body>
  <canvas id="canvas" width="1500" height="1000"></canvas>
  <script type="text/javascript">
  draw();
  </script>
</body>

</html>

More randomness :

function branch(context, x1, y1, angle, depth){
		var branchArmLength = random(0, 20);
                var leafColorArray = ['rgb(204,255,204)','rgb(0,153,0)','rgb(255,255,102)'];
                var randomLeafColor = leafColorArray[random(0,leafColorArray.length-1)];
		if (depth != 0){
			var x2 = x1 + (Math.cos(angle*(Math.PI/180.0)) * depth * branchArmLength);
			var y2 = y1 + (Math.sin(angle*(Math.PI/180.0)) * depth * branchArmLength);
			
			line(context, x1, y1, x2, y2, depth);
			branch(context, x2, y2, angle - random(15,20), depth - 1);
			branch(context, x2, y2, angle + random(15,20), depth - 1);
		}
		else{
		
		var x2 = x1 + (Math.cos(angle*(Math.PI/180.0)) * depth * branchArmLength);
		var y2 = y1 + (Math.sin(angle*(Math.PI/180.0)) * depth * branchArmLength);
                context.fillStyle = randomLeafColor;
		context.arc(x2, y2, random(0,10), 0, 2 * Math.PI, false);
		context.fill();
		}
	}
More Randomness

More Randomness

References

https://en.wikipedia.org/wiki/Fractal_tree_index
http://natureofcode.com/book/chapter-8-fractals/
https://processing.org/tutorials/transform2d/

Posted in algorithms, HTML5 Tagged with: ,
One comment on “HTML5 Canvas Fractal Tree
  1. Nishant says:

    Or simply add this for random “greenness” :
    context.fillStyle = ‘rgb(‘+random(0,204)+’,255,’+random(0,204)+’)';

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news