From Wikipedia:
Epicyclic gearing or planetary gearing is a gear system consisting of one or more outer gears, or planet gears, revolving about a central, or sun gear. … Epicyclic gearing systems also incorporate the use of an outer ring gear or annulus, which meshes with the planet gears.
Use the menu in the top-left to change the frame of reference, fixing the specified gear in-place.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 960px; | |
| height: 500px; | |
| position: relative; | |
| } | |
| form { | |
| position: absolute; | |
| top: 1em; | |
| left: 1em; | |
| } | |
| path { | |
| fill-rule: evenodd; | |
| stroke: #333; | |
| stroke-width: 2px; | |
| } | |
| .sun path { | |
| fill: #6baed6; | |
| } | |
| .planet path { | |
| fill: #9ecae1; | |
| } | |
| .annulus path { | |
| fill: #c6dbef; | |
| } | |
| </style> | |
| <form> | |
| <input type="radio" name="reference" id="ref-annulus"> | |
| <label for="ref-annulus">Annulus</label><br> | |
| <input type="radio" name="reference" id="ref-planet" checked> | |
| <label for="ref-planet">Planets</label><br> | |
| <input type="radio" name="reference" id="ref-sun"> | |
| <label for="ref-sun">Sun</label> | |
| </form> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| radius = 80, | |
| x = Math.sin(2 * Math.PI / 3), | |
| y = Math.cos(2 * Math.PI / 3); | |
| var offset = 0, | |
| speed = 4, | |
| start = Date.now(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)") | |
| .append("g"); | |
| var frame = svg.append("g") | |
| .datum({radius: Infinity}); | |
| frame.append("g") | |
| .attr("class", "annulus") | |
| .datum({teeth: 80, radius: -radius * 5, annulus: true}) | |
| .append("path") | |
| .attr("d", gear); | |
| frame.append("g") | |
| .attr("class", "sun") | |
| .datum({teeth: 16, radius: radius}) | |
| .append("path") | |
| .attr("d", gear); | |
| frame.append("g") | |
| .attr("class", "planet") | |
| .attr("transform", "translate(0,-" + radius * 3 + ")") | |
| .datum({teeth: 32, radius: -radius * 2}) | |
| .append("path") | |
| .attr("d", gear); | |
| frame.append("g") | |
| .attr("class", "planet") | |
| .attr("transform", "translate(" + -radius * 3 * x + "," + -radius * 3 * y + ")") | |
| .datum({teeth: 32, radius: -radius * 2}) | |
| .append("path") | |
| .attr("d", gear); | |
| frame.append("g") | |
| .attr("class", "planet") | |
| .attr("transform", "translate(" + radius * 3 * x + "," + -radius * 3 * y + ")") | |
| .datum({teeth: 32, radius: -radius * 2}) | |
| .append("path") | |
| .attr("d", gear); | |
| d3.selectAll("input[name=reference]") | |
| .data([radius * 5, Infinity, -radius]) | |
| .on("change", function(radius1) { | |
| var radius0 = frame.datum().radius, angle = (Date.now() - start) * speed; | |
| frame.datum({radius: radius1}); | |
| svg.attr("transform", "rotate(" + (offset += angle / radius0 - angle / radius1) + ")"); | |
| }); | |
| d3.selectAll("input[name=speed]") | |
| .on("change", function() { speed = +this.value; }); | |
| function gear(d) { | |
| var n = d.teeth, | |
| r2 = Math.abs(d.radius), | |
| r0 = r2 - 8, | |
| r1 = r2 + 8, | |
| r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20, | |
| da = Math.PI / n, | |
| a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0), | |
| i = -1, | |
| path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)]; | |
| while (++i < n) path.push( | |
| "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0), | |
| "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0), | |
| "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0), | |
| "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0), | |
| "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0), | |
| "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)); | |
| path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z"); | |
| return path.join(""); | |
| } | |
| d3.timer(function() { | |
| var angle = (Date.now() - start) * speed, | |
| transform = function(d) { return "rotate(" + angle / d.radius + ")"; }; | |
| frame.selectAll("path").attr("transform", transform); | |
| frame.attr("transform", transform); // frame of reference | |
| }); | |
| </script> |
