seungjin · September 30, 2010 22:50
diff --git a/fractal_tree_drawing.html b/fractal_tree_drawing.html
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <style>		
  canvas {border:1px solid #444; }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>	
 <body>
 <canvas id="cv" width="1000" height="800"></canvas>
 </body>


 <script type="text/javascript">

 (function($) {
 	var undefined;

 	$.FractalTree = function(opts) {
 		var canvas, ctx,
 		cfg = $.extend(true, {
 			initX: 400,
 			initY: 400,
 			max_sub_branch: 5,
 			max_sub_angle: 3*Math.PI/4,
 			max_size: 5,
 			branch_length: 75,
 			color: "#fff"
 		}, opts);
 		
 		function init() {
 			if(cfg.canvas !== undefined) {
 				canvas = cfg.canvas.get(0);
 				ctx = canvas.getContext("2d");	
 				ctx.strokeStyle = cfg.color;		

 				_makeBranch(cfg.initX, cfg.initY, cfg.branch_length, -Math.PI/2, cfg.max_size);
 			}
 		}
 		
 		/* start:private */
 		function _makeBranch(start_x, start_y, length, angle, size) {
 			if (size > 0) {
 				ctx.lineWidth = size;
 				ctx.beginPath();
 				ctx.moveTo(start_x, start_y);
 				
 				var end_x = start_x + length * Math.cos(angle);
 				var end_y = start_y + length * Math.sin(angle);
 				ctx.lineTo(end_x, end_y);
 				ctx.stroke();
 				
 				var sub_branch = Math.random(cfg.max_sub_branch - 1) + 2;
 				var branch_length_dimin = .5 + Math.random()/2;
 				
 				for(var i=0; i < sub_branch; i++) {
 					var newLength = length * branch_length_dimin;
 					var newAngle = angle + Math.random() * cfg.max_sub_angle - cfg.max_sub_angle / 2;
 					var newSize = size - 1;
 					_makeBranch (end_x, end_y, newLength, newAngle, newSize);
 					
 				}
 				ctx.closePath();
 			}
 		}
 		/* end:private*/
 		
 		init();
 	};
 	
 })(jQuery);




 </script>


 <script type="text/javascript">
 		$(function() {
 			try {
 			var $canvas = $("#cv");
 			//new $.FractalTree({color: "#c00", initX: 200, initY: 200, branch_length: 50, max_size: 6, canvas:$canvas});
 			//new $.FractalTree({color: "#666", initX: 500, initY: 200, branch_length: 50, max_size: 6, canvas:$canvas});
 			new $.FractalTree({color: "#000", initX: 500, initY: 800, max_size: 10, branch_length: 200, canvas:$canvas});
 			
 			$("#refreshCanvas").click(function(e) {
 				e.preventDefault();
 				$canvas.get(0).getContext("2d").clearRect(0, 0, 1000, 800);
 				new $.FractalTree({color: "#000", initX: 500, initY: 800, max_size: 4, branch_length: 45, canvas:$canvas});
 			});
 			} catch(e) {}
 		});
 </script>

 </html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style>
	canvas {border:1px solid #444; }
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>
	<body>
	<canvas id="cv" width="1000" height="800"></canvas>
	</body>


	<script type="text/javascript">

	(function($) {
	var undefined;

	$.FractalTree = function(opts) {
	var canvas, ctx,
	cfg = $.extend(true, {
	initX: 400,
	initY: 400,
	max_sub_branch: 5,
	max_sub_angle: 3*Math.PI/4,
	max_size: 5,
	branch_length: 75,
	color: "#fff"
	}, opts);

	function init() {
	if(cfg.canvas !== undefined) {
	canvas = cfg.canvas.get(0);
	ctx = canvas.getContext("2d");
	ctx.strokeStyle = cfg.color;

	_makeBranch(cfg.initX, cfg.initY, cfg.branch_length, -Math.PI/2, cfg.max_size);
	}
	}

	/* start:private */
	function _makeBranch(start_x, start_y, length, angle, size) {
	if (size > 0) {
	ctx.lineWidth = size;
	ctx.beginPath();
	ctx.moveTo(start_x, start_y);

	var end_x = start_x + length * Math.cos(angle);
	var end_y = start_y + length * Math.sin(angle);
	ctx.lineTo(end_x, end_y);
	ctx.stroke();

	var sub_branch = Math.random(cfg.max_sub_branch - 1) + 2;
	var branch_length_dimin = .5 + Math.random()/2;

	for(var i=0; i < sub_branch; i++) {
	var newLength = length * branch_length_dimin;
	var newAngle = angle + Math.random() * cfg.max_sub_angle - cfg.max_sub_angle / 2;
	var newSize = size - 1;
	_makeBranch (end_x, end_y, newLength, newAngle, newSize);

	}
	ctx.closePath();
	}
	}
	/* end:private*/

	init();
	};

	})(jQuery);




	</script>


	<script type="text/javascript">
	$(function() {
	try {
	var $canvas = $("#cv");
	//new $.FractalTree({color: "#c00", initX: 200, initY: 200, branch_length: 50, max_size: 6, canvas:$canvas});
	//new $.FractalTree({color: "#666", initX: 500, initY: 200, branch_length: 50, max_size: 6, canvas:$canvas});
	new $.FractalTree({color: "#000", initX: 500, initY: 800, max_size: 10, branch_length: 200, canvas:$canvas});

	$("#refreshCanvas").click(function(e) {
	e.preventDefault();
	$canvas.get(0).getContext("2d").clearRect(0, 0, 1000, 800);
	new $.FractalTree({color: "#000", initX: 500, initY: 800, max_size: 4, branch_length: 45, canvas:$canvas});
	});
	} catch(e) {}
	});
	</script>

	</html>