30:T47f,canvas = { const noise = octave(perlin2, 2); const random = d3.randomLcg(42); const plot = Plot.plot({ inset: 12, axis: null, height: 1152, width: 1152, marks: [ Plot.vector(poisson(10000, {random}), { stroke: "#ccc", length: ([x, y]) => (noise(x + 2, y) + 0.5) * 24, rotate: ([x, y]) => noise(x, y) * 360 }) ] }); const X = plot.scale("x"); const Y = plot.scale("y"); const g = d3.select(plot).append("g") .attr("fill", "none") .attr("stroke", "currentColor") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); yield plot; for (let [x, y] of d3.shuffler(random)([...poisson(1000, {random})])) { let points = [[x, y]]; const path = g.append("path"); const k = 0.01; for (let i = 0; i < 40 && 0 <= x && x < 1 && 0 <= y && y < 1; ++i) { const a = noise(x, y) * 2 * Math.PI; points.push([x += Math.sin(a) * k, y += Math.cos(a) * k]); path.attr("d", `M${points.map(([x, y]) => [X.apply(x), Y.apply(y)]).join("L")}`); if (i % 10 === 0) yield plot; } } }31:T942,function* poisson(n, { // number of samples xDomain = [0, 1], // extent of allowed x-values yDomain = [0, 1], // extent of allowed y-values k = 30, // number of candidates per sample random = Math.random // source of randomness } = {}) { const [x0, x1] = xDomain; const [y0, y1] = yDomain; const width = x1 - x0; const height = y1 - y0; const radius2 = width * height / (n * 1.5); const radius = Math.sqrt(radius2); const radius2_3 = 3 * radius2; const cellSize = radius * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; // Pick the first sample. yield sample(width / 2 + random() * radius, height / 2 + random() * radius); // Pick a random existing sample from the queue. pick: while (queue.length) { const i = random() * queue.length | 0; const parent = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (let j = 0; j < k; ++j) { const a = 2 * Math.PI * random(); const r = Math.sqrt(random() * radius2_3 + radius2); const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); // Accept candidates that are inside the allowed extent // and farther than 2 * radius to all existing samples. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { yield sample(x, y); continue pick; } } // If none of k candidates were accepted, remove it from the queue. const r = queue.pop(); if (i < queue.length) queue[i] = r; } function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y, parent) { queue.push(grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]); return [x + x0, y + y0]; } }32:[{"id":"e1f7b81424669007882beb34ead0b657eaa3d3e7002e8f282c812120fc61306fa6ea1acfcba9a7fc0bfe332723e0985aadf3b1a187a4d609e181cc8090261f55","href":"https://static.observableusercontent.com/files/e1f7b81424669007882beb34ead0b657eaa3d3e7002e8f282c812120fc61306fa6ea1acfcba9a7fc0bfe332723e0985aadf3b1a187a4d609e181cc8090261f55","name":"plot.umd.min.js","type":"application/javascript","lastModified":1641323365292.622,"size":81876}] 2e:{"title":"Genuary 2022 / 4","cells":[{"id":0,"value":"# Genuary 2022 / 4\n## The next next Fidenza.\n\nRef. [Tyler Hobbs](https://tylerxhobbs.com/essays/2020/flow-fields), [Claudio Esperança](https://observablehq.com/@esperanc/flow-fields).","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {perlin2, octave} from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"Plot = require(await FileAttachment(\"plot.umd.min.js\").url()) // https://github.com/observablehq/plot/pull/649","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}