Simplex Noise Dots

Created by Christopher Manning

Controls

Drag left and right to adjust the width of the noise
Drag up and down to adjust the height of the noise
Use the mousewheel to increase or decrease the amplitude.

References

simplex-noise.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Simplex Noise Dots</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> 
    <script src="/christophermanning/4289018/example/simplex-noise.min.js"></script>
    <style type="text/css">
body {
  margin: 0;
  background-color: #FFF;
}

svg circle {
  fill: #000;
}
    </style>
  </head>
  <body></body>
  <script type="text/javascript">
var width = window.innerWidth || 960,
    height = window.innerHeight || 500
var config = { "rows": width/30, "cols": height/6.5, "x": 100, "y": 100, "dx": 10, "dy": 10, "amplitude": 7, "velocity": 50, "margin": 100};
var gui = new dat.GUI();
gui.close()
gui.add(config, "rows", 1, 100).listen();
gui.add(config, "cols", 1, 100).listen();
gui.add(config, "x", 1, 100).listen();
gui.add(config, "y", 1, 100).listen();
gui.add(config, "dx", 0, 100).listen();
gui.add(config, "dy", 0, 100).listen();
amplitudeChanger = gui.add(config, "amplitude", 1, 100).listen();
amplitudeChanger.onChange(function(value) {
  radius.range([0, config["amplitude"]])
});
gui.add(config, "velocity", 0, 100).listen();
gui.add(config, "margin", 0, 100).listen();
config.random = function(){
  gui.__controllers.forEach(function(c){
    if(c.property!="random"&&c.property!="margin"){
      c.setValue(Math.floor(Math.random() * c.__max) + c.__min)
    }
  })
}
gui.add(config, "random")

var zoom = d3.behavior.zoom()
.scale(config["amplitude"])
.scaleExtent([1, 100])
.on("zoom", function(d,i) {
  config["amplitude"] = Math.floor(d3.event.scale)
  radius.range([0, config["amplitude"]])
});

var drag = d3.behavior.drag()
.on("drag", function() {
  if(config["x"] + d3.event.dx > 0) config["x"] += d3.event.dx
  if(config["y"] + d3.event.dy > 0) config["y"] += d3.event.dy
})

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

var simplex = new SimplexNoise(),
    radius = d3.scale.linear().domain([-1, 1]).range([0, config["amplitude"]]),
    circle = svg.selectAll("circle")

d3.timer(function(t){
  if(config["velocity"] == 0) return

data = []

for (x = 0; x <= config["cols"]; x++) {
    for (y = 0; y <= config["rows"]; y++) {
      r = radius(simplex.noise3D(x/config["x"], y/config["y"], t/((99-config["velocity"])*100)))
      data.push( {
        r:  r,
        cx: config["margin"] + x * config["dx"] + config["amplitude"] - r,
        cy: config["margin"] + y * config["dy"] + config["amplitude"] - r
      })
    }
  }

circle = circle
  .data(data)

circle.enter()
  .append("circle")

circle
  .attr("cx", function(d) { return d.cx })
  .attr("cy", function(d) { return d.cy })
  .attr("r", function(d) { return d.r })

circle.exit()
  .remove()
})
  </script>
</html>

Updated missing url http://bl.ocks.org/d/4289018/simplex-noise.min.js to /christophermanning/4289018/example/simplex-noise.min.js

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

https://bl.ocks.org/d/4289018/simplex-noise.min.js