31:T4b4,function generateRandomRipple({ cx, cy, t = 0.5, // 0...1 strength = 0.5, // 0...1 maxSize = 100, seed = "1" } = {}) { if (cx === undefined || cy === undefined) { throw Error("Required options missing: cx, cy"); } const rippleRnd = CSRandom.createRandom(seed); // more strength: // - more rings // - more spread, i.e. more max radius const rings = Math.round(math.lerp(3, 7, strength)); const maxRadius = math.lerp(maxSize / 3, maxSize, strength); const minRadius = math.lerp(1, maxRadius, t); const ringsData = math .linspace(rings, true) .map((uv, i, arr) => { const rt = delayedT(t, i + 1, rings); if (rt === 1) return; const r = math.lerp(0, maxRadius, rt) || 0.5; const circum = 2 * Math.PI * r; const dashT = math.mapRange(r, minRadius, maxRadius, 0, 1, true); const dash = math.lerp(circum / 40, circum / 10, dashT); const gap = dash * 3; const offset = rippleRnd.range(0, circum / 3); const dasharray = r < minRadius ? [] : [dash, gap, dash]; return { r, dasharray, offset //circum }; }) .filter(Boolean); return { rings: ringsData, cx, cy }; }32:T496,svg``33:[] 2f:{"title":"066 Side walk on a rainy day","cells":[{"id":0,"value":"# 066 Side walk on a rainy day","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"sketch = svg`\n \n \n ${drawTiles({ ...dimensions, stroke: palette.fg, strokeWidth })}\n \n ${data.map((r) => drawRipples(r, { strokeWidth }))}\n \n ${drawDebugMarkers(debug, { ...dimensions, data })}\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof randomize = seedButton(\"🎲 Generate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`[Link to this variation](${getNotebookUrlWithParams({\n seed: randomize,\n drops,\n strokeWidth\n})})
You can get back to this particular generated graphic using this link.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof drops = Inputs.range([4, 12], {\n label: \"Drops\",\n step: 1,\n value: params.get(\"drops\") ?? 9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"viewof strokeWidth = Inputs.range([0.5, 5], {\n label: \"Stroke width\",\n step: 1 / 8,\n value: params.get(\"strokeWidth\") ?? 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":927,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"function drawTiles({ stroke, strokeWidth, width, height, cols, rows, side }) {\n const id = \"a-tile\";\n const tiles = Array.from({ length: rows }).flatMap((_, j) =>\n Array.from({ length: cols }).map((_, i) => {\n if (i === 0 && j === 0) {\n const gap = strokeWidth * 2.5;\n return svg`\n \n `;\n }\n\n return svg``;\n })\n );\n console.log(tiles);\n return svg`\n ${tiles}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"function drawDebugMarkers(debug, { width, height, data } = {}) {\n if (!debug) return;\n\n return data.map(\n ({ cx, cy }) => svg``\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"data = {\n const rnd = CSRandom.createRandom(randomize);\n const { width, height } = dimensions;\n const size = Math.min(width, height);\n const maxRippleSize = size / 3;\n\n let points = Array.from({ length: drops }).map(() => [\n rnd.range(0, width),\n rnd.range(0, height)\n ]);\n\n points = spreadPoints(points, { width, height });\n\n points = points.map(([cx, cy]) => ({ cx, cy }));\n\n const ripples = points.map((p) => {\n const { cx, cy } = p;\n\n return generateRandomRipple({\n cx,\n cy,\n strength: math.clamp01(rnd.gaussian() * 0.25 * 0.5 + 0.5),\n t: rnd.value(),\n maxSize: maxRippleSize,\n\n seed: rnd.value()\n });\n });\n\n return ripples;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"function spreadPoints(\n points,\n { width, height, iterations = 12, gap = 10 } = {}\n) {\n const delaunay = d3.Delaunay.from(points);\n const voronoi = delaunay.voronoi([0, 0, width, height]);\n\n for (let k = 0; k < iterations; k++) {\n for (let i = 0; i < delaunay.points.length; i += 2) {\n const cell = voronoi.cellPolygon(i >> 1);\n if (cell === null) continue;\n\n const x0 = delaunay.points[i];\n const y0 = delaunay.points[i + 1];\n\n const [x1, y1] = d3.polygonCentroid(cell);\n\n delaunay.points[i] = x0 + (x1 - x0) * 1;\n delaunay.points[i + i] = y0 + (y1 - y0) * 1;\n }\n\n voronoi.update();\n }\n\n const centeredPts = []; //chunk(delaunay.points, 2);\n for (let p of voronoi.cellPolygons()) {\n const centroid = d3.polygonCentroid(p);\n centeredPts.push(centroid);\n }\n\n // FIX: Sometimes centeredPts don't have any points\n // For timebeing, return the points\n if (centeredPts.length === 0) return points;\n\n return centeredPts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"### Ripples","pinned":false,"hidden":false,"mode":"md"},{"id":652,"value":"viewof sampleT = Inputs.range([0, 1], {\n label: tex`t`,\n step: 1 / 32,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"viewof sampleStrength = Inputs.range([0, 1], {\n label: \"Strength\",\n step: 1 / 32,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"sampleRipples = {\n const size = 400;\n const cx = size / 2;\n const cy = size / 2;\n\n const ripple = generateRandomRipple({\n cx,\n cy,\n maxSize: size / 2,\n t: sampleT,\n strength: sampleStrength\n });\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"function drawRipples(specs, { strokeWidth } = {}) {\n const { cx, cy, rings } = specs;\n const ringElements = rings.map((spec) =>\n drawDashedCircle({ ...spec, cx, cy, strokeWidth })\n );\n\n return svg`\n ${ringElements}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"function delayedT(t, i = 1, N = 1) {\n const dt = 1 / N;\n\n let u = math.mapRange(\n t,\n ((i - 1) * dt) / 4,\n // 1 - dt,\n 1 - ((N - i) * dt) / 2,\n 0,\n 1,\n true\n );\n u = d3.easeSinOut(u);\n return u;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"### Dashed ring","pinned":false,"hidden":false,"mode":"md"},{"id":444,"value":"viewof dashOffset = Inputs.range([-60, 60], {\n label: \"Dash Offset\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof sampleDasharray = Inputs.text({\n label: \"dasharray\",\n value: \"18, 6, 9, 6\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"viewof sampleLinecap = Inputs.radio([\"butt\", \"round\", \"square\"], {\n label: \"linecap\",\n value: \"butt\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"sampleRing = {\n const dasharray = sampleDasharray.split(\",\").map((d) => +d.trim());\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"function drawDashedCircle({\n cx = 0,\n cy = 0,\n r = 100,\n stroke = palette.fg,\n dasharray = [2, 1],\n offset = 0,\n strokeWidth = 1,\n linecap = \"round\"\n} = {}) {\n const totalDashLength = d3.sum(dasharray);\n const circum = 2 * Math.PI * r;\n const parts = Math.floor(circum / totalDashLength);\n const partLength = circum / parts;\n\n const adjustedDasharray = dasharray.map(\n (d) => (d * partLength) / totalDashLength\n );\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"### Utils and constants","pinned":false,"hidden":false,"mode":"md"},{"id":1015,"value":"strokeWidthHalf = strokeWidth / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"aspectRatio = 4 / 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"dimensions = {\n const w = Math.max(480, width);\n const h = Math.floor(width / aspectRatio);\n\n const grid = squaresInRectangle(w, h, 6);\n\n return {\n aspectRatio,\n width: grid.side * grid.cols,\n height: grid.side * grid.rows,\n ...grid\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"palette = ({\n bg: \"hsl(0,0%,95%)\",\n fg: \"hsl(0,0%,5%)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"svg = htl.svg\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"import { CSRandom, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"import { squaresInRectangle } from \"@saneef/fit-n-number-of-squares-in-a-rectangle\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}