30:T5e7,makeGridCoords = () => { const coords = []; const start = buffer ? 0 - spacing * 2 : 0; const end = dim => (buffer ? dim + spacing * 2 : dim); let x = 0, y = 0; for (let i = start; i < end(width); i += spacing) { for (let j = start; j < end(height); j += spacing) { if (((i % (spacing * 2)) + (j % (spacing * 2))) % (spacing * 2)) { const buffer = () => randomize ? Math.random() * spacing : spacing / 2; const coord = [i + buffer(), j + buffer()]; coord.x = x; coord.y = y; coords.push(coord); } y += 1; } y = 0; x += 1; } const dotsPerTwoCol = height / spacing + (buffer ? 4 : 0), dotsPerLargeCol = Math.round(dotsPerTwoCol / 2), dotsPerSmallCol = dotsPerLargeCol - 1; coords.forEach((_, i) => { if (i % dotsPerTwoCol < dotsPerSmallCol) { if (i + dotsPerLargeCol > coords.length) { return; } coords[i].tr = i + dotsPerSmallCol; coords[i + dotsPerSmallCol].bl = i; coords[i].br = i + dotsPerLargeCol; coords[i + dotsPerLargeCol].tl = i; } else { if (i + dotsPerLargeCol > coords.length) { return; } if (i % dotsPerTwoCol != dotsPerSmallCol) { coords[i].tr = i + dotsPerSmallCol; coords[i + dotsPerSmallCol].bl = i; } if (i % dotsPerTwoCol != dotsPerTwoCol - 1) { coords[i].br = i + dotsPerLargeCol; coords[i + dotsPerLargeCol].tl = i; } } }); return coords; }31:[] 2e:{"title":"Lattice Drops #1 💧","cells":[{"id":0,"value":"md`# Lattice Drops #1 💧`","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"md`Some generative art - use the controls below to make it your own, then save it as a svg or png.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"{\n const svg = d3.create('svg').attr('viewBox', `0 0 ${width} ${height}`);\n\n svg\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', backgroundColor);\n\n svg\n .selectAll('path')\n .data(gridShapes)\n .join('path')\n .attr(\"stroke\", getStroke())\n .attr(\"stroke-opacity\", .5)\n .attr(\"fill\", d => getColor(gridCoords[d[0]].y))\n .attr(\"d\", d => line(d.map(t => gridCoords[t] ?? [0, 0])));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"viewof form2 = html`\n

Controls

\n ${viewof randomize}\n ${viewof buffer}\n ${viewof orientation}\n ${viewof curve}\n ${viewof stroke}\n ${viewof topColor}\n ${viewof bottomColor}\n ${viewof backgroundColor}\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"md`[Link to this configuration](${presetUrl}) | | [Defaults](https://observablehq.com/@rlesser/lattice-drops-1)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`todo:\n- ~~save as url query params~~ (thanks @mootari)\n- change spacing / width / height`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`## rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"getStroke = () => {\n switch (stroke) {\n case 'None':\n return null;\n case 'Reverse':\n return d => getReverseColor(gridCoords[d[0]].y);\n case 'Black':\n return 'black';\n case 'White':\n return 'white';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"line = d3.line().curve(d3[curve])","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"colors = d3.quantize(\n d3.interpolateHcl(topColor, bottomColor),\n d3.max(gridShapes.map(d => gridCoords[d[0]].y)) -\n d3.min(gridShapes.map(d => gridCoords[d[0]].y))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"getColor = val => d3.interpolateHcl(topColor, bottomColor)(gradientScale(val))","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"getReverseColor = val =>\n d3.interpolateHcl(bottomColor, topColor)(gradientScale(val))","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"gradientScale = d3\n .scaleLinear()\n .domain(d3.extent(gridShapes.map(d => gridCoords[d[0]].y)))\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"gridShapes = makeGridShapes()","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"gridLinks = makeGridLinks()","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"gridCoords = makeGridCoords()","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"styles = html`control styles `","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`## generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"makeGridShapes = () => {\n const shapes = [];\n gridCoords.forEach((c, i) => {\n if (c.tr !== undefined) {\n const c2 = gridCoords[c.tr];\n if (c2.br !== undefined) {\n const c3 = gridCoords[c2.br];\n if (c3.bl !== undefined) {\n switch (orientation) {\n case 'Left':\n shapes.push([i, c.tr, c2.br, c3.bl, i]);\n break;\n case 'Top':\n shapes.push([c.tr, c2.br, c3.bl, i, c.tr]);\n break;\n case 'Right':\n shapes.push([c2.br, c3.bl, i, c.tr, c2.br]);\n break;\n case 'Bottom':\n shapes.push([c3.bl, i, c.tr, c2.br, c3.bl]);\n break;\n }\n }\n }\n }\n });\n return shapes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"makeGridLinks = () => {\n const links = [];\n gridCoords.forEach((c, i) => {\n if (c.tr !== undefined) {\n links.push([i, c.tr]);\n }\n if (c.br !== undefined) {\n links.push([i, c.br]);\n }\n });\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"md`## presets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"preset = {\n let values = new Map();\n const url = new URL(document.baseURI);\n try {\n values = new Map(\n Object.entries(d3.autoType(Object.fromEntries([...url.searchParams])))\n );\n } catch (e) {}\n return (name, defaultValue) =>\n values.has(name) ? values.get(name) : defaultValue;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"presetUrl = {\n const url = new URL(document.baseURI);\n Object.entries({\n buffer,\n randomize,\n orientation,\n curve,\n stroke,\n bottomColor,\n topColor,\n backgroundColor\n }).forEach(kv => url.searchParams.set(kv[0], kv[1]));\n return '' + url;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`## parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof buffer = Inputs.toggle({\n label: 'Border Cells',\n value: preset('buffer', false)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof randomize = Inputs.toggle({\n label: 'Randomize',\n value: preset('randomize', true)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof orientation = Inputs.select(['Left', 'Top', 'Right', 'Bottom'], {\n label: 'Path Orientation',\n value: preset('orientation', 'Top')\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof curve = Inputs.select(\n new Map([\n ['Basis', 'curveBasisClosed'],\n ['BumpX', 'curveBumpX'],\n ['BumpY', 'curveBumpY'],\n ['Bundle', 'curveBundle'],\n ['Cardinal', 'curveCardinal'],\n ['Linear', 'curveLinear'],\n ['MonotoneX', 'curveMonotoneX'],\n ['MonotoneY', 'curveMonotoneY'],\n ['Natural', 'curveNatural'],\n ['Step', 'curveStep']\n ]),\n {\n label: 'Curve Type',\n value: preset('curve', 'curveBasisClosed')\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"viewof stroke = Inputs.select(['None', 'Reverse', 'Black', 'White'], {\n label: 'Stroke Type',\n value: preset('stroke', 'Reverse')\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof bottomColor = Inputs.text({\n type: \"color\",\n value: preset('bottomColor', \"#4d4193\"),\n label: \"Bottom Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof topColor = Inputs.text({\n type: \"color\",\n value: preset(\"topColor\", \"#60c96e\"),\n label: \"Top Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"viewof backgroundColor = Inputs.text({\n type: \"color\",\n value: preset(\"backgroundColor\", \"#ecddc8\"),\n label: \"Background Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"spacing = 40 // todo: variable?","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"footer(\"lattice-drops-1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}