2c:null 2d:["$","title",null,{"children":"Random Tiles | Fabian Iwand | Observable"}] 32:T603,viewof plotOptions = Inputs.form( { scale: Inputs.range([5, 50], { step: 1, value: preset.plotOptions?.scale ?? 30, label: "Scale" }), inset: Inputs.range([0, 0.5], { value: preset.plotOptions?.inset ?? 0.04, step: 0.001, label: "Inset" }), cornerRadius: Inputs.range([0, 1], { value: preset.plotOptions?.cornerRadius ?? 0.15, step: 0.001, label: "Corner radius" }), colorBy: Inputs.radio(["random", "size", "tile"], { value: preset.plotOptions?.colorBy ?? "random", label: "Color by" }), palette: Object.defineProperty( htl.html`

${Inputs.text({ value: preset.plotOptions?.palette ?? "https://coolors.co/e09ba3-e7b7b3-efd0c8", label: "Colors", width: "100%", autocomplete: "off", placeholder: "Can be any set of hex color codes in a text" })}`, "value", { get() { return ( this.firstChild.value .match(/[a-f0-9]{6}/gi) ?.map((d) => `#${d}`) ?? ["#000000"] ); } } ), colorSeed: Inputs.range([0, 10000], { step: 1, value: preset.plotOptions?.colorSeed ?? 3752, label: "Random color seed" }) }, { template: (inputs) => htl.html`

Display options

${Object.values(inputs)} ` } )33:T557,function placeTiles(w, h, {tileVariants, rng, nLargest}) { const grid = new Uint32Array(w * h); const slots = new Set(d3.shuffler(rng)(Array.from({length: w * h}, (_, i) => i))); const placedTiles = []; const wMax = tileVariants.reduce((max, t) => Math.max(max, t.w), 0); const hMax = tileVariants.reduce((max, t) => Math.max(max, t.h), 0); const iOf = (x, y) => x + y * w; // Finds the largest free area, with a bias towards landscape orientation. const extentOf = (x1, y1) => { let x2 = Math.min(x1 + wMax, w); let y2 = Math.min(y1 + hMax, h); for(let x = x1; x < x2; x++) { if(grid[iOf(x, y1)]) x2 = x; else for(let y = y1; y < y2; y++) { if(grid[iOf(x, y)]) y2 = y; } } return [x2 - x1, y2 - y1]; }; const placeTile = (x1, y1, tile) => { const {w, h} = tile; const n = placedTiles.push({x: x1, y: y1, tile}); for(let y = y1; y < y1 + h; y++) { for(let x = x1; x < x1 + w; x++) { const i = iOf(x, y); slots.delete(i); grid[i] = n; } }; }; for(const i of slots) { const x = i % w; const y = i / w | 0; const [mw, mh] = extentOf(x, y); const candidates = tileVariants.filter(t => t.w <= mw && t.h <= mh); if(candidates.length) placeTile(x, y, weighted(rng(), candidates, d => d.r)); } return placedTiles; }34:[] 30:{"id":"6d8540b954f67d8b","slug":"random-tiles","title":"Random Tiles","thumbnail":"4b44db6f684e65b5a9b5ad03d98136aedc2ec9aebb9b45b02482638dccc925a4","access_level":"public","create_time":"$D2024-12-26T14:26:57.623Z","update_time":"$D2025-03-21T12:45:33.127Z","view_time":null,"first_public_time":"$D2024-12-28T14:47:15.875Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":572,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"},{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Random Tiles","cells":[{"id":535,"value":"# Random Tiles\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":0,"value":"Randomly arranges a set of rectangular tiles in a plane.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":539,"value":"\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":478,"value":"{\n const p = JSON.stringify({\n tileSpec,\n gridSize,\n tileSeed,\n plotOptions\n });\n const presetUrl = new URL(document.baseURI);\n presetUrl.search = new URLSearchParams({p});\n const defaultUrl = new URL(document.baseURI);\n defaultUrl.search = \"\";\n return htl.html`

\n Share these settings ·\n Return to defaults`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof gridSize = Inputs.form([\n Inputs.range([1, 100], {step: 1, value: preset.gridSize?.[0] ?? 20, label: \"Width\"}),\n Inputs.range([1, 100], {step: 1, value: preset.gridSize?.[1] ?? 10, label: \"Height\"}),\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"viewof tileSeed = Inputs.range([0, 10000], {\n step: 1,\n value: preset.tileSeed ?? 3995,\n label: \"Randomness seed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"Plot.plot({\n aspectRatio: 1,\n x: {axis: null},\n y: {axis: null, reverse: true},\n color: {\n // https://github.com/observablehq/plot/pull/2212\n range: (p => p.length ? p : [...p, ...p])(plotOptions.palette),\n },\n margin: 1,\n width: gridSize[0] * plotOptions.scale,\n marks: [\n //Plot.rect([gridSize], {x2: \"0\", y2: \"1\", stroke: \"red\"}),\n //Plot.text(tiles, {text: Plot.indexOf, x: \"x\", y: \"y\", dx: 8, dy: 8}),\n Plot.rect(tiles, {\n x1: d => d.x,\n y1: d => d.y,\n x2: d => d.x + d.tile.w,\n y2: d => d.y + d.tile.h,\n stroke: \"black\",\n fill: {\n tile: d => d.tile.c,\n size: d => \"s\" + (d.tile.w * d.tile.h),\n random: (() => {\n const rng = d3.randomLcg(plotOptions.colorSeed);\n return () => rng() * plotOptions.palette.length | 0;\n })(),\n }[plotOptions.colorBy],\n inset: plotOptions.scale * plotOptions.inset,\n r: plotOptions.scale * plotOptions.cornerRadius,\n }), \n ],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":441,"value":"viewof tileSpec = Inputs.textarea({\n value: preset.tileSpec ?? `\n1 1 0 black\n2 2 1 black\n2 1 1 #aaa\n1 2 1 #777\n3 2 1 #aaa\n2 3 1 #777\n `.trim(),\n label: \"Tiles\",\n rows: 6,\n monospace: true,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"

**Format:** `width height randomness-weight color`
\nYou can disable tiles by starting the line with \"#\".\n\n

The randomness weight determines how likely a tile is to get picked. The larger the tile, the higher its weight should be.

\n\n

Note that `color` only applies when \"tile\" is selected as color source under **Display options**. Any invalid color will make all tiles fall back to the predefined palette.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":513,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":475,"value":"preset = Promise.resolve()\n .then(d => new URL(document.baseURI).searchParams.get(\"p\"))\n .then(d => JSON.parse(d) ?? {})\n .catch(() => ({}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"// w = width, h = height, r = randomness weight, c = color (when coloring by tile is selected)\ntileVariants = tileSpec\n .split(\"\\n\")\n .map(d => d.trim())\n .filter(d => !d.match(/^#/)) // Allow lines to be commented via \"#\"\n .map(d => d.split(/[ ,\\t]+/))\n .filter(d => d.length === 4)\n .map(([w, h, r, c]) => ({\n w: parseInt(w),\n h: parseInt(h),\n r: parseFloat(r),\n c\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"tiles = placeTiles(...gridSize, {tileVariants, rng: d3.randomLcg(tileSeed)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"function weighted(n, arr, weightOf) {\n let max = 0;\n const weights = arr.map(v => (max += weightOf(v)));\n const offset = n * max;\n if(isNaN(offset)) throw new Error(\"Invalid offset\");\n return arr[weights.findIndex(w => offset <= w)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"