21:null 22:["$","title",null,{"children":"Regular Plane Tilings | Mike Bostock | Observable"}] 27:[] 25:{"id":"4f58884dfc4b30c0","slug":"regular-plane-tilings/2","title":"Regular Plane Tilings","thumbnail":"dabe6fc6a50f13056d3ea9f1d1964b87804bb00b15d53925e56228a8673b32a3","access_level":"public","create_time":"$D2019-02-03T20:50:42.195Z","update_time":"$D2020-02-01T20:15:31.679Z","view_time":null,"first_public_time":"$D2019-02-03T21:09:02.190Z","has_unpublished_edits":null,"fork":{"id":"788b6d89f1e607eb","slug":"regular-plane-tilings","title":"Regular Plane Tilings","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":32,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":314,"publish_version":314,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Regular Plane Tilings","cells":[{"id":0,"value":"md`# Regular Plane Tilings\n\nTriangles, squares and hexagons are the only regular polygons that can uniformly [tile the plane](https://en.wikipedia.org/wiki/Euclidean_tilings_by_convex_regular_polygons). The animation below interpolates tilings using a Voronoi diagram. Each regular polygon (but not the intermediate ones!) have equal area.\n\nInspired by [Craig S. Kaplan](https://twitter.com/cs_kaplan/status/1091464085353480192).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof centroids = {\n const form = html`

Show centroids`;\n form.checkbox.onclick = () => (form.value = form.checkbox.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.checkbox.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"{\n const n = width / radius;\n const m = height / radius;\n const context = DOM.context2d(width, height);\n const tiles = [hexagons, squares, triangles]\n .map(tile => tile(n, m)\n .map(translate(width / 2, height / 2))\n .map(jitter(1e-2))); // avoid collinear input\n context.lineWidth = 1.5;\n for (let i = 0; true; ++i) {\n const ti = d3.interpolate(tiles[i % 3], tiles[(i + 1) % 3]);\n for (let f = 0, F = 120; f < F; ++f) {\n const delaunay = d3.Delaunay.from(ti(d3.easeCubic(f / F)));\n const voronoi = delaunay.voronoi([0, 0, width, height]);\n context.clearRect(0, 0, width, height);\n context.beginPath();\n voronoi.render(context);\n context.stroke();\n if (viewof centroids.value) {\n context.beginPath();\n delaunay.renderPoints(context, 1.5);\n context.fill();\n }\n yield context.canvas;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function hexagons(n, m) {\n const points = [];\n const r = radius * Math.sqrt(8 / Math.sqrt(3));\n const dx = r;\n const dy = r * 3 / (4 * Math.sin(Math.PI / 3));\n const x0 = -dx * n / 2;\n const y0 = -dy * m / 2;\n for (let j = 0, y = y0; j < m; y += dy, ++j) {\n for (let i = 0, x = x0 + (j & 1) * dx / 2; i < n; x += dx, ++i) {\n points.push([x, y]);\n }\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function squares(n, m) {\n const points = [];\n const r = radius * 2;\n const dx = r;\n const dy = r;\n const x0 = -dx * n / 2;\n const y0 = -dy * m / 2;\n for (let j = 0, y = y0; j < m; y += dy, ++j) {\n for (let i = 0, x = x0; i < n; x += dx, ++i) {\n points.push([x, y]);\n }\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function triangles(n, m) {\n const points = [];\n const r = radius * Math.sqrt(4 / Math.sqrt(3));\n const dx = r;\n const dy = r * Math.sqrt(3);\n const dr = r / Math.sqrt(12);\n const x0 = -dx * n / 2;\n const y0 = -dy * m / 2;\n for (let j = 0, y = y0; j < m; y += dy, ++j) {\n for (let i = 0, x = x0; i < n; x += dx, ++i) {\n points.push([x, y + (j & 1 ^ i & 1 ? -1 : +1) * dr]);\n }\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"jitter = e => ([x, y]) => [x + (Math.random() - 0.5) * e, y + (Math.random() - 0.5) * e]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"translate = (tx, ty) => ([x, y]) => [x + tx, y + ty]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"radius = 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"d3 = require(\"d3-delaunay@5\", \"d3-ease@1\", \"d3-interpolate@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W27","stdlib":"1"}} 26:"$25:body"