32:T650,{ const size = 133; const height = 500; const bgColor = '#eef'; const colWidth = ((Math.sqrt(3) / 2) * size) / 2; const rowHeight = (3 * size) / 2; const rows = Math.floor(height / rowHeight + 0.5); const cols = Math.floor(width / colWidth - 0.5); const fns = createTileFactory({ n: 6, bgColor, sideLength: size, halfPlanes: true, winged: true }); const hexGridPos = (i, j) => [i * colWidth, (j + (i % 2) / 2) * rowHeight]; // function* generateTiles() { // for (let j = -1; j < rows; j++) { // for (let i = -1; i < cols; i++) { // let [x, y] = hexGridPos(i, j); // let tile = random(fns)(); // yield { x, y, tile }; // } // } // } function* generateRows() { for (let j = -1; j < Infinity; j++) { yield Array.from(generateRowTiles(j)); } } function* generateRowTiles(j) { for (let i = -1; i < cols; i++) { let [x, y] = hexGridPos(i, j); let tile = random(fns)(); yield { x, y, tile }; } } const nextRow = (g => () => g.next().value)(generateRows()); let tiles = []; for (let dy = 0; true; dy -= 1) { while (Math.max(...tiles.map(({ y }) => y + dy)) < height) { tiles.push(...nextRow()); tiles = tiles.filter(({ y }) => y + dy + size > 0); } yield svg``; await Promises.delay(1000 / 30); } }33:Tfa1,// The low-level function. Use tile() instead. // This defaults debug=true. The other defaults debug=false tileSvg = (pairs, options) => { // options const { n, winged, fgColor, bgColor, debug } = { n: 4, fgColor: 'black', bgColor: 'white', debug: true, ...options }; // utilities const { modDistance } = modFunctions(options.n || 4); const distance = ([x0, y0], [x1, y1]) => Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2); const midpoint = ([x1, y1], [x2, y2]) => [(x1 + x2) / 2, (y1 + y2) / 2]; const reflect = ([x, y], [cx, cy]) => [cx - 2 * (x - cx), cy - 2 * (y - cy)]; // read or compute default size and edge length const rawSideLength = distance( [1, 0], [Math.cos((2 * Math.PI) / n), Math.sin((2 * Math.PI) / n)] ); let { edgeLength } = { edgeLength: ((100 / rawSideLength) * 4) / n, ...options }; let { size } = { size: edgeLength * rawSideLength, ...options }; let raw = arange(n) .map(i => ((i + .5) / n) * 2 * Math.PI) .map(θ => [Math.cos(θ), Math.sin(θ)]); let rawBounds = [ Math.min(...raw.map(([x]) => x)), Math.min(...raw.map(([_, y]) => y)), Math.max(...raw.map(([x]) => x)), Math.max(...raw.map(([_, y]) => y)) ]; if (winged) { const d = 1 / 3; // FIXME rawBounds[0] -= d; rawBounds[1] -= d; rawBounds[2] += d; rawBounds[3] += d; } const scale = size / rawSideLength; const mapX = x => (x - rawBounds[0]) * scale; const mapY = y => (y - rawBounds[1]) * scale; const pa = θ => [mapX(Math.cos(θ)), mapY(Math.sin(θ))]; // angle => point const v2a = i => (2 * Math.PI * (i + .5)) / n; // vertex index => angle const pv = i => pa(v2a(i)); // vector index => point // midpoint of side between vertices i and i+1 const edgeCenter = i => midpoint(pv(i), pv(i + 1)); let sideLength = distance(pv(0), pv(1)); const lineWidth = sideLength / 3; const polyPath = arange(n) .map(pv) .join(' '); const clipPathId = DOM.uid("clip"); return svg``; }34:T551,md`## Further Reading * “Multi-Scale Truchet Patterns”, Christopher Carlson, Proceedings of Bridges 2018: Mathematics, Art, Music, Architecture, Education, Culture. [HTML](http://archive.bridgesmathart.org/2018/bridges2018-39.html), [PDF](http://archive.bridgesmathart.org/2018/bridges2018-39.pdf) Thanks to [Jacob Rus](https://observablehq.com/@jrus) for the following: * “Truchet Tilings and their Generalisations”, E A Lord and S Ranganathan. [PDF](https://www.ias.ac.in/public/Volumes/reso/011/06/0042-0050.pdf) * “Generalizations of Truchet Tiles”, Kerry Mitchell. [PDF](http://archive.bridgesmathart.org/2020/bridges2020-191.pdf) * “The Tiling Patterns of Sebastien Truchet and the Topology of Structural Hierarchy, Cyril Stanley Smith, Pauline Boucher. [Summary](https://muse.jhu.edu/article/600574/summary) * “The Curse of Truchet's Tiles”, Edward Borlenghi. [Blogspot](http://arearugscarpet.blogspot.com/2014/04/the-curse-of-truchets-tiles.html) * “Truchet Tilings Revisited”, Robert J. Krawczyk. [PDF](http://mypages.iit.edu/~krawczyk/rjkisama11.pdf) * [Jacques Andre's bibliography](http://jacques-andre.fr/faqtypo/truchet/) (in French) Also see [@osteele/truchet-carlson-tiles](https://observablehq.com/@osteele/truchet-carlson-tiles) for additional references, especially regarding multiscale (or multiresolution) tiles. `35:[] 2f:{"title":"Generalized Truchet Tiles","cells":[{"id":1681,"value":"md`# Generalized Truchet Tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"{\n const size = 133;\n const height = 500;\n const bgColor = '#eef';\n const colWidth = ((Math.sqrt(3) / 2) * size) / 2;\n const rowHeight = (3 * size) / 2;\n const rows = Math.floor(height / rowHeight + 0.5);\n const cols = Math.floor(width / colWidth - 0.5);\n const fns = createTileFactory({\n n: 6,\n bgColor,\n sideLength: size,\n halfPlanes: true,\n winged: true\n });\n\n const hexGridPos = (i, j) => [i * colWidth, (j + (i % 2) / 2) * rowHeight];\n\n function* generateTiles() {\n for (let j = -1; j < rows; j++) {\n for (let i = -1; i < cols; i++) {\n let [x, y] = hexGridPos(i, j);\n let tile = random(fns)();\n yield { x, y, tile };\n }\n }\n }\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`This notebook algorithmically generates [Truchet tiles](https://en.wikipedia.org/wiki/Truchet_tiles) (technically Smith tiles), and the centers of Truchet-Carlson winged tiles. It generalizes square tiles to different polygon shapes (triangles and hexagons).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`## Tile Variants\n### Connected Edge Centers\n\nThe simplest tiles connect the centers of edges. This allows tiles to be chosen independently of their neighbors. For a square, there are only three possibilities:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"gallery({ n: 4, skipEdges: false, size: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"md`(The set of generated square tiles includes the \"+\" tile, which is not a Smith tile. I am allowing crossed tiles, such as this, in order to add variety to the tile sets.)\n\nNote: Carlson generates tiles based on the edges of the paths, rules out tiles with crossed edges, and explicitly adds the \"+\" tile. I am using a different generation algorithm: generate the *centers* of thick strokes, and allow crossing paths. In the square case, this generates the same set of tiles (once half-planes are added, below). However, it generalizes to a richer set of pentagonal and hexagonal tiles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"gallery( {n:6, skipEdges: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"md`With colored paths, these tiles are used in the [Psyche-Paths](https://sites.google.com/site/literarydander/home/favorite-things/games-puzzles/psyche-paths-a-k-a-kaliko) and [Kaliko](https://boardgamegeek.com/boardgame/4178/kaliko) board games.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`### Skipped Edges\n\nThe algorithm above requires that every edge is connected to another edge.\n\nAllowing edges to be skipped generates more possibilities. This is also the only way to create motifs for odd-polygons with odd numbers of edges.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"gallery({ n: 3 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"gallery(4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"gallery({n:5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"md`Regular pentagonal famously can't be used to tile the plane. They can be used in different topologies. Also, they could be distorted in order to tile the plane. Mostly I built this as a waypoint to hexagons, since it is easier to debug tile generation with five edges and there are some phenomena that don't appear with only four.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"gallery({n:6})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"md`Tiles with skipped edges can no longer be placed indepedently of their neighbors, but they can form the centers of Carlson winged tiles. There are two different kinds of edges, and tiles in a tiling must be chosen such that tiles that share an edge have the same edge type at that edge. Adding Carlson wings, below, fixes this problem.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`### Half-Planes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"md`Yet more tiles can be added through the addition of “half planes”, that slice across the polyogn. (I've named these based on their appearance in square tiles. The “half-plane” in other polygons is actually curved.)\n\nAdding half-planes adds even more edge types, making these tiles even less suitable for random-choice tiling. However, adding wings (in the next section) fixes this.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"gallery({ n: 4, halfPlanes: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"gallery({ n: 6, halfPlanes: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"md`### Winged Tiles\n\nChristopher Carlson adds “wings” to the edges of tiles. This makes all the edges the same type, regardless of the underlying tile.\n\nSee [@osteele/truchet-carlson-tiles](https://observablehq.com/@osteele/truchet-carlson-tiles) for further discussion.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"gallery({ n: 3, winged: true, halfPlanes: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"gallery( {n:4, winged: true, halfPlanes: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"gallery( {n:6, winged: true, halfPlanes: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"md`## Interface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1595,"value":"md`### API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"md`Options:\n\n* n\n* bgColor, fgColor\n* debug\n* size\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"tile = (options, pairs=[]) => tileSvg(pairs, { debug: false, ...options })","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"tile({ n: 4, debug: true }, [[0, 1]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1604,"value":"tile({ n: 5, debug: true }, [[0, 1]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"hcat(arange(5).map(i => tileSvg([[i, (i + 3) % 5]], { n: 5 })))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"md`#### gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"gallery = options =>\n withBackground(\n grid(createTiles({ size: (50 * 4) / (options.n || 4), ...options }), {\n padding: 10\n })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1637,"value":"gallery({ n: 4 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"md`#### createTiles and createTileFactory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"createTiles = options => {\n const { halfPlanes, n, skipEdges } = { n: 4, ...options };\n const connectionSets = halfPlanes\n ? connectionSetsWithHalfplanes(n)\n : sideConnectionSets(n, skipEdges);\n return connectionSets.map(pairs => tile(options, pairs));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"createTileFactory = options => {\n const { n, halfPlanes, skipEdges } = { n: 4, ...options };\n const connectionSets = halfPlanes\n ? connectionSetsWithHalfplanes(n)\n : sideConnectionSets(n, skipEdges);\n return connectionSets.map(pairs => opts =>\n tile({ ...options, ...opts }, pairs)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"createTileFactory()[0]({ bgColor: 'red' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"md`A tile is represented as an Array of edge pairs. Each edge pair is an Array of elements from _ns_. An optional third element indicates that the edge pair is a half-plane.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"md`### Debugging\n\nDefine some tools for debugging tile sets.\n\n* A connection is printed as a pair of edge indices with arrow between them \\`0↔︎1\\`.\n* A halfplane is printed as a pair of edge indices with a square between them \\`2■3\\`.\n* A tile set is printed as a set of connections ${tilePairsDebugString([\n [0, 1],\n [2, 3]\n])}.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"tilePairsDebugString = set =>\n set.length === 0\n ? '∅'\n : `{${set\n .map(([a, b, isWall]) => (isWall ? `${a}■${b}` : `${a}↔︎${b}`))\n .join(\", \")}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"tilePairsDebugString([[0, 1], [2, 3]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1703,"value":"tilePairsDebugString([[0, 1], [2, 3, true]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1654,"value":"displayConnectionSets = sets => html`

${sets.map(tilePairsDebugString).map(s => html`

${s}

`)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"md`### Generation\n\nGenerate all the tiles that consist of connected edge pairs. _ns_ is an array of edge indices.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"sideConnectionSetsG = (ns, allowGaps = true) => {\n function* g(ns) {\n if (ns.length <= 1) {\n if (ns.length === 0 || allowGaps) yield [];\n return;\n }\n let [first, ...rest] = ns;\n for (let i in rest) {\n let second = rest[i];\n let others = rest.filter(j => j !== second);\n let pair = [first, second];\n for (let l of g(others)) {\n yield [pair, ...l];\n }\n }\n if (allowGaps) yield* g(rest);\n }\n return g(ns);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"sideConnectionSets = (n, allowGaps) =>\n Array.from(sideConnectionSetsG(arange(n), allowGaps))","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"{\n const tileSetsString = (n, allowGaps) =>\n sideConnectionSets(n, allowGaps)\n .map(tilePairsDebugString)\n .join('
');\n return html`\n\n \n \n \n \n\n${arange(1, 6).map(\n n =>\n html`\n \n \n \n `\n)}

n	Sides	Connections (w/ gaps allowed)	Connections (w/o gaps)
${n}	${JSON.stringify(arange(n))}	${tileSetsString(n, true)}	${tileSetsString(n, false)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`### Half-Plane Generation\n\nA tile may include halfplanes, that connect the 2/3 points on non-adjacent edges.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"connectionSetsWithHalfplanes = {\n function* g(n) {\n const { mod } = modFunctions(n);\n const adjustSet = d => s =>\n s.map(([i, j, ...t]) => [(i + d) % n, (j + d) % n, ...t]);\n yield* sideConnectionSetsG(arange(n));\n for (let i = 0; i < n; i++) {\n for (let d = 2; d <= n - 2; d++) {\n // if (n > 5 && mod(-d) === 2) continue;\n let first = [i, (i + d) % n, true];\n // let interior = Array.from(g(d - 1)).map(adjustSet(i + 1));\n let rests = Array.from(g(n - d - 1)).map(adjustSet(i + d + 1));\n for (let rest of rests) {\n yield [first, ...rest];\n }\n }\n }\n }\n return n => Array.from(g(n));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"// All the sets that include halfplanes\ndisplayConnectionSets(\n connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][2])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"// all the sets that include the first edge\ndisplayConnectionSets(\n connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][0] === 0)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1088,"value":"// all the sets that include the first edge and a halfplane\ndisplayConnectionSets(\n connectionSetsWithHalfplanes(6).filter(\n s => s.length && s[0][0] === 0 && s.some(([i, j, hp]) => hp)\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":982,"value":"grid(\n connectionSetsWithHalfplanes(6)\n .filter(s => s.length && s[0][0] <= 0)\n .slice(-1)\n .map(pairs => tile({ n: 6, debug: true, size: 50 }, pairs))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1912,"value":"connectionSetsWithHalfplanes(6)\n .filter(s => s.length && s[0][0] <= 0)\n .slice(-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`### Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"tileSvg([[0, 2, true]], { n: 4 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"tileSvg([[1, 2]], { n: 3 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"arange = (a, b) =>\n b === undefined\n ? Array(a)\n .fill(0)\n .map((_, i) => i)\n : Array(b - a)\n .fill(0)\n .map((_, i) => a + i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"arange(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"arange(5,10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"iterMap = (iter, fn) => Array.from(iter).map(fn)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"iterMap([0, 1], n => n + 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"stringify = JSON.stringify","pinned":true,"hidden":false,"mode":"ojs"},{"id":1876,"value":"md`### Modular arithmetic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"modFunctions = n => {\n const mod = i => ((i % n) + n) % n;\n const modDistance = (a, b = 0) => Math.min(mod(b - a), n - mod(b - a));\n return { mod, modDistance };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1715,"value":"{\n const { mod } = modFunctions(4);\n return [-4, -1, 0, 3, 4, 5, 9].map(mod).toString() === \"0,3,0,3,0,1,1\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1723,"value":"{\n const { modDistance } = modFunctions(4);\n return [[0, 5], [5, 0], [-1, 4], [4, -1]].map(ns => modDistance(...ns));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"[[0, 2]].map(([a, b]) => {\n let { modDistance } = modFunctions(3);\n return `|${a}-${b}| = ${modDistance(a, b)}`;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"[[0, 1], [0, 2], [0, 3], [0, 4], [4, 0]].map(([a, b]) => {\n let { modDistance } = modFunctions(5);\n return `|${a}-${b}| = ${modDistance(a, b)}`;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1202,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"math = require('mathjs@7.6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"import { random } from \"@osteele/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"import { grid, hcat, vcat, withBackground } from \"@osteele/svg-utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}