README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    A tree fractal using circles and HTML5 Canvas.

Original example from github.com/curran/HTML5Examples

Built with blockbuilder.org


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--
      An interactive fractal experiment using HTML5 Canvas
      Curran Kelleher 10/28/2014
    -->
    <title>fractal</title>
  </head>
  <body>
    <canvas id="fractal" width="960" height="500"></canvas>
    <script>
var canvas = document.getElementById("fractal"),
    ctx = canvas.getContext("2d"),
    nMax = 95,
    mouseX = 800, mouseY = 83
    scaleFactor = (100 - 4.4688) / 100;
function redraw (){
  var scale = 20,
      angle = -mouseY / canvas.height * Math.PI / 8;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var n = Math.floor(nMax * mouseX / 960);

  ctx.save();
  ctx.translate(497, 472);
  drawGeometry(scale, angle, 0, n, false);
  ctx.restore();
}
// The recursive fractal definition
function drawGeometry(scale, angle, i, n, flip){

  drawCircle(0, 0, scale / 2)
  ctx.translate(0, -scale);
  ctx.rotate(flip ? angle : -angle);

  if(i < n){
    ctx.save();
    // Continue the current branch.
    drawGeometry(scale * scaleFactor, angle, i+1, n, flip);

    // Create a new branch every 10 circles.
    if(i % 11 === 0){
      drawGeometry(scale * scaleFactor, angle, i+1, n, !flip);
    }
    ctx.restore();
  }

}
function drawCircle(x, y, radius){
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fill();
}
redraw();
canvas.addEventListener("mousemove",function(e){
  mouseX = e.x;
  mouseY = e.y;
  redraw();
});
    </script>
  </body>
</html>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png