christophermanning/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Created by Christopher Manning
References


Code 39
simplex-noise.js


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

var config = { "height": 300, "characters": 10, "animate": false, "x": 1, "amplitude": 3, "velocity": 1, "margin": 100};
var gui = new dat.GUI();
//gui.close()
gui.add(config, "animate").listen();
gui.add(config, "characters", 1, 40).step(1).listen();
gui.add(config, "height", 1, height).listen();
gui.add(config, "x", 1, 100).listen();
gui.add(config, "amplitude", 1, 15).listen();
gui.add(config, "velocity", 1, 100).listen();
gui.add(config, "margin", 0, height/2).listen();
config.random = function(){
  gui.__controllers.forEach(function(c){
    if(c.property!='random' && c.property!='margin'){
      c.setValue(Math.random()*c.__max)
    }
  })
}
gui.add(config, "random")

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>

## thumbnail.png

      
    Raw
  

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

	var config = { "height": 300, "characters": 10, "animate": false, "x": 1, "amplitude": 3, "velocity": 1, "margin": 100};
	var gui = new dat.GUI();
	//gui.close()
	gui.add(config, "animate").listen();
	gui.add(config, "characters", 1, 40).step(1).listen();
	gui.add(config, "height", 1, height).listen();
	gui.add(config, "x", 1, 100).listen();
	gui.add(config, "amplitude", 1, 15).listen();
	gui.add(config, "velocity", 1, 100).listen();
	gui.add(config, "margin", 0, height/2).listen();
	config.random = function(){
	gui.__controllers.forEach(function(c){
	if(c.property!='random' && c.property!='margin'){
	c.setValue(Math.random()*c.__max)
	}
	})
	}
	gui.add(config, "random")

	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>