Last active
December 13, 2015 21:49
-
-
Save eskimoblood/4980100 to your computer and use it in GitHub Desktop.
Flower of life
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://raw.github.com/bestiejs/lodash/v1.0.0/dist/lodash.min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 960; | |
| var radius = 100; | |
| var maxDepth = 2; | |
| var step = Math.PI * 2 / 6.0; | |
| _(['sin', 'cos']).each(function(t) { | |
| window[t] = function(x, i) { | |
| return Math.round((x + Math[t](step * i) * radius) * 100) / 100 | |
| } | |
| }); | |
| var svg = d3.select("body") | |
| .append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| _(calcCircles(0, width / 2, height / 2, [])).uniq().each(appendCircle); | |
| function calcCircles(depth, x, y, coords) { | |
| if (depth++ > maxDepth) return; | |
| for (var i = 0; i < 6; i++) { | |
| var newX = cos(x, i); | |
| var newY = sin(y, i); | |
| coords.push(newX + '-' + newY); | |
| calcCircles(depth, newX, newY, coords) | |
| } | |
| return coords | |
| } | |
| function appendCircle(coord) { | |
| coord = coord.split('-'); | |
| svg.append("svg:circle") | |
| .attr("cx", coord[0]) | |
| .attr("cy", coord[1]) | |
| .attr("r", radius) | |
| .attr("fill", 'transparent') | |
| .attr("stroke-opacity", .5) | |
| .attr("stroke", 'red'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment