Skip to content

Instantly share code, notes, and snippets.

@eskimoblood

eskimoblood/index.html

Last active December 13, 2015 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eskimoblood/4980100 to your computer and use it in GitHub Desktop.
Save eskimoblood/4980100 to your computer and use it in GitHub Desktop.
Download ZIP
Flower of life
Raw
index.html
<!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