2D Random Walk

References

Random Walk

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://d3js.org/d3.v3.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">
body {
  padding: 0
  margin: 0
}

path {
  stroke: black;
  stroke-linejoin: round;
  stroke-width: 2px;
  fill: none;
}
</style>
</head>
<body>
<script type="text/javascript">
config = {"theta": 60, "steps" : 5000, "interpolation" : "basis-open", "tension" : 0};
gui = new dat.GUI();
thetaChanger = gui.add(config, "theta", 1, 360).step(1)
thetaChanger.onChange(function(value) {
  vertices = [{xo: 0, yo: 0}]
});
gui.add(config, "steps", 1, 10000).step(1);
interpolationChanger = gui.add(config, "interpolation", ["linear", "step-before", "step-after", "basis", "basis-open", "basis-closed", "cardinal", "cardinal-open", "cardinal-closed", "monotone"])
interpolationChanger.onChange(function(value) {
  line.interpolate(value)
})
tensionChanger = gui.add(config, "tension", 0, 1)
tensionChanger.onChange(function(value) {
  line.tension(value)
})
config.random = function(){
  gui.__controllers.forEach(function(c){
    if(typeof(c.__select) != 'undefined') {
        c.setValue(c.__select[Math.floor(Math.random()*(c.__select.length-1))].value)
    } else {
      if(c.property!="random"){
        c.setValue(Math.floor(Math.random() * c.__max) + c.__min)
      }
    }
  })
  redraw()
}
gui.add(config, "random")
config.redraw = function(){
  vertices = [{xo: 0, yo: 0}]
}
gui.add(config, "redraw")

width = window.innerWidth
height = window.innerHeight
scale = 8
originX = width/2
originY = height/2
vertices = [{xo: 0, yo: 0}]

line = d3.svg.line()
    .interpolate(config["interpolation"])
    .tension(config["tension"])
    .x(function(d, i) { return originX + (d.xo*scale) })
    .y(function(d, i) { return originY + (d.yo*scale) })

zoom = d3.behavior.zoom()
    .scale(scale)
    .scaleExtent([1, 32])
    .on("zoom", redraw)

svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);

function redraw() {
  originX = (width/2)  + d3.event.translate[0]
  originY = (height/2) + d3.event.translate[1]
  scale = d3.event.scale
}

svg
.append("path")

edge = svg.selectAll("path")
.data(vertices)

d3.timer(function(t){
  if(vertices.length < config["steps"]) {
    for(var i=0;i<1000;i++){
      var last = vertices[vertices.length-1]
      var xo = last.xo
      var yo = last.yo

var r=Math.floor(Math.random()*(360/config["theta"]))
      var theta = Math.PI * ((r * config["theta"] % 360)/180)

xo+=Math.cos(theta)
      yo+=Math.sin(theta)

vertices.push({xo: xo, yo: yo})
    }
  } else if(vertices.length > config["steps"]) {
    vertices.length = config["steps"]
  }
  edge.attr("d", function(d) { return line(vertices) })
});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

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