Created by Christopher Manning
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simplex Noise QR Code</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script 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>
<script src="qrcode.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;
}
rect{
}
</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 = { "version": 3, "grayscale": false, "x": 1, "y": 1, "size": 10, "velocity": 75, "margin": 100};
var gui = new dat.GUI();
//gui.close()
gui.add(config, "grayscale").listen();
gui.add(config, "version", 1, 10).step(1).listen();
gui.add(config, "x", 1, 50).listen();
gui.add(config, "y", 1, 50).listen();
gui.add(config, "size", 1, 50).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.property!="size"){
c.setValue(Math.random()*c.__max)
}
})
}
gui.add(config, "random")
noiseOpacity = d3.scale.linear().domain([1,-1]).range([0,1])
simplex = new SimplexNoise();
p = function(i) { return (i*config["size"])+config["margin"] }
moduleCount = function(version) { return 17 + (version * 4) }
data = []
d3.timer(function(t){
if(config["velocity"] == 0) return
dataModules = Math.sqrt(data.length)
versionModules = moduleCount(config["version"])
if(dataModules != versionModules) {
if(dataModules < versionModules) {
d3.range(dataModules, versionModules).forEach(function(i) {
d3.range(0, i).forEach(function(x) {
data.push({x: x, y: i, noise: null})
})
d3.range(0, i+1).forEach(function(y) {
data.push({x: i, y: y, noise: null})
})
})
} else if (versionModules < dataModules) {
data.length = Math.pow(config["version"], 2)
}
var qr = new QRCode(config["version"], QRErrorCorrectLevel.L)
qr.moduleCount = moduleCount(qr.typeNumber)
qr.modules = new Array(qr.moduleCount)
for (var row = 0; row < qr.moduleCount; row++) {
qr.modules[row] = new Array(qr.moduleCount)
for (var col = 0; col < qr.moduleCount; col++) {
qr.modules[row][col] = null
}
}
qr.setupPositionProbePattern(0, 0)
qr.setupPositionProbePattern(qr.moduleCount - 7, 0)
qr.setupPositionProbePattern(0, qr.moduleCount - 7)
qr.setupPositionAdjustPattern()
qr.setupTimingPattern()
qr.setupTypeInfo(false, 0)
if (qr.typeNumber >= 7) {
qr.setupTypeNumber(false)
}
requiredPatterns = {}
for (x = 0; x < versionModules; x++) {
for (y = 0; y < versionModules; y++) {
module = qr.modules[y][x]
if(module != null) {
requiredPatterns[x.toString() + "," + y.toString()] = module ? 1 : -1
}
}
}
square = svg.selectAll("rect")
.data(data)
square.enter()
.append("rect")
square.exit().remove()
}
data.map(function(d){
if(typeof(i = requiredPatterns[d.x.toString()+","+d.y.toString()]) == "undefined") {
d.noise = simplex.noise3D(d.x/(config["x"]), d.y/(config["y"]), t/((99-config["velocity"])*1000))
} else {
d.noise = i
}
})
square
.attr("fill", function(d) { return config["grayscale"] ? d3.hsl(0, 0, noiseOpacity(d.noise)) : (d.noise > 0 ? "#000" : "#FFF") })
.attr("width", function(d) { return config["size"] })
.attr("height", function(d) { return config["size"] })
.attr("x", function(d) { return p(d.x) })
.attr("y", function(d) { return p(d.y) })
})
</script>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Updated missing url http://bl.ocks.org/d/4289018/simplex-noise.min.js to /christophermanning/4289018/example/simplex-noise.min.js
https://d3js.org/d3.v3.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