32:[] 30:{"title":"052 Lines on a 5×5 grid","cells":[{"id":0,"value":"# 052 Lines on a 5×5 grid\n## ${' '}\n\n## Rules\n\nDraw an 5×5 dot grid.\n\n**Steps:**\n1. Remove a dot.\n1. If possible, connect to a another empty spot, as long the line don’t cross a dot or a line.\n1. Repeat till all dots are removed.","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"viewof redraw = Inputs.button(\"✏️ Draw another\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof delay = Inputs.range([100, 1000], {\n label: \"Delay between frames\",\n step: 100,\n value: 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"n = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"scaleXY = (u) => math.lerp(0, size, u)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"drawPoints = (state, type, color = palette.fg) =>\n state.points.map(({ u, v, filled }) => {\n const cx = marginX + scaleXY(u);\n const cy = marginY + scaleXY(v);\n const l = 10;\n if ((type === undefined || type === \"emtpy\") && !filled) {\n return svg`\n `;\n }\n\n if ((type === undefined || type === \"filled\") && filled)\n return svg``;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"drawLines = (state) =>\n state.lines.map((l) => {\n const p1 = state.points[l[0]];\n const p2 = state.points[l[1]];\n\n const x1 = marginX + scaleXY(p1.u);\n const y1 = marginY + scaleXY(p1.v);\n const x2 = marginX + scaleXY(p2.u);\n const y2 = marginY + scaleXY(p2.v);\n\n return svg``;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"state = {\n redraw;\n\n let max = n * n;\n let iteration = 0;\n const initialState = math\n .linspace(n, true)\n .map((u) =>\n math.linspace(n, true).map((v) => {\n return {\n u,\n v,\n filled: true\n };\n })\n )\n .flat();\n\n let points = initialState.slice();\n let lines = [];\n let triangles = [];\n\n while (iteration < max) {\n // Remove next point\n const nextPt = indexOfNextPointToRemove(points);\n points = markPointAsRemoved(points, nextPt);\n\n // Check if any triangles can be made\n const newLines = generateLines(points, lines, triangles, nextPt);\n lines = [...lines, ...newLines];\n\n // Returen new state\n yield Promises.tick(delay, {\n iteration,\n points,\n lines,\n triangles\n });\n\n iteration++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"generateLines = (points, lines, triangles, currentPt) => {\n let newLines = [];\n const filledIndices = indicesByFilled(points, true);\n const emptyIndices = indicesByFilled(points, false);\n\n emptyIndices.forEach((ei) => {\n // Ignore current point\n if (ei === currentPt) return;\n\n const nextLine = [currentPt, ei];\n\n if (\n crossesAFilledPoint(nextLine, points) ||\n crossesOtherLines(nextLine, lines, points)\n )\n return;\n\n newLines.push(nextLine);\n });\n\n return newLines;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"crossesOtherLines = (line, otherLines, points) => {\n const lineUV = line.map((i) => indexToUV(points, i));\n return Boolean(\n otherLines.find((line2) => {\n const line2UV = line2.map((i) => indexToUV(points, i));\n return doLinesIntersect(lineUV[0], lineUV[1], line2UV[0], line2UV[1]);\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"crossesAFilledPoint = (line, points) => {\n const filledIndices = indicesByFilled(points, true);\n const lineUV = line.map((i) => indexToUV(points, i));\n return Boolean(\n filledIndices.find((index) => {\n const pt = indexToUV(points, index);\n return isPointOnLine(\n pt[0],\n pt[1],\n [lineUV[0][0], lineUV[0][1]],\n [lineUV[1][0], lineUV[1][1]]\n );\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"indexToUV = (points, index) => {\n const { u, v } = points[index];\n return [u, v];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"indexOfNextPointToRemove = (pts) => {\n const filledPointIndices = pts\n .map((p, i) => (p.filled === true ? i : undefined))\n .filter((p) => p !== undefined);\n\n return random.pick(filledPointIndices);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"markPointAsRemoved = (pts, index) => {\n const nextPts = pts.slice();\n nextPts[index].filled = false;\n return nextPts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"indicesByFilled = (pts, filled = true) =>\n pts\n .map((p, index) => (p.filled === filled ? index : undefined))\n .filter((p) => p !== undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"palette = ({\n bg: `hsl(0,0%,95%)`,\n fg: `hsl(0,0%,5%)`,\n debug: `hsl(300, 100%, 50%)`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"strokeWidth = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"maxSize = Math.min(width, height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"maxMargin = maxSize / 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"size = maxSize - 2 * maxMargin","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"marginX = (width - size) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"marginY = (height - size) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"// https://stackoverflow.com/a/11908158\nisPointOnLine = (x, y, [x1, y1], [x2, y2]) => {\n const dxc = x - x1;\n const dyc = y - y1;\n\n const dxl = x2 - x1;\n const dyl = y2 - y1;\n\n const cross = dxc * dyl - dyc * dxl;\n\n if (cross != 0) return false;\n\n if (Math.abs(dxl) >= Math.abs(dyl))\n return dxl > 0 ? x1 <= x && x <= x2 : x2 <= x && x <= x1;\n else return dyl > 0 ? y1 <= y && y <= y2 : y2 <= y && y <= y1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"doLinesIntersect = ([a, b], [c, d], [p, q], [r, s]) => {\n var det, gamma, lambda;\n det = (c - a) * (s - q) - (r - p) * (d - b);\n if (det === 0) {\n return false;\n } else {\n lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;\n gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;\n return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"## Credits\nThis is based on the artwork, [‘Book nodes & edges’](Book Nodes & Edges) by [Conditional Design](https://conditionaldesign.org/).","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { CSMath as math, CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}