Café wall illusion

References

Café wall illusion

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Café wall illusion</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> 
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}
rect {
  stroke: #7c7c7c;
  fill: black;
  stroke-width: 3px;
}
path {
  stroke: #7c7c7c;
  stroke-width: 3px;
}
</style>
</head>
<body>
<script type="text/javascript">
width = window.innerWidth
height = window.innerHeight

svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var paths = []
var path = svg.selectAll("path")
var rects = []
var rect = svg.selectAll("rect")
var angle = 0

d3.timer(function(t){
  paths = []
  rects = []

for (var y = 0; y <= height; y++) {
    if (rects.length > 5000) break
    if (config["lines"]) paths.push([[0, y], [width, y]])
    for (var x = 20 + (config["amplitude"]*Math.sin((2*Math.PI*angle)/3000+y/config["period"])); x <= width; x++) {
      if (config["squares"]) rects.push([x, y])
      x += config["width"] + config["x"]
    }
    y += config["height"] - 1  // -1 to compensate for borders
    angle += config["velocity"]
  }

rect = rect
  .data(rects)

rect.enter()
  .insert("rect")

rect
  .attr("x", function(d) { return d[0] })
  .attr("y", function(d) { return d[1] })
  .attr("width", function(d) { return config["width"] })
  .attr("height", function(d) { return config["height"] })

rect.exit()
  .remove()

path = path
  .data(paths)

path.enter()
  .insert("path")

path
  .attr("d", function(d) { return "M" + d.map(function(d){ return d.join(",") }).join("L") })

path.exit()
  .remove()
});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js