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

forked from davo's block: Unknown Pleasures

forked from wcjohnson11's block: Unknown Pleasures

forked from anonymous's block: Unknown Pleasures

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

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

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

</style>
<body>
<script src="https://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;

var config = { "shades": "grey on black", "waves": 75, "width": 100, "x": 38.6, "y": 23.8, "dy": 4.3, "amplitude": 53, "velocity": 25};

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 + ")")

data = []
  for (y = 1; y <= config["waves"]; y++) {
    waves = []
    for (x = 1; x <= 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>

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

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

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