28:null 29:["$","title",null,{"children":"Truchet Tiles | Nick Rabinowitz | Observable"}] 2e:Ta69,{ regen; const px = 2; const height = Math.min(width, 500); const ctx = DOM.context2d(width, height, px); ctx.canvas.style.maxWidth = '100%'; const s = px; const w = width * s; const h = Math.min(height * s, w); const edgeCount = 4; const tiles = [...tileSet]; const queue = new Heapify(1028, [], [], Array); const openEdges = new Map(); const skip = new Set(); queue.push({ id: null, x: 0, y: 0, edge: null }, 0); function edgeFits(edge, x, y, orientation) { const id = edgeId(x, y, orientation); const openEdge = openEdges.get(id); return !openEdge || [...edge].reverse().join('') === openEdge.edge; } function rotatedEdges(tileEdges, rotations) { const edges = [...tileEdges]; for (let i = 0; i < rotations; i++) edges.unshift(edges.pop()); return edges; } while (tiles.length > 0 && queue.size > 0) { // pop an edge off the queue const {id: nextId, orientation: nextOrientation, edge: nextEdge, x, y} = queue.pop(); // If we've already filled this edge, skip if (skip.has(nextId)) { skip.delete(nextId); continue; } const xPos = x * edgeLength * s + w/2; const yPos = y * edgeLength * s + h/2; // check bounds if ( xPos < -edgeLength || yPos < -edgeLength || xPos > w + edgeLength || yPos > h + edgeLength ) continue; // try random rotation until edges align let rotations; let edges; let tile; let tries = 0; do { tile = tiles[Math.floor(Math.random() * tiles.length)]; rotations = Math.floor(Math.random() * edgeCount); edges = rotatedEdges(tile.edges, rotations); } while ( nextEdge !== null && !edges.every((edge, i) => edgeFits(edge, x, y, i)) && tries++ < 300 ); // render the tile ctx.setTransform(s, 0, 0, s, xPos, yPos); ctx.rotate(rotations * 2 * Math.PI / edgeCount) tile.render(ctx, edgeLength); if (animate) { yield Promises.delay(edgeLength, ctx.canvas); } // Add any open edges for (let orientation = 0; orientation < edgeCount; orientation++) { const id = edgeId(x, y, orientation); if (openEdges.has(id)) { openEdges.delete(id); skip.add(id); } else { const {x: nx, y: ny} = neighbor(x, y, orientation); const edge = { id, orientation: (orientation + edgeCount / 2) % edgeCount, edge: edges[orientation], x: nx, y: ny } openEdges.set(id, edge); queue.push(edge, nx * nx + ny * ny) } } } yield ctx.canvas; }2f:Taa0,tiles = ({ knot1a: { edges: ['a', '_', '_', 'a'], render: renderKnot1(colors[0]) }, knot1b: { edges: ['b', '_', '_', 'b'], render: renderKnot1(colors[1]) }, knot1c: { edges: ['c', '_', '_', 'c'], render: renderKnot1(colors[2]) }, knot1d: { edges: ['d', '_', '_', 'd'], render: renderKnot1(colors[3]) }, knot2a: { edges: ['a', 'a', 'a', 'a'], render: renderKnot2(colors[0], colors[0]) }, knot2bc: { edges: ['b', 'c', 'c', 'b'], render: renderKnot2(colors[1], colors[2]) }, knot2bd: { edges: ['b', 'd', 'd', 'b'], render: renderKnot2(colors[1], colors[3]) }, knot2cd: { edges: ['c', 'd', 'd', 'c'], render: renderKnot2(colors[2], colors[3]) }, knot3a: { edges: ['a', '_', 'a', '_'], render: renderKnot3(colors[0]) }, knot3b: { edges: ['b', '_', 'b', '_'], render: renderKnot3(colors[1]) }, knot3c: { edges: ['c', '_', 'c', '_'], render: renderKnot3(colors[2]) }, knot3d: { edges: ['d', '_', 'd', '_'], render: renderKnot3(colors[3]) }, knot4a: { edges: ['a', 'a', 'a', 'a'], render: renderKnot4(colors[0], colors[0]) }, knot4bc: { edges: ['b', 'c', 'b', 'c'], render: renderKnot4(colors[1], colors[2]) }, knot4cb: { edges: ['c', 'b', 'c', 'b'], render: renderKnot4(colors[2], colors[1]) }, knot4bd: { edges: ['b', 'd', 'b', 'd'], render: renderKnot4(colors[1], colors[3]) }, knot4db: { edges: ['d', 'b', 'd', 'b'], render: renderKnot4(colors[3], colors[1]) }, knot4cd: { edges: ['c', 'd', 'c', 'd'], render: renderKnot4(colors[2], colors[3]) }, knot4dc: { edges: ['d', 'c', 'd', 'c'], render: renderKnot4(colors[3], colors[2]) }, fill2eb: { edges: ['be', 'eb', 'be', 'eb'], render: renderSquare3(colors[4], colors[1]) }, fill2be: { edges: ['eb', 'be', 'eb', 'be'], render: renderSquare3(colors[1], colors[4]) }, fill2bc: { edges: ['cb', 'bc', 'cb', 'bc'], render: renderSquare3(colors[1], colors[2]) }, fill2cb: { edges: ['bc', 'cb', 'bc', 'cb'], render: renderSquare3(colors[2], colors[1]) }, fill2ec: { edges: ['ce', 'ec', 'ce', 'ec'], render: renderSquare3(colors[4], colors[2]) }, fill2ce: { edges: ['ec', 'ce', 'ec', 'ce'], render: renderSquare3(colors[2], colors[4]) }, fill2bce: { edges: ['eb', 'bc', 'cb', 'be'], render: renderSquare3(colors[1], colors[4], colors[2]) }, fill2cbe: { edges: ['bc', 'ce', 'ec', 'cb'], render: renderSquare3(colors[2], colors[1], colors[4]) }, fill2ecb: { edges: ['be', 'ec', 'ce', 'eb'], render: renderSquare3(colors[4], colors[1], colors[2]) } })30:[] 2c:{"id":"86d0483079a9e00f","slug":"truchet-tiles","title":"Truchet Tiles","thumbnail":"cc06e05e3d599291f0296f3eaac04d3ccd0c071c94a395c962589d454cdaea57","access_level":"public","create_time":"$D2021-02-27T01:38:32.854Z","update_time":"$D2021-03-01T22:29:35.407Z","view_time":null,"first_public_time":"$D2021-02-27T16:51:02.010Z","has_unpublished_edits":null,"fork":true,"stars":9,"starred":false,"owner":{"type":"team","id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":"starter_2024"},"version":667,"publish_version":667,"role":null,"authored":false,"authors":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null}],"members":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Truchet Tiles","cells":[{"id":0,"value":"md`# Truchet Tiles\n\nAutomated tiling of [Truchet-style tiles](https://en.wikipedia.org/wiki/Truchet_tiles), inspired by chapter 18 of *Tessellations* (Fathauer, 2021). The algorithm here is really simple: Tile from the center outward, trying a random tile with random rotation at each new slot until it fits. Some tile sets will always find valid combinations using this strategy; others will get \"stuck\" in certain scenarios and an invalid tile will be used.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof regen = Button(\"Retile\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"{\n function toggle(tile) {\n if (tileSet.has(tile)) {\n tileSet.delete(tile);\n }\n else {\n tileSet.add(tile);\n }\n viewof tileSet.value = tileSet;\n viewof tileSet.dispatchEvent(new CustomEvent(\"input\"));\n }\n \n return html`\n

\n Select the set of tiles to use:\n

\n ${Object.keys(tiles).map(key => {\n const tile = tiles[key];\n const el = html`\n

\n ${drawTile(tile, 50)}\n

\n `;\n el.onclick = () => toggle(tile);\n return el;\n })}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`Presets:\n* ${clickableTileset([tiles.knot2a], 'Single Truchet tile')}\n\n* ${clickableTileset([tiles.knot2bc], 'Two-color Truchet tile')}\n\n* ${clickableTileset([tiles.fill2be, tiles.fill2eb], 'Two-color tiles with fill')}\n\n* ${clickableTileset([\n tiles.fill2be, tiles.fill2eb,\n tiles.fill2bc, tiles.fill2cb,\n tiles.fill2ce, tiles.fill2ec,\n tiles.fill2bce, tiles.fill2cbe, tiles.fill2ecb\n], 'Three-color tiles with fill')}\n\n* ${clickableTileset([tiles.knot1a, tiles.knot2a, tiles.knot3a, tiles.knot4a], 'Single-color knot tiles')}\n\n* ${clickableTileset([\n tiles.knot1b, tiles.knot1c,\n tiles.knot2bc, \n tiles.knot3b, tiles.knot3c, \n tiles.knot4bc, tiles.knot4cb\n], 'Two-color knot tiles')}\n\n* ${clickableTileset([\n tiles.knot1b, tiles.knot1c, tiles.knot1d,\n tiles.knot2bc, tiles.knot2bd, tiles.knot2cd,\n tiles.knot3b, tiles.knot3c, tiles.knot3d, \n tiles.knot4bc, tiles.knot4cb, tiles.knot4bd, tiles.knot4db, tiles.knot4cd, tiles.knot4dc\n], 'Three-color knot tiles')}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof edgeLength = Range([5, 100], {value: 30, step: 1, label: 'Edge Length'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof animate = Toggle({label: \"Animate\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`---\n\n## Tiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"viewof tileSet = Input(new Set([tiles.knot2a]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"colors = ['black', 'steelblue', 'orange', 'olivedrab', 'lightyellow']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"function renderKnot1(stroke) {\n return (ctx, edgeLength) => {\n const halfEdge = edgeLength / 2;\n ctx.beginPath();\n ctx.arc(-halfEdge, -halfEdge, halfEdge, 0, Math.PI / 2);\n ctx.lineWidth = Math.min(edgeLength / 3, 8);\n ctx.strokeStyle = stroke;\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"function renderKnot2(stroke1, stroke2) {\n return (ctx, edgeLength) => {\n const halfEdge = edgeLength / 2;\n ctx.lineWidth = Math.min(edgeLength / 3, 8);\n \n ctx.beginPath();\n ctx.arc(-halfEdge, -halfEdge, halfEdge, 0, Math.PI / 2);\n ctx.strokeStyle = stroke1;\n ctx.stroke();\n \n ctx.beginPath();\n ctx.moveTo(0, halfEdge);\n ctx.arc(halfEdge, halfEdge, halfEdge, Math.PI, 3 / 2 * Math.PI);\n ctx.strokeStyle = stroke2;\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"function renderKnot3(stroke) {\n return (ctx, edgeLength) => {\n const halfEdge = edgeLength / 2;\n ctx.beginPath();\n ctx.moveTo(0, -halfEdge);\n ctx.lineTo(0, halfEdge)\n ctx.lineWidth = Math.min(edgeLength / 3, 8);\n ctx.strokeStyle = stroke;\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"function renderKnot4(stroke1, stroke2) {\n return (ctx, edgeLength) => {\n const halfEdge = edgeLength / 2;\n const lineWidth = Math.min(edgeLength / 3, 8);\n \n ctx.beginPath();\n ctx.moveTo(0, -halfEdge);\n ctx.lineTo(0, halfEdge)\n ctx.strokeStyle = stroke1;\n ctx.lineWidth = lineWidth;\n ctx.stroke();\n \n ctx.beginPath();\n ctx.moveTo(-halfEdge, 0);\n ctx.lineTo(halfEdge, 0);\n ctx.strokeStyle = 'white';\n ctx.lineWidth = lineWidth + 4;\n ctx.stroke();\n \n ctx.strokeStyle = stroke2;\n ctx.lineWidth = lineWidth;\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"function renderSquare3(inner, outer, outer2) {\n outer2 = outer2 || outer;\n return (ctx, edgeLength) => {\n const halfEdge = edgeLength / 2;\n ctx.fillStyle = inner;\n ctx.fillRect(-halfEdge, -halfEdge, edgeLength, edgeLength);\n \n ctx.beginPath();\n ctx.moveTo(-halfEdge, -halfEdge);\n ctx.lineTo(0, -halfEdge);\n ctx.arc(-halfEdge, -halfEdge, halfEdge, 0, Math.PI / 2);\n ctx.lineTo(-halfEdge, -halfEdge);\n ctx.fillStyle = outer;\n ctx.fill();\n \n ctx.beginPath();\n ctx.moveTo(halfEdge, halfEdge);\n ctx.lineTo(0, halfEdge);\n ctx.arc(halfEdge, halfEdge, halfEdge, Math.PI, 3 / 2 * Math.PI);\n ctx.lineTo(halfEdge, halfEdge);\n ctx.fillStyle = outer2;\n ctx.fill();\n \n ctx.beginPath();\n ctx.arc(-halfEdge, -halfEdge, halfEdge, 0, Math.PI / 2);\n ctx.moveTo(0, halfEdge);\n ctx.arc(halfEdge, halfEdge, halfEdge, Math.PI, 3 / 2 * Math.PI);\n ctx.lineWidth = Math.min(edgeLength / 4, 4);\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`---\n\n## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"function clickableTileset(set, text) {\n const el = html`${text}`;\n el.addEventListener(\"click\", () => {\n viewof tileSet.value = new Set(set);\n viewof tileSet.dispatchEvent(new CustomEvent(\"input\"));\n });\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function drawTile(tile, edgeLength) {\n const s = 2;\n const ctx = DOM.context2d(edgeLength, edgeLength, s);\n \n ctx.setTransform(s, 0, 0, s, edgeLength, edgeLength);\n tile.render(ctx, edgeLength);\n \n ctx.beginPath();\n ctx.rect(-edgeLength / 2, -edgeLength / 2, edgeLength, edgeLength);\n ctx.strokeStyle = 'black';\n ctx.lineWidth = 1;\n ctx.stroke();\n \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function edgeId(x, y, orientation) {\n switch (orientation) { \n // top\n case 0: return [x, y, 0].join('|');\n // right\n case 1: return [x, y, 1].join('|');\n // bottom\n case 2: return [x, y + 1, 0].join('|');\n // left\n case 3: return [x - 1, y, 1].join('|');\n default: throw new Error(`unexpected orientation: ${orientation}`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"function neighbor(x, y, orientation) {\n switch (orientation) { \n // top\n case 0: return {x, y: y - 1};\n // right\n case 1: return {x: x + 1, y};\n // bottom\n case 2: return {x, y: y + 1};\n // left\n case 3: return {x: x - 1, y};\n default: throw new Error(`unexpected orientation: ${orientation}`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`\n---\n### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"Heapify = require('https://bundle.run/heapify@0.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {Input, Range, Toggle, Radio, Button} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"