2f:null 30:["$","title",null,{"children":"Tiling an octagon with half-squares and A-size rectangles | Bryan Gin-ge Chen | Observable"}] 35:T406,octagonPic = { await visibility(); const context = DOM.context2d(4*width/5, 4*width/5); context.scale(4/5, 4/5); context.strokeStyle = '#000'; const aInd = object.arrayInd || 0; if (object.animate) { const fontSize = Math.min(30,width/30); context.font = `${fontSize}px serif`; context.lineWidth = 12/Math.sqrt(arr[aInd].length); drawTiling(context, arr[aInd]); for (let j=aInd+1; j

${(100*val).toFixed(8)}%` } function fhistT(val, i) { return html`

${(100*val).toFixed(1)}%` } function fhistR(val, i) { return html`

${(100*val).toFixed(0)}%` } const tab = table(dataForTable, { columns:{ gen: { title: "Subst. Round" }, numTiles: { title: "# of tiles" }, numTF: { title: html`${tex`N_T`} vs. ${tex`N_A`}
(% ${tex`N_T`})`, // type: 'string', formatter:ffrac }, areaF: { title: html`${tex`A_T`} vs. ${tex`A_A`}
(% ${tex`A_T`})`, formatter:ffrac }, tri0: { title: html`${lilTri(0)}`, formatter:fhistT }, tri1: { title: html`${lilTri(45)}`, formatter:fhistT }, tri2: { title: html`${lilTri(90)}`, formatter:fhistT }, tri3: { title: html`${lilTri(135)}`, formatter:fhistT }, tri4: { title: html`${lilTri(180)}`, formatter:fhistT }, tri5: { title: html`${lilTri(225)}`, formatter:fhistT }, tri6: { title: html`${lilTri(270)}`, formatter:fhistT }, tri7: { title: html`${lilTri(315)}`, formatter:fhistT }, rec0: { title: html`${lilRect(0)}`, formatter:fhistR }, rec1: { title: html`${lilRect(45)}`, formatter:fhistR }, rec2: { title: html`${lilRect(90)}`, formatter:fhistR }, rec3: { title: html`${lilRect(135)}`, formatter:fhistR }, } }); tab.querySelectorAll('.pretty-pager').forEach(el => el.remove()); if (!object.animate) tab.querySelector('tbody').childNodes[object.arrayInd+1].style.backgroundColor = '#EFF'; return tab; }37:T68b,md`## Technical aside Random tilings of the *plane* consisting of these two types of tiles were studied about 20 years ago by the statistical physicists Jan de Gier and Bernard Nienhuis. They apparently came upon these two tiles while studying a different random tiling model introduced by [Cockayne](https://doi.org/10.1088/0305-4470/27/18/019) consisting of squares and hexagons, which they showed was equivalent to this one. One intriguing result is that there is a [quasicrystalline](https://en.wikipedia.org/wiki/Quasicrystal) phase of these random tilings when the area fraction of triangles is 1/2 – the same as the limit under repeated applications of rule II! (Quasicrystals are patterns like the [Penrose tiling](https://en.wikipedia.org/wiki/Penrose_tiling) which are not periodic, but still ordered in a certain sense). It doesn't follow that rule II generates quasicrystalline tessellations of the regular octagon though, since that random substitution rule doesn't obviously generate the same ensemble of tilings as the ones de Gier and Nienhuis consider. **Question**: What's the most efficient way to sample from the distribution of random tilings studied in these papers? - Jan de Gier and Bernard Nienhuis, [*Exact solution of an octagonal random tiling model*](https://doi.org/10.1103/PhysRevLett.76.2918), Phys. Rev. Lett. 76, 2918 (1996). [arXiv:solv-int/9602002](https://arxiv.org/abs/solv-int/9602002). - Jan de Gier and Bernard Nienhuis, [*The exact solution of an octagonal rectangle-triangle random tiling*](https://doi.org/10.1007/BF02181494), J. Stat. Phys. 87: 415 (1997). [arXiv:solv-int/9610009](https://arxiv.org/abs/solv-int/9610009).`38:Tf5d,octagonRuleII = { const map = new Map(); map.set(drawT, ({x,y,s,a}, all=false) => { const s2 = s/(1+Math.SQRT2); const s3 = s2/Math.SQRT2; const ca = Math.cos(a); const sa = Math.sin(a); const choice = !all ? Math.floor(3*Math.random()) : 0; const allArr = []; switch (choice) { case 0: { /* T ATT */ const A = {f:drawA, d:{x,y,s:s2,a}}; const T1 = {f:drawT, d:{x:x-(s-s2)*sa,y:y+(s-s2)*ca, s:s2, a}}; const x23 = x + (s2+s3)*ca - s3*sa; const y23 = y + (s2+s3)*sa + s3*ca; const T2 = {f:drawT, d:{x:x23,y:y23, s:s2, a:a+5*Math.PI/4 % (2*Math.PI)}}; const T3 = {f:drawT, d:{x:x23,y:y23, s:s2, a:a+3*Math.PI/4 % (2*Math.PI)}}; if (all) allArr.push([A,T1,T2,T3]); else return [A,T1,T2,T3]; } case 1: { /* TT AT */ const A = {f:drawA, d:{x:x-s2*sa,y:y+s2*ca, s:s2, a:a+3*Math.PI/2 % (2*Math.PI)}}; const T1 = {f:drawT, d:{x:x+(s-s2)*ca,y:y+(s-s2)*sa, s:s2, a}}; const x23 = x + s3*ca - (s2+s3)*sa; const y23 = y + s3*sa + (s2+s3)*ca; const T2 = {f:drawT, d:{x:x23,y:y23, s:s2, a:a+5*Math.PI/4 % (2*Math.PI)}}; const T3 = {f:drawT, d:{x:x23,y:y23, s:s2, a:a+3*Math.PI/4 % (2*Math.PI)}}; if (all) allArr.push([A,T1,T2,T3]); else return [A,T1,T2,T3]; } default: { /* T TAT */ const A = {f:drawA, d:{x:x+s2*ca,y:y+s2*sa, s:s2, a:a+Math.PI/4}}; const T1 = {f:drawT, d:{x,y, s:s2, a}}; const T2 = {f:drawT, d:{x:x+s3*ca-(s2+s3)*sa,y:y+(s2+s3)*ca+s3*sa, s:s2, a:a+3*Math.PI/4 % (2*Math.PI)}}; const T3 = {f:drawT, d:{x:x+(s2+s3)*ca-s3*sa,y:y+s3*ca+(s2+s3)*sa, s:s2, a:a+5*Math.PI/4 % (2*Math.PI)}}; if (all) allArr.push([A,T1,T2,T3]); else return [A,T1,T2,T3]; } } return allArr; }); map.set(drawA, ({x,y,s,a}, all=false) => { const s2 = s/(1+Math.SQRT2); const s3 = s2/Math.SQRT2; let ca = Math.cos(a); let sa = Math.sin(a); // I'll only implement the two flipped versions otherwise there'll be like 100 cases or something let choice = (!all) ? Math.floor(2*Math.random()) : 1; const allArr = []; while (!all || choice >=0) { x = choice ? x : x+s*(ca-Math.SQRT2*sa); y = choice ? y : y+s*(sa+Math.SQRT2*ca); a = choice ? a : a+Math.PI; ca = choice ? ca : -ca; sa = choice ? sa : -sa; // top left, bottom left, center right const A1 = {f:drawA, d:{x:x - (s+s2)*sa,y:y + (s+s2)*ca, s:s2, a:a+3*Math.PI/2 % (2*Math.PI)}}; const A2 = {f:drawA, d:{x:x +(s-s2)*ca,y:y + (s-s2)*sa, s:s2, a:a+Math.PI/2 % (2*Math.PI)}}; const A3 = {f:drawA, d:{x:x + (s-s2)*ca - s2*sa,y:y + (s-s2)*sa + s2*ca, s:s2, a}}; // 4-square center left const xc = x + s3*ca - (s2+s3)*sa; const yc = y + s3*sa + (s2+s3)*ca; const T1 = {f:drawT, d:{x:xc,y:yc, s:s2, a:a+3*Math.PI/4 % (2*Math.PI)}}; const T2 = {f:drawT, d:{x:xc,y:yc, s:s2, a:a+5*Math.PI/4 % (2*Math.PI)}}; const T3 = {f:drawT, d:{x:xc,y:yc, s:s2, a:a+7*Math.PI/4 % (2*Math.PI)}}; const T4 = {f:drawT, d:{x:xc,y:yc, s:s2, a:a+Math.PI/4 % (2*Math.PI)}}; // 2-square bottom right const T5 = {f:drawT, d:{x:x+(s-s2)*ca,y:y+(s-s2)*sa, s:s2, a}}; const T6 = {f:drawT, d:{x:x+s*ca-s2*sa,y:y+s*sa+s2*ca, s:s2, a:a+Math.PI % (2*Math.PI)}}; // 2-square top right const T7 = {f:drawT, d:{x:x-(s+s2)*sa+(s-s2)*ca,y:y+(s+s2)*ca+(s-s2)*sa, s:s2, a:a+3*Math.PI/2 % (2*Math.PI)}}; const T8 = {f:drawT, d:{x:x-s*sa+s*ca,y:y+s*ca+s*sa, s:s2, a:a+Math.PI/2 % (2*Math.PI)}}; allArr.push([A1,A2,A3, T1,T2,T3,T4, T5,T6, T7,T8]); if (all) { choice --; } else return allArr[0]; } return allArr; }); return map; }39:T6fc,dataForTable = { const scale = (chooseRule.rule === 'I') ? 1/Math.SQRT2 : 1/(1+Math.SQRT2); return arr.map((d,j) => { const numTiles = d.length; const tri = d.filter(d => d.f.name === 'drawT'); const rec = d.filter(d => d.f.name === 'drawA'); const numT = tri.length; const numR = rec.length; const areaF = numT*(scale ** (2*j))/(8+8*Math.SQRT2); const tri0 = tri.filter(d => Math.abs(d.d.a % (2*Math.PI)) < 0.1 || Math.abs((d.d.a % (2*Math.PI)) - 2*Math.PI) < 0.1).length/numT; const tri1 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - Math.PI/4) < 0.1).length/numT; const tri2 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - Math.PI/2) < 0.1).length/numT; const tri3 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - 3*Math.PI/4) < 0.1).length/numT; const tri4 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - Math.PI) < 0.1).length/numT; const tri5 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - 5*Math.PI/4) < 0.1).length/numT; const tri6 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - 3*Math.PI/2) < 0.1).length/numT; const tri7 = tri.filter(d => Math.abs((d.d.a % (2*Math.PI)) - 7*Math.PI/4) < 0.1).length/numT; const rec0 = rec.filter(d => Math.abs(d.d.a % Math.PI) < 0.1 || Math.abs(d.d.a % Math.PI - Math.PI) < 0.1).length/numR; const rec1 = rec.filter(d => Math.abs((d.d.a % Math.PI) - Math.PI/4) < 0.1).length/numR; const rec2 = rec.filter(d => Math.abs((d.d.a % Math.PI) - Math.PI/2) < 0.1).length/numR; const rec3 = rec.filter(d => Math.abs((d.d.a % Math.PI) - 3*Math.PI/4) < 0.1).length/numR; return {gen:j, numTiles, numTF:numT/numTiles, areaF, tri0, tri1, tri2, tri3, tri4, tri5, tri6, tri7, rec0, rec1, rec2, rec3}; }) }3a:[] 33:{"id":"8c5f0e056014ea33","slug":"tiling-an-octagon-with-half-squares-and-a-size-rectangles","title":"Tiling an octagon with half-squares and A-size rectangles","thumbnail":"59a31c314a3382764d72c8ef4bbf70503a604e2cfba153ddf2c356fec95c3baa","access_level":"public","create_time":"$D2019-02-01T04:14:53.273Z","update_time":"$D2019-02-01T17:03:08.911Z","view_time":null,"first_public_time":"$D2019-02-01T17:04:54.500Z","has_unpublished_edits":null,"fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":"starter_2024"},"version":1336,"publish_version":1336,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null}],"members":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8e5b00309c21f717","slug":"snacks","title":"Snacks","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"type":"notebook","body":{"title":"Tiling an octagon with half-squares and A-size rectangles","cells":[{"id":96,"value":"md`# Tiling an octagon with half-squares and A-size rectangles\n\n${navigator.userAgent.match('HeadlessChrome') ? html`

` : ''}\n\nSee [Simon Gregg's octagon tiling](https://twitter.com/Simon_Gregg/status/1090700131647787009) (and the ensuing thread), following up on [a beautiful dissection solution by Laurens Gunnarsen](https://twitter.com/MathPrinceps/status/1089685292913549312) to [a puzzle by Catriona Shearer](\nhttps://twitter.com/Cshearer41/status/1089227396954419200).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"md`Here are the two [substitution rules](https://en.wikipedia.org/wiki/Substitution_tiling) discussed in that thread:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`### Rule I`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"{\n const w = 1300;\n const context = DOM.context2d(w/3, w/5);\n context.scale(1/3,1/3);\n illustrateRules(context, octagonRuleI, \n [{f:drawT, d:{x:w/4-w/5,y:w/30,s:w/10, a:0}, \n sx:(-w/5)*(1-Math.SQRT2)+w/3, sy:w/30*(1-Math.SQRT2), ss:Math.SQRT2},\n {f:drawA, d:{x:w/4-w/5,y:w/30+w/3,s:w/10, a:0}, \n sx:(-w/5)*(1-Math.SQRT2)+w/3, sy:(w/30+w/3)*(1-Math.SQRT2), ss:Math.SQRT2},]);\n const fontSize = Math.min(w/15);\n context.font = `${fontSize}px serif`;\n context.fillStyle = '#000';\n context.fillText(`T → T'`, (0.18)*w, (0.12)*w);\n context.fillText(`A → A'`, (0.18)*w, (0.46)*w);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md`The scale factor is ${tex`\\sqrt{2}`}.\n\nAfter each round of substitution, the total number of tiles is doubled and the ratio of half-squares (T for triangle) to A-size rectangles (A) is preserved.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`### Rule II \n\nWe choose random substitutions from the following lists of possibilities:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"{\n const w = width > 500 ? 1400 : 1000;\n const context = DOM.context2d(w/3, w/6);\n context.scale(1/3,1/3);\n illustrateRules(context, octagonRuleII, \n [{f:drawT, d:{x:w/4-w/5,y:w/30,s:w/10, a:0}, \n sx:(-w/3.2)*(1-Math.SQRT2), sy:w/30*(1-Math.SQRT2), ss:Math.SQRT2, \n tx:w/7.5, ty:0},\n {f:drawA, d:{x:w/4-w/5,y:w/30+w/4,s:w/10, a:0}, \n sx:(-w/5)*(1-Math.SQRT2), sy:(w/30+w/3.75)*(1-Math.SQRT2), ss:Math.SQRT2,\n tx:w/6, ty:0},]);\n const fontSize = Math.min(w/15);\n context.font = `${fontSize}px serif`;\n context.fillStyle = '#000';\n context.fillText(`T → T'`, (0.16)*w, (0.12)*w);\n context.fillText(`A → A'`, (0.18)*w, (0.37)*w);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md`(Note that there are many more possible substitutions for the A-size rectangles which I haven't included or implemented here.)\n\nThe scale factor is ${tex`1+\\sqrt{2}`}.\n\nAfter each round of substitution, ${tex`N_T`} becomes ${tex`3N_T+N_A`}, and ${tex`N_A`} becomes ${tex`8N_T + 3N_A`}. In matrix form:\n\n${tex.block`\\begin{pmatrix}\nN_T'\\\\\nN_A'\n\\end{pmatrix} = \\begin{pmatrix}\n3 & 8 \\\\\n1 & 3\n\\end{pmatrix}\\begin{pmatrix}\nN_T \\\\\nN_A\n\\end{pmatrix}.`}\n\nThe largest eigenvalue of the ${tex`2\\times2`} matrix is ${tex`3+2\\sqrt{2}\\approx 5.828`}, which gives the limiting rate of growth of the number of tiles, and the corresponding eigenvector is ${tex`\\frac{1}{1+2\\sqrt{2}}\\begin{pmatrix}\n2\\sqrt{2}\\\\\n1\n\\end{pmatrix}\\approx\\begin{pmatrix}\n0.7388\\\\\n0.2612\n\\end{pmatrix}`} (normalized so the entries add to 1), and its entries are the limiting fractions of tiles that are half-squares and A-size rectangles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"md`**Question:** Are ${tex`\\sqrt{2}`} and ${tex`1+\\sqrt{2}`} the only two \"primitive\" scale factors for substitution rules involving only these two types of tiles? (i.e. is it true that any other substitution rule for these two tiles has a scale factor which is a multiple of these?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"md`## Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"md`The gadget below displays several rounds of substitutions on a tiling of a regular octagon using either rule I or rule II.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"viewof object = {\n const div = form(html``);\n const num = div.arrayInd;\n const check = div.animate;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"viewof chooseRule = {\n const div = form(html``);\n const b = div.querySelector('button');\n b.onclick = (e) => {\n e.preventDefault();\n div.dispatchEvent(new CustomEvent('input'));\n };\n div.oninput = () => {\n b.disabled = div.rule.value === 'I';\n };\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"{\n return (object.animate) ? md`[Turn off animation](#object) to enable Save button.` : DOM.download(await new Promise(resolve => octagonPic.toBlob(resolve)), 'octagon.png', 'Save PNG');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"md`## Some stats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"md`The column [${tex`N_T`} vs. ${tex`N_A`}] shows the relative **numbers** of T-tiles and A-tiles, with the % of T-tiles beneath, and the column [${tex`A_T`} vs. ${tex`A_A`}] shows the relative **area** of T-tiles and A-tiles with the % area of T-tiles underneath.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"{\n const limitNum = chooseRule.rule === 'II' ? html`approaches ${tex`\\frac{2\\sqrt{2}}{1+2\\sqrt{2}}\\approx 0.73879612503`}` :\n `is always 2/3`;\n const limitArea = chooseRule.rule === 'II' ? `approaches 1/2` :\n html`is always ${tex`\\sqrt{2}-1\\approx 0.4142`}`;\n return md`For rule ${chooseRule.rule}, the percentage of tiles that are triangles ${limitNum}, and the triangle area fraction ${limitArea}.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"md`The last 8+4 columns show the distribution of tile orientations. It is a pleasant exercise to show that the numbers of triangles in each of the 8 possible orientations are always equal in both rule I and rule II. It's even easier to see that the rectangles for rule I can only take the horizontal and vertical orientations. For rule II, the rectangles gradually take on all orientations with equal probability. Presumably this can be shown via a similar argument as I used above to compute the limiting number fractions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`**Questions on the notebook? Comments?** Let me know at [@blockspins](https://twitter.com/blockspins)!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`## Code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// initial data\noctagon = {\n const s = width/4;\n const w2 = width/2;\n return [\n // corners\n {f:drawT, d:{x:w2 - s/Math.SQRT2, y:w2 - s/Math.SQRT2, s, a:Math.PI}},\n {f:drawT, d:{x:w2 + s/Math.SQRT2, y:w2 - s/Math.SQRT2, s, a:3*Math.PI/2}},\n {f:drawT, d:{x:w2 + s/Math.SQRT2, y:w2 + s/Math.SQRT2, s, a:0}},\n {f:drawT, d:{x:w2 - s/Math.SQRT2, y:w2 + s/Math.SQRT2, s, a:Math.PI/2}},\n // center\n {f:drawT, d:{x:w2, y:w2, s, a:3*Math.PI/4}},\n {f:drawT, d:{x:w2, y:w2, s, a:5*Math.PI/4}},\n {f:drawT, d:{x:w2, y:w2, s, a:7*Math.PI/4}},\n {f:drawT, d:{x:w2, y:w2, s, a:Math.PI/4}},\n // sides\n {f:drawA, d:{x:w2 - s/Math.SQRT2, y:w2 - s/Math.SQRT2, s, a:3*Math.PI/2}},\n {f:drawA, d:{x:w2 + s/Math.SQRT2, y:w2 - s/Math.SQRT2, s, a:0}},\n {f:drawA, d:{x:w2 + s/Math.SQRT2, y:w2 + s/Math.SQRT2, s, a:Math.PI/2}},\n {f:drawA, d:{x:w2 - s/Math.SQRT2, y:w2 + s/Math.SQRT2, s, a:Math.PI}},\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"octagonRuleI = {\n const map = new Map();\n map.set(drawT, ({x,y,s,a}) => {\n const s2 = s/Math.SQRT2;\n const cx = s2 * Math.cos(a+Math.PI/4);\n const cy = s2 * Math.sin(a+Math.PI/4);\n const T1 = {f:drawT, d:{x:x+cx, y:y+cy, s:s2, a:a+5*Math.PI/4}};\n const T2 = {f:drawT, d:{x:x+cx, y:y+cy, s:s2, a:a+3*Math.PI/4}};\n return [T1,T2];\n });\n map.set(drawA, ({x,y,s,a}) => {\n const dx1 = s*Math.cos(a);\n const dy1 = s*Math.sin(a);\n const s2 = s/Math.SQRT2;\n const dx2 = -s2*Math.sin(a);\n const dy2 = s2*Math.cos(a);\n const A1 = {f:drawA, d:{x:x+dx1,y:y+dy1, s:s2, a:a+Math.PI/2}};\n const A2 = {f:drawA, d:{x:x+dx1+dx2,y:y+dy1+dy2, s:s2, a:a+Math.PI/2}};\n return [A1,A2];\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"function drawT(context, {x,y,s,a}) {\n const dx = s*Math.cos(a);\n const dy = s*Math.sin(a);\n // draw halfsquare\n context.fillStyle = '#C7BFE6';\n context.beginPath();\n context.moveTo(x, y);\n context.lineTo(x+dx, y+dy);\n context.lineTo(x-dy, y+dx);\n context.closePath();\n context.fill();\n if (context.lineWidth > 0.01)\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function drawA(context, {x,y,s,a}) {\n const dx1 = s*Math.cos(a);\n const dy1 = s*Math.sin(a);\n const dx2 = -Math.SQRT2*dy1;\n const dy2 = Math.SQRT2*dx1;\n // draw A-size rectangle\n context.fillStyle = '#D5F27E';\n context.beginPath();\n context.moveTo(x, y);\n context.lineTo(x+dx1, y+dy1);\n context.lineTo(x+dx1+dx2, y+dy1+dy2);\n context.lineTo(x+dx2, y+dy2);\n context.closePath();\n context.fill();\n if (context.lineWidth > 0.01)\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"arr = (chooseRule.rule === 'I') ? arrI : arrII","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"md`If you're feeling confident in your computer's speed or if you're feeling very patient, you can change the sizes of the following arrays to even bigger numbers to perform more rounds of substitution:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"arrI = {\n if (navigator.userAgent.match('HeadlessChrome'))\n return [];\n return substMany(15, octagon, octagonRuleI, true)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"arrII = {\n if (navigator.userAgent.match('HeadlessChrome'))\n return [];\n chooseRule.rule;\n return substMany(6, octagon, octagonRuleII, true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"function lilTri(a) {\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"function lilRect(a) {\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`## Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"// future \"substitution tiling\" notebook\nimport {drawTiling, substMany, illustrateRules} from '60d79069880d2725'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"import {table} from '@tmcw/tables'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 34:"$33:body"