Skip to content

Instantly share code, notes, and snippets.

@jhellier

jhellier/README.md

Last active October 16, 2015 22:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhellier/ded7b30434df96f9a9f0 to your computer and use it in GitHub Desktop.
Save jhellier/ded7b30434df96f9a9f0 to your computer and use it in GitHub Desktop.
Download ZIP
Circles: Grow and Rotate
Raw
README.md

Built with blockbuilder.org

This is part of a series looking at the movement of circles in circular patterns. Clicking on one of the small inner circles starts that inner circle rotating. Clicking on it again, stops the rotation.

This example has the circles grow and shrink as they move around.

You can put any number of circles in the large base circle and they will be evenly spaced.

The position of the each circle is tracked so that you can start and stop each circle without doing complex calculations for determining where the circle is and where it needs to go. Or at least it seemed more complex to me versus just tracking the last degree position.

This could be expanded to have controls for changing the number of circles, changing how they rotate. Up to your imagination.

There will be other versions that will show more types of movement.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background-color: #1A0000;}
button { margin: 10px; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<button id="reset">Reset</button>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function makeCircles() {
clear();
var strokeW = "2px";
var n = 5;
var r = initR = (height/2 - 50)/5;
var inc = 360/n;
var centerX = width/2;
var centerY = height/2;
var centerR = height/2 - 50;
var growing = true;
svg.append("circle")
.attr("r", centerR)
.attr("cy", centerY)
.attr("cx", centerX)
.attr("class","outerCircle")
.attr("stroke","blue")
.attr("stroke-width", strokeW)
.attr("stroke-style","solid")
.attr("fill", "black");
for (var i = 0; i < 360; i += inc) {
var adj = i * (Math.PI/180); //Radians conversion. Math.sin needs radians not degrees
var cx = centerX - (Math.sin(adj) * (centerR - r));
var cy = centerY - (Math.cos(adj) * (centerR - r));
svg.append("circle")
.attr("r", r)
.attr("cx", cx)
.attr("cy", cy)
.attr("degrees", i)
.attr("class","innerCircle")
.attr("stroke","blue")
.attr("active", "false")
.attr("stroke-width", strokeW)
.attr("stroke-style","solid")
.attr("fill","black")
.style("fill-opacity", "0.1")
.on("click", function() {
var c = d3.select(this)
if (c.attr("active") == "false") {
var rotate1 = setInterval(function() { rotate(c); }, 30);
c.attr("intervalId",rotate1);
c.attr("active","true")
} else {
c.attr("active","false")
clearInterval(c.attr("intervalId"));
}
})
};
function clear() {
d3.selectAll(".innerCircle")
.each(function() {
if (d3.select(this).attr("intervalId") != null)
clearInterval(d3.select(this).attr("intervalId"));
});
d3.selectAll("circle").remove();
};
function rotate(circle) {
var lastDegrees = Number(circle.attr("degrees")) + 1;
if (lastDegrees == 360)
lastDegrees = 0;
if (growing) {
if (r < centerR)
r += 0.25;
else {
growing = false;
r -= 0.25;
}
} else {
if (r > initR)
r -= 0.25;
else {
growing = true;
r += 0.25;
}
}
circle.attr("degrees", lastDegrees);
var adj1 = lastDegrees * (Math.PI/180);
var cx = centerX - (Math.sin(adj1) * (centerR - r));
var cy = centerY - (Math.cos(adj1) * (centerR - r));
circle.attr("cx", cx).attr("cy", cy).attr("r",r);
}
};
(function() {
makeCircles();
}());
d3.select("#reset").on("click", function() { makeCircles(); } );
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment