Sierpinski Chaos Game

Summary

References

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js