28:null 29:["$","title",null,{"children":"Rendering the Aperiodic Monotile | Ricky Reusser | Observable"}] 2e:T66e,# Rendering the Aperiodic Monotile This notebook sorta just kicks the tires of the newly-discovered periodic monotile of Smith *et al.* from [An Aperiodic Monotile, *arXiv:2303.10798*](https://arxiv.org/abs/2303.10798). I'm pretty bad at hex grids, so most of the effort is spent just trying to configure the viewport and navigate my way around a hex grid. As such, I've just placed these tiles manually, entering the coordinates and orientations by hand. It's not great. Rendering is performed in WebGL using the [regl](https://github.com/regl-project/regl) library together with my [regl-gpu-lines](https://github.com/rreusser/regl-gpu-lines) module. The tile fills are drawn with instanced rendering directly from a buffer of individual tile coordinates, so they are very efficient. Tile borders are fairly efficient but require duplicating the tile orientation data sixteen times, once for each tile edge line segment (with three extra to make it closed). It uses only three draw calls to make the entire figure, which I guess I'm dubiously happy about. Modify the `skew` parameter to transform to a rectangular grid, which then explains how the tiles are positioned using two integer coordinates and a rotation. Modify the pattern parameters to add a fragment-shader-based pattern to each tile [in the style of @Danpiker](https://mathstodon.xyz/@Danpiker/110062396666001681). The next task is to figure out metatiles (repeated groups of tiles) to automatically place the tiles. (I have a fork in which I'm trying to figure out metatiles/supertiles, but it's currently breaking my brain and I haven't had time to get it working just yet.)2f:T43b,function draw() { configureViewport({}, () => { configureLinearScales(scales, () => { applyCameraSkew({ skew }, () => { // Draw tile fills drawTris({ vertices: tileTrisBuf, positions: tilePositionsBuf, count: tileFillVertices.length, instances: tilePositions.length, patternOpacity, patternWidth, fillOpacity: ~opts.indexOf("Tile fill") ? 1 : 0, colorByKite: ~opts.indexOf("Color by kite") ? 1 : 0 }); // Draw tile outlines if (~opts.indexOf("Tile edges")) drawLines({ join: "bevel", vertexCount: tileBorderVertices.length, vertexAttributes: { xy: tileBorderBuf, tilePosition: tilePositionsBuf }, width: 2, color: [0, 0, 0, 1], instances: tilePositions.length }); drawHexGrid({ color: [0, 0, 0, 1], width: 1, hexOpacity, triOpacity }); }); }); }); }30:Tbab,drawTris = regl({ vert: ` precision highp float; attribute vec3 xy; attribute vec4 position; uniform mat4 model, view; varying float variant; varying vec2 uv; varying float colorMethod; const mat2 hexBasis = mat2(1.0, -1.0 / sqrt(3.0), 0.0, 2.0 / sqrt(3.0)); ${glslRot} void main () { uv = hexBasis * xy.xy; colorMethod = xy.z; variant = position.w; mat2 orientation = position.w == 0.0 ? mat2(1,0,0,1) : mat2(-1, 0, 1, 1); gl_Position = view * model * vec4(hexBasis * (position.xy + rot(position.z) * orientation * xy.xy), 0, 1); }`, frag: ` #extension GL_OES_standard_derivatives : enable precision lowp float; uniform float patternOpacity, patternWidth, fillOpacity, colorByKite; varying float variant; varying vec2 uv; varying float colorMethod; float linearstep (float a, float b, float x) { return clamp((x - a) / (b - a), 0.0, 1.0); } void main () { if (variant < 0.5) { gl_FragColor = vec4(0.3, 0.6, 1, 1); } else if (variant < 1.5) { gl_FragColor = vec4(0.5, 0.8, 1, 1); } else if (variant < 2.5) { gl_FragColor = vec4(0.85, 0.85, 0.85, 1); } else { gl_FragColor = vec4(1); } vec3 kiteColor; if (colorMethod == 0.0) { kiteColor = vec3(0.4, 0.5, 0.8).rgb; } else if (colorMethod == 1.0) { kiteColor = vec3(0.8, 0.4, 0.5); } else if (colorMethod == 2.0) { kiteColor = vec3(0.5, 0.8, 0.4); } else { kiteColor = vec3(0.6, 0.4, 0.8); } gl_FragColor.rgb = mix(gl_FragColor.rgb, kiteColor, colorByKite); gl_FragColor.rgb = mix(vec3(1), gl_FragColor.rgb, fillOpacity); float rad; float offset = 0.0; if (colorMethod <= 1.0) { rad = abs(min(length(uv), length(uv - vec2(0, 2.0/sqrt(3.0)))) - 1.0 / sqrt(3.0)) - patternWidth / sqrt(3.0); } else { vec2 c1 = vec2(0, 2.0/sqrt(3.0)); vec2 c2 = vec2(1.0, -1.0 / sqrt(3.0)); rad = abs(1.0 / sqrt(3.0) - min(length(uv - c1), length(uv - c2))) - patternWidth / sqrt(3.0); } gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0, 0, 0), patternOpacity * linearstep(0.5, -0.5, rad / fwidth(rad)) ); }`, attributes: { xy: regl.prop("vertices"), position: { buffer: regl.prop("positions"), divisor: 1 } }, uniforms: { model: (ctx, props) => props.model || identity, patternOpacity: regl.prop("patternOpacity"), patternWidth: regl.prop("patternWidth"), fillOpacity: regl.prop("fillOpacity"), colorByKite: regl.prop("colorByKite") }, depth: { enable: false }, count: regl.prop("count"), primitive: "triangles", instances: regl.prop("instances"), blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } } })31:T4e9,drawLines = { return reglLines(regl, { vert: ` precision highp float; #pragma lines: instance attribute vec4 tilePosition; #pragma lines: attribute vec2 xy; #pragma lines: position = getPosition(xy, tilePosition); #pragma lines: width = getWidth(); uniform mat4 view; uniform float pixelRatio, width; ${glslRot} const mat2 hexBasis = mat2(1.0, -1.0 / sqrt(3.0), 0.0, 2.0 / sqrt(3.0)); vec4 getPosition(vec2 xy, vec4 tilePosition) { if (xy.y > 1e2) return vec4(0); mat2 orientation = tilePosition.w == 0.0 ? mat2(1,0,0,1) : mat2(-1, 0, 1, 1); return view * vec4(hexBasis * (rot(tilePosition.z) * orientation * xy + tilePosition.xy), 0, 1); } float getWidth() { return width * pixelRatio; }`, frag: ` precision lowp float; uniform vec4 color; void main () { gl_FragColor = color; }`, uniforms: { color: regl.prop("color"), width: regl.prop("width") }, depth: { enable: false }, blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } } }); }32:T8bf,drawHexGrid = regl({ vert: ` precision highp float; attribute vec2 xy; varying vec2 uv; void main () { uv = xy; gl_Position = vec4(xy, 0, 1); }`, frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform mat4 inverseView; uniform float width, hexOpacity, triOpacity; uniform vec4 color; varying vec2 uv; float hexagon(vec2 xy) { xy /= vec2(1.0, 2.0 / sqrt(3.0)); xy.x -= 0.5; xy.y -= fract(floor(xy.x) * 0.5); xy = abs(fract(xy) - 0.5); return abs(1.0 - max( xy.y * 2.0, xy.y + xy.x * 1.5)) * (sqrt(3.0) * 0.5); } float linearstep (float a, float b, float x) { return clamp((x - a) / (b - a), 0.0, 1.0); } const vec2 g1 = vec2(1, 0); const vec2 g2 = vec2(1.0, sqrt(3.0)) / 2.0; const vec2 g3 = vec2(1.0, -sqrt(3.0)) / 2.0; float gridFactor (float parameter, float width, float feather) { float w1 = width - feather * 0.5; float d = length(vec2(dFdx(parameter), dFdy(parameter))); float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); return linearstep(d * (w1 + feather), d * w1, looped); } void main () { vec2 xy = (inverseView * vec4(uv, 0, 1)).xy; float hexGrid = hexagon(xy) * 0.707 / abs(dFdx(xy.x)); float triGrid1 = gridFactor(dot(xy, g1), width, 1.0); float triGrid2 = gridFactor(dot(xy, g2), width, 1.0); float triGrid3 = gridFactor(dot(xy, g3), width, 1.0); float grid = max( hexOpacity * linearstep(width + 0.5, width - 0.5, hexGrid), triOpacity * max(max(triGrid1, triGrid2), triGrid3) ); gl_FragColor = vec4(color.rgb, color.a * grid); }`, attributes: { xy: [-4, -4, 4, -4, 0, 4] }, uniforms: { color: regl.prop("color"), width: (ctx, props) => props.width * 0.5 * ctx.pixelRatio, hexOpacity: regl.prop("hexOpacity"), triOpacity: regl.prop("triOpacity") }, count: 3, depth: { enable: false }, blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } } })33:T90c,tilePositions = [ // First two coordinates identify position // Third coordinate identifies the orientation // Fourth coordinate identifies color ("0" color results in flipped tile) [0, 0, 0, 0], [3, 1, 5, 0], [5, -1, 1, 0], [2, -2, 1, 0], [-2, -3, 1, 0], [-4, -6, 2, 0], [-4, -1, 5, 0], [-1, 3, 5, 0], [3, 5, 3, 0], [1, 1, 0, 1], [0, 1, 2, 1], [1, 0, 2, 1], [-2, 0, 0, 2], [-3, -2, 2, 3], [4, 0, 2, 3], [1, -1, 2, 2], [0, 2, 2, 3], [2, 1, 3, 3], [3, 2, 2, 3], [2, 3, 4, 2], [3, 3, 5, 2], [4, 2, 1, 1], [2, -1, 1, 1], [3, 0, 1, 1], [3, -1, 3, 1], [4, -1, 3, 1], [5, 0, 1, 1], [4, 1, 5, 1], [1, 2, 1, 3], [2, 4, 3, 1], [0, -2, 3, 2], [1, -2, 3, 1], [-1, -2, 3, 1], [-1, -1, 4, 3], [-1, 0, 3, 3], [-3, -1, 5, 1], [-2, -2, 1, 1], [-3, -4, 4, 2], [-3, -3, 3, 1], [-4, -3, 3, 1], [-4, -5, 4, 1], [-5, -5, 5, 3], [-2, -5, 5, 1], [-2, -4, 5, 2], [0, -4, 1, 2], [1, -3, 4, 3], [2, -3, 5, 3], [4, -2, 4, 2], [6, 0, 3, 1], [6, 1, 4, 3], [6, 2, 3, 3], [5, 2, 0, 2], [5, 3, 1, 2], [6, 5, 3, 1], [6, 4, 4, 3], [7, 3, 2, 1], [3, 4, 5, 1], [5, 5, 3, 2], [-4, -2, 1, 1], [-5, -3, 1, 1], [-5, -4, 1, 0], [-5, -6, 2, 1], [-3, -6, 0, 3], [-2, 1, 1, 2], [-3, 0, 1, 1], [-4, 0, 2, 3], [-5, -1, 3, 3], [-4, 1, 5, 2], [-5, 1, 4, 2], [-1, 2, 1, 1], [0, 3, 5, 1], [4, 5, 0, 3], [6, 6, 2, 2], [7, 5, 1, 0], [7, 4, 5, 3], [8, 3, 2, 0], [7, 2, 4, 1], [8, 6, 3, 1], [7, 6, 1, 1], [8, 1, 2, 2], [7, 0, 3, 2], [5, -2, 5, 2], [-6, -4, 3, 1], [-6, -5, 4, 3], [-6, -3, 2, 2], [8, 2, 5, 3], [8, 4, 4, 1], [0, 4, 1, 1], [2, 5, 5, 1], [1, 4, 0, 3], [-2, 3, 3, 2], [-1, 4, 2, 2], [0, -5, 0, 2], [-5, -7, 4, 1], [1, 5, 1, 1], [2, 6, 5, 1], [1, 6, 5, 0], [-4, -7, 5, 2], [-2, -6, 3, 1], [-1, -5, 3, 0], [-1, -6, 5, 1], [-6, -2, 2, 1], [-6, -1, 0, 1], [-7, -1, 2, 1], [-7, -2, 0, 0], [-6, 0, 1, 3], [-7, 0, 2, 3], [-3, 3, 3, 1], [-5, 2, 3, 1], [-4, 2, 1, 0], [-4, 3, 1, 1], [-7, -4, 3, 2], [-7, -6, 4, 2], [-8, -6, 5, 2], [9, 3, 0, 3], [9, 5, 4, 2], [9, 6, 3, 2], [-8, -3, 4, 3], [-8, -2, 3, 3], [3, -3, 4, 1], [3, -4, 2, 0], [2, -4, 2, 1], [1, -5, 3, 3], [2, -5, 4, 1], [2, 7, 1, 1], [4, 6, 1, 3] ]34:T478,tileFillVertices = { const t = tileBorderVertices; // First two coordinates identify the triangle coordinates, // Third coordinate identifies the kite, used for fragment shader patterns return [ [ [0, 0, 0], [0, 0.5, 0], [-1 / 3, 1 / 3, 0] ], [ [0, 0, 0], [-1 / 3, 1 / 3, 0], [-2 / 3, -1 / 3, 0] ], [ [0, 0, 0], [-2 / 3, -1 / 3, 0], [-1 / 2, -1 / 2, 0] ], [ [0, 1, 1], [0, 1 / 2, 1], [1 / 3, 2 / 3, 1] ], [ [0, 1, 1], [1 / 3, 2 / 3, 1], [2 / 3, 4 / 3, 1] ], [ [0, 1, 1], [2 / 3, 4 / 3, 1], [1 / 2, 3 / 2, 1] ], [ [2 / 3, 1 / 3, 2], [1, 1 / 2, 2], [1, 1, 2] ], [ [2 / 3, 1 / 3, 2], [1, 1, 2], [1 / 3, 2 / 3, 2] ], [ [1, 1, 2], [1 / 2, 1, 2], [1 / 3, 2 / 3, 2] ], [ [0, 0, 3], [1 / 2, 0, 3], [2 / 3, 1 / 3, 3] ], [ [0, 0, 3], [2 / 3, 1 / 3, 3], [1 / 3, 2 / 3, 3] ], [ [0, 0, 3], [1 / 3, 2 / 3, 3], [0, 0.5, 3] ] ].flat(); }35:T747,createReglViewportConfiguration = { const DEFAULT_MARGIN = { t: 0, r: 0, b: 0, l: 0 }; return function createReglViewportConfiguration(regl) { const viewport3 = mat3create(); let command = regl({ scissor: { enable: true, box: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.viewportWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.viewportHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) } }, viewport: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.viewportWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.viewportHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) }, uniforms: { viewportResolution: (ctx, props) => [ ctx.viewportWidth, ctx.viewportHeight ], framebufferResolution: (ctx) => [ ctx.framebufferWidth, ctx.framebufferHeight ], inverseViewportResolution: (ctx, props) => [ 1 / ctx.viewportWidth, 1 / ctx.viewportHeight ], inverseFramebufferResolution: (ctx) => [ 1 / ctx.framebufferWidth, 1 / ctx.framebufferHeight ], pixelRatio: regl.context("pixelRatio") } }); return function (viewport, callback) { const margin = Object.assign({}, DEFAULT_MARGIN); if (viewport && viewport.margin) Object.assign(margin, viewport.margin); command({ margin }, callback); }; }; }36:[{"id":"141f3d2db75018e1e85159514f8c4c239b5876025733dd172c358c2de672375015bf0d44a0fe34be2e1a0cc659ee9c7e4b26e7d51bb67835a835e7a9cae52e3f","href":"https://static.observableusercontent.com/files/141f3d2db75018e1e85159514f8c4c239b5876025733dd172c358c2de672375015bf0d44a0fe34be2e1a0cc659ee9c7e4b26e7d51bb67835a835e7a9cae52e3f","name":"regl-gpu-lines.min.js","type":"application/javascript","lastModified":1680152178621.751,"size":14004}] 2c:{"id":"9ac731e591350692","slug":"aperiodic-monotile","title":"Rendering the Aperiodic Monotile","thumbnail":"2df32b10c01412d032a735b70abc053cfa30a861084c2009b503241d95315493","access_level":"unlisted","create_time":"$D2023-03-22T01:47:31.969Z","update_time":"$D2025-06-03T17:34:29.217Z","view_time":null,"first_public_time":"$D2023-03-27T15:12:11.970Z","has_unpublished_edits":null,"fork":false,"stars":48,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":2664,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"},{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"dcd095ad05c2b722","slug":"writeups","title":"Fun Notebooks","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"Rendering the Aperiodic Monotile","cells":[{"id":1778,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof regl = reglCanvas(this, {\n extensions: [\"ANGLE_instanced_arrays\", \"OES_standard_derivatives\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"viewof opts = Inputs.checkbox([\"Tile edges\", \"Tile fill\", \"Color by kite\"], {\n value: [\"Tile fill\", \"Tile edges\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"viewof patternOpacity = Inputs.range([0, 1], {\n label: \"Pattern opacity\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"viewof patternWidth = Inputs.range([0, 1], {\n label: \"Pattern width\",\n value: 0.15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"viewof hexOpacity = Inputs.range([0, 1], {\n label: \"Hex grid opacity\",\n value: 0.2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"viewof triOpacity = Inputs.range([0, 1], {\n label: \"Tri grid opacity\",\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"viewof skew = Inputs.range([0, 1], { label: \"Skew\", value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"## Draw commands","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1797,"value":"mutable dirty = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1937,"value":"triggerRepaint = {\n mutable dirty = true;\n skew;\n patternOpacity;\n patternWidth;\n opts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"drawLoop = {\n mutable dirty = true;\n let loop = regl.frame(() => {\n try {\n if (mutable dirty) draw();\n mutable dirty = false;\n } catch (e) {\n console.error(e);\n if (loop) loop.cancel();\n loop = null;\n }\n });\n invalidation.then(() => {\n if (loop) loop.cancel();\n loop = null;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"## Tile geometry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"tileBorderVertices = {\n const vertices = [\n [0, 0],\n [0.5, 0],\n [2 / 3, 1 / 3],\n [1, 0.5],\n [1, 1],\n [0.5, 1],\n [2 / 3, 4 / 3],\n [1 / 2, 3 / 2],\n [0, 1],\n [0, 0.5],\n [-1 / 3, 1 / 3],\n [-2 / 3, -1 / 3],\n [-1 / 2, -1 / 2]\n ];\n for (let i = 0; i < 3; i++) {\n vertices.push(vertices[i]);\n }\n return vertices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"tileBorderBuf = {\n const buf = regl.buffer(tileBorderVertices);\n invalidation.then(() => buf.destroy());\n return buf;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"tilePositionsBuf = {\n const tilePositionsBuffer = regl.buffer(\n tileBorderVertices.map(() => tilePositions).flat()\n );\n invalidation.then(() => tilePositionsBuffer.destroy());\n return tilePositionsBuffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"tileTrisBuf = {\n const buf = regl.buffer(tileFillVertices);\n invalidation.then(() => buf.destroy());\n return buf;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"## Camera configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1983,"value":"mutable shape = ({ width, height: Math.max(500, Math.floor(width * 0.7)) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"scales = {\n const w = mutable shape.width;\n const h = mutable shape.height;\n const aspect = w / h;\n const range = 4;\n return {\n x: d3\n .scaleLinear()\n .domain([-range * aspect, range * aspect])\n .range([0, w]),\n y: d3.scaleLinear().domain([-range, range]).range([h, 0])\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1968,"value":"triggerResize = {\n shape;\n const w = (mutable shape.width = width);\n const h = (mutable shape.height = Math.max(500, Math.floor(width * 0.7)));\n\n regl._gl.canvas.width = Math.floor(w * devicePixelRatio);\n regl._gl.canvas.height = Math.floor(h * devicePixelRatio);\n regl._gl.canvas.style.width = `${w}px`;\n regl._gl.canvas.style.height = `${h}px`;\n mutable dirty = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"function createReglLinearScaleConfiguration(regl) {\n const matrices = {\n view3: mat3create(),\n inverseView3: mat3create(),\n view: mat4create(),\n inverseView: mat4create()\n };\n const command = regl({\n context: {\n view3: regl.prop(\"view3\"),\n inverseView3: regl.prop(\"inverseView3\"),\n view: regl.prop(\"view\"),\n inverseView: regl.prop(\"inverseView\")\n },\n uniforms: {\n view3: regl.prop(\"view3\"),\n inverseView3: regl.prop(\"inverseView3\"),\n view: regl.prop(\"view\"),\n inverseView: regl.prop(\"inverseView\")\n }\n });\n\n return function (scales, clbk) {\n mat3fromLinearScales(matrices.view3, scales);\n mat3invert(matrices.inverseView3, matrices.view3);\n mat4fromMat3(matrices.view, matrices.view3);\n mat4fromMat3(matrices.inverseView, matrices.inverseView3);\n command(matrices, clbk);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"function mat3fromLinearScales(out, scales) {\n let xDomain = scales.x.domain();\n let yDomain = scales.y.domain();\n let xs = 2 / (xDomain[1] - xDomain[0]);\n let ys = 2 / (yDomain[1] - yDomain[0]);\n\n out[0] = xs;\n out[1] = 0;\n out[2] = 0;\n\n out[3] = 0;\n out[4] = ys;\n out[5] = 0;\n\n out[6] = -1 - xs * xDomain[0];\n out[7] = -1 - ys * yDomain[0];\n out[8] = 1;\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1731,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1724,"value":"function createZoom(scales, onZoom) {\n const xOriginal = scales.x.copy();\n const yOriginal = scales.y.copy();\n\n return d3.zoom().on(\"zoom\", function ({ transform: t }) {\n let range = scales.x.range().map(t.invertX, t);\n scales.x.domain(xOriginal.domain());\n scales.x.domain(range.map(scales.x.invert, scales.x));\n\n range = scales.y.range().map(t.invertY, t);\n scales.y.domain(yOriginal.domain());\n scales.y.domain(range.map(scales.y.invert, scales.y));\n\n onZoom && onZoom();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"configureLinearScales = createReglLinearScaleConfiguration(regl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"configureViewport = createReglViewportConfiguration(regl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"applyCameraSkew = regl({\n uniforms: {\n view: ({ view }, { skew }) =>\n mat4multiply(\n [],\n view,\n [\n [1 + (1 - RT3 / 2) * skew, skew / RT3, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ].flat()\n ),\n inverseView: ({ inverseView }, { skew }) =>\n mat4multiply(\n [],\n mat4invert(\n [],\n [\n [1 + (1 - RT3 / 2) * skew, skew / RT3, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ].flat()\n ),\n inverseView\n )\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"function attachPanZoom(el, scales, onZoom) {\n return function () {\n const xRange = scales.x.range();\n const yRange = scales.y.range();\n const aspect = (xRange[1] - xRange[0]) / (yRange[1] - yRange[0]);\n\n const xDom = scales.x.domain();\n const yDom = scales.y.domain();\n const yRng = 0.5 * (yDom[1] - yDom[0]);\n const xCen = 0.5 * (xDom[1] + xDom[0]);\n const xMin = xCen - yRng * aspect;\n const xMax = xCen + yRng * aspect;\n const yMin = yDom[0];\n const yMax = yDom[1];\n\n scales.x.domain([xMin, xMax]).range([0, shape.width]);\n scales.y.domain([yMin, yMax]).range([shape.height, 0]);\n\n el.__zoom = null;\n d3.select(el).call(createZoom(scales, onZoom));\n\n onZoom && onZoom();\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"panZoom = attachPanZoom(regl._gl.canvas, scales, () => (mutable dirty = true))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":753,"value":"glslRot = `\nmat2 rot (float amt) {\n if (amt < 0.5) {\n return mat2(1, 0, 0, 1);\n } else if (amt < 1.5) {\n return mat2(1, 1, -1, 0);\n } else if (amt < 2.5) {\n return mat2(0, 1, -1, -1);\n } else if (amt < 3.5) {\n return mat2(-1, 0, 0, -1);\n } else if (amt < 4.5) {\n return mat2(-1, -1, 1, 0);\n } else if (amt < 5.5) {\n return mat2(0, -1, 1, 1);\n }\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"RT3 = Math.sqrt(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"identity = mat4create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"function mat4fromMat3(out, a) {\n out[0] = a[0];\n out[1] = a[1];\n out[2] = 0;\n out[3] = a[2];\n\n out[4] = a[3];\n out[5] = a[4];\n out[6] = 0;\n out[7] = a[5];\n\n out[8] = 0;\n out[9] = 0;\n out[10] = 1;\n out[11] = 0;\n\n out[12] = a[6];\n out[13] = a[7];\n out[14] = 0;\n out[15] = a[8];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"reglLines = require(await FileAttachment(\"regl-gpu-lines.min.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import { reglCanvas } from \"@rreusser/regl-canvas\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"import { mat3invert, mat3create } from \"@rreusser/gl-mat3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"import { vec2transformMat2 } from \"@rreusser/gl-vec2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {\n mat4ortho,\n mat4multiply,\n mat4create,\n mat4fromTranslation,\n mat4invert\n} from \"@rreusser/gl-mat4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2d:"$2c:body"