2d:null 2e:["$","title",null,{"children":"Truchet Tiles variant: Intertwined quarter circles | Laurence Gonsalves | Observable"}] 33:T4fe,md`# Truchet Tiles variant: Intertwined quarter circles [Truchet Tiles](https://en.wikipedia.org/wiki/Truchet_tiles) are related to the classic [10 PRINT CHR$(205.5+RND(1)); : GOTO 10](https://10print.org/), aka "[#10print](https://twitter.com/search?q=%2310print)". This variant of Truchet tiles is inspired by [the overlapping quarter circles variant created by Paul Rickards](https://twitter.com/paulrickards/status/1086688800837959680). When I saw it I wondered: - Could the individual arcs could be separated, and to what degree? - Could the stacking order be shuffled, so tiles wouldn't necessarily overlap uniformly? - Could the separate curves be "scrambled" or "twisted" so a single tile would have different orientations at different radii? - How about coloring the adjacent paths differently? Like most randomized truchet tile implementations, each tile doesn't really know what's going on in other tiles. The coloration on the tiles is such that they will always line up (believe it or not!). The one "cheat" is that tiles know the "parity" of their location (think white or black square on a checkerboard), and the order of colors is inverted depending on this information. This is the result of those experiments. Explore using the controls below the image.`34:T115e,{ const height = width; const saturation = args.saturation; const seed = args.seed; const hue_amplitude = args.hue_amplitude; const hue_phase = args.hue_phase; const background = args.background; const background_phase = args.background_phase; const border = args.border; const grid_alpha = args.grid_alpha; const should_shuffle = args.shuffle; const tile_size = args.tile_size; const curve_thickness = args.curve_thickness / 100; const curves_per_tile = args.curves_per_tile; const twist = args.twist / 100; const scramble = args.scramble / 100; const segments = curves_per_tile + 1; // Using a scratch canvas avoids a nasty interaction between clipping and // anti-aliasing. const tileCanvas = document.createElement('canvas'); tileCanvas.width = tile_size; tileCanvas.height = tile_size; const tileContext = tileCanvas.getContext('2d'); const rForm = makeRandomGenerator("form:" + seed) const rScramble = makeRandomGenerator("scramble:" + seed) const rScramble2 = makeRandomGenerator("scramble2:" + seed) const rShuffle = makeRandomGenerator("shuffle:" + seed) const rTwist = makeRandomGenerator("twist:" + seed) const context = DOM.context2d(width, height); context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); const curveWidth = Math.max(2, tile_size / segments * curve_thickness + 1); function shuffle(a) { for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(rShuffle.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } function circle(x, y, r, style) { tileContext.beginPath(); tileContext.arc(x, y, r, 0, 2 * Math.PI); tileContext.lineWidth = curveWidth; tileContext.strokeStyle = border; tileContext.stroke(); tileContext.lineWidth -= 2; tileContext.strokeStyle = style; tileContext.stroke(); }; function part(i, x, y, flip) { const hue = ((flip ? (segments - i) : i) / curves_per_tile) * hue_amplitude + hue_phase; circle(x, y, tile_size * i / segments, `hsla(${hue}, ${saturation}%, ${100 - saturation / 2}%, 1)`); } for (let y = 0; y < height; y += tile_size) { for (let x = 0; x < width; x += tile_size) { const curves = []; const otx = (rForm.random() < 0.5 ? 0 : tile_size); const oty = (rForm.random() < 0.5 ? 0 : tile_size); for (let i = 1; i <= Math.floor(segments / 2); i++) { // We do this outside of the if for more stability. const stx = (rScramble2.random() < 0.5 ? 0 : tile_size); const sty = (rScramble2.random() < 0.5 ? 0 : tile_size); const should_scramble = (i > 1 && rScramble.random() < scramble) const tx = should_scramble ? stx : otx; const ty = should_scramble ? sty : oty; const should_twist = (rTwist.random() < twist); const k = segments - i; const twist_i = (k != i) && (rTwist.random() < 0.5) && should_twist; const twist_k = (k != i) && (!twist_i) && should_twist; function do_twist(twist_this, z) { return twist_this ? tile_size - z : z; } curves.push([twist_i ? k : i, do_twist(twist_i, tx), ty]); if (k != i) { curves.push([twist_k ? i : k, do_twist(twist_k, tx), ty]); curves.unshift([twist_k ? i : k, do_twist(twist_k, tile_size - tx), tile_size - ty]); } curves.unshift([twist_i ? k : i, do_twist(twist_i, tile_size - tx), tile_size - ty]); } if (should_shuffle) shuffle(curves); // draw tile const parity = ((x + y) / tile_size) % 2; const bkg2 = d3.hsl(background); bkg2.h += background_phase; tileContext.fillStyle = background; tileContext.fillRect(0, 0, tile_size, tile_size); tileContext.fillStyle = bkg2.hex(); tileContext.fillRect(parity ? 0 : tile_size / 2, 0, tile_size / 2, tile_size / 2); tileContext.fillRect(parity ? tile_size / 2 : 0, tile_size / 2, tile_size / 2, tile_size / 2); for (let j = 0; j < curves.length; ++j) { let [i, tx, ty] = curves[j]; part(i, tx, ty, ((x + y + tx + ty) / tile_size) % 2); } context.drawImage(tileCanvas, x, y); context.save(); context.globalAlpha = grid_alpha; context.beginPath(); context.rect(x, y, tile_size, tile_size); context.strokeStyle = border; context.stroke(); context.restore(); } } yield context.canvas; } 35:T8a4,viewof args = form(html` `)36:[] 31:{"id":"9b7724417fefd0a4","slug":"truchet-tiles-variant-intertwined-quarter-circles","title":"Truchet Tiles variant: Intertwined quarter circles","thumbnail":"48d3565b7decf55f7e32a4372b1eddd4a9a18355d8745e68051fc1c91b0a3d00","access_level":"public","create_time":"$D2019-01-24T02:38:04.212Z","update_time":"$D2024-01-03T18:56:46.951Z","view_time":null,"first_public_time":"$D2019-01-24T08:02:06.260Z","has_unpublished_edits":null,"fork":true,"stars":44,"starred":false,"owner":{"type":"team","id":"8eef45de50ec3cef","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":"starter_2024","bio":"Founder of Niphtio. he/him"},"version":559,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ed78c3e175ccc1f","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":null,"bio":"Founder of Niphtio. he/him"}],"members":[{"type":"individual","id":"3ed78c3e175ccc1f","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"4eb71736476d8aab","slug":"generative-art","title":"Generative art","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Truchet Tiles variant: Intertwined quarter circles","cells":[{"id":282,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"{\n const a = args;\n const form = document.getElementById(\"form\");\n const controls = document.getElementById(\"controls\")\n form.style.height = (form.offsetHeight - form.clientHeight) + controls.offsetHeight + \"px\";\ndocument.getElementById(\"blank\").style.height = controls.offsetHeight + \"px\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"import {checkbox,slider,color} from \"@jashkenas/inputs\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"import {makeRandomGenerator} from \"@forresto/random-seed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"d3 = require('d3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"

Routing

Geometry

Color