Skip to content

Instantly share code, notes, and snippets.

@christophermanning

christophermanning/README.md

Last active December 9, 2015 20:28
Show Gist options
  • Save christophermanning/4324236 to your computer and use it in GitHub Desktop.
Save christophermanning/4324236 to your computer and use it in GitHub Desktop.
Download ZIP
Simplex Noise Code 39 Barcode
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment