2b:null 2c:["$","title",null,{"children":"Generated Iconography Exploration #1 | James McNulty | Observable"}] 31:T421,{ const width = size; const r = 20; function i_to_center(i) { const x = 2 * r * i + r; const y = 2 * r * Math.floor(x / width) + r; return [x % width, y]; } const spinOffset = Math.PI / 2; function i_to_altColor(i, schemeName) { const colorSet = { "Same": colors, "grey": greys}[altScheme]; return colorSet[(colorSet.length + Math.floor(colorSet.length * offset) + i) % colorSet.length]; } function doubleGon({numSides, numSides2, fill, fillAlt, center, size}) { return htl.svg.fragment`${ polygon({ numSides, fill, center, size, theta: spinOffset}) } ${ polygon({numSides: numSides2, fill: fillAlt, center, size: size/2, theta: spin + spinOffset}) }`; } return htl.svg`` }32:Ta0a,colors = ["#6e40aa","#7140ab","#743fac","#773fad","#7a3fae","#7d3faf","#803eb0","#833eb0","#873eb1","#8a3eb2","#8d3eb2","#903db2","#943db3","#973db3","#9a3db3","#9d3db3","#a13db3","#a43db3","#a73cb3","#aa3cb2","#ae3cb2","#b13cb2","#b43cb1","#b73cb0","#ba3cb0","#be3caf","#c13dae","#c43dad","#c73dac","#ca3dab","#cd3daa","#d03ea9","#d33ea7","#d53ea6","#d83fa4","#db3fa3","#de3fa1","#e040a0","#e3409e","#e5419c","#e8429a","#ea4298","#ed4396","#ef4494","#f14592","#f34590","#f5468e","#f7478c","#f9488a","#fb4987","#fd4a85","#fe4b83","#ff4d80","#ff4e7e","#ff4f7b","#ff5079","#ff5276","#ff5374","#ff5572","#ff566f","#ff586d","#ff596a","#ff5b68","#ff5d65","#ff5e63","#ff6060","#ff625e","#ff645b","#ff6659","#ff6857","#ff6a54","#ff6c52","#ff6e50","#ff704e","#ff724c","#ff744a","#ff7648","#ff7946","#ff7b44","#ff7d42","#ff8040","#ff823e","#ff843d","#ff873b","#ff893a","#ff8c38","#ff8e37","#fe9136","#fd9334","#fb9633","#f99832","#f89b32","#f69d31","#f4a030","#f2a32f","#f0a52f","#eea82f","#ecaa2e","#eaad2e","#e8b02e","#e6b22e","#e4b52e","#e2b72f","#e0ba2f","#debc30","#dbbf30","#d9c131","#d7c432","#d5c633","#d3c934","#d1cb35","#cece36","#ccd038","#cad239","#c8d53b","#c6d73c","#c4d93e","#c2db40","#c0dd42","#bee044","#bce247","#bae449","#b8e64b","#b6e84e","#b5ea51","#b3eb53","#b1ed56","#b0ef59","#adf05a","#aaf159","#a6f159","#a2f258","#9ef258","#9af357","#96f357","#93f457","#8ff457","#8bf457","#87f557","#83f557","#80f558","#7cf658","#78f659","#74f65a","#71f65b","#6df65c","#6af75d","#66f75e","#63f75f","#5ff761","#5cf662","#59f664","#55f665","#52f667","#4ff669","#4cf56a","#49f56c","#46f46e","#43f470","#41f373","#3ef375","#3bf277","#39f279","#37f17c","#34f07e","#32ef80","#30ee83","#2eed85","#2cec88","#2aeb8a","#28ea8d","#27e98f","#25e892","#24e795","#22e597","#21e49a","#20e29d","#1fe19f","#1edfa2","#1ddea4","#1cdca7","#1bdbaa","#1bd9ac","#1ad7af","#1ad5b1","#1ad4b4","#19d2b6","#19d0b8","#19cebb","#19ccbd","#19cabf","#1ac8c1","#1ac6c4","#1ac4c6","#1bc2c8","#1bbfca","#1cbdcc","#1dbbcd","#1db9cf","#1eb6d1","#1fb4d2","#20b2d4","#21afd5","#22add7","#23abd8","#25a8d9","#26a6db","#27a4dc","#29a1dd","#2a9fdd","#2b9cde","#2d9adf","#2e98e0","#3095e0","#3293e1","#3390e1","#358ee1","#378ce1","#3889e1","#3a87e1","#3c84e1","#3d82e1","#3f80e1","#417de0","#437be0","#4479df","#4676df","#4874de","#4a72dd","#4b70dc","#4d6ddb","#4f6bda","#5169d9","#5267d7","#5465d6","#5663d5","#5761d3","#595fd1","#5a5dd0","#5c5bce","#5d59cc","#5f57ca","#6055c8","#6153c6","#6351c4","#6450c2","#654ec0","#664cbe","#674abb","#6849b9","#6a47b7","#6a46b4","#6b44b2","#6c43af","#6d41ad","#6e40aa"]33:[{"id":"e338c91fafae77419c4f4e2087dd4b829239246dc6bc2d801e39a99fd231b3a8251d82bb50797dd287af5882e7973514ac26f15fafa01184c36ac5f6ccb01c96","href":"https://static.observableusercontent.com/files/e338c91fafae77419c4f4e2087dd4b829239246dc6bc2d801e39a99fd231b3a8251d82bb50797dd287af5882e7973514ac26f15fafa01184c36ac5f6ccb01c96","name":"image@1.png","type":"image/png","lastModified":1651192826984.32,"size":1368},{"id":"385cbac259c332effe123ef149ef23f97a03a7b910336856e29aea34aea47082219f144190cff83c40774f7e540d1f5e334b6a4c1078ba04f5f5e7291160529c","href":"https://static.observableusercontent.com/files/385cbac259c332effe123ef149ef23f97a03a7b910336856e29aea34aea47082219f144190cff83c40774f7e540d1f5e334b6a4c1078ba04f5f5e7291160529c","name":"image@2.png","type":"image/png","lastModified":1651192962905.65,"size":2224},{"id":"73eebc56969c45363d3572634dadc4f10eff2c29c94d7b5055a52a5f3895cc93bee4b5f26042d3bbc1b81c02b5e191fa946eae7937b66b88074c90ebe235153d","href":"https://static.observableusercontent.com/files/73eebc56969c45363d3572634dadc4f10eff2c29c94d7b5055a52a5f3895cc93bee4b5f26042d3bbc1b81c02b5e191fa946eae7937b66b88074c90ebe235153d","name":"image@8.png","type":"image/png","lastModified":1651211436476.115,"size":1923},{"id":"95b05c151ffda215f404bd964a7f1523c1613f03b9f23e6bad26075ab88fa38b1056604020b1f456128ff71ea681ee66dfb7ce5af2c13e3ea1bc967b78cd5461","href":"https://static.observableusercontent.com/files/95b05c151ffda215f404bd964a7f1523c1613f03b9f23e6bad26075ab88fa38b1056604020b1f456128ff71ea681ee66dfb7ce5af2c13e3ea1bc967b78cd5461","name":"image@7.png","type":"image/png","lastModified":1651211336227.634,"size":1923},{"id":"642aad97d827ad8ee078cb932d6a3f0e35a956a4c4b4891dca3c5780344621d00c68bb7c4f24935209ccba41e3c1418616fc7bc9cd860b01bb4673be192cd8b6","href":"https://static.observableusercontent.com/files/642aad97d827ad8ee078cb932d6a3f0e35a956a4c4b4891dca3c5780344621d00c68bb7c4f24935209ccba41e3c1418616fc7bc9cd860b01bb4673be192cd8b6","name":"image@3.png","type":"image/png","lastModified":1651193170577.034,"size":1780},{"id":"33a19395f4f73b90fdfae97a07df207cc6436f5432075bbcf789938b7ec3f400ed19dee6371baa158ed691bfab09fa5bd8d283b1756825069bc55cb233fd1462","href":"https://static.observableusercontent.com/files/33a19395f4f73b90fdfae97a07df207cc6436f5432075bbcf789938b7ec3f400ed19dee6371baa158ed691bfab09fa5bd8d283b1756825069bc55cb233fd1462","name":"image.png","type":"image/png","lastModified":1651192142559.104,"size":1408}] 2f:{"id":"0938cbff5e9ee6bd","slug":"generated-iconography-exploration-1","title":"Generated Iconography Exploration #1","thumbnail":"df91dabe51feaa77e76550e87117c1d19ba8185ce3de3dc78231632c5990f9bd","access_level":"public","create_time":"$D2022-04-28T19:13:22.782Z","update_time":"$D2022-04-29T05:50:38.399Z","view_time":null,"first_public_time":"$D2022-04-29T00:49:31.973Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":"starter_2024"},"version":539,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null}],"members":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"762bdf97ae3d88e7","slug":"iconography","title":"Iconography","owner":{"id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty"}},"type":"notebook","body":{"title":"Generated Iconography Exploration #1","cells":[{"id":0,"value":"# Generated Iconography Exploration #1\n\nSay you are defining a set of playing cards, where each card either has 1 or 2 factions they belong to. And the number of factions total is variable.\n\nWe would like each faction's iconography to be as unique as possible.\n\nIf we go through a full color ramp and use only regular polygons, we can get about 84 symbols you can probably tell the difference between. More than that and we get repeated shape/color combinations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof numFactions = Inputs.range([0, 200], {label: \"Number of Factions\", step: 1, value: 84})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"blah = htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"yadda = htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof highlightShape = Inputs.range([3, 8], {label: \"Shape\", step:1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"# Double Shapes\n\nLet's see if we can compose 2 regular polygons to make some interesting stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"viewof size = Inputs.range([500, 2000], {label: \"zoom\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof numFactions2 = Inputs.range([0, 250 ], {label: \"Number of Factions\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof spin = Inputs.range([0, 2 * Math.PI], {label: \"Spin\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"viewof altScheme= Inputs.select([\"grey\", \"Same\"], {label: \"Alt Color Scheme\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof offset = Inputs.range([0, 1], {label: \"Color Offset\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof scale = Inputs.range([0, 1], {label: \"Scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"{\n const width = size;\n function i_to_center(i) {\n const x = 2 * r * i + r; \n const y = 2 * r * Math.floor(x / width) + r ;\n return [x % width, y];\n}\n\n\n function doubleGon({numSides, numSides2, fill, center, size}) {\n return htl.svg.fragment`${\n polygon({ numSides, fill, center, size})\n} ${\n polygon({numSides: numSides2, fill, center: [center[0] + 12, center[1]], size})\n}`;\n}\n \n return htl.svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"{\n const width = size;\n const r = 20;\n function i_to_center(i) {\n const x = 2 * r * i + r; \n const y = 2 * r * Math.floor(x / width) + r;\n return [x % width, y];\n}\n\n function i_to_altColor(i, schemeName) {\n const colorSet = { \"Same\": colors, \"grey\": greys}[altScheme];\n return colorSet[(colorSet.length + Math.floor(colorSet.length * offset) + i) % colorSet.length];\n }\n\n function doubleGon({numSides, numSides2, fill, fillAlt, center, size}) {\n return htl.svg.fragment`${\n polygon({ numSides, fill, center, size, theta: spin})\n} ${\n polygon({numSides: numSides2, fill: fillAlt, center, size: size*scale})\n}`;\n}\n \n return htl.svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"{\n const width = size;\n const r = 20;\n function i_to_center(i) {\n const x = 2 * r * i + r; \n const y = 2 * r * Math.floor(x / width) + r;\n return [x % width, y];\n}\n\n function i_to_altColor(i, schemeName) {\n const colorSet = { \"Same\": colors, \"grey\": greys}[altScheme];\n return colorSet[(colorSet.length + Math.floor(colorSet.length * offset) + i) % colorSet.length];\n }\n\n function doubleGon({numSides, numSides2, fill, fillAlt, center, size}) {\n return htl.svg.fragment`${\n starryGon({ numSides, fill, center, size, theta: spin})\n} ${\n starryGon({numSides: numSides2, fill: fillAlt, center, size: size*scale})\n}`;\n}\n \n return htl.svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"# Faves","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"FileAttachment(\"image@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"FileAttachment(\"image@3.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"FileAttachment(\"image@7.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"FileAttachment(\"image@8.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"r = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"greys = [\"#ffffff\",\"#f2f2f2\",\"#e2e2e2\",\"#cecece\",\"#b4b4b4\",\"#979797\",\"#7a7a7a\",\"#5f5f5f\",\"#404040\",\"#1e1e1e\",\"#000000\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function polygon ({numSides = 3, fill = \"black\", stroke=\"none\", center, size = r, theta = 0}) {\n const points = [...Array(numSides).keys()]\n .map(i => ((2 * Math.PI * i/ numSides) + theta) % (2 * Math.PI))\n .map(d => [\n Math.cos(d) * size + center[0], \n Math.sin(d) * size + center[1]\n ]\n );\n const pointsStr = points\n .map(p => p.join(\",\"))\n .reduce((m, e) => `${m.trim()} ${e}`, \"\");\n return htl.svg.fragment``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"function starryGon ({numSides = 3, fill = \"black\", stroke=\"none\", center, size = r, theta = 0}) {\n const points = [...Array(numSides).keys()]\n .map(i => ((4 * Math.PI * i/ numSides) + theta))\n .map(d => [\n Math.cos(d) * size + center[0], \n Math.sin(d) * size + center[1]\n ]\n );\n const pointsStr = points\n .map(p => p.join(\",\"))\n .reduce((m, e) => `${m.trim()} ${e}`, \"\");\n return htl.svg.fragment``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function i_to_center(i) {\n const x = 2 * r * i + r; \n const y = 2 * r * Math.floor(x / width) + r ;\n return [x % width, y];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function polygons() { \n return [...Array(numFactions).keys()].map(i => {\n const rand = (seed) => Math.floor(Math.sin(seed*10000) * 3 + 6)\n return polygon({\n numSides: i % 6 + 3,\n fill: colors[i*3%colors.length],\n center: i_to_center(i)\n })\n }) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"{\n const baseShapes = [\n { numSides: 3, } \n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"# References\nhttps://observablehq.com/@d3/color-schemes","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"