Skip to content

Instantly share code, notes, and snippets.

@blacki

blacki/README.md

Last active January 3, 2016 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blacki/80281bb77ec9f42b2fe8 to your computer and use it in GitHub Desktop.
Save blacki/80281bb77ec9f42b2fe8 to your computer and use it in GitHub Desktop.
Download ZIP
Moiré-rotation-translate
Raw
README.md

Circular Moiré pattern resulting from translating as well as rotating random points. As described by Tadashi Tokieda on Numberphile

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Moiré Pattern</title>
<style media="screen">
body{
margin: 0;
}
canvas{
position: fixed;
top: 0;
}
</style>
</head>
<body>
<canvas id="cBottom"></canvas>
<canvas id="cTop"></canvas>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var c24 =['#33cc33','#ff0000','#3366ff','#00e7b4','#a6cee3','#fb9a99','#b15928','#b4002f','#bcbc34','#393d77','#ff8200','#7800a8','#ff00d7','#ffc100','#b2df8a','#fdb56d','#cab2d6','#c39c95','#29bece','#cc70bc','#669c95','#ff7a9a','#e3026f','#006d33']
colors = d3.shuffle(c24).slice(-3)
w = window.innerWidth
h = window.innerHeight
canvases = d3.selectAll('canvas').attr({
width:w,
height:h,
'z-index':function (d,i) {return i}
})
sqW = 4
numPts = w*h/(sqW*sqW*sqW)
xRange = d3.range(0,w)
x = d3.range(0,numPts).map(function () {
return d3.shuffle(xRange)[0]
})
yRange = d3.range(0,h)
y = d3.range(0,numPts).map(function () {
return d3.shuffle(yRange)[0]
})
cBottom = d3.select('#cBottom')
ctxB = cBottom.node().getContext('2d')
d3.range(0,numPts).forEach(function (i) {
ctxB.fillStyle = d3.shuffle(colors)[0]
ctxB.fillRect(x[i], y[i], sqW, sqW)
})
cTop = d3.select('#cTop').style('opacity',.8)
ctxT = cTop.node().getContext('2d')
ctxT.drawImage(cBottom.node(), 0, 0);
rScale = d3.scale.linear().domain([-90,90]).range([-5,5])
xScale = d3.scale.linear().domain([0,w]).range([-w/16,w/16])
yScale = d3.scale.linear().domain([0,h]).range([-h/16,h/16])
cTop.on('mousemove',function () {
m = d3.mouse(this)
cTop.style('transform','translate('
+xScale(m[0])+'px, '+yScale(m[1])+'px) '
+'rotate('+rScale(-Math.atan((m[0] - w/2)/(m[1] - h/2))*180/Math.PI) +'deg)')
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment