30:[] 2e:{"title":"Drawing Stars","cells":[{"id":0,"value":"md`# Drawing Stars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`At work I recently needed to generate the SVG path for a 5-pointed star. I started trying to solve a problem that is similar but not exactly the same: how to generate the coordinates of the points of a 5-pointed star.\n\nMy subsequent thinking was inspired in part by [Drawing Stars](https://people.math.osu.edu/shapiro.6/stars.pdf) from OSU's Daniel B. Shapiro, and in part by something that clicked for me when I saw this in a Google search result:\n![](http://www.drawingteachers.com/image-files/how-to-draw-a-star-06.jpg)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`The following is a naive utility function for this task: it has hard-coded certain assumptions, both the number of points and the order in which the points are connected: first the starting point at 0, then the point 0.4 of the way around the circle, then 0.8, 0.2, 0.6, and back to 0. In other words, each point is 2/5 of the circumference further than the one before it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"{\n const star = radius => \n [0, .4, .8, .2, .6, 0].map(d => \n round(radius*Math.cos(2*Math.PI*d - .5*Math.PI), 3)\n +\",\"+\n round(radius*Math.sin(2*Math.PI*d - .5*Math.PI), 3)\n )\n return star(1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`We typically think of stars in terms of the number of points they have. Less frequently do we consider the step size: the distance (in number of points) between any two connected points. Shapiro uses the notation {n/d} where n is number of points and d is step size.\n\nA few interesting observations arise from this:\n* Any \"star\" with d = 1 is an n-sided polygon.\n* When the number of points is divisible by the step size (n % d = 0) and the step size is greater than 1, it is impossible to connect all of the points without picking up the pencil.\n* When step size is greater than/equal to half the number of points (d ${'\\u2265'} n${'\\u00F7'}2), we get the same star as with a step size of the number of points minus the first step size: {n/d} ${'\\u2248'} {n/(n - d)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof nPoints = html``\n// nPoints = {\n// return Math.floor(now % 30000 / 3000) + 3;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"viewof stepSize = html``\n// stepSize = {\n// return Math.floor(Math.floor(now % 3000 / 300)/10 * (nPoints-1)) + 1\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Here is a ${nPoints}-pointed star, step size ${stepSize}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viz = {\n \tconst getGCD = (a, b) => !b ? a : getGCD(b, a % b)\n const gcd = getGCD(nPoints, stepSize)\n \n\tconst svg = d3.select(DOM.svg(300, 100))\n let g = svg.append(\"g\")\n \t.attr(\"transform\",\"translate(150,50)\")\n \tg.append(\"polygon\")\n\t\t.attr(\"points\", points)\n \t\t.style(\"fill\",\"#00f\")\n \t\t.style(\"stroke\",\"#00f\")\n \tif(nPoints % stepSize === 0 || (gcd > 1 && gcd < stepSize)){ //simplify this check\n for(let j = 0; j < stepSize; j++){\n g.append(\"polygon\")\n .attr(\"transform\",\"rotate(\"+j*360/nPoints+\")\")\n .attr(\"points\", points)\n .style(\"fill\",\"#00f\")\n .style(\"stroke\",\"#00f\")\n }\n \t}\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`We generate the points in SVG space by imaging a circumscribed circle around the star. Starting at the top point (12:00 on a clock, or 90 degrees on a unit circle), we move counterclockwise by d steps, and draw a line, repeating the process until we have returned to the starting point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"data = dataMaker(stepSize,nPoints)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"points = pointMaker(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"dataMaker = (stepSize,nPoints) => {\n let data = []\n for(let i = 0; i < nPoints; i++){\n data.push(i*(stepSize/nPoints))\n }\n data.push(0)\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"pointMaker = data => data.map(d => \n Math.round(1000 * 50*Math.cos(2*Math.PI*d - .5*Math.PI) )/1000\n +\",\"+\n Math.round(1000 * 50*Math.sin(2*Math.PI*d - .5*Math.PI) )/1000\n ).join(' ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"round = (v,e) => Math.round(Math.pow(10,e)*v)/Math.pow(10,e)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"html`Created at

. Visit us online, @2nfo, and @2ngrams.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}