Hilbert spiral (L-system) by nitaku

A Lindenmayer system that draws a sequence of growing Hilbert curves following a spiral layout.

Like in the previous experiment, a repetition rule is added to the Hilbert rules (A and B) to obtain the sequence. In order to produce the spiral layout, the rule contains some turns and different repetitions of the Hilbert rules A and B.

The objective is to find a layout that starts from a central point and grows spiraling away from it. The layout is intended to be used for creating a jigsaw treemap, so a naive spiral layout (like this one) is out of the question because of the elongated regions it would produce.

By leveraging the locality properties of the Hilbert curve, the layout presented in this example should somehow manage to both spiral away from a central point and have regions with good aspect ratios.

One downside of this approach is that the central point (in red) is likely to fall far from the figure’s centroid.

index.js

(function() {
  // noprotect;
  /* compute a Lindenmayer system given an axiom, a number of steps and rules
  */

  var curve, d, fractalize, height, svg_path, transition, tweenDash, vis, width;

  fractalize = function(config) {
    var char, i, input, output, _i, _j, _len, _ref;

    input = config.axiom;
    for (i = _i = 0, _ref = config.steps; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
      output = '';
      for (_j = 0, _len = input.length; _j < _len; _j++) {
        char = input[_j];
        if (char in config.rules) {
          output += config.rules[char];
        } else {
          output += char;
        }
      }
      input = output;
    }
    return output;
  };

  /* convert a Lindenmayer string into an SVG path string
  */


  svg_path = function(config) {
    var angle, char, path, _i, _len, _ref;

    angle = 0.0;
    path = 'M0 0';
    _ref = config.fractal;
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      char = _ref[_i];
      if (char === '+') {
        angle += config.angle;
      } else if (char === '-') {
        angle -= config.angle;
      } else if (char === 'F') {
        path += "l" + (config.side * Math.cos(angle)) + " " + (config.side * Math.sin(angle));
      }
    }
    return path;
  };

  /* animate the path
  */


  /* from Mike Bostock's stroke dash interpolation example http://bl.ocks.org/mbostock/5649592
  */


  tweenDash = function() {
    var i, l;

    l = this.getTotalLength();
    i = d3.interpolateString('0,' + l, l + ',' + l);
    return function(t) {
      return i(t);
    };
  };

  transition = function(path) {
    return path.transition().duration(20000).attrTween('stroke-dasharray', tweenDash);
  };

  curve = fractalize({
    axiom: 'FY',
    steps: 6,
    rules: {
      Y: 'Y+AFA+FBF',
      A: '-BF+AFA+FB-',
      B: '+AF-BFB-FA+'
    }
  });

  d = svg_path({
    fractal: curve,
    side: 5,
    angle: Math.PI / 2
  });

  width = 960;

  height = 500;

  vis = d3.select('body').append('svg').attr({
    width: width,
    height: height
  }).append('g').attr({
    transform: "translate(" + (width / 2) + "," + (height / 2) + ")"
  });

  vis.append('path').attr('class', 'curve shadow').attr('d', d);

  vis.append('path').attr('class', 'curve').attr('d', d).call(transition);

  vis.append('circle').attr({
    r: 2,
    fill: 'red'
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Hilbert spiral (L-system)" />
    <title>Hilbert spiral (L-system)</title>
    <link rel="stylesheet" href="index.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

index.coffee

`// noprotect`

### compute a Lindenmayer system given an axiom, a number of steps and rules ###
fractalize = (config) ->
    input = config.axiom
    
    for i in [0...config.steps]
        output = ''
        
        for char in input
            if char of config.rules
                output += config.rules[char]
            else
                output += char
                
        input = output
        
    return output
    
### convert a Lindenmayer string into an SVG path string ###
svg_path = (config) ->
    angle = 0.0
    path = 'M0 0'
    
    for char in config.fractal
        if char == '+'
            angle += config.angle
        else if char == '-'
            angle -= config.angle
        else if char == 'F'
            path += "l#{config.side * Math.cos(angle)} #{config.side * Math.sin(angle)}"
            
    return path
    
### animate the path ###
### from Mike Bostock's stroke dash interpolation example http://bl.ocks.org/mbostock/5649592 ###
tweenDash = () ->
    l = this.getTotalLength()
    i = d3.interpolateString('0,' + l, l + ',' + l)
    return (t) -> i(t)
    
transition = (path) ->
    path.transition()
        .duration(20000)
        .attrTween('stroke-dasharray', tweenDash)
        
        
curve = fractalize
    axiom: 'FY'
    steps: 6
    rules:
        Y: 'Y+AFA+FBF'
        A: '-BF+AFA+FB-'
        B: '+AF-BFB-FA+'
        
d = svg_path
    fractal: curve
    side: 5
    angle: Math.PI/2
    
width = 960
height = 500

vis = d3.select('body').append('svg')
    .attr
      width: width
      height: height
  .append('g')
    .attr
      transform: "translate(#{width/2},#{height/2})"
    
vis.append('path')
    .attr('class', 'curve shadow')
    .attr('d', d)
    
vis.append('path')
    .attr('class', 'curve')
    .attr('d', d)
    .call(transition)
    
vis.append('circle')
  .attr
    r: 2
    fill: 'red'

index.css

svg {
  background: white;
}
.curve {
  fill: none;
  stroke: black;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.shadow {
  opacity: 0.1;
}