Simplex Noise Code 39 Barcode

References

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Simplex Noise Code 39 Barcode</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 {
  display: block;
  margin: 0;
  background-color: #FFF;
}
text{
  font-family:monospace;
  font-size: 1.5em;
  text-anchor: middle;
}
path{
  fill-opacity: 0;
}
    </style>
  </head>
  <body></body>
  <script type="text/javascript">

var width = window.innerWidth,
    height = window.innerHeight

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

characters = {
  '100100100101': '$',
  '100100101001': '/',
  '100101001001': '+',
  '100101011011': '-',
  '100101101011': 'X',
  '100101101101': '*',
  '100110101011': 'V',
  '100110101101': ' ',
  '100110110101': 'Z',
  '101001001001': '%',
  '101001011011': '7',
  '101001101011': '4',
  '101001101101': '0',
  '101010011011': 'G',
  '101010110011': 'Q',
  '101011001011': 'D',
  '101011001101': 'J',
  '101011010011': 'N',
  '101011011001': 'T',
  '101100101011': '2',
  '101100101101': '9',
  '101100110101': '6',
  '101101001011': 'B',
  '101101001101': 'I',
  '101101010011': 'L',
  '101101011001': 'S',
  '101101100101': 'F',
  '101101101001': 'P',
  '110010101011': 'U',
  '110010101101': '0',
  '110010110101': 'Y',
  '110011010101': 'W',
  '110100101011': '1',
  '110100101101': '8',
  '110100110101': '5',
  '110101001011': 'A',
  '110101001101': 'H',
  '110101010011': 'K',
  '110101011001': 'R',
  '110101100101': 'E',
  '110101101001': 'O',
  '110110010101': '3',
  '110110100101': 'C',
  '110110101001': 'M',
}

bar = d3.scale.quantize().domain([-1, 1]).range(Object.keys(characters))

simplex = new SimplexNoise();

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

data = []

// Code 39 barcodes start with a *
  data.push('100101101101')

line = d3.svg.line()
  .x(function(d) { return d.cx = d.x + (config['animate'] ?  simplex.noise3D(100/config['x'], d.y/config['x'], t/((9999-config['velocity'])))*100 : 0) } )
  .y(function(d) { return d.cy = d.y + (config['animate'] ?  simplex.noise3D(100/config['x'], d.y/config['x'], t/((9999-config['velocity'])))*100 : 0) } )

d3.range(0, config["characters"]).forEach(function(x) {
    data.push(bar(simplex.noise2D(x/(0+config['x']*.0001), t/((99-config['velocity'])*1000))))
  })

// Code 39 barcodes end with a *
  data.push('100101101101')

path = svg.selectAll('path')
  // each character needs a space between it
  .data(data.map(function(c) { return c + '0' }).join('').split('')
    .map(function(d, i){
      return [
        { c: d, x: config['margin'] + (i* config['amplitude']), y: config['margin']},
        { c: d, x: config['margin'] + (i* config['amplitude']), y: config['margin'] + config['height']}
      ]
    })
  )

path.enter()
  .append('path')

path
  .style("stroke", function(d) { return d[0].c == '1' ? '#000' : '#FFF'})
  .style("stroke-width", function(d) { return config['amplitude'] })
  .attr("d", line);

path.exit().remove()

text = svg.selectAll('text')
  .data([data.slice(1,-1).join('')])

text.enter()
  .append('text')

middlePath = path[0][((config["characters"]+2)*12)/2].__data__

text
  .attr("x", function(d) { return middlePath[1].cx })
  .attr("y", function(d) { return 20 + middlePath[1].cy })
  .text(function(d) { return d.match(/[01]{12}/g).map(function(v) { return characters[v] }).join('') })

text.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