The breathing square optical illusion. All 5 squares are the same size, however the background square appears to grow and shrink as it rotates even though its size never changes.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Growing up Square</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| ul{ | |
| list-style-type: none; | |
| text-decoration: underline; | |
| color: #34AEFF; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li id="colorBut">toggle color</li> | |
| <li id="opacityBut">toggle opacity</li> | |
| </ul> | |
| </body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var foreSqSize = 100; | |
| var gutter = 15; | |
| var center = foreSqSize*2+gutter/2; | |
| var offset = 0, | |
| speed = 0.05, | |
| start = Date.now(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| back = svg.append("g").attr("id","back").append("rect") | |
| .attr("x",center-foreSqSize/2) | |
| .attr("y",center-foreSqSize/2) | |
| .attr("width",foreSqSize) | |
| .attr("height",foreSqSize) | |
| .style("fill","#e80d4b"); | |
| fore = svg.append("g").attr("id","fore") | |
| .selectAll("rect") | |
| .data([[foreSqSize,foreSqSize],[foreSqSize,2*foreSqSize+gutter],[2*foreSqSize+gutter,foreSqSize],[2*foreSqSize+gutter,2*foreSqSize+gutter]]); | |
| fore.enter().append("rect") | |
| .attr("x",function(d){return d[0];}) | |
| .attr("y",function(d){return d[1];}) | |
| .attr("width",foreSqSize) | |
| .attr("height",foreSqSize) | |
| .style("fill","#34AEFF"); | |
| d3.select("#colorBut").style("cursor","pointer").on("click",function(d) { | |
| if (fore.style("fill") == "rgb(255, 255, 255)") { | |
| fore.style("fill", "#34AEFF"); | |
| back.style("fill", "#e80d4b") | |
| .style("stroke", "none"); | |
| } | |
| else { | |
| fore.style("fill","rgb(255, 255, 255)"); | |
| back.style("fill","rgb(255, 255, 255)") | |
| .style("stroke","#e80d4b"); | |
| } | |
| }) | |
| d3.select("#opacityBut").style("cursor","pointer").on("click",function(d) { | |
| if (fore.style("opacity") == 1) { | |
| fore.transition().duration(1000).style("opacity", 0.7); | |
| } | |
| else { | |
| fore.transition().duration(1000).style("opacity", 1); | |
| } | |
| }) | |
| d3.timer(step); | |
| function step() { | |
| var angle = (Date.now() - start) * speed % 360; | |
| back.attr("transform", "rotate("+angle+","+center+","+center+")") | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment