| license: mit | |
| border: no | |
| height: 960 |
A radial visualization of the power-of-two rhythmic subdivisions that occur in music. The pattern is computed using an L-System and rendered with D3.
Built with blockbuilder.org
forked from curran's block: Radial 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: "AB", | |
| B: "AB" | |
| }, | |
| initialState = "A", | |
| iterations = 14, | |
| 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; | |
| }); | |
| 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() | |
| .cornerRadius(5), | |
| 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, height/2] + ")") | |
| .selectAll("path").data(arcs) | |
| .enter().append("path") | |
| .attr("d", arc) | |
| .attr("fill", "black"); | |
| </script> | |
| </body> |
