christophermanning/README.md

## README.md

      
      Raw
    
  
              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

      
      Raw
    
  
              thumbnail.png
	<!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>