2d:null 2e:["$","title",null,{"children":"27 | emma-ba | Observable"}] 33:T4ce,{ const ctx = DOM.context2d(width, hexRadius * 3 + 10) const canvas = ctx.canvas const roughCanvas = Rough.canvas(canvas) const tileDefaults = { layer: 0, side: 0, index: 0 } const skipTriangleChance = 0 ctx.lineCap = 'square' ctx.fillStyle = '#ccc' ctx.fillRect(0, 0, width, height) _.times(3, (i) => { const left = width / 2 - 2 * hexRadius const right = width / 2 + 2 * hexRadius const top = (2 * i * hexRadius) + hexRadius + (i === 0 ? 10 : i * 30) const lineWidth = 80 drawHexagon({ roughCanvas, skipTriangleChance, tile: { ...tileDefaults, id: i + 1, center: [left, top] }, }) drawHexagon({ roughCanvas, skipTriangleChance, tile: { ...tileDefaults, id: i + 2, center: [right, top] }, }) roughCanvas.linearPath([ [width / 2 - lineWidth / 2, top], [width / 2 + lineWidth / 2, top], [width / 2 + lineWidth / 2 - 10, top - 10], [width / 2 + lineWidth / 2 - 10, top + 10], [width / 2 + lineWidth / 2, top] ], { stroke: '#222', strokeWidth: 2, roughness: 2, bowing: 1 }) }) return canvas }34:[] 31:{"id":"e148b505d0db538d","slug":"27","title":"27","thumbnail":"1e61b7357e0d1e1581457dc0aee72ea4b50375cc7d61cdef4d8fc45d751fda08","access_level":"public","create_time":"$D2022-05-05T19:51:07.421Z","update_time":"$D2022-05-10T16:53:57.421Z","view_time":null,"first_public_time":"$D2022-05-08T11:14:16.526Z","has_unpublished_edits":null,"fork":{"id":"d09eca4cfe50753d","slug":"tiling-1","title":"tiling #1","owner":{"id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey"}},"stars":2,"starred":false,"owner":{"type":"team","id":"5d9b00b2cdcd8028","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":"starter_2024"},"version":915,"publish_version":915,"role":null,"authored":false,"authors":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null}],"members":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"27","cells":[{"id":0,"value":"md`\n\n\n# 27\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"{\n const ctx = DOM.context2d(width, height)\n const canvas = ctx.canvas\n const roughCanvas = Rough.canvas(canvas)\n const skipTriangleChance = 0.5\n const skipTriangleChance_small = 0\n \n ctx.lineCap = 'square'\n ctx.fillStyle = '#ccc'\n ctx.fillStyle = 'rgb(204,34,0)'\n ctx.fillRect(0, 0, width, height)\n \n for (const tile of tileGenerator_small()) {\n drawHexagon_small({ tile, roughCanvas, skipTriangleChance_small })\n }\n for (const tile of tileGenerator()) {\n drawHexagon({ tile, roughCanvas, skipTriangleChance })\n }\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"{\n const ctx = DOM.context2d(width, hexRadius * 2 + 20)\n const canvas = ctx.canvas\n const roughCanvas = Rough.canvas(canvas)\n const tileDefaults = { layer: 0, side: 0, index: 0 }\n const skipTriangleChance = 0\n \n ctx.lineCap = 'square' \n ctx.fillStyle = '#ccc'\n ctx.fillAlpha = 0.5\n ctx.fillRect(0, 0, width, height)\n\n _.times(4, i => {\n const top = hexRadius + 10\n let left\n const spread = hexRadius\n left = hexRadius + spread + i * (2 * hexRadius + spread)\n \n drawHexagon({\n roughCanvas,\n skipTriangleChance,\n tile: { \n ...tileDefaults, \n id: i + 1, \n center: [left, top] \n }\n }) \n })\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`starting at the center, these tiles rotate in a spiral direction according to these rules:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"md`finally, because i like a touch of randomness in order, when the triangles are drawn and filled there is a chance that it will be skipped.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"{\n const ctx = DOM.context2d(width, hexRadius * 2 + 20)\n const canvas = ctx.canvas\n const roughCanvas = Rough.canvas(canvas)\n const tileDefaults = { layer: 0, side: 0, index: 0 }\n const skipTriangleChance = 0.2\n \n const top = hexRadius + 10\n const left = width / 2\n let i = 0\n\n while (true) {\n ctx.fillStyle = '#ccc'\n ctx.fillRect(0, 0, width, height)\n drawHexagon({\n roughCanvas,\n skipTriangleChance,\n tile: { \n ...tileDefaults, \n id: i, \n center: [left, top] \n }\n }) \n yield canvas\n await Promises.delay(700)\n i += 1\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`# /code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = width*3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"hexRadius = 52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"MAX_LAYERS = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"function move(x, y) {\n const r = hexRadius\n const a = 2 * Math.PI / 6\n const cos = Math.cos(a)\n const sin = Math.sin(a)\n return {\n get n () { return [x, y - 2 * r * sin] },\n get ne () { return [x + r + r * cos, y - r * sin ] },\n get e () { return [] },\n get se () { return [x + r + r * cos, y + r * sin ] },\n get s () { return [x, y + 2 * r * sin] },\n get sw () { return [x - r - r * cos, y + r * sin ] },\n get w () { return [] },\n get nw () { return [x - r - r * cos, y - r * sin ] },\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"function move_small(x, y) {\n const r = hexRadius/2\n const a = 2 * Math.PI / 6\n const cos = Math.cos(a)\n const sin = Math.sin(a)\n return {\n get n () { return [x, y - 2 * r * sin] },\n get ne () { return [x + r + r * cos, y - r * sin ] },\n get e () { return [] },\n get se () { return [x + r + r * cos, y + r * sin ] },\n get s () { return [x, y + 2 * r * sin] },\n get sw () { return [x - r - r * cos, y + r * sin ] },\n get w () { return [] },\n get nw () { return [x - r - r * cos, y - r * sin ] },\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"tileCount = {\n function acc (n) {\n if (n === 0) return 1\n else return 6 * n + acc(n - 1)\n }\n return _.memoize(acc)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"function * tileGenerator() {\n let center = [width / 2, height / 2]\n let id = 1\n let side = 0\n let index = 0\n let layer = 0\n \n const emitValue = () => {\n const v = { id, layer, side, index, center }\n //console.log({ ...v, center: `(${v.center[0]}, ${v.center[1]})`})\n return v\n }\n \n const first = yield emitValue()\n \n while (layer < MAX_LAYERS) {\n layer += 1\n side = 0\n index = 0\n \n const tiles = 6 * layer\n const directions = ['s', 'sw', 'nw', 'n', 'ne', 'se']\n for (let i = 0; i < tiles; i++) {\n const moveCenter = move(...center)\n id += 1\n side = Math.floor(i / layer)\n index = i % layer\n if (side === 0 && index === 0) {\n center = moveCenter.se\n } else {\n center = moveCenter[directions[side]]\n }\n yield emitValue()\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"function * tileGenerator_small() {\n let center = [width / 2, height / 2]\n let id = 1\n let side = 0\n let index = 0\n let layer = 0\n \n const emitValue = () => {\n const v = { id, layer, side, index, center }\n //console.log({ ...v, center: `(${v.center[0]}, ${v.center[1]})`})\n return v\n }\n \n const first = yield emitValue()\n \n while (layer < MAX_LAYERS) {\n layer += 1\n side = 0\n index = 0\n \n const tiles = 6 * layer\n const directions = ['s', 'sw', 'nw', 'n', 'ne', 'se']\n for (let i = 0; i < tiles; i++) {\n const moveCenter = move_small(...center)\n id += 1\n side = Math.floor(i / layer)\n index = i % layer\n if (side === 0 && index === 0) {\n center = moveCenter.se\n } else {\n center = moveCenter[directions[side]]\n }\n yield emitValue()\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"function drawHexagon({ tile, roughCanvas, skipTriangleChance = 0 }) {\n const [x, y] = tile.center\n const r = hexRadius\n const a = 2 * Math.PI / 6\n const sides = []\n for (var i = 0; i < 6; i++) {\n sides.push([\n x + r * Math.cos(a * i), \n y + r * Math.sin(a * i)\n ])\n }\n drawNextTile({ tile, sides, roughCanvas, skipTriangleChance })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"function drawHexagon_small({ tile, roughCanvas, skipTriangleChance }) {\n const [x, y] = tile.center\n const r = hexRadius/2\n const a = 2 * Math.PI / 6\n const sides = []\n for (var i = 0; i < 6; i++) {\n sides.push([\n x + r * Math.cos(a * i), \n y + r * Math.sin(a * i)\n ])\n }\n drawTile_small({ tile, sides, roughCanvas, skipTriangleChance })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"function drawNextTile ({ tile, sides, roughCanvas, skipTriangleChance }) {\n const { id } = tile\n let fillTriangles\n \n if(id % 3 === 0) fillTriangles = [0, 3]\n if(id % 3 === 1) fillTriangles = [1, 4]\n if(id % 3 === 2) fillTriangles = [2, 5]\n \n drawTile({ tile, sides, fillTriangles, roughCanvas, skipTriangleChance })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"function drawTile({ tile, sides, fillTriangles, roughCanvas, skipTriangleChance }) {\n const triangles = toTriangles({ tile, sides }) \n _.each(triangles, (triangle, i) => {\n if (Math.random() < skipTriangleChance) return\n roughCanvas.polygon(triangle, { \n roughness: 0.3, \n fillStyle: 'solid',\n //fill: fillTriangles.includes(i) ? 'rgb(204,17,0)' : triangleColors[i],\n fill: triangleColors[i],\n fillAlpha: 0,\n stroke: 'rgb(50,50,50)',\n roughness: 2,\n bowing: 2\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"function drawTile_small({ tile, sides, roughCanvas, skipTriangleChance }) {\n const triangles = toTriangles({ tile, sides }) \n _.each(triangles, (triangle, i) => {\n if (Math.random() < 0.5) return\n roughCanvas.polygon(triangle, { \n roughness: 0.5, \n fillStyle: 'solid',\n fill: (Math.random() < 0.3 ) ? triangleColors_white[i] : triangleColors_black[i],\n stroke: 'rgba(50,50,50,0.2)',\n roughness: 2,\n bowing: 1\n })\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"triangleColors = ['rgba(255,255,255,1)', 'rgba(0,0,0,1)', 'rgba(51,51,51,0.4)', 'rgba(102,102,102,0.4)', \n 'rgba(153,153,153,0.4)', 'rgba(204,204,204,0.4)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"triangleColors_white = ['rgba(0,0,0,0)', 'rgba(255,255,255,1)', 'rgba(0,255,0,0)', \n 'rgba(255,255,255,0)','rgba(255,0,0,0)', 'rgba(255,255,255,1)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"triangleColors_black = ['rgba(0,0,0,0)', 'rgba(0,0,0,1)', 'rgba(0,255,0,0)', \n 'rgba(255,255,255,0)','rgba(255,0,0,0)', 'rgba(255,255,255,0)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"function toTriangles({ tile, sides }) {\n return _.map(sides, (p0, i) => {\n const p1 = sides[i + 1] || sides[0]\n const p2 = tile.center\n return [p0, p1, p2]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# /imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"Rough = (await import('https://unpkg.com/roughjs@4.3.1/bundled/rough.esm.js?module')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`# /styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"