Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>
 
canvas {
  border: 1px solid black;
}
 
/*
Inspired by a fiddle from @seb_ly
http://jsfiddle.net/sebleedelisle/Uer2g/
Written by @alawatthe
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    t = 0,
    length = 200,
    factor = Math.sqrt(0.5),
    draw, tree;
ctx.setTransform(1, 0, 0, -1, 250, 500);
tree = function (angle, gen) {
    ctx.save(); 
    
    ctx.rotate(angle);  
    
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.translate(0, length*Math.pow(factor, gen));
    ctx.lineTo(0, 0);
    ctx.stroke(); 
   
    if (gen <= 10) {
      tree( t, gen+1);
      tree(-t, gen+1);
    }
    
    ctx.restore();  
};
draw = function () {
  t += 0.005;
  ctx.clearRect(-250, 0, 500, 500);
  tree(0, 1);
};
setInterval(draw, 33);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alawatthepro
0viewers