43:["$","title",null,{"children":"Bufferless line rendering fixtures | Anand Thakker | Observable"}] 4b:T4b4,twoSegmentCombos = { const tileCoords = { left: [1, 1, 2], right: [2, 1, 2] } const tiles = [tileCoords.left, tileCoords.right]; const posToTileCoord = ([tile, v]) => add(positions[v], tileCoords[tile]) const leftTilePositions = Object.keys(positions).map(pos => ['left', pos]) const rightTilePositions = Object.keys(positions).map(pos => ['right', pos]); const segments = cross(leftTilePositions, rightTilePositions) .filter(([l, r]) => !eq(posToTileCoord(l), posToTileCoord(r))); const lines = []; let i = 0; for(const segment of segments) { for (const end of leftTilePositions.concat(rightTilePositions)) { const endCoord = posToTileCoord(end); const segmentCoords = segment.map(posToTileCoord); if (eq(endCoord, segmentCoords[0]) || eq(endCoord, segmentCoords[1])) continue; lines.push([segment[0], segment[1], end]); } } return lines.map(line => ({ tiles, line: line.map(posToTileCoord), projected: line.map(([tile, v]) => tile2point(positions[v], tileCoords[tile])), label: line.map(([tile, v]) => `${tile === 'left' ? 'L' : 'R'}${v.replace('inside', 'I').replace('border', 'B')}`).join('-') })); }4c:[] 47:{"id":"f4f499614184efe9","slug":"bufferless-line-rendering-fixtures","title":"Bufferless line rendering fixtures","thumbnail":"efc044caf28a8dd1b7258a76c7337126a0cb90747d8a73860f15168fb81bc303","access_level":"public","create_time":"$D2018-04-25T10:10:39.705Z","update_time":"$D2018-04-25T15:44:45.513Z","view_time":null,"first_public_time":"$D2018-04-25T11:37:53.868Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bufferless line rendering fixtures","cells":[{"id":0,"value":"md`# Bufferless line rendering fixtures`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## One-segment combinations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"html`

${oneSegmentCombos.map(drawFixture)}

${twoSegmentCombos.slice(twoSegmentPage.slice[0], twoSegmentPage.slice[1]).map(drawFixture)}

below the fold stuff

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"tileWidth = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"zoom = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"worldSize = tileWidth * Math.pow(2, zoom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"allTiles = () => {\n const tiles = [];\n const z2 = Math.pow(zoom, 2);\n for (let x = 0; x < z2; x++) {\n for(let y = 0; y < z2; y++) {\n tiles.push([x, y, zoom]);\n }\n }\n return svg`\n ${tiles.map(drawTile)}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function drawTile([x, y, z]) {\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"function drawLine(line) {\n line = line\n .map(p => [p[0] * tileWidth, p[1] * tileWidth])\n return svg` p.join(',')).join(' ')}\" stroke=\"blue\" fill=\"none\">`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"function drawFixture({tiles, line, label}) {\n const bbox = [Infinity, Infinity, -Infinity, -Infinity];\n for (const tile of tiles) {\n const minX = tile[0] * tileWidth;\n const minY = tile[1] * tileWidth;\n bbox[0] = Math.min(bbox[0], minX);\n bbox[1] = Math.min(bbox[1], minY);\n bbox[2] = Math.max(bbox[2], minX + tileWidth);\n bbox[3] = Math.max(bbox[3], minY + tileWidth);\n }\n const padding = 0.1 * tileWidth;\n const viewbox = [\n bbox[0] - padding,\n bbox[1] - padding,\n bbox[2] - bbox[0] + 2 * padding,\n bbox[3] - bbox[1] + 2 * padding\n ]\n return html`\n

${label}

\n \n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"function pager(items, pageSize) {\n const pages = Math.ceil(items / pageSize);\n const node = html`

`;\n node.value = {\n get slice() {\n return [pageSize * this.page, pageSize * (this.page + 1)];\n },\n page: 0\n };\n \n const update = (page) => {\n node.value.page = page;\n node.querySelector('.label').innerText = `Page ${page + 1} of ${pages}`;\n node.dispatchEvent(new CustomEvent('input')); \n }\n \n node.querySelector('.prev').addEventListener('click', () => {\n update(Math.max(node.value.page - 1, 0));\n });\n node.querySelector('.next').addEventListener('click', () => {\n update((node.value.page + 1) % pages);\n });\n update(0);\n return node\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"positions = {\n const directions = {\n n: 0,\n ne: Math.PI * 1 / 4,\n e: Math.PI * 2 / 4,\n se: Math.PI * 3 / 4,\n s: Math.PI * 4 / 4,\n sw: Math.PI * 5 / 4,\n w: Math.PI * 6 / 4,\n nw: Math.PI * 7 / 4, \n };\n const locations = cross(['inside', 'border'], Object.keys(directions));\n const result = {};\n for (const [type, direction] of locations) {\n const cardinal = direction.length === 1;\n const radius = (type === 'inside' ? 0.8 : 1) * (cardinal ? 1 : Math.sqrt(2)) / 2;\n \n const y = 0.5 - radius * Math.cos(directions[direction]);\n const x = 0.5 + radius * Math.sin(directions[direction]);\n result[`${type}_${direction}`] = [x, y];\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function cross(A, B, options = {unique: false, unordered: false}) {\n const makeEntry = options.makeEntry || ((a, b) => [a, b]);\n const result = [];\n for (const a of A) {\n for (const b of B) {\n if (options.unique && eq(a, b)) continue;\n if (options.unordered && result.find(([b_, a_]) => eq(b_, b) && eq(a_, a))) continue;\n result.push(makeEntry(a, b));\n }\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"function add(v1, v2) {\n return [\n v1[0] + v2[0],\n v1[1] + v2[1]\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function tile2point(point, tile) {\n point = add(point, tile)\n return [\n tile2lon(point[0], tile[2]),\n tile2lat(point[1], tile[2])\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function tile2lat(y, z) {\n const r2d = 180 / Math.PI\n var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);\n return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function tile2lon(x, z) {\n return x / Math.pow(2, z) * 360 - 180;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function eq(a, b) {\n return JSON.stringify(a) === JSON.stringify(b)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"tilebelt = require('https://wzrd.in/standalone/tilebelt@latest')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null