2a:null 2b:["$","title",null,{"children":"Patterns UI | Dmitry Baranovskiy | Observable"}] 31:T6fe,32:T918,get2StripesPath = (x, y, size1, space1, size2, angle1, angle2) => { const π = Math.PI; const α = (Math.abs(angle2 - angle1) / 180) * π; const w = space1 / Math.sin((π - α) / 2); const h = w / Math.tan(α / 2); const h1 = (angle2 > angle1 ? size2 : size1) / (2 * Math.sin(α / 2)); const h2 = (angle2 > angle1 ? size1 : size2) / (2 * Math.sin(α / 2)); const w1 = (h1 / h) * w; const w2 = (h2 / h) * w; const a = intersection(0, -h2, w, h - h2, 0, h - h1, w, -h1); a[0] += x; a[1] += y; const b = intersection(0, -h2, w, h - h2, 0, h + h1, w, h1); b[0] += x; b[1] += y; const c = intersection(0, h2, w, h + h2, 0, h - h1, w, -h1); c[0] += x; c[1] += y; const d = intersection(0, h2, w, h + h2, 0, h + h1, w, h1); d[0] += x; d[1] += y; const a1 = intersection(0, -h2, w, h - h2, w1, 0, 0, h1); a1[0] += x; a1[1] += y; const a2 = intersection(0, h2, w, h + h2, w1, 0, 0, h1); a2[0] += x; a2[1] += y; const d1 = intersection(0, -h2, w, h - h2, w, h - h1, w - w1, h); d1[0] += x; d1[1] += y; const d2 = intersection(0, h2, w, h + h2, w, h - h1, w - w1, h); d2[0] += x; d2[1] += y; const b1 = intersection(0, h - h1, w, -h1, w - w2, 0, w, h2); b1[0] += x; b1[1] += y; const b2 = intersection(0, h + h1, w, h1, w - w2, 0, w, h2); b2[0] += x; b2[1] += y; const c1 = intersection(0, h - h1, w, -h1, 0, h - h2, w2, h); c1[0] += x; c1[1] += y; const c2 = intersection(0, h + h1, w, h1, 0, h - h2, w2, h); c2[0] += x; c2[1] += y; const C1 = w1 > w2 || h1 > h2; const C2 = w2 > w1 || h2 > h1; return `M${x},${y}h${C1 ? `${w1}L${a1}` : w2}L${a}L${ C2 ? `${b1}L${x + w - w2},${y}` : `${x + w - w1},${y}` }L${x + w},${y}L${x + w},${C2 ? `${y + h2}L${b2}` : y + h1}L${b}L${ C1 ? `${d1}L${x + w},${y + h - h1}L${x + w},${y + h}h${-h1}L${d2}` : `${x + w},${y + h - h2}v${h2}h${-w2}` }L${d}L${ C2 ? `${c2}L${x + w2},${y + h}h${-w2}v${-h2}L${c1}` : `${x + w1},${y + h}h${-w1}v${-h1}` }L${c}L${C1 ? `${a2}L${x},${y + h1}z` : `${x},${y + h2}z`}`; // return `M0,${-h2}L${a}L${w},${-h1}v${h1 * 2}L${b}L${w},${h - h2}v${ // h2 * 2 // }L${d}L0,${h + h1}v${-h1 * 2}L${c}L0,${h2}z // M0,0h${w1}l${-w1},${h1}zM${w},${h}h${-w1}l${w1},${-h1}zM0,${h}v${-h2}l${w2},${h2}zM${w},0v${h2}l${-w2},${-h2}z`; }33:[] 2e:{"id":"e7663703662dd476","slug":"patterns-ui","title":"Patterns UI","thumbnail":"26b0a30ee90db3883ea28bed4122975ddbc521fe858ade6a0775104c7ee503ff","access_level":"public","create_time":"$D2022-01-28T02:10:57.617Z","update_time":"$D2022-07-28T03:54:37.060Z","view_time":null,"first_public_time":"$D2022-02-01T22:41:31.508Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024"},"version":415,"publish_version":415,"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":2,"collection":null,"type":"notebook","body":{"title":"Patterns UI","cells":[{"id":0,"value":"# Patterns UI","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"viewof type = Inputs.radio(\n [\"square\", \"hex\", \"stripes\", \"checkers\", \"2 stripes\"],\n {\n label: \"Type\",\n value: \"square\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof size = Inputs.range([0, 100], {\n value: 5,\n step: 1,\n label: \"Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof space = Inputs.range([1, 100], {\n value: 20,\n step: 1,\n label: \"Space\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof angle = Inputs.range([0, 180], {\n value: 20,\n step: 1,\n label: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof size2 = Inputs.range([0, 100], {\n value: 5,\n step: 1,\n label: \"Size 2\",\n disabled: type !== \"2 stripes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof angle2 = Inputs.range([0, 180], {\n value: 90,\n step: 1,\n label: \"Angle 2\",\n disabled: type !== \"2 stripes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof st = Inputs.checkbox([\"\"], {\n label: \"Show Tile\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof inv = Inputs.checkbox([\"\"], {\n label: \"Invert\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":395,"value":"Normal tile is **${Math.round(tileW * 100) / 100}×${Math.round(tileH * 100) / 100}** (1×1) and **${ƒ(0, 0, size, space, size2, angle, angle2).length.toLocaleString(\"en-US\")}** characters long, while normalised tile is **${Math.round(ww * 100) / 100}×${Math.round(hh * 100) / 100}** (${wAdj[1]}×${hAdj[1]}) and **${path.length.toLocaleString(\"en-US\")}** characters long.","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"path = {\n let res = [];\n for (let x = 0; x < wAdj[1]; x++) {\n for (let y = 0; y < hAdj[1]; y++) {\n res.push(ƒ(x * wAdj[2], y * hAdj[2], size, space, size2, angle, angle2));\n }\n }\n return res.join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"ƒ(0, 0, size, space, size2, angle, angle2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"hAdj = {\n const res = [NaN];\n for (let i = 1; i < 30; ++i) {\n const r = Math.round(tileH * i * 100) / 100;\n\n res.push(Math.round((r - Math.floor(r)) * 100));\n }\n let min = 100;\n let index = 0;\n res.forEach((x, i) => {\n const v = x < 50 ? x : 100 - x;\n if (v < min) {\n min = v;\n index = i;\n }\n });\n const out = Math.round(tileH * index);\n return [out, index, out / index, Math.abs(out / index - tileH)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"wAdj = {\n const res = [NaN];\n for (let i = 1; i < 30; ++i) {\n const r = Math.round(tileW * i * 100) / 100;\n res.push(Math.round((r - Math.floor(r)) * 100));\n }\n let min = 100;\n let index = 0;\n res.forEach((x, i) => {\n const v = x < 50 ? x : 100 - x;\n if (v < min) {\n min = v;\n index = i;\n }\n });\n const out = Math.round(tileW * index);\n return [out, index, out / index, Math.abs(out / index - tileW)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"hh = hAdj[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"ww = wAdj[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"tileW = {\n switch (type) {\n case \"square\":\n case \"hex\":\n case \"stripes\":\n return Math.max(space, size / 2);\n case \"checkers\":\n return size * 2;\n case \"2 stripes\":\n const α = (Math.abs(angle2 - angle) / 180) * π;\n return space / Math.sin((π - α) / 2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"tileH = {\n switch (type) {\n case \"square\":\n return Math.max(space, size / 2);\n case \"hex\":\n return Math.max(space, size / 2) * Math.sqrt(3);\n case \"stripes\":\n return 10;\n case \"checkers\":\n return size * 2;\n case \"2 stripes\":\n const α = (Math.abs(angle2 - angle) / 180) * π;\n const w = space / Math.sin((π - α) / 2);\n return w / Math.tan(α / 2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"ƒ = {\n return {\n square: getSquarePath,\n hex: getHexPath,\n stripes: getStripePath,\n checkers: getCheckersPath,\n \"2 stripes\": get2StripesPath\n }[type];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"getSquarePath = (x, y, size, space) => {\n const r = size / 2;\n const w = Math.max(space, r);\n return `M${w / 2},${w / 2 - r}a${r},${r},0,0,1,0,${2 * r}a${r},${r},0,0,1,0,${\n -2 * r\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"getHexPath = (x = 0, y = 0, size, space) => {\n const r = size / 2;\n const w = Math.max(space, r);\n const h = w * Math.sqrt(3);\n return `M${x},${y}h${r}a${r},${r},0,0,1,${-r},${r}z M${\n x + w\n },${y}v${r}a${r},${r},0,0,1,${-r},${-r}z M${x},${\n y + h\n }v${-r}a${r},${r},0,0,1,${r},${r}z M${x + w},${\n y + h\n }h${-r}a${r},${r},0,0,1,${r},${-r}z M${x + w / 2},${\n y + h / 2 - r\n }a${r},${r},0,1,1,0,${2 * r}a${r},${r},0,1,1,0,${2 * -r}z`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"getStripePath = (x, y, size, space) => {\n return `M0,0h${size}v10h${-size}z`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"getCheckersPath = (x, y, size) => {\n const w = size;\n return `M0,0h${w}v${w}H0zM${w},${w}h${w}v${w}h${-w}z`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"getSinusoid = (wavelength, amplitude, dx = 0, dy = 0) => {\n const amp = (amplitude * wavelength) / (2 * Math.PI);\n const v = 2 * Math.sqrt(3) * amp;\n const u = ((8 / 3 - Math.sqrt(3)) * wavelength) / 2;\n return [u + dx, dy - v, wavelength - u + dx, v + dy, wavelength + dx, dy];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"intersection = (x1, y1, x2, y2, x3, y3, x4, y4) => {\n const D = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n if (!D) {\n return [];\n }\n const a = x1 * y2 - y1 * x2;\n const b = x3 * y4 - y3 * x4;\n return [\n (a * (x3 - x4) - b * (x1 - x2)) / D,\n (a * (y3 - y4) - b * (y1 - y2)) / D\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"π = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"α = type == \"2 stripes\" ? (Math.abs(angle2 - angle) / 180) * Math.PI : angle","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"rotation = type == \"2 stripes\"\n ? Math.min(angle, angle2) + Math.abs(angle2 - angle) / 2\n : angle","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"