curran/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A tree fractal using SVG circles. The mouse position determines the branch angle and number of iterations. The number of SVG elements is shown on the bottom. Using this, you can get a feel for how much animation lag is introduced when the number of SVG elements gets high. You can feel the performance limits of SVG.
Built with blockbuilder.org
Forked from a previous version that uses Canvas - Tree Fractal with Circles.
forked from curran's block: Tree Fractal with SVG
forked from curran's block: Tree Fractal with SVG
forked from curran's block: Tree Fractal with COLORS!

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>fractal</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style> body: { margin: 0px }</style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

      var svg = d3.select("svg"),
          width = svg.attr("width"),
          height = svg.attr("height"),
          elementCount = svg.append("text")
            .attr("x", width / 2)
            .attr("y", height - 20)
            .attr("text-anchor", "middle")
            .attr("fill", "gray"),
          format = d3.format(","),
          nMax = 100,
          mouseX = 800,
          mouseY = 200,
          scaleFactor = 0.96;

      function redraw (){
        var scale = 14,
            angle = -mouseY / height * Math.PI / 8,
            n = Math.floor(nMax * mouseX / width),
            up = Math.PI;
        render(fractal(width/2, height - 136, up, scale, angle, 0, n, false));
      }

      function fractal(x, y, direction, scale, angle, i, n, flip){

        var circle = [{
          x: x,
          y: y,
          radius: scale / 2
        }];

        if(i < n){
          if(i % 11 === 0){
            return circle
              .concat(fractal(x, y, direction, scale, angle, i+1, n, flip))
              .concat(fractal(x, y, direction, scale, angle, i+1, n, !flip));
          } else {
            return circle.concat(
              fractal(
                x + Math.sin(direction) * scale,
                y + Math.cos(direction) * scale,
                direction + angle * (flip ? 1 : -1),
                scale * scaleFactor,
                angle,
                i+1,
                n,
                flip
              )
            );
          }
        }
        return circle;
      }

      function r(){
        return Math.floor(Math.random()*255);
      }

      function render(data){
        var circles = svg.selectAll("circle").data(data);
        circles
          .enter()
            .append("circle")
          .merge(circles)
            .attr("cx", function (d){ return d.x; })
            .attr("cy", function (d){ return d.y; })
            .attr("r", function (d){ return d.radius; })
            .attr("fill", function (){
              return [
                "rgb(",
                r(), ",",
                r(), ",",
                r(),
                ")"].join("");})
        circles.exit()
            .remove();

        elementCount.text(format(data.length) + " SVG Circle elements");
      }

      redraw();
      document.addEventListener("mousemove",function(e){
        mouseX = e.x;
        mouseY = e.y;
        redraw();
      });
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>fractal</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style> body: { margin: 0px }</style>
	</head>
	<body>
	<svg width="960" height="500"></svg>
	<script>

	var svg = d3.select("svg"),
	width = svg.attr("width"),
	height = svg.attr("height"),
	elementCount = svg.append("text")
	.attr("x", width / 2)
	.attr("y", height - 20)
	.attr("text-anchor", "middle")
	.attr("fill", "gray"),
	format = d3.format(","),
	nMax = 100,
	mouseX = 800,
	mouseY = 200,
	scaleFactor = 0.96;

	function redraw (){
	var scale = 14,
	angle = -mouseY / height * Math.PI / 8,
	n = Math.floor(nMax * mouseX / width),
	up = Math.PI;
	render(fractal(width/2, height - 136, up, scale, angle, 0, n, false));
	}

	function fractal(x, y, direction, scale, angle, i, n, flip){

	var circle = [{
	x: x,
	y: y,
	radius: scale / 2
	}];

	if(i < n){
	if(i % 11 === 0){
	return circle
	.concat(fractal(x, y, direction, scale, angle, i+1, n, flip))
	.concat(fractal(x, y, direction, scale, angle, i+1, n, !flip));
	} else {
	return circle.concat(
	fractal(
	x + Math.sin(direction) * scale,
	y + Math.cos(direction) * scale,
	direction + angle * (flip ? 1 : -1),
	scale * scaleFactor,
	angle,
	i+1,
	n,
	flip
	)
	);
	}
	}
	return circle;
	}

	function r(){
	return Math.floor(Math.random()*255);
	}

	function render(data){
	var circles = svg.selectAll("circle").data(data);
	circles
	.enter()
	.append("circle")
	.merge(circles)
	.attr("cx", function (d){ return d.x; })
	.attr("cy", function (d){ return d.y; })
	.attr("r", function (d){ return d.radius; })
	.attr("fill", function (){
	return [
	"rgb(",
	r(), ",",
	r(), ",",
	r(),
	")"].join("");})
	circles.exit()
	.remove();

	elementCount.text(format(data.length) + " SVG Circle elements");
	}

	redraw();
	document.addEventListener("mousemove",function(e){
	mouseX = e.x;
	mouseY = e.y;
	redraw();
	});
	</script>
	</body>
	</html>