Fractal Kaleidoscope_Beta

A tree fractal using circles and HTML5 Canvas.

A little project that I forked over from Curran and with his help we were able to make the fractal more coloful. I plan to make more but this was fun understanding how to use HTML5 canvas.

forked from curran's block: Tree Fractal with Circles

Original example from github.com/curran/HTML5Examples

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <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 = 600, mouseY = 107
    scaleFactor = (100 - 0.509952000000001) / 100;
function redraw (){
  var scale = 4,
      angle = -mouseY / canvas.height * Math.PI / 8;
  
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  var n = Math.floor(nMax * mouseX / 960);
  
  //HTML Canvas API > curran used mouseX on line 30 to make it baller
  ctx.save();
  ctx.translate(475, 320); 
  //ctx.rotate(mouseX/50);
  drawGeometry(scale, angle, 0, n, false);
  ctx.restore();
}
// The recursive fractal definition
function drawGeometry(scale, angle, i, n, flip){
  
  drawCircle(0, 0, scale / 2, i)
  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, i){
  var color = "rgb("+(i*20%255)+","+(i*15%255)+","+(i*18%255)+")";
  ctx.fillStyle=color;
  //console.log(color)
  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>