Skip to content

Instantly share code, notes, and snippets.

@cherdarchuk
Last active August 29, 2015 14:10
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save cherdarchuk/551eae4562f9ca01dc2b to your computer and use it in GitHub Desktop.
Breathing square

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