2b:null 2c:["$","title",null,{"children":"053 Fizzled grid | Saneef H. Ansari | Observable"}] 31:T874,## Notes I decided to do something simple, probably something only with lines.

Scribble of line art idea — In my head, I had a rough idea like this.

I created a new Observable notebook, and wrote some lines of code. The basic idea is to create an array of values interpolating from `0` to `1`. Each value in the array will be used for `x1` value for the line segments. Then shuffle this array to another array, where the values will be used for `x2` of the line segments. The `y1` will be top margin, and `y2` will be `y2 + rowHeight`. And, what I got was this:

First iteration of the idea with code — Result of my first iteration.

It was boring. Not quite how I imagined. The lines are criss-crossing too much. I thought, let's try different curve fittings method to draw the line. But, now, the logic is having rows of points, and at each iteration I draw line segments in that row. I transposed the base data points in such a way each set of points on a visible line (top to bottom) will be represented as an array. When it comes to all the lines (curves), it will be a 2D array. Then I can draw each curve using any of [D3's curve fitting methods](https://github.com/d3/d3-shape/blob/main/README.md#curves).

The one drawn using [`curveStep`](https://github.com/d3/d3-shape/blob/main/README.md#curveStep) looked interesting to me. It was like a sketch of a façade of a modern building. Adding, a border around the lines is also fascinating. Now, I added knobs to change number of lines (columns), points per line (rows), margin, stroke, and draw border. Furthermore, I wired the 'shuffle' button to some knobs. These do make some interesting pictures!32:[{"id":"91f27d87c82040730dc46a8bbe29963e33d9c4dc3a5e5af5b05904f1c679e5fb09b2d5182bcd48b822807b7d0913cc77a09a37274dfa90ccdf3192367b769407","href":"https://static.observableusercontent.com/files/91f27d87c82040730dc46a8bbe29963e33d9c4dc3a5e5af5b05904f1c679e5fb09b2d5182bcd48b822807b7d0913cc77a09a37274dfa90ccdf3192367b769407","name":"30-Apr-2022 at 10_28_44.jpg","type":"image/jpeg","lastModified":1651295078882.765,"size":212197},{"id":"750d6ba314c55f6df755689a7f3d9ea92b6ca023a5e2674972a836c57e3e5640282d362ab8acd485106eb8132308512d7526df3515212d4a62de17fb2bee50af","href":"https://static.observableusercontent.com/files/750d6ba314c55f6df755689a7f3d9ea92b6ca023a5e2674972a836c57e3e5640282d362ab8acd485106eb8132308512d7526df3515212d4a62de17fb2bee50af","name":"first-iteration@1.jpg","type":"image/jpeg","lastModified":1651295695536.792,"size":104597},{"id":"ba89c64e072d6a8f639261a65dd8d24a1821b7e417c1c260b894e162e05af0a58d1be6dc74d051a2eceb6ac891e67d71c1308f7166a16eb8324db27192f981c0","href":"https://static.observableusercontent.com/files/ba89c64e072d6a8f639261a65dd8d24a1821b7e417c1c260b894e162e05af0a58d1be6dc74d051a2eceb6ac891e67d71c1308f7166a16eb8324db27192f981c0","name":"second-iteration.jpg","type":"image/jpeg","lastModified":1651297171823.327,"size":223302}] 2f:{"id":"927062b44d59ea3f","slug":"053-fizzled-grid","title":"053 Fizzled grid","thumbnail":"01375562dea1b4147a4e05178cbe34f2eb5d6db7a7fd741a68a8270ce8d52fac","access_level":"public","create_time":"$D2022-04-28T16:31:41.429Z","update_time":"$D2023-10-22T10:27:58.978Z","view_time":null,"first_public_time":"$D2022-04-29T15:39:25.112Z","fork":false,"stars":12,"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":338,"publish_version":null,"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,"subscribed":null,"forks":3,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"053 Fizzled grid","cells":[{"id":0,"value":"# 053 Fizzled grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof randomize = Inputs.button(\"🎲 Shuffle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"viewof steps = Inputs.range([5, 30], {\n label: \"Rows\",\n value: params.steps,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"viewof divs = Inputs.range([5, 30], {\n label: \"Columns\",\n value: params.divs,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"viewof showBounds = Inputs.toggle({\n label: \"Draw border\",\n value: params.drawBorder\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n value: 0.5,\n step: 0.0625\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"viewof strokeUV = Inputs.range([0, 1], {\n label: \"Stroke\",\n value: 0.5,\n step: 0.0625\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"blurp({ invalidation, href: \"https://art.saneef.com/fizzled-grid\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":319,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":220,"value":"divsRange = [5, 30]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"params = {\n if (randomize === 0) {\n return {\n divs: 20,\n steps: 10,\n drawBorder: false\n };\n }\n\n return {\n divs: random.rangeFloor(...divsRange),\n steps: random.rangeFloor(...divsRange),\n drawBorder: random.boolean()\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"strokeWidth = 1 + strokeUV * 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"curve = \"curveStep\"\n// curve = Inputs.radio(\n// [\"curveCardinal\", \"curveLinear\", \"curveBasis\", \"curveStep\", \"curveNatural\"],\n// { label: \"Curve\", value: \"curveLinear\" }\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"drawBorder = (data) => {\n if (showBounds) {\n return svg``;\n }\n\n return svg`\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"drawLines = (data) =>\n data.map((line) => {\n const lineXs = line.map(uv2xy);\n const rowHeight = size / (steps - 1);\n const lineXY = lineXs.map((x, i) => [marginX + x, marginY + i * rowHeight]);\n\n const d = d3.line().curve(d3[curve])(lineXY);\n return svg``;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"data = {\n random.setSeed(seed);\n const numOfLines = divs;\n const initialLine = math.linspace(numOfLines, true).map((u) => u);\n\n const rows = Array.from({ length: steps });\n\n for (let i = 0; i < steps; i++) {\n if (i === 0) {\n rows[i] = initialLine;\n } else {\n const previousLines = rows[i - 1].slice();\n rows[i] = random.boolean()\n ? random.shuffle(previousLines)\n : previousLines;\n }\n }\n\n return Array.from({ length: numOfLines }).map((_, j) => {\n const line = [];\n rows.forEach((r) => line.push(r[j]));\n return line;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"seed = seedBase + randomize * 27","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"seedBase = random.value()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"uv2xy = (u) => math.lerp(0, size, u)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"marginY = (height - size) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"marginX = (width - size) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"size = maxSize - 2 * maxMargin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"maxMargin = marginUV * (maxSize / 5) + strokeWidth / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"maxSize = Math.min(width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"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","author":"$undefined","summary":"$undefined"},{"id":47,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import { CSMath as math, CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":328,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"