31:T472,linesSet = { randomize; const set = math .linspace(rows, true) .map((v, j) => math.linspace(cols, true).map((u, i) => { const index = j * cols + i; const lineDirections = getDirections(index); const minDistanceUV = math.inverseLerp(1, 4, lineDirections.length); const minDistance = math.lerp(1 / 15, 1 / 25, minDistanceUV); const pts = poissonSampling(1, 1, { minDistance }); const shuffledPts = random.shuffle(pts); let lines = []; const chunkSize = Math.floor(pts.length / lineDirections.length); const chunkedPts = chunk(shuffledPts, chunkSize); lineDirections.forEach((dir, i) => { let dirLines = generateLinesAtPts(chunkedPts[i], dir); dirLines = geom.clipPolylinesToBox( dirLines, [0, 0, 1, 1], false, false ); dirLines = dirLines.map((l) => [...l, dir]); lines = [...lines, ...dirLines]; }); return { midpoint: [u, v], pts, lines }; }) ) .flat(); return set; }32:T57a,drawLine = (x1, y1, x2, y2, lineWidth = 2, color = palette.black) => { const theta = angleOfInclination(x1, y1, x2, y2); const length = distance(x1, y1, x2, y2); const baseLineWidth = lineWidth * 0.666; const dotU = math.clamp01(math.inverseLerp(1, 10, lineWidth)); const dotRadius = math.lerp(0.5, 1.5, dotU); // Rotate the line parallel to x-axis // The resultant line is (x1, y1), (x2a, y2a) const [x2a, y2a] = rotatePoint(x2, y2, -theta, x1, y1); // Generate points along the line let pts = partitionLine(x1, y1, x2a, y2a, length * 2).map((l) => l[0]); // Remove some points at random pts = pts.filter(() => random.value() > 0.125); // Remove move up or down the point at random const dotShift = baseLineWidth / 2 - dotRadius; pts = pts.map(([x, y]) => { let dy = (random.value() * 2 - 1) * dotRadius; dy = dy < 0 ? dy - dotShift : dy + dotShift; return [x, y + dy]; }); // Rotate points back to orignal angle pts = pts.map(([x, y]) => rotatePoint(x, y, theta, x1, y1)); // Draw the line ctx.beginPath(); ctx.strokeStyle = color; ctx.lineCap = "round"; ctx.lineWidth = baseLineWidth; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); // Draw the noise ctx.beginPath(); ctx.fillStyle = color; pts.forEach(([cx, cy]) => { ctx.moveTo(cx, cy); ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2); }); ctx.fill(); }33:[] 2f:{"title":"051 Sol Lewitt’s ‘Lines of One Inch, Four Directions, Four Colours’","cells":[{"id":0,"value":"# 051 Sol Lewitt’s ‘Lines of One Inch, Four Directions, Four Colours’\n\n**Sol’s Instructions**\n\n> _Straight lines, approximately_
\n> _one inch long, drawn at_
\n> _random, within a square_
\n> _using four directions of line,_
\n> _each a different color:_
\n> _1) Yellow / vertical_
\n> _2) Black / horizontal_
\n> _3) Red/ diagonal, left to right_
\n> _4) Blue, diagonal, right to left_
\n> _and all combinations_
\n> _of these lines and colors._
\n\nRead about [the art work at artic.edu](https://www.artic.edu/artworks/37037/lines-of-one-inch-four-directions-four-colors-from-sixteen-lithographs-in-color)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"ctx.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"viewof randomize = Inputs.button(\"🎲 Generate another\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"viewof gridType = Inputs.radio(\n new Map([\n [\"one combination\", \"single\"],\n [\"all combinations\", \"multiple\"]\n ]),\n { label: \"Show\", value: \"multiple\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"viewof marginFactor = Inputs.range([0, 1], {\n label: \"Margin\",\n value: 0.75,\n step: 0.125\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"viewof gapFactor = Inputs.range([0, 1], {\n label: \"Gap\",\n value: 0.25,\n step: 0.125,\n disabled: isShowingSingle()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"{\n // Sets the random see so that, when `showGrid` is changed\n // new points are not generated.\n random.setSeed(seed + randomize);\n\n clear();\n\n drawLines(linesSet);\n\n if (debug) {\n drawBounds();\n drawSquares(linesSet);\n drawPts(linesSet);\n }\n\n return `Iteration: ${randomize}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1317,"value":"rows = isShowingSingle() ? 1 : 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"cols = isShowingSingle() ? 1 : 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"lineLengthUV = 1 / 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":1245,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1422,"value":"generateLinesAtPts = (pts, direction) => {\n const angle = getAngleFromDirection(direction);\n\n const lines = pts.map(([u, v]) => {\n const u1 = u + lineLengthUV * Math.cos(angle);\n const v1 = v + lineLengthUV * Math.sin(angle);\n\n const u2 = u - lineLengthUV * Math.cos(angle);\n const v2 = v - lineLengthUV * Math.sin(angle);\n\n return [\n [u1, v1],\n [u2, v2]\n ];\n });\n\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1292,"value":"drawBounds = () => {\n ctx.beginPath();\n ctx.strokeStyle = palette.debug;\n ctx.lineCap = \"round\";\n ctx.lineWidth = 1;\n ctx.rect(marginLeft, marginTop, gridWidth, gridHeight);\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1505,"value":"uv2xy = (u, v, xMin, xMax, yMin, yMax) => {\n return [math.lerp(xMin, xMax, u), math.lerp(yMin, yMax, v)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1494,"value":"drawLines = (linesSet) => {\n linesSet.forEach(({ midpoint, lines }) => {\n const { x, y, size } = getSquareBounds(...midpoint);\n lines.forEach((l) => {\n let [[u1, v1], [u2, v2], dir] = l;\n\n let [x1, y1] = uv2xy(u1, v1, x, x + size, y, y + size);\n let [x2, y2] = uv2xy(u2, v2, x, x + size, y, y + size);\n\n drawLineWithOvershoot(\n x1,\n y1,\n x2,\n y2,\n lineWidth,\n palette[getColorFromDirection(dir)]\n );\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1301,"value":"drawSquares = (linesSet) => {\n ctx.beginPath();\n ctx.strokeStyle = palette.debug;\n ctx.lineCap = \"round\";\n ctx.lineWidth = 1;\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n const index = i * rows + j;\n const { x, y, size } = getSquareBounds(...linesSet[index].midpoint);\n\n ctx.rect(x, y, size, size);\n }\n }\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1400,"value":"drawPts = (linesSet) => {\n ctx.beginPath();\n ctx.fillStyle = palette.debug;\n linesSet.forEach(({ midpoint, pts }) => {\n const { x, y, size } = getSquareBounds(...midpoint);\n\n pts.forEach(([u, v]) => {\n const px = math.lerp(x, x + size, u);\n const py = math.lerp(y, y + size, v);\n ctx.moveTo(px, py);\n ctx.arc(px, py, 1, 0, 2 * Math.PI);\n });\n });\n ctx.fill();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1356,"value":"getSquareBounds = (u, v) => {\n const cx = math.lerp(\n marginLeft + cellSize / 2,\n marginLeft + gridWidth - cellSize / 2,\n u\n );\n const cy = math.lerp(\n marginTop + cellSize / 2,\n marginTop + gridHeight - cellSize / 2,\n v\n );\n\n return {\n x: cx - cellSize / 2,\n y: cy - cellSize / 2,\n size: cellSize\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1674,"value":"directions = ({\n vertical: { color: \"yellow\", angle: Math.PI / 2 },\n horizontal: { color: \"black\", angle: 0 },\n diagDown: { color: \"blue\", angle: Math.PI / 4 },\n diagUp: { color: \"red\", angle: -Math.PI / 4 }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"palette = ({\n paper: `hsla(42, 32%, 95%, 1.00)`, //`hsl(26, 26%, 98%)`,\n black: `hsl(26,15%,15%)`,\n yellow: `hsla(44, 79%, 58%, 1.00)`,\n red: `hsla(5, 55%, 45%, 1.00)`,\n blue: `hsla(214, 62%, 44%, 1.00)`,\n debug: \"#FF00FF\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1466,"value":"getAngleFromDirection = (dir) => directions[dir].angle || 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1682,"value":"getColorFromDirection = (dir) => directions[dir].color || 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1443,"value":"getDirections = (index) =>\n isShowingSingle()\n ? random.pick(allDirectionCombinations)\n : allDirectionCombinations[index] || []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1691,"value":"allDirectionCombinations = {\n randomize;\n let keys = Object.keys(directions);\n keys = random.shuffle(keys);\n return combinations(keys);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"lineWidth = isShowingSingle() ? 1.5 : 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1834,"value":"drawLineWithOvershoot = (...args) => {\n const [x1, y1, x2, y2, lineWidth, ...rest] = args;\n const m = slope(x1, y1, x2, y2);\n const angle = Math.atan(m);\n\n const maxExtU = 1 - math.clamp01(math.inverseLerp(5, 1, lineWidth));\n const maxExt = lineWidth * math.lerp(4, 0.5, maxExtU);\n\n const ext1 = random.value();\n const ext2 = random.value();\n\n let xe1 = x1,\n ye1 = y1,\n xe2 = x2,\n ye2 = y2;\n if (m >= 0) {\n // line move upwards when x moves from left to right\n xe1 = x1 - maxExt * ext1 * Math.cos(angle);\n ye1 = y1 - maxExt * ext1 * Math.sin(angle);\n\n xe2 = x2 + maxExt * ext2 * Math.cos(angle);\n ye2 = y2 + maxExt * ext2 * Math.sin(angle);\n }\n\n drawLine(xe1, ye1, xe2, ye2, lineWidth, ...rest);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"seed = random.value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"function clear() {\n ctx.fillStyle = palette.paper;\n ctx.fillRect(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"isShowingSingle = () => gridType === \"single\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"ratio = rows / cols","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = isShowingSingle() ? width : Math.floor(width * ratio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1765,"value":"maxSqSize = Math.min(width / cols, height / rows)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"maxGridWidth = maxSqSize * cols","pinned":true,"hidden":false,"mode":"ojs"},{"id":1769,"value":"maxGridHeight = maxSqSize * rows","pinned":true,"hidden":false,"mode":"ojs"},{"id":1820,"value":"maxSize = Math.min(height, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"margin = (marginFactor * maxSize) / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"marginLeft = margin / ratio + (width - maxGridWidth) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"marginTop = margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"gridWidth = width - 2 * marginLeft","pinned":true,"hidden":false,"mode":"ojs"},{"id":1751,"value":"gridHeight = height - 2 * marginTop","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"cellPadding = (gapFactor * maxSqSize) / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"cellSize = {\n const cellWidth = gridHeight / rows;\n return isShowingSingle() ? cellWidth : cellWidth - cellPadding / 2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"ctx = DOM.context2d(width, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"function poissonSampling(width, height, opts = {}) {\n const options = Object.assign(\n {\n minDistance: 10\n },\n opts\n );\n\n const pds = new PoissonDiskSampling({\n ...opts,\n shape: [width, height]\n });\n\n return pds.fill();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"chunk = (input, size) => {\n return input.reduce((arr, item, idx) => {\n return idx % size === 0\n ? [...arr, [item]]\n : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"import {\n angleOfInclination,\n rotatePoint,\n distance,\n partitionLine,\n slope\n} from \"@saneef/helper-functions-geometry\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"import {\n CSRandom as random,\n CSMath as math,\n CSGeometry as geom\n} from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"PoissonDiskSampling = {\n return (\n await import(\"https://cdn.skypack.dev/poisson-disk-sampling@2.2.3?min\")\n ).default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"combinations = {\n const m = await import(\"https://cdn.skypack.dev/combinations@1.0.0?min\");\n return m.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1869,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1871,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}