Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active June 25, 2023 19:14
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nitaku/bffd66a05d5bf04aefa7 to your computer and use it in GitHub Desktop.
Hilbert spiral (L-system)

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.

`// 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'
svg {
background: white;
}
.curve {
fill: none;
stroke: black;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.shadow {
opacity: 0.1;
}
<!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="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment