31:T425,function tileCenter(options) { options = { ...defaultOptions, ...options }; const { size, bgColor, fgColor } = options; const third = `${100 / 3}%`; return svg``; }32:T5ae,function tiling(options) { options = { rows: 5, columns: 5, minimumTileSize: 10, subdivisionProbability: 0.5, ...defaultOptions, ...options }; const { size, rows, columns } = options; const motifFns = motifMakers(options); const tiles = Array.from(generateTiles()); tiles.sort(({ size: a }, { size: b }) => b - a); return svg``; function* generateTiles() { for (let y = 0; y < rows * size; y += size) { for (let x = 0; x < columns * size; x += size) { yield* fill(x, y, options); } } } function* fill(x, y, options) { const { size, fgColor, bgColor, minimumTileSize, subdivisionProbability } = options; const half = size / 2; if ( half >= minimumTileSize && Math.random() < options.subdivisionProbability ) { const opts = { ...options, size: half, fgColor: bgColor, bgColor: fgColor }; const corner = (dx, dy) => fill(x + dx, y + dy, opts); yield* corner(0, 0, opts); yield* corner(0, half, opts); yield* corner(half, 0, opts); yield* corner(half, half, opts); } else { const tile = random(motifFns)(options); yield { size, svg: svg`${tile}` }; } } }33:[] 2f:{"title":"Truchet-Carlson Multi-Scale Patterns","cells":[{"id":1890,"value":"md`# Truchet-Carlson Multi-Scale Patterns`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"tiling({\n columns: width / 100,\n fgColor,\n bgColor,\n subdivisionProbability: 0.25,\n motifs: motifNames !== \"all\" && motifNames.split(/\\s+/)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"viewof motifNames = select({\n title: \"Motif set\",\n options: [\n \"all\",\n \"/\",\n \"x.\",\n \"+ / .\",\n \"| -\",\n \"+ +. fne\",\n \"/ fnw te\",\n \"\\\\ fnw x.\"\n ],\n description:\n \"Select a set of motifs to display above. The motif gallery, below, lists the names of the motifs.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`\n[Truchet tiles](https://en.wikipedia.org/wiki/Truchet_tiles) are sets of square tiles, that are designed so that their edges match up to create patterns that continue across the tiles now matter how the tiles are selected.\n\n*Multi-scale Truchet tiles* extend this idea to tiles of different sizes, that vary by powers of two. They were invented by [Christopher Carlson](https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/).\n\nThis notebook reproduces Carlson's tiles in JavaScript + SVG. It is based on the illustrations in\nCarlson's paper [“Multi-Scale Truchet Patterns”](http://archive.bridgesmathart.org/2018/bridges2018-39.html)\nin Proceedings of Bridges 2018: Mathematics, Art, Music, Architecture, Education, Culture ([PDF](http://archive.bridgesmathart.org/2018/bridges2018-39.pdf)).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof fgColor = color({\n value: \"#884411\",\n title: \"Foreground Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"viewof bgColor = color({\n value: \"#bbddee\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`# Tile Types\n\nThese are all the types (or motifs). The names (\\`\\\\\\`, \\`/\\`, etc.) are from Carlson's paper.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"{\n let size = 80;\n const cellSize = 2 * size;\n const motifs = createMotifs({ size });\n return grid(\n motifs.map((motif, i) =>\n withLegend(withBackground(motif), motifOptions[i].name)\n ),\n { size: cellSize }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`Each motif consists of a central portion, and a border or set of “wings”.\n\nThe centers are different for different tile types. The wings are all the same. The wings are designed to overlap adjacent tiles, at the same or a larger scale.\n\n## Tile Centers\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2040,"value":"md`_(This section develops the tile types top down, in terms of their geometric features.\nThe notebook [@osteele/truchet-tile-generation](https://observablehq.com/@osteele/truchet-tile-generation)\ngenerates them algorithmically, in a way that is extensible to different polygon shapes.)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"md`The centers can contain arcs that are centered on opposite corners. This reproduces the Smith tiles, which are the mostly widely-used Truchet tiles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"hcat([\n tileCenter({ bgColor: '#eee', arcs: [0, 3] }),\n tileCenter({ bgColor: '#eee', arcs: [1, 2] })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"{\n const pair = options =>\n hcat(\n options.map(opt => tileCenter({ ...opt, bgColor: '#eee', debug: true })),\n { spacing: 0 }\n );\n return md`Truchet tiles are designed so that however they are arranged, the pattern continues across the tile edge:\n\n${hcat([\n pair([{ arcs: [0, 3] }, { arcs: [1, 2] }]),\n pair([{ arcs: [0, 3] }, { arcs: [0, 3] }])\n])}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`\nA single arc creates a “frown”, that faces to the northeast, northwest, southeast, or southwest. (It looks more like a frown when the wings are added, since the wing's circles become the face's eyes.)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"hcat([\n tileCenter({ bgColor: '#eee', arcs: [0] }),\n tileCenter({ bgColor: '#eee', arcs: [1] }),\n tileCenter({ bgColor: '#eee', arcs: [2] }),\n tileCenter({ bgColor: '#eee', arcs: [3] })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"{\n const tileRow = options =>\n hcat(\n options.map(opt => tileCenter({ ...opt, bgColor: '#eee', debug: true })),\n {\n spacing: 0\n }\n );\n return md`The frowns, and the remaining tile centers below, aren't Truchet tiles. They don't in general match up with each other at their edges. They therefore create patterns that end abruptly at tile boundaries. However, adding wings, in the next section, turns them into Truchet tiles.\n\n${tileRow([{ arcs: [0] }, { arcs: [2] }])}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"md`A tile center can contain a vertical or horizontal stripe, or both.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"hcat([\n tileCenter({ bgColor: '#eee', vline: true }),\n tileCenter({ bgColor: '#eee', hline: true }),\n tileCenter({ bgColor: '#eee', vline: true, hline: true }),\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"md`Also, it can be a solid foreground or background color.\n\n${hcat([\n tileCenter({ bgColor: '#eee' }),\n tileCenter({ bgColor: '#eee', invertBackground: true })\n])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"md`Finally, coloring a third of the square with the foreground color creates “T”s in different orientations.\n(The wings add the cross stroke that creates the top of the T.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"hcat([\n tileCenter({ bgColor: '#eee', half: 0 }),\n tileCenter({ bgColor: '#eee', half: 1 }),\n tileCenter({ bgColor: '#eee', half: 2 }),\n tileCenter({ bgColor: '#eee', half: 3 })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"md`\\`tileCenter()\\` also takes options to specify the foreground and background colors, and the tile size.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"hcat([\n tileCenter({ bgColor: '#eee', arcs: [1, 2], fgColor: \"blue\" }),\n tileCenter({\n bgColor: '#eee',\n arcs: [1, 2],\n bgColor: \"blue\",\n bgColor: \"yellow\"\n }),\n tileCenter({ bgColor: '#eee', arcs: [1, 2], size: 50 }),\n tileCenter({ bgColor: '#eee', arcs: [1, 2], size: 25 })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"// The functions in this notebook default to these options if explicit options are not supplied.\ndefaultOptions = ({\n fgColor: \"black\",\n bgColor: \"white\",\n size: 100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`These tile core options construct the different motifs (shown in the gallery above).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"motifOptions = [\n // 0-1: \\ /\n { arcs: [1, 2], name: \"\\\\\" },\n { arcs: [0, 3], name: \"/\" },\n // 2-4: - | +\n { hline: true, name: \"-\" },\n { vline: true, name: \"|\" },\n { hline: true, vline: true, name: \"+\" },\n // 5-6: +. x.\n { name: \"+.\" },\n { invertBackground: true, name: \"x.\" },\n // 7-10: frowns\n { arcs: [0], name: \"fnw\" },\n { arcs: [1], name: \"fne\" },\n { arcs: [2], name: \"fsw\" },\n { arcs: [3], name: \"fse\" },\n // 11-14: T's\n { half: 0, name: \"tn\" },\n { half: 2, name: \"ts\" },\n { half: 1, name: \"te\" },\n { half: 3, name: \"tw\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"table(\n motifOptions.map(opts => ({\n name: opts.name,\n hline: '',\n vline: '',\n half: '',\n ...opts,\n arcs: (opts.arcs || []).join(\", \")\n }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"md`## Winged Tiles\n\nA *winged tile* extends the central tile with a border that contains four larger corner circles, and four smaller midline circles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function wingedTileMotif(options) {\n options = { ...defaultOptions, ...options };\n const { size, bgColor, fgColor } = options;\n const half = size / 2;\n const sixth = size / 6;\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"{\n let size = 100;\n let options = { debug: true, size, arcs: [0, 3] };\n let center = withBackground(tileCenter(options), { size: 200 });\n let wing = withBackground(wingedTileMotif({ center: false, ...options }));\n let winged = withBackground(wingedTileMotif(options));\n const str = s =>\n svg``;\n return hcat([wing, str('+'), center, str('='), winged], { valign: 0.5 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"md`The wings are designed to match up with the tile centers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"{\n const str = s =>\n svg``;\n const col = options =>\n vcat(\n [\n withBackground(tileCenter({ ...options, debug: true }), { size: 200 }),\n str(\"↓\"),\n withBackground(wingedTileMotif({ ...options, debug: true }))\n ],\n { halign: 0.5 }\n );\n return hcat(\n [\n { arcs: [0, 3] },\n { hline: true, vline: true },\n { half: 2 },\n { arcs: [0] }\n ].map(col)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"md`\nThe wings also match the wings of adjacent tiles.\nScrub the slider to move the tiles on top of each other.\n\n${withBackground(\n hcat(\n [{ arcs: [0, 3] }, { hline: true, vline: true }, { half: 2 }].map(options =>\n wingedTileMotif({ ...options, debug: true })\n ),\n { valign: 0.75, spacing: wingedTileDemoSpacing1 }\n )\n)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1490,"value":"viewof wingedTileDemoSpacing1 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1432,"value":"md`Winged tiles are also designed to match up between different scales (that differ by a power of two).\nFor this to work, alternating sizes have their foreground and background colors reversed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"withBackground(\n hcat(\n [\n { size: 100, arcs: [0, 3] },\n { size: 50, hline: true, fgColor: 'white', bgColor: 'black' }\n ].map(options => wingedTileMotif({ ...options, debug: true })),\n { valign: 0.75, spacing: wingedTileDemoSpacing }\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"viewof wingedTileDemoSpacing = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`\n\\`createMotifs()\\`\nconstructs an Array of winged tiles, represented by SVG elements, at the specified size and with the specified foreground and background colors.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"createMotifs = options => motifMakers(options).map(fn => fn())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"motifMakers = options =>\n motifOptions\n .filter(({ name }) => !options.motifs || options.motifs.indexOf(name) >= 0)\n .map(motifOpts => instanceOpts =>\n wingedTileMotif({ ...options, ...motifOpts, ...instanceOpts })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"md`\nIf \\`options.motifs\\` is supplied, it should be an Array of motif names. In this case, \\`createMotifs()\\` returns only the named tiles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"md`# Tiling\n\nA *tiling* is constructed by filling each grid square\nwith a “fill”.\nThe fill is either a randomly-selected winged motif, or fills for\nthe four smaller squares that partition the square.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"hcat(\n [\n { subdivisionProbability: 0 },\n { subdivisionProbability: 1, minimumTileSize: 100 / 2 }\n ].map(opts =>\n tiling({\n ...opts,\n rows: 1,\n columns: 1,\n debug: true\n })\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"md`Successive subdivisions alternate foreground and background colors. This causes the wings to match up.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"hcat(\n [\n { size: 100 },\n { size: 50, fgColor: 'white', bgColor: 'black' },\n { size: 25 }\n ].map(options =>\n withLegend(\n withBackground(\n wingedTileMotif({ ...options, arcs: [0, 3], debug: true })\n ),\n (({ size }) => `${size} × ${size}`)(options)\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"md`Here are some tiny (2 x 2) tilings, that are filled with different sets of motifs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"(await visibility(),\nhcat(\n [\n { bgColor: '#fdd' },\n { bgColor: '#dfd', motifs: [\"/\"] },\n { bgColor: '#ddf', motifs: [\"te\", \"tw\"] },\n { bgColor: '#dff', motifs: [\"|\", \"-\"] }\n ].map(options => tiling({ rows: 2, columns: 2, ...options }))\n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`# Other Implementations\n\nAn animated version, with infinite scrolling, written in p5.js, is [here](https://www.openprocessing.org/sketch/1055118).\n\nA version in Mathematica is available for download from [Carlson's web site](https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/). I haven't yet looked at this.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"md`# References\n\n* “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)\n\nThanks to [Jacob Rus](https://observablehq.com/@jrus) for the following:\n\n* “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)\n* “Generalizations of Truchet Tiles”, Kerry Mitchell. [PDF](http://archive.bridgesmathart.org/2020/bridges2020-191.pdf)\n* “Chaos and Graphics: Truchet curves and surfaces”, Cameron Browne. [PDF](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.297.4115&rep=rep1&type=pdf)\n\nAlso see [@osteele/truchet-tile-generation](https://observablehq.com/@osteele/truchet-tile-generation) for additional references, especially regarding alternative tile motifs.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"import { color, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"import {table} from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"import { random, sum } from \"@osteele/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"import {\n grid,\n hcat,\n vcat,\n withBackground,\n withLegend\n} from \"@osteele/svg-utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}