A simple view of evolution

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script>
var Gens=[];
var maxChilds = 0;
var currentGen = 0;
var cell;
function Cell(par,gen,hsl)
{
 this.hsl=hsl+Math.random()*30-15;
 this.gen=gen;
 this.par = par;
 this.bold = false;
 this.childCount=parseInt(Math.random()*3);
 if(this.gen<2)this.childCount=2;
 this.children = new Array(this.childCount);
 currentGen=Math.max(currentGen,gen);
 Gens[this.gen]=(Gens[this.gen]+1)|1;
 this.pos = Gens[this.gen];
 this.Calc = function()
 {
  for(var I=0; I<this.childCount; I++)
  {
   this.children[I] = new Cell(this,this.gen+1,this.hsl);
  }
  return this.children;
 }
}
function boldFamilyLine(cell)
{
 if(!cell.bold)
 {
  cell.bold = true;
  if(cell.par)boldFamilyLine(cell.par);
 }
}
function max(arr)
{
var copy = [];
for(var a=0,b=arr.length; a<b; a++)
{
copy[a] = arr[a];
}
return copy.sort()[copy.length-1];
}
function main()
{
maxChilds = 0;
currentGen =0;
Gens=[];
cell = new Cell(null,0,0);
var childs = cell.Calc();
var lastChildren = [];
for(var b=0; b<200&&childs.length>0; b++)
{
lastChildren = childs;
var c = [];
for(var a=0; a<childs.length; a++)
{
 var d = childs[a].Calc();
 for(var e=0; e<d.length; e++)
 {
  c[c.length] = d[e];
 }
}
childs = c;
}
for(var a=0; a<lastChildren.length; a++)
{
 boldFamilyLine(lastChildren[a]);
}
redraw();
}

function Draw(G,cell)
{
if(cell)
{
 if(cell.childCount>0)
 {
  for(var a=0; a<cell.children.length; a++)
  {
   G.lineWidth=1;
   var hsl = cell.children[a].hsl;
   G.strokeStyle="hsl("+hsl+",100%,50%)";
   if(cell.children[a].bold)
   {
    var rgb=0;//parseInt(Gens[cell.gen]/maxChilds*64);
    G.strokeStyle="rgba("+rgb+","+rgb+","+rgb+",1)";
    G.lineWidth = 1;
   }

   G.beginPath();
   G.moveTo(cell.gen*5,cvs.height/2+(Gens[cell.gen]-cell.pos-Gens[cell.gen]/2-1)*5);
   G.lineTo(cell.children[a].gen*5,cvs.height/2+(Gens[cell.children[a].gen]-cell.children[a].pos-Gens[cell.children[a].gen]/2-1)*5);
   G.stroke();
  try
  {

  Draw(G,cell.children[a]);
  }catch(e){}
 }
 }
}
}
function redraw(event)
{
maxChilds = 5;
if(event)maxChilds = event.target.value;
var G = cvs.getContext("2d");
G.clearRect(0,0,cvs.width,cvs.height);
G.strokeStyle="rgba(0,0,0,0.3)";
Draw(G,cell);
}
window.onload = main;
</script>
</head>
<body onclick="main()">
<canvas id="cvs" width="2000" height="2000" style="border:1px solid;" ></canvas>
</body>
</html>