<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <head>
	
	<script>
	  <![CDATA[
	  
	  	active_circle = 0;
	  	trunkx = 400;
	  	trunky = 400;
	  	trunk_length = 100;
	  	pi = 3.1415926535;
	  	generations = 6;
	  	point = new Array();
	  	point[0] = new Array();
	  	point[0][0] = new Array();
	  	point[0][0]['x'] = trunkx;
	  	point[0][0]['y'] = trunky;
	  	point[0][0]['lengtha'] = trunk_length;
	  	point[0][0]['angle'] = 0;
	  
			function init(){
				circle1 = document.getElementById('circle1');
				circle2 = document.getElementById('circle2');
				trunk = document.getElementById('trunk');
				document.addEventListener("mousemove", mouse_tracker, true);
				drop();
			}
			
			function mouse_tracker(evt){
				mousex = evt.clientX;
				mousey = evt.clientY;
				if (active_circle){
					active_circle.setAttribute("cx", mousex+dx);
					active_circle.setAttribute("cy", mousey+dy);
					draw_it()
				}
			}
			
			function activate(obj){
	    	dx = obj.cx.baseVal.value - mousex;
		    dy = obj.cy.baseVal.value - mousey;
				active_circle = obj;
			}
			
			function drop(){
				active_circle = 0;
				draw_it();
			}
			
			function draw_it(){
				xdif1 = circle1.cx.baseVal.value - trunkx;
				ydif1 = trunky - circle1.cy.baseVal.value;
				ratio1 = Math.sqrt(xdif1*xdif1+ydif1*ydif1)/trunk_length;
				angle1 = Math.atan2(xdif1, ydif1);
				
				xdif2 = circle2.cx.baseVal.value - trunkx;
				ydif2 = trunky - circle2.cy.baseVal.value;
				ratio2 = Math.sqrt(xdif2*xdif2+ydif2*ydif2)/trunk_length;
				angle2 = Math.atan2(xdif2, ydif2);
				
				leaf = 1;
				for(i=1; i<=generations; i++){
					point[i] = new Array();
					for (key in point[i-1]){
						x1 = point[i-1][key]['x'];
						y1 = point[i-1][key]['y'];
						
						// left branch
						length = point[i-1][key]['lengtha']*ratio1;
						angle = point[i-1][key]['angle']+angle1;
						x2 = x1 + length*Math.sin(angle);
						y2 = y1 - length*Math.cos(angle);
						document.getElementById("branch"+leaf).setAttribute("x1", x1);
						document.getElementById("branch"+leaf).setAttribute("y1", y1);
						document.getElementById("branch"+leaf).setAttribute("x2", x2);
						document.getElementById("branch"+leaf).setAttribute("y2", y2);
						point[i][leaf] = new Array();
						point[i][leaf]['x'] = x2;
						point[i][leaf]['y'] = y2;
						point[i][leaf]['lengtha'] = Math.floor(length);
						point[i][leaf]['angle'] = angle;
						leaf++;
						
						// right branch
						length = point[i-1][key]['lengtha']*ratio2;
						angle = point[i-1][key]['angle']+angle2;
						x2 = x1 + length*Math.sin(angle);
						y2 = y1 - length*Math.cos(angle);
						document.getElementById("branch"+leaf).setAttribute("x1", x1);
						document.getElementById("branch"+leaf).setAttribute("y1", y1);
						document.getElementById("branch"+leaf).setAttribute("x2", x2);
						document.getElementById("branch"+leaf).setAttribute("y2", y2);
						point[i][leaf] = new Array();
						point[i][leaf]['x'] = x2;
						point[i][leaf]['y'] = y2;
						point[i][leaf]['lengtha'] = length;
						point[i][leaf]['angle'] = angle;
						leaf++;
					}
				}
			}
			
	  ]]>
	</script>
	<style>
		#circle1, #circle2 {cursor: pointer;}
	</style>
  </head>
  <body onload="init();">
	<svg:svg width="800px" height="530px">
	  <svg:line id="trunk" x1="400" y1="400" x2="400" y2="500" style="stroke:rgb(99,0,0);stroke-width:2"/>
	  
<svg:line id="branch1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch2" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch3" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch4" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch5" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch6" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch7" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch8" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch9" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch10" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch11" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch12" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch13" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch14" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch15" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch16" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch17" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch18" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch19" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch20" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch21" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch22" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch23" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch24" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch25" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch26" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch27" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch28" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch29" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch30" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch31" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch32" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch33" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch34" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch35" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch36" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch37" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch38" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch39" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch40" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch41" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch42" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch43" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch44" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch45" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch46" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch47" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch48" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch49" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch50" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch51" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch52" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch53" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch54" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch55" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch56" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch57" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch58" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch59" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch60" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch61" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch62" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch63" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch64" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch65" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch66" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch67" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch68" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch69" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch70" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch71" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch72" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch73" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch74" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch75" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch76" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch77" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch78" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch79" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch80" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch81" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch82" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch83" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch84" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch85" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch86" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch87" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch88" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch89" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch90" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch91" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch92" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch93" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch94" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch95" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch96" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch97" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch98" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch99" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch100" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch101" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch102" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch103" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch104" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch105" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch106" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch107" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch108" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch109" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch110" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch111" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch112" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch113" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch114" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch115" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch116" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch117" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch118" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch119" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch120" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch121" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch122" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch123" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch124" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch125" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>
<svg:line id="branch126" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,0,0);stroke-width:1"/>

	  
	  <svg:circle onmousedown="activate(circle1);" onmouseup="drop()" id="circle1" r="6" cx="360" cy="360" style="fill:red; stroke:blue; stroke-width:1;"/>
	  <svg:circle onmousedown="activate(circle2);" onmouseup="drop()" id="circle2" r="6" cx="440" cy="360" style="fill:red; stroke:blue; stroke-width:1;"/>
	</svg:svg>
	<br/><br/>
	<div style='width: 800px'>
	<center>
	This is a basic fractal canopy. Click and drag the red circles to create new configurations.<br/>
	More of my projects can be seen on my <a href="../portfolio.html">portfolio page</a>.<br/>
	All styles and scripts for the tree are contained in the source for this page. Please feel<br/>
	free to download it and modify any way you like. Open License or whatever. Cheers!<br/>
	</center>
	</div>
  </body>
</html>
