From Mathworld:
The limaçon can be generated by specifying a fixed point P, then drawing a sequences of circles with centers on a given circle which all pass through P. The envelope of these curves is a limaçon. If the fixed point is on the circumference of the circle, then the envelope is a cardioid.
Other constructions of limaçon appear on Wikipedia e.g. using pedal curves.
Circle patterns appear in a branch of Math called "integrable systems", e.g. Bobenko + Suris
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title></title> | |
| <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> | |
| <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type='text/css'> body {font-family: Helvetica;} </style> | |
| <script type='text/javascript'>//<![CDATA[ | |
| function Controller($scope){ | |
| $scope.$watch("px",function(){ | |
| d3.select('svg').remove(); | |
| var limacon = d3.select(".limacon").append("svg"); | |
| x0 = 250; | |
| y0 = 200; | |
| r = 50; | |
| px = $scope.px; | |
| limacon.append("circle") | |
| .attr("cx", x0) | |
| .attr("cy", y0) | |
| .attr("r", r) | |
| .attr("stroke", "#FFCC66") | |
| .attr("stroke-width", 2) | |
| .attr("fill", "none"); | |
| for (var k = 0; k < 20; k++) { | |
| limacon.append("circle") | |
| .attr("cx", x0 + r * Math.cos(2 * Math.PI * 0.05 * k)) | |
| .attr("cy", y0 + r * Math.sin(2 * Math.PI * 0.05 * k)) | |
| .attr("r", r * Math.sqrt(Math.sin(2 * Math.PI * 0.05 * k) * Math.sin(2 * Math.PI * 0.05 * k) + (Math.cos(2 * Math.PI * 0.05 * k) - px / r) * (Math.cos(2 * Math.PI * 0.05 * k) - px / r))) | |
| .attr("stroke", "steelblue") | |
| .attr("stroke-width", 1) | |
| .attr("fill", "none"); | |
| } | |
| limacon.append("circle") | |
| .attr("cx", x0 + px) | |
| .attr("cy", y0) | |
| .attr("r", 1) | |
| .attr("stroke", "#66CC66") | |
| .attr("stroke-width", 2) | |
| .attr("fill", "#66CC66"); | |
| }); | |
| } | |
| //]]> | |
| </script> | |
| </head> | |
| <body> | |
| <div ng-app ng-init="px=25;" ng-controller="Controller"> | |
| <input type="range" min="-100" max="100" step="1" ng-model="px"> | |
| <div class="limacon"></div> | |
| </div> | |
| </body> | |
| </html> |