Skip to content

Instantly share code, notes, and snippets.

@christophermanning

christophermanning/README.md

Created December 11, 2012 04:11
Show Gist options
  • Save christophermanning/4255827 to your computer and use it in GitHub Desktop.
Save christophermanning/4255827 to your computer and use it in GitHub Desktop.
Download ZIP
Sierpinski Chaos Game
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<style type="text/css">
circle {
stroke: #000;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = { "iterations": 2500, "radius": 1}
var gui = new dat.GUI()
var iterationsChanger = gui.add(config, "iterations", 1, 10000).step(1)
iterationsChanger.onChange(function(value) {
restart()
})
var radiusChanger = gui.add(config, "radius", 1, 25).step(1)
radiusChanger.onChange(function(value) {
restart()
})
config.regenerate = function() {
restart()
}
gui.add(config, 'regenerate')
var width = window.innerWidth,
height = window.innerHeight,
nodes = []
x = 0,
y = 0
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
restart()
function restart() {
for (i = 0; i < config["iterations"]; i++) {
switch(Math.floor(Math.random()*3)) {
case 0:
x = x/2
y = (height+y)/2
break
case 1:
x = (width+x)/2
y = (height+y)/2
break
case 2:
x = (width/2+x)/2
y = y/2
break
}
nodes[i] = {x: x, y:y}
}
nodes.length = config["iterations"]
node = svg.selectAll("circle")
.data(nodes)
node.enter().insert("circle")
node
.attr("cx", function(d) { return d.x })
.attr("cy", function(d) { return d.y })
.attr("r", config["radius"])
node.exit().remove()
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment