A radial variation on the traditional rendering of the Cantor Set computed as an L-System and rendered using D3.
You can buy prints of this graphic.
Built with blockbuilder.org
forked from curran's block: Cantor Set
license: mit | |
border: no | |
height: 750 |
A radial variation on the traditional rendering of the Cantor Set computed as an L-System and rendered using D3.
You can buy prints of this graphic.
Built with blockbuilder.org
forked from curran's block: Cantor Set
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> body { margin: 0 } </style> | |
</head> | |
<body> | |
<svg width="960" height="960"></svg> | |
<script> | |
var rules = { | |
A: "ABA", | |
B: "BBB" | |
}, | |
initialState = "A", | |
iterations = 8, | |
L = function(str){ | |
return str.split("").map(function (d){ | |
return rules[d]; | |
}).join("") | |
}, | |
data = d3.range(iterations).map(function iterate(i){ | |
return i ? L(iterate(i - 1)) : initialState; | |
}); | |
console.log(JSON.stringify(data, null, 2)); | |
// Prints the following: | |
// [ | |
// "A", | |
// "ABA", | |
// "ABABBBABA", | |
// "ABABBBABABBBBBBBBBABABBBABA", | |
// "ABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABA", | |
// "ABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABA", | |
// ... | |
var svg = d3.select("svg"), | |
width = svg.attr("width"), | |
height = svg.attr("height"), | |
x = d3.scaleBand() | |
.range([-Math.PI, Math.PI]), | |
y = d3.scaleBand() | |
.domain(d3.range(iterations)) | |
.range([0, width/2]), | |
arc = d3.arc(), | |
arcs = data | |
.map(function(str, j){ | |
x.domain(d3.range(str.length)); | |
return str.split("") | |
.map(function (symbol, i){ | |
return { | |
symbol: symbol, | |
innerRadius: y(j), | |
outerRadius: y(j) + y.bandwidth() + 1, | |
startAngle: x(i), | |
endAngle: x(i) + x.bandwidth() | |
}; | |
}) | |
.filter(function (d){ | |
return d.symbol === "A"; | |
}); | |
}) | |
.reduce(function (a, b){ | |
return a.concat(b); | |
}, []); | |
svg.append("g") | |
.attr("transform", "translate(" + [width/2, 250] + ")") | |
.selectAll("path").data(arcs) | |
.enter().append("path") | |
.attr("d", arc) | |
.attr("fill", "black"); | |
</script> | |
</body> |