31:T892,function drawCombintation( combination, { // A5 width = 420, height = 420, background = `hsl(0,0%,95%)`, foreground = `hsl(0,0%,5%)`, fontFamily = monoFontFamily, //geomFontFamily, anchorVertex, debug = false } = {} ) { const maxSize = Math.min(width, height); const margin = maxSize / 7.5; const graphicSize = maxSize - margin * 2; const marginX = margin; const marginY = margin / 1.3333; const hexRadius = graphicSize / 15; const grid = generateHexGrid(graphicSize, graphicSize, hexRadius); const title = patternName(combination, anchorVertex); const fontSize = "12px"; const padding = margin / 3; const titleEl = htl.svg` ${title} `; const tangramHexEl = tangramHexagon({ combination, cx: 0, cy: 0, radius: hexRadius, anchorVertex }); const hexagonPatterns = svg` ${grid.map( ([cx, cy]) => svg` ${tangramHexEl.cloneNode(true)} ` )} `; const debugEls = debug ? svg` ${grid.map( ([cx, cy]) => svg` ` )} ` : ""; return svg``; }32:T484,function tangramTriangle({ combination = "ABCDEFGH", x = 0, y = 0, angle = 0, height = 20, fill = "hsl(0,0%,5%)", anchorVertex = 0, debug } = {}) { console.log({ anchorVertex }); const side = eqTriangleSideFromHeight(height); let ptH = [x + height, y]; ptH = rotatePoint(...ptH, angle, x, y); const p1 = [x, y]; const p2 = [x + height, y - side / 2]; const p3 = [x + height, y + side / 2]; let corners = anchorVertex === 1 ? [p2, p3, p1] : anchorVertex === 2 ? [p3, p1, p2] : [p1, p2, p3]; corners = corners.map((pt, _, arr) => rotatePoint(...pt, angle, x, y)); let tangramPolys = tangramPolygons(corners, { combination }); const polyEls = svg` ${tangramPolys.map( (poly) => svg`` )} `; const debugEls = debug ? svg` ` : ""; return svg` ${polyEls} ${debugEls} `; }33:Tbe9,function tangramPolygons(corners, { combination = "ABCDEFGH" } = {}) { const [p1, p2, p3] = corners; let polygons = []; if (combination.includes("A")) { const pA1 = divideLine(...p1, ...p2, 4 / 6); const pA1o = divideLine(...p1, ...p3, 4 / 6); const pA2 = divideLine(...pA1, ...pA1o, 1 / 4); const pA3 = divideLine(...p1, ...p3, 1 / 6); const polyA = [p1, pA1, pA2, pA3]; polygons.push(polyA); } if (combination.includes("B")) { const pB1 = divideLine(...p1, ...p3, 1 / 6); const pB22 = divideLine(...p2, ...p3, 1 / 6); const pB2 = divideLine(...pB1, ...pB22, 2 / 5); const pB32 = divideLine(...p3, ...p2, 2 / 6); const pB3 = divideLine(...pB32, ...pB2, 1 / 3); const pB4 = divideLine(...pB1, ...p3, 2 / 5); const polyB = [pB1, pB2, pB3, pB4]; polygons.push(polyB); } if (combination.includes("C")) { const pC1 = divideLine(...p1, ...p3, 3 / 6); const pC2 = divideLine(...p2, ...p3, 3 / 6); const pC3 = divideLine(...p2, ...p3, 4 / 6); const pC4 = divideLine(...p1, ...p3, 4 / 6); const polyC = [pC1, pC2, pC3, pC4]; polygons.push(polyC); } if (combination.includes("D")) { const pD10 = divideLine(...p1, ...p3, 1 / 6); const pD12 = divideLine(...p2, ...p3, 1 / 6); const pD1 = divideLine(...pD10, ...pD12, 2 / 5); const pD2 = divideLine(...pD10, ...pD12, 3 / 5); const pDBaseA0 = divideLine(...p1, ...p3, 5 / 6); const pDBaseA2 = divideLine(...p1, ...p2, 5 / 6); const pD3 = divideLine(...pDBaseA0, ...pDBaseA2, 3 / 5); const pD4 = divideLine(...pDBaseA0, ...pDBaseA2, 2 / 5); const polyD = [pD1, pD2, pD3, pD4]; polygons.push(polyD); } if (combination.includes("E")) { const pE1 = divideLine(...p1, ...p3, 4 / 6); const pE2 = divideLine(...p3, ...p2, 2 / 6); const polyE = [pE1, pE2, p3]; polygons.push(polyE); } if (combination.includes("F")) { const pFTop0 = divideLine(...p1, ...p3, 5 / 6); const pFTop2 = divideLine(...p1, ...p2, 5 / 6); const pF1 = divideLine(...pFTop0, ...pFTop2, 3 / 5); const pF2 = divideLine(...pFTop0, ...pFTop2, 2 / 5); const pF3 = divideLine(...p2, ...p3, 3 / 6); const pF4 = divideLine(...p2, ...p3, 2 / 6); const polyF = [pF1, pF2, pF3, pF4]; polygons.push(polyF); } if (combination.includes("G")) { const pG0 = divideLine(...p1, ...p2, 4 / 6); const pG1 = divideLine(...p1, ...p2, 5 / 6); const pG2 = divideLine(...p3, ...p2, 5 / 6); const pG3 = divideLine(...p3, ...p2, 4 / 6); const pG40 = divideLine(...p2, ...p3, 3 / 6); const pG42 = divideLine(...p1, ...p2, 3 / 6); const pG4 = divideLine(...pG40, ...pG42, 1 / 3); const pG5 = divideLine(...pG40, ...pG42, 2 / 3); const polyG = [pG0, pG1, pG2, pG3, pG4, pG5]; polygons.push(polyG); } if (combination.includes("H")) { const pH1 = divideLine(...p1, ...p2, 5 / 6); const pH2 = divideLine(...p3, ...p2, 5 / 6); const polyH = [pH1, p2, pH2]; polygons.push(polyH); } return polygons; }34:T45b,function generateHexGrid(width, height, radius) { const radiusDouble = radius * 2; const dx = radius * Math.sin(Math.PI / 3); const dy = radius * Math.cos(Math.PI / 3); const gapX = 2 * (radius - dx); // These are effective dimensons of cell when hexagons // are shifted to touch each other const cellWidth = radiusDouble - gapX; const cellHeight = radius + dy; const cols = Math.floor(height / cellWidth); const rows = Math.floor(width / cellHeight); let centers = Array.from({ length: rows }).flatMap((_, j) => Array.from({ length: j % 2 === 0 ? cols : cols + 1 }).map((_, i) => { let x = radius + i * cellWidth; if (j % 2 !== 0) { x = x - dx; } return [x, radius / 2 + j * (radiusDouble - dy)]; }) ); const [minX, maxX] = d3.extent(centers, (d) => d[0]); const [minY, maxY] = d3.extent(centers, (d) => d[1]); const offsetX = -minX + cellWidth / 2 - Math.abs(width - cellWidth * (cols + 1)) / 2; const offsetY = (width - maxY) / 2 - minY / 2; centers = centers.map(([x, y]) => [x + offsetX, y + offsetY]); return centers; }35:[] 2f:{"title":"067 Tessellated tangrams","cells":[{"id":0,"value":"# 067 Tessellated tangrams","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"drawCombintation(scrubbedCombination, {\n anchorVertex: previewAnchorofRotation - 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"viewof scrubbedCombination = Scrubber(combinations, {\n autoplay: true,\n delay: 1000,\n loop: true,\n format: (d) => d.join(\"\"),\n initial: combinations[Math.floor(combinations.length / 2)]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"viewof previewAnchorofRotation = Inputs.radio([1, 2, 3], {\n label: \"Vertex of rotation of triangle\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"blurp({\n invalidation,\n content: `Read my article explaining how the graphic is generated on`,\n ctaLabel: \"saneef.com\",\n href: \"https://saneef.com/blog/tessellated-tangrams/\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1201,"value":"toc({\n headers: \"h2,h3,h4\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"### Pattern folio","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"sampleCanvas = drawCombintation(previewCombination, {\n debug: debugCombination\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"viewof previewCombination = Inputs.select(combinations, {\n label: \"View combination\",\n format: (d) => d.sort().join(\"\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof debugCombination = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$31","pinned":true,"hidden":true,"mode":"ojs"},{"id":500,"value":"### 8 piece tangram","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"#### Triangle","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"sampleTangramTriangle = {\n const size = 320;\n return svg`\n \n \n ${tangramTriangle({\n x: size / 2,\n y: size / 2,\n height: size / 3,\n combination: sampleCombintation1,\n angle: sampleTangramTriangleAngleRads,\n debug: sampleTangramTriangleDebug,\n anchorVertex: sampleAnchorVertex\n })}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"viewof sampleCombintation1 = Inputs.select(combinations, {\n label: \"View combination\",\n format: (d) => d.sort().join(\"\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof sampleTangramTriangleAngle = Inputs.range([0, 1], {\n label: \"Angle\",\n value: 0.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"viewof sampleAnchorVertex = Inputs.radio([0, 1, 2], {\n label: \"Anchor vertex\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"viewof sampleTangramTriangleDebug = Inputs.toggle({\n label: \"Debug\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"sampleTangramTriangleAngleRads = math.lerp(\n 0,\n 2 * Math.PI,\n sampleTangramTriangleAngle\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"#### Hexagon","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"sampleTangramHexagon = {\n const size = 320;\n return svg`\n \n \n ${tangramHexagon({\n cx: size / 2,\n cy: size / 2,\n radius: size / 2.25,\n combination: sampleTangramHexagonCombination,\n debug: sampleTangramHexagonDebug\n })}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"viewof sampleTangramHexagonCombination = Inputs.select(combinations, {\n label: \"View combination\",\n format: (d) => d.sort().join(\"\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"viewof sampleTangramHexagonDebug = Inputs.toggle({\n label: \"Debug\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"function tangramHexagon({\n combination = \"ABCDEFGH\",\n cx = 0,\n cy = 0,\n radius = 20,\n fill = \"hsl(0,0%,5%)\",\n anchorVertex,\n\n debug\n} = {}) {\n const height = eqTriangleHeightFromSide(radius);\n const triangleTangrams = math.linspace(7, true).map((u) =>\n tangramTriangle({\n x: cx,\n y: cy,\n height,\n combination,\n angle: u * 2 * Math.PI,\n anchorVertex\n })\n );\n const debugEls = debug\n ? svg``\n : \"\";\n return svg`\n ${triangleTangrams}\n ${debugEls}\n\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"### Hexagon grid","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"// From https://github.com/d3/d3-hexbin/blob/master/src/hexbin.js\nfunction hexagon(radius) {\n const thirdPi = Math.PI / 3,\n angles = [0, thirdPi, 2 * thirdPi, 3 * thirdPi, 4 * thirdPi, 5 * thirdPi];\n let x0 = 0,\n y0 = 0;\n\n return angles.map(function (angle) {\n var x1 = Math.sin(angle) * radius,\n y1 = -Math.cos(angle) * radius,\n dx = x1 - x0,\n dy = y1 - y0;\n (x0 = x1), (y0 = y1);\n return [dx, dy];\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"function hexagonD(radius) {\n return \"m\" + hexagon(radius).join(\"l\") + \"z\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"### Utilities and constants","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"function eqTriangleSideFromHeight(height) {\n return (2 * height) / Math.sqrt(3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"function eqTriangleHeightFromSide(side) {\n return (side * Math.sqrt(3)) / 2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"geomFontFamily = \"Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"monoFontFamily = \"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1031,"value":"async function prepareZipBlob() {\n const z = zip();\n\n for (let i of [0, 1, 2]) {\n for (let c of combinations) {\n const filename = svgFilename(c, i);\n // console.log(`Preparing ${filename}...`);\n const svg = drawCombintation(c, { anchorVertex: i });\n\n svg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n svg.setAttribute(\"xmlns:xlink\", \"http://www.w3.org/1999/xlink\");\n z.file(filename, svg.outerHTML);\n }\n }\n\n const zipData = await z.generateAsync({ type: \"blob\" });\n\n return new Blob([zipData], { type: \"application/zip\" });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"function svgFilename(combination, vertex = 0) {\n return `${patternName(combination, vertex).toLowerCase()}.svg`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1297,"value":"function patternName(combination, vertex = 0) {\n return `${vertex + 1}-${combination.join(\"\")}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"### Download","pinned":false,"hidden":false,"mode":"md"},{"id":1029,"value":"downloadButton = {\n return DOM.download(\n prepareZipBlob,\n \"tessellated-tangrams.zip\",\n \"Prepare all patterns archive\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"import { CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"C = import(\"https://esm.sh/js-combinatorics@2.1.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"combinations = [...new C.PowerSet(\"ABCDEFGH\")]\n .filter((arr) => arr.length !== 0 && arr.length !== 8)\n .sort((a, b) => a.length - b.length)\n// .sort((d) => d.join(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"import { squaresInRectangle } from \"@saneef/fit-n-number-of-squares-in-a-rectangle\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"import { rotatePoint, divideLine } from \"@saneef/helper-functions-geometry\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"zip = (await import(\"https://esm.sh/jszip@3.10.1\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"import { toc } from \"@saneef/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"## References and inspirations\n\n- [Theodorus Tiles - Hexagonal patterns of tiled geometric shapes](https://www.s-ings.com/projects/theodorus-tiles/)\n- [TANGRAM: CLASES DE TANGRAM](http://tangram62011gmailcom.blogspot.com/2011/10/clases-de-tangram.html)\n- [Tangram of 8 Pieces](http://www.juegotangram.com.ar/IDS/EN/tipostangram/Tangram8Piezas.htm)\n- [jszip by Fil](https://observablehq.com/@fil/jszip)","pinned":false,"hidden":false,"mode":"md"},{"id":1246,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}