2d:null 2e:["$","title",null,{"children":"Truchet tiles | John C | Observable"}] 33:T7a7,p5(s => { s.setup = function(){ s.createCanvas(400,400); s.noStroke(); let cellSize = 10, sizes = [6,4,2,1], row = Math.floor(s.height/cellSize), col = Math.floor(s.width/cellSize); let status = new Array(row*col).fill(0); // store the status of each cell in the grid 0: avaliable 1:occupied for(let i = 0; i < col; i ++) { for(let j = 0; j < row; j ++) { const idx = i + j * col; if (status[idx] !== 0) continue; // cell already occupied const x = i * cellSize; const y = j * cellSize; const type = Math.floor(Math.random() * 4); let availableSizes = sizes.slice(); let size = availableSizes[Math.floor(Math.random() * availableSizes.length)]; let ok = checkStatus(i, j, size, col, status); while (!ok){ availableSizes = availableSizes.filter(s => s < size); // size to large, try with smaller size = availableSizes[Math.floor(Math.random() * availableSizes.length)]; ok = checkStatus(i, j, size, col, status); } setStatus(i, j, size, col, status); drawTile(type, [x,y], size * cellSize); } } } function checkStatus(x, y, n, col, status) { for(let i = x; i < x + n; i ++){ for(let j = y; j < y + n; j ++) { const idx = i + j * col; if (status[idx] !== 0) return false; // overlapping already occupied cell } } return true; } function setStatus(x, y, n, col, status) { for(let i = x; i < x + n; i ++){ for(let j = y; j < y + n; j ++) { const idx = i + j * col; status[idx] = 1; } } } function drawTile(type, loc, size){ s.push(); s.translate(loc[0] + size/2, loc[1] + size/2); s.rotate(type * Math.PI / 2); s.fill(0); s.triangle(size/2, -size/2, size/2, size/2, -size/2, size/2); s.fill(255); s.triangle(size/2, -size/2, -size/2, -size/2, -size/2, size/2); s.pop(); } })34:T404,We can also color the tiles to form some mega-ball-like shape: ![](https://christophercarlsoncom.files.wordpress.com/2018/03/smithtiling.png) You probably already noticed that this tile with circular units doesn't work well with different scales, that's why [Christopher Carlson](https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/) propose another tile based on this which allow tiles of different size connected together: ![](https://christophercarlsoncom.files.wordpress.com/2018/03/multiscaletiles2.png) It has some open edges with the stoke of circles being drawn, but that can be fixed with drawing the circles with color: ![](https://christophercarlsoncom.files.wordpress.com/2018/03/wingedtileassembly.png) Note that for different sizes, the colors are inverted to create the seamless effect. We can implement this with the random size layout we have made above with the origin Truchet tile. Just one thing to change: we need to draw the biggest tiles first and all the way down to the smallest: 35:Tbec,p5(s => { s.setup = function(){ s.createCanvas(400,400); s.background(144) s.noStroke(); let cellSize = 10, sizes = [8,4,2,1], row = Math.floor(s.height/cellSize), col = Math.floor(s.width/cellSize); let status = new Array(row*col).fill(0); // store the status of each cell in the grid 0: avaliable 1:occupied let tiles = []; // store the information about the tiles for (let i = 0; i < sizes.length; ++i) { tiles.push([]); } for(let i = 0; i < col; i ++) { for(let j = 0; j < row; j ++) { const idx = i + j * col; if (status[idx] !== 0) continue; // cell already occupied const x = i * cellSize; const y = j * cellSize; let availableSizes = sizes.slice(); let sizeIdx = Math.floor(Math.random() * availableSizes.length); let size = availableSizes[sizeIdx]; let ok = checkStatus(i, j, size, col, status); while (!ok){ availableSizes = availableSizes.filter(s => s < size); // size to large, try with smaller sizeIdx = Math.floor(Math.random() * availableSizes.length); size = availableSizes[sizeIdx]; ok = checkStatus(i, j, size, col, status); } setStatus(i, j, size, col, status); tiles[sizeIdx].push([x, y, sizeIdx, size * cellSize]); } } //now draw all the tiles starting from the biggest ones for (let i = 0; i < tiles.length; ++i) { let t = tiles[i]; for (let j = 0; j < t.length; ++j) { let item = t[j]; drawTile(...item); } } } function checkStatus(x, y, n, col, status) { for(let i = x; i < x + n; i ++){ for(let j = y; j < y + n; j ++) { const idx = i + j * col; if (status[idx] !== 0) return false; // overlapping already occupied cell } } return true; } function setStatus(x, y, n, col, status) { for(let i = x; i < x + n; i ++){ for(let j = y; j < y + n; j ++) { const idx = i + j * col; status[idx] = 1; } } } function drawTile(x, y, sizeIdx, drawingSize){ s.push(); let color1 = (sizeIdx % 2) * 255, color2 = ((sizeIdx + 1) % 2) * 255; s.translate(x + drawingSize/2, y + drawingSize/2); s.noStroke(); s.fill(color1); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.fill(color2); s.arc(-drawingSize/2, -drawingSize/2, 4*drawingSize/3, 4*drawingSize/3, 0, Math.PI/2); s.arc(drawingSize/2, drawingSize/2, 4*drawingSize/3, 4*drawingSize/3, Math.PI, 3*Math.PI/2); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.pop(); } })36:T1b40,p5(s => { class Tile{ constructor(x,y,level,size){ this.x = x; this.y = y; this.level = level; this.size = size; this.type = Math.floor(Math.random() * 7); this.rotation = Math.floor(Math.random() * 4); this.divided = false; } divide(){ let one = new Tile(this.x, this.y, this.level + 1, this.size/2); let two = new Tile(this.x + this.size/2, this.y, this.level + 1, this.size/2); let three = new Tile(this.x + this.size/2, this.y + this.size/2, this.level + 1, this.size/2); let four = new Tile(this.x, this.y + this.size/2, this.level + 1, this.size/2); this.divided = true; return [one,two,three,four]; } } s.setup = function(){ s.createCanvas(400,400); let biggestSize = 200; let tiles = []; //initialize the biggest tiles for (let x = 0; x < s.width; x += biggestSize) { for (let y = 0; y < s.height; y += biggestSize) { tiles.push(new Tile(x, y, 0, biggestSize)); } } //randomly subdivide the tiles for(let i = 0; i < tiles.length; i ++) { const t = tiles[i]; if (Math.random() * t.size > 10 && t.level < 4) { tiles.push(...t.divide()); } } //get rid of all the divided tiles tiles = tiles.filter(t => !t.divided); //sort from big to small tiles.sort((a,b) => {return a.level - b.level}); //draw tiles.forEach(t => { drawTile(t.x, t.y, t.level, t.size, t.type, t.rotation); }) } function drawTile(x, y, level, drawingSize, type, rotation){ s.push(); s.noStroke(); s.translate(x + drawingSize/2, y + drawingSize/2); s.rotate(rotation * Math.PI/2); let color1 = (level % 2) * 255, color2 = ((level + 1) % 2) * 255; switch (type){ case 6 : s.fill(color2); s.rect(-drawingSize/2,-drawingSize/2,drawingSize, drawingSize/2); s.fill(color1); s.rect(-drawingSize/2, 0, drawingSize, drawingSize/2); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.fill(color2); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); break; case 5: s.fill(color1); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.fill(color2); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); s.arc(drawingSize/2, -drawingSize/2, 4*drawingSize/3, 4*drawingSize/3, Math.PI/2, Math.PI); s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); break; case 4 : s.fill(color1); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.fill(color2); s.rect(-drawingSize/6,-drawingSize/2, drawingSize/3, drawingSize); s.rect(-drawingSize/2,-drawingSize/6, drawingSize, drawingSize/3); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); break; case 3 : s.fill(color2); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); break; case 2: s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.fill(color2); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); break; case 1 : s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize/3); s.rect(-drawingSize/2, drawingSize/2, drawingSize, drawingSize/3); s.fill(color2); s.rect(-drawingSize/2, -drawingSize/6,drawingSize, drawingSize/3); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); break; case 0 : s.fill(color1); s.rect(-drawingSize/2, -drawingSize/2, drawingSize, drawingSize); s.fill(color2); s.arc(-drawingSize/2, -drawingSize/2, 4*drawingSize/3, 4*drawingSize/3, 0, Math.PI/2); s.arc(drawingSize/2, drawingSize/2, 4*drawingSize/3, 4*drawingSize/3, Math.PI, 3*Math.PI/2); s.circle(0, -drawingSize/2, drawingSize/3); s.circle(drawingSize/2, 0, drawingSize/3); s.circle(0, drawingSize/2, drawingSize/3); s.circle(-drawingSize/2, 0, drawingSize/3); s.fill(color1); s.circle(-drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, -drawingSize/2, 2 * drawingSize/3); s.circle(drawingSize/2, drawingSize/2, 2 * drawingSize/3); s.circle(-drawingSize/2, drawingSize/2, 2 * drawingSize/3); break; default: break; } s.pop(); } })37:[{"id":"d03e28f7125cf6cb9318e06e0ba5914e6bcc9b2c98244cc19f376529f5dfb12b12c0bd5a6c4380d2bdb3bc03c973b5038e38346ac7fa28c610384de5ae7a16fa","href":"https://static.observableusercontent.com/files/d03e28f7125cf6cb9318e06e0ba5914e6bcc9b2c98244cc19f376529f5dfb12b12c0bd5a6c4380d2bdb3bc03c973b5038e38346ac7fa28c610384de5ae7a16fa","name":"Screenshot 2024-03-13 at 11.49.55 AM.png","type":"image/png","lastModified":1710330602613.872,"size":19738}] 31:{"id":"47cb7db44558049a","slug":"truchet-tiles","title":"Truchet tiles","thumbnail":"a379958407ec2620923d5e1ad35a209288fcea3b3209235df1ccccb0f6895d7a","access_level":"public","create_time":"$D2024-03-13T10:36:56.893Z","update_time":"$D2024-03-14T13:47:37.571Z","view_time":null,"first_public_time":"$D2024-03-13T10:37:08.178Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":181,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"},{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8a91769c6d3b75ab","slug":"algorithms","title":"Algorithms","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"type":"notebook","body":{"title":"Truchet tiles","cells":[{"id":0,"value":"# Truchet tiles\nTruchet tiles, in math definition, are square tiles decorated with patterns that are not rotationally symmetric. It is first studied by Sebastian Truchet in the 18 century, thus the name. The tile studied by Truchet has the following squres (each separated into two triangles with different color) as the basic units: ![](https://upload.wikimedia.org/wikipedia/commons/d/d9/Truchet_base_tiles_bordered.png)\n\nAnd with this unit, lots of different shapes and patterns can be made:\n![](https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Truchet_ordered_tiling.svg/1124px-Truchet_ordered_tiling.svg.png)\n\nWe can easily implement this with creative coding, here is an example of tiling with random units of same size:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(400,400);\n s.noStroke();\n let size = 10, row = Math.floor(s.height/size), col = Math.floor(s.width/size);\n for(let i = 0; i < row; i ++) {\n for(let j = 0; j < col; j ++) {\n const x = j * size;\n const y = i * size;\n const type = Math.floor(Math.random() * 4);\n drawTile(type, [x,y], size);\n }\n }\n }\n\n function drawTile(type, loc, size){\n s.push();\n s.translate(loc[0] + size / 2, loc[1] + size / 2);\n s.rotate(type * Math.PI / 2);\n s.fill(0);\n s.triangle(size/2, -size/2, size/2, size/2, -size/2, size/2);\n s.fill(255);\n s.triangle(size/2, -size/2, -size/2, -size/2, -size/2, size/2);\n s.pop();\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"We can see lots of interesting shapes emerged from this random process. We can further make more possibilities by using tile with different sizes, which require program that is a bit more complicated:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"There are other common forms of Truchet tiles which create different pattern, for example, with circular basic units like these ones (this is known as Smith's tile): \n![Screenshot 2024-03-13 at 11.49.55 AM.png](${await FileAttachment(\"Screenshot 2024-03-13 at 11.49.55 AM.png\").url()})\n\nWe can create some curvy maze with it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":54,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(400,400);\n s.noFill();\n s.stroke(0);\n s.strokeWeight(2);\n let size = 15, row = Math.floor(s.height/size), col = Math.floor(s.width/size);\n for(let i = 0; i < row; i ++) {\n for(let j = 0; j < col; j ++) {\n const x = j * size;\n const y = i * size;\n const type = Math.floor(Math.random() * 2);\n drawTile(type, [x,y], size);\n }\n }\n }\n\n function drawTile(type, loc, size){\n s.push();\n s.translate(loc[0] + size / 2, loc[1] + size / 2);\n s.rotate(type * Math.PI / 2);\n s.arc(-size/2,-size/2, size, size, 0, Math.PI/2);\n s.arc(size/2,size/2, size, size, Math.PI, 3 * Math.PI/2);\n s.pop();\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"Christopher Carlson also designed some other units that we can combine to for more interesting tiles:\n\n![](https://christophercarlsoncom.files.wordpress.com/2018/03/motifs.png)\n\nBelow is an example of using them in a layout with hierarchy method (bigger tiles subdivided to smaller ones, your can read [the next post](../@real-john-cheung/subdivision) to learn more about this method), observe how the composition is different from the random layout above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":151,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"Now, read [this post by Jared S Tarbell](https://www.infinite.center/2021/01/25/truchet-tile-multiscale/) and see if you can recreate something similar. If you are not sure, Jared also posted the code so you can check it out.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {p5} from \"@real-john-cheung/p5js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"