Simplex Noise Dots

README.md

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

index.html

<!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="http://bl.ocks.org/d/4289018/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>

thumbnail.png