Moiré spiral patterns resulting from translating, rotating, as well as scaling random points. As described by Tadashi Tokieda on Numberphile
| <!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(-2) | |
| w = window.innerWidth | |
| h = window.innerHeight | |
| canvases = d3.selectAll('canvas').attr({ | |
| width:w, | |
| height:h, | |
| 'z-index':function (d,i) {return i} | |
| }) | |
| sqW = 6 | |
| 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); | |
| zScale = d3.scale.linear().domain([0,w]).range([.9,1]) | |
| 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) | |
| cBottom.style('transform','scale('+zScale(m[0])+')') | |
| 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