2b:null 2c:["$","title",null,{"children":"056 Connections | Saneef H. Ansari | Observable"}] 31:T4e0,function drawCurves(pts, indices) { const lines = indices.map(({ from, to }) => { const hasVerticalBias = Math.abs(from[0] - to[0]) >= Math.abs(from[1] - to[1]); const points = hasVerticalBias ? [from, to].sort((a, b) => a[0] - b[0]) : [from, to].sort((a, b) => a[1] - b[1]); const p1 = pts[points[0][1]][points[0][0]]; const x1 = bounds.x + math.lerp(0, bounds.width, p1.uv[0]); const y1 = bounds.y + math.lerp(0, bounds.height, p1.uv[1]); const p2 = pts[points[1][1]][points[1][0]]; const x2 = bounds.x + math.lerp(0, bounds.width, p2.uv[0]); const y2 = bounds.y + math.lerp(0, bounds.height, p2.uv[1]); const kx = hasVerticalBias ? Math.abs(x1 - x2) / 2 : 0; const ky = hasVerticalBias ? 0 : Math.abs(y1 - y2) / 2; const path = d3.path(); path.moveTo(x1, y1); path.bezierCurveTo(x1 + kx, y1 + ky, x2 - kx, y2 - ky, x2, y2); const r = 8; return svg` `; }); return svg`${lines}`; }32:[] 2f:{"id":"1e5848c254b7e583","slug":"056-connections","title":"056 Connections","thumbnail":"adac7d633964c61a9c2426cde64034f0c553a95bae0663148722d0a48dfc6a7c","access_level":"public","create_time":"$D2022-05-29T16:55:37.419Z","update_time":"$D2022-09-29T11:48:26.273Z","view_time":null,"first_public_time":"$D2022-05-30T11:09:55.933Z","fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":398,"publish_version":398,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"056 Connections","cells":[{"id":0,"value":"# 056 Connections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"{\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof randomize = seedButton(\"🔀 Shuffle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`[Link to this variation](${getNotebookUrlWithParams({\n seed: randomize,\n marginFactor,\n numOfSquares\n})})
You can get back to this particular generated graphic using this link.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof numOfSquares = Inputs.range([10, 250], {\n label: \"Cells\",\n step: 1,\n value: params.get(\"numOfSquares\") ?? 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof marginFactor = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 0.125,\n value: params.get(\"marginFactor\") ?? 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"function drawLines(pts, indices) {\n const lines = indices.map(({ from, to }) => {\n const p1 = pts[from[1]][from[0]];\n const x1 = bounds.x + math.lerp(0, bounds.width, p1.uv[0]);\n const y1 = bounds.y + math.lerp(0, bounds.height, p1.uv[1]);\n\n const p2 = pts[to[1]][to[0]];\n const x2 = bounds.x + math.lerp(0, bounds.width, p2.uv[0]);\n const y2 = bounds.y + math.lerp(0, bounds.height, p2.uv[1]);\n\n return svg``;\n });\n\n return svg`${lines}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function drawPts(pts) {\n const arr = pts.flat();\n\n const dots = arr.map((pt) => {\n const [u, v] = pt.uv;\n const cx = bounds.x + math.lerp(0, bounds.width, u);\n const cy = bounds.y + math.lerp(0, bounds.height, v);\n\n return svg``;\n });\n\n return svg`${dots}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"pts = {\n randomize;\n return math\n .linspace(squares.rows + 1, true)\n .map((v, j) =>\n math\n .linspace(squares.cols + 1, true)\n .map((u, i) => ({ uv: [u, v], indices: [i, j] }))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"ptsWithPatterns = {\n let ptsCopy = pts.slice();\n\n for (let j = 0; j < ptsCopy.length; j++) {\n for (let i = 0; i < ptsCopy[j].length; i++) {\n if (ptsCopy[j][i].from || ptsCopy[j][i].to) continue;\n\n const pattern = random.weightedSet(patterns);\n const to = computeDest(ptsCopy, j, i, pattern);\n if (to) {\n const indices = to.indices.slice();\n ptsCopy[j][i].pattern = pattern;\n ptsCopy[j][i].to = indices;\n ptsCopy[indices[1]][indices[0]].from = ptsCopy[j][i].indices.slice();\n }\n }\n }\n\n return ptsCopy.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"ptsWithPatterns.filter(\n (el) => el.pattern === \"horizontal\" || el.pattern === \"vertical\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"lineIndices = ptsWithPatterns\n .filter((el) => el.pattern === \"horizontal\" || el.pattern === \"vertical\")\n .map((el) => ({\n from: el.indices.slice(),\n to: el.to.slice()\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"curveIndices = ptsWithPatterns\n .filter((el) => el.pattern === \"curve\")\n .map((el) => ({\n from: el.indices.slice(),\n to: el.to.slice()\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"function computeDest(pts, row, col, pattern) {\n if (pattern === \"curve\") return computeCurveDest(pts, row, col);\n if (pattern === \"horizontal\") return computeHorizontalDest(pts, row, col);\n if (pattern === \"vertical\") return computeVerticalDest(pts, row, col);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"function computeCurveDest(pts, row, col) {\n const candidates = pts\n .flat()\n .filter(\n (pt) =>\n (pt.indices[0] < col - 1 || pt.indices[0] > col + 1) &&\n (pt.indices[1] < row - 1 || pt.indices[1] > row + 1) &&\n !pt.from &&\n !pt.to\n );\n\n return random.pick(candidates);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function computeVerticalDest(pts, row, col) {\n const column = pts.flat().filter((pt) => pt.indices[0] === col);\n const hasVerticalLines = column.find((p) => p.pattern === \"vertical\");\n\n // Already has horizontal line\n if (hasVerticalLines) return;\n\n return pickMatching(\n column,\n (el) => el.indices[1] !== row && !el.pattern && !el.from\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function computeHorizontalDest(pts, row, col) {\n const hasHorizontalLines = pts[row].find((p) => p.pattern === \"horizontal\");\n\n // Already has horizontal line\n if (hasHorizontalLines) return;\n\n return pickMatching(\n pts[row],\n (el, index, array) => index !== col && !el.pattern && !el.from\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function pickMatching(arr, cond) {\n const options = arr.filter(cond);\n return random.pick(options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"aspectRatio = 16 / 9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"bounds = {\n const { side, rows, cols } = squares;\n\n const w = side * cols;\n const h = side * rows;\n const marginX = (width - w) / 2;\n const marginY = (height - h) / 2;\n\n return {\n width: w,\n height: h,\n x: marginX,\n y: marginY\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"baseMargins = {\n const marginX = (marginFactor * width) / 5;\n const marginY = marginX / aspectRatio;\n\n return {\n x: marginX,\n y: marginY\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"squares = squaresInRectangle(\n width - 2 * baseMargins.x,\n height - 2 * baseMargins.y,\n numOfSquares\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"palette = {\n const bg = `hsla(0, 22%, 93%, 1.00)`;\n const fill = `hsla(12, 75%, 54%, 0.80)`;\n return {\n bg,\n fgFill: culori.formatRgb(culori.blend([bg, fill])),\n curve: `hsla(212, 70%, 20%, 1.00)`,\n dot: `hsla(12, 38%, 53%, 1.00)`,\n line: `hsla(212, 70%, 20%, 0.250)`,\n debug: `hsl(300, 100%, 50%)`\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = Math.floor(width / aspectRatio)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"patterns = [\n { value: \"horizontal\", weight: 2 },\n { value: \"vertical\", weight: 2 },\n { value: \"curve\", weight: 4 },\n { value: \"none\", weight: 92 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"random = {\n rnd.setSeed(randomize);\n return rnd;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { CSMath as math, CSRandom as rnd } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import { squaresInRectangle } from \"@saneef/fit-n-number-of-squares-in-a-rectangle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"culori = import(\"https://unpkg.com/culori@2.0.3/bundled/culori.min.mjs?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"