2a:null 2b:["$","title",null,{"children":"Grid | Dmitry Baranovskiy | Observable"}] 31:T812,makeGrid = ( width, height, step, angle = 0, padding = 0, type = "square", startx, starty ) => { const ox = startx || step / 2; const oy = starty || step / 2; const dx = step; const dy = type == "square" ? step : (step * Math.sqrt(3)) / 2; const lens = getLens(width, height, step, angle, padding, ox, oy); let x = ox; let y = oy; let X = 0; let Y = 0; let row = -1; const res = [[]]; let rrow = res[0]; const π = Math.PI; const sin = Math.sin((angle * π) / 180); const cos = Math.cos((angle * π) / 180); const out = (x, y) => x + padding < 0 || y + padding < 0 || x - padding > width || y - padding > height; const turn = (x, y) => [ cos * (x - ox) - sin * (y - oy) + ox, sin * (x - ox) + cos * (y - oy) + oy ]; const minus = []; let back = true; y -= dy; x = ox + (type == "square" ? 0 : (Math.abs(row % 2) * dx) / 2); while (y > oy - lens[2]) { if (back) { x -= dx; if (x < ox - lens[0]) { back = false; rrow.push(...minus); minus.length = 0; continue; } } else { x += dx; [X, Y] = turn(x, y); if (!out(X, Y)) { rrow.push([X, Y]); } if (x > ox + lens[1]) { row--; x = ox + (type == "square" ? 0 : (Math.abs(row % 2) * dx) / 2); y -= dy; back = true; rrow = []; res.unshift(rrow); continue; } } } minus.length = 0; back = true; row = 0; x = ox; y = oy; while (y < oy + lens[3]) { if (back) { x -= dx; if (x < ox - lens[0]) { back = false; rrow.push(...minus); minus.length = 0; continue; } } else { x += dx; [X, Y] = turn(x, y); if (!out(X, Y)) { rrow.push([X, Y]); } if (x > ox + lens[1]) { row++; x = ox + (type == "square" ? 0 : ((row % 2) * dx) / 2); y += dy; back = true; rrow = []; res.push(rrow); continue; } } } return res; }32:T73d,makeGrid2 = (width, height, step, angle = 0, padding = 0, type = "square") => { const ox = step / 2; const oy = step / 2; const dx = step; const dy = type == "square" ? step : (step * Math.sqrt(3)) / 2; const lens = getLens(width, height, step, angle, padding); let x = 0; let y = 0; let X = 0; let Y = 0; let row = -1; const res = [[]]; let rrow = res[0]; const π = Math.PI; const sin = Math.sin((angle * π) / 180); const cos = Math.cos((angle * π) / 180); const out = (x, y) => x + padding < 0 || y + padding < 0 || x - padding > width || y - padding > height; const turn = (x, y) => [ cos * (x - ox) - sin * (y - oy) + ox, sin * (x - ox) + cos * (y - oy) + oy ]; let back = true; y -= dy; x = ox + (type == "square" ? 0 : (Math.abs(row % 2) * dx) / 2); while (y > ox - lens[2]) { if (back) { x -= dx; if (x < ox - lens[0]) { back = false; continue; } } else { x += dx; [X, Y] = turn(x, y); if (!out(X, Y)) { rrow.push([X, Y]); } if (x > ox + lens[1]) { row--; x = ox + (type == "square" ? 0 : (Math.abs(row % 2) * dx) / 2); y -= dy; back = true; rrow = []; res.unshift(rrow); continue; } } } back = true; row = 0; x = ox; y = oy; while (y < ox + lens[3]) { if (back) { x -= dx; if (x < ox - lens[0]) { back = false; continue; } } else { x += dx; [X, Y] = turn(x, y); if (!out(X, Y)) { rrow.push([X, Y]); } if (x > ox + lens[1]) { row++; x = ox + (type == "square" ? 0 : ((row % 2) * dx) / 2); y += dy; back = true; rrow = []; res.push(rrow); continue; } } } return res; }33:[] 2e:{"id":"9df742ab88371725","slug":"grid","title":"Grid","thumbnail":"f340e1b028aef41b3312e950b11fed8ce98812e084f900163fee125142fa3033","access_level":"public","create_time":"$D2021-10-15T10:45:00.612Z","update_time":"$D2022-06-20T00:38:06.345Z","view_time":null,"first_public_time":"$D2021-10-27T04:51:20.396Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024"},"version":326,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null}],"members":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Grid","cells":[{"id":0,"value":"# Grid","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"viewof angle = Inputs.range([0, 360], {\n value: 20,\n step: 1,\n label: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof step = Inputs.range([4, 100], {\n value: 20,\n step: 1,\n label: \"Step\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof type = Inputs.radio([\"square\", \"hex\"], {\n label: \"Type\",\n value: \"square\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof padding = Inputs.range([0, 50], {\n value: 3,\n step: 1,\n label: \"Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"wing = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"grid = makeGrid(\n width,\n height,\n step,\n angle,\n padding,\n type,\n width / 2,\n height / 2\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"grid.flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"getLens = (width, height, step, angle, padding, startx, starty) => {\n const π = Math.PI;\n const ox = startx;\n const oy = starty;\n const sin = Math.sin(((180 - angle) * π) / 180);\n const cos = Math.cos(((180 - angle) * π) / 180);\n const turn = (x, y) => [\n cos * (x - ox) - sin * (y - oy) + ox,\n sin * (x - ox) + cos * (y - oy) + oy\n ];\n const box = [\n turn(-padding, -padding),\n turn(-padding, height + padding * 2),\n turn(width + padding * 2, -padding),\n turn(width + padding * 2, height + padding * 2)\n ];\n const boxx = [];\n const boxy = [];\n box.forEach((corner) => {\n boxx.push(corner[0]);\n boxy.push(corner[1]);\n });\n const lenxf = Math.max(...boxx) - ox;\n const lenxb = ox - Math.min(...boxx);\n const lenyf = Math.max(...boxy) - oy;\n const lenyb = oy - Math.min(...boxy);\n return [lenxf, lenxb, lenyf, lenyb];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"