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.
Last active
August 29, 2015 14:10
-
-
Save cherdarchuk/551eae4562f9ca01dc2b to your computer and use it in GitHub Desktop.
Breathing square
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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