import { svg as _svg } from"/src/cscheid/cscheid.js";{var svg = d3.select("#main").append("svg").attr("width",600).attr("height",600);functionaddLineGrid(parent) {return parent.append("g").selectAll("line").data(d3.range(-5,20)).enter().append("line").attr("x1",-300).attr("x2",900).attr("y1", d => d *40).attr("y2", d => d *40).attr("stroke","gray").attr("stroke-width","5px"); }// uglyaddLineGrid(svg).attr("transform","translate(320, 320) rotate(90) translate(-320, -320)");addLineGrid(svg).attr("transform","translate(320, 320) rotate(30) translate(-320, -320)");addLineGrid(svg).attr("transform","translate(320, 320) rotate(150) translate(-320, -320)");functionaddPoints(parent) {return parent.append("g").selectAll("circle").data(d3.range(-1,16)).enter().append("circle").attr("r","5px").attr("fill","black").attr("stroke","white").attr("cx",0).attr("cy", d => d *40/ (Math.sqrt(3) /2)); }var gap =40/(Math.sqrt(3)/2);var left = svg.append("g").selectAll("g").data(d3.range(4)).enter().append("g").attr("transform", d => _svg.translate(40+80* d,-3)).call(addPoints);var right = svg.append("g").selectAll("g").data(d3.range(4)).enter().append("g").attr("transform", d => _svg.translate(560-80* d,-3+gap)).call(addPoints);functionmoveLeft() { left.transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(40+80* d,-3+gap/2)).transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(40+80* d,-3)).on("end", moveLeft); }functionmoveRight() { right.transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(560-80* d,-3+3*gap/2)).transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(560-80* d,-3+gap)).on("end", moveRight); }moveLeft();window.setTimeout(moveRight,750);}
Acknowledgements
I found out about the static version of this illusion on twitter.
Source Code
---title: Variations on the Hermann griddate: 2018-10-13categories: [optical-illusion]image: /images/variations-on-the-hermann-grid.jpg---The [Hermann grid](https://www.illusionsindex.org/i/hermann-grid) is the prototypical example of the extinctionillusion. Here we build a small variation of Figure 5 from [Ninio andStevens's Variations on the Hermann Grid: An Extinction Illusion](http://journals.sagepub.com/doi/abs/10.1068/p2985).There are equally many points on either half of the image: the animation simply moves the points vertically.<divid="main"></div>```{ojs}import { svg as _svg } from"/src/cscheid/cscheid.js";{var svg = d3.select("#main").append("svg").attr("width",600).attr("height",600);functionaddLineGrid(parent) {return parent.append("g").selectAll("line").data(d3.range(-5,20)).enter().append("line").attr("x1",-300).attr("x2",900).attr("y1", d => d *40).attr("y2", d => d *40).attr("stroke","gray").attr("stroke-width","5px"); }// uglyaddLineGrid(svg).attr("transform","translate(320, 320) rotate(90) translate(-320, -320)");addLineGrid(svg).attr("transform","translate(320, 320) rotate(30) translate(-320, -320)");addLineGrid(svg).attr("transform","translate(320, 320) rotate(150) translate(-320, -320)");functionaddPoints(parent) {return parent.append("g").selectAll("circle").data(d3.range(-1,16)).enter().append("circle").attr("r","5px").attr("fill","black").attr("stroke","white").attr("cx",0).attr("cy", d => d *40/ (Math.sqrt(3) /2)); }var gap =40/(Math.sqrt(3)/2);var left = svg.append("g").selectAll("g").data(d3.range(4)).enter().append("g").attr("transform", d => _svg.translate(40+80* d,-3)).call(addPoints);var right = svg.append("g").selectAll("g").data(d3.range(4)).enter().append("g").attr("transform", d => _svg.translate(560-80* d,-3+gap)).call(addPoints);functionmoveLeft() { left.transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(40+80* d,-3+gap/2)).transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(40+80* d,-3)).on("end", moveLeft); }functionmoveRight() { right.transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(560-80* d,-3+3*gap/2)).transition().delay(1500).duration(1500).attr("transform", d => _svg.translate(560-80* d,-3+gap)).on("end", moveRight); }moveLeft();window.setTimeout(moveRight,750);}```## AcknowledgementsI found out about the static version of this illusion [on twitter](https://twitter.com/chazfirestone/status/1049312925134020610).