31:[] 2f:{"title":"geometric.polygonTranslate","cells":[{"id":0,"value":"md`# geometric.polygonTranslate\n\n[geometric.polygonTranslate](https://github.com/HarryStevens/geometric#polygonScale)(polygon, angle, origin) returns the vertices resulting from translating a polygon by an angle in degrees and a distance.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof angle = Inputs.range([0, 360], { label: \"Angle\", step: 1, value: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof distance = Inputs.range([-height / 2, height / 2], { label: \"Distance\", step: 1, value: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"{ \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n \n svg.append(\"polygon\")\n .attr(\"points\", translated.join(\" \"));\n\n svg.append(\"polygon\")\n .style(\"opacity\", .1)\n .attr(\"points\", polygon.join(\" \"));\n\n svg.selectAll(\".scaled\")\n .data(translated)\n .enter().append(\"circle\")\n .attr(\"class\", \"scaled\")\n .attr(\"r\", 2)\n .attr(\"transform\", d => `translate(${d})`);\n \n svg.selectAll(\".original\")\n .data(polygon)\n .enter().append(\"circle\")\n .attr(\"class\", \"original\")\n .style(\"fill-opacity\", .1)\n .attr(\"r\", 2)\n .attr(\"transform\", d => `translate(${d})`);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"translated = geometric.polygonTranslate(polygon, angle, distance);","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"polygon = [\n [center[0] - 100, center[1]],\n [center[0] - 30, center[1]],\n [center[0] - 30, center[1] - 40],\n [center[0] - 10, center[1] - 97],\n [center[0] - 2, center[1] - 100],\n [center[0], center[1] - 130],\n [center[0] + 2, center[1] - 100],\n [center[0] + 10, center[1] - 97],\n [center[0] + 30, center[1] - 40],\n [center[0] + 30, center[1]],\n [center[0] + 100, center[1]],\n [center[0] + 100, center[1] + 120],\n [center[0] - 100, center[1] + 120]\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"center = [width / 2, height / 2];","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { slider } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}