Unknown Pleasures

Forked from Tom MacWright and updated by Christopher Manning

Summary

This adds simplex noise to the waves. The 3D noise uses the parameters x and y. z is a function of the velocity and frame from d3.timer.

Controls

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

References

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>

body {
  background:#000;
  font: 10px sans-serif;
  width:960px;
  margin:0 auto;
}

path {
  fill-opacity: 0;
  stroke-width:2;
  stroke:#eee;
}

</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> 
<script src="simplex-noise.min.js"></script>
<script>
var margin = {top: 100, right: 20, bottom: 100, left: 80},
    width = 960 - margin.left - margin.right,
    height = window.innerHeight - margin.top - margin.bottom;

gui.add(config, "waves", 1, config["waves"]+40).listen();
gui.add(config, "width", 2, width/8).listen();
gui.add(config, "x", 1, 100).listen();
gui.add(config, "y", 1, 100).listen();
gui.add(config, "dy", 0, 100).listen();
gui.add(config, "amplitude", 0, 100).listen();
gui.add(config, "velocity", 0, 100).listen();
config.random = function(){
  gui.__controllers.forEach(function(c){
    if(c.property!="random" && c.property!="width" && c.property!="shades"){
      c.setValue(Math.floor(Math.random() * c.__max) + c.__min)
    }
  })
}
gui.add(config, "random")

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

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 + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(zoom)
    .call(drag)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var path = svg.selectAll("path"),
    simplex = new SimplexNoise()

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

data = []
  for (y = 1; y <= config["waves"]; y++) {
    waves = []
    for (x = 1; x <= config["width"]; x++) {
      waves.push([
        x * 8,
        (y*config["dy"])+simplex.noise3D(x/config["x"], y/config["y"], t/((99-config["velocity"])*100)) * config["amplitude"]
      ])
    }
    data.push(waves)
  }

path = path
  .data(data)

path.enter()
  .insert("path")

path
  .attr("d", function(d) { return "M" + d.map(function(d){ return d.join(",") }).join("L") })

path.exit()
  .remove()
})

</script>

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

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